@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0 input" id="prefen-save"><i class="fas fa-floppy-disk me-1">
                                </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    {{-- form filter --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">
                            EDIT - ID Preventive <strong>{{ $prefH->id }}</strong>
                        </p>
                        <input type="hidden" id="idpref" name="idpref" value="{{ $prefH->id }}">
                        <hr class="horizontal dark mt-0">
                        {{-- <div class="row">
                            <div class="col-md-4">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <label for="inputdate" class="form-label me-2" style="min-width: 150px;">ID
                                                Prefentive</label>
                                            <small class="form-text text-muted"></small>
                                            <input type="text" class="form-control" id="code" name="code"
                                                value="{{ $prefH->id }}" disabled>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <p></p>
                        <hr class="horizontal dark mt-0"> --}}

                        <div class="row">
                            <div class="col-md-6">

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <label for="inputdate" class="form-label me-2"
                                                style="min-width: 150px;">Code</label>
                                            <small class="form-text text-muted"></small>
                                            <input type="text" class="form-control" id="code" name="code"
                                                value="{{ $prefH->cpu_code }}" disabled>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="row border-end" style="height: 60%;">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputCust" class="form-label me-2"
                                                    style="min-width: 150px;">User</label>
                                                <input type="hidden" id="duser" name="duser"
                                                    value="{{ $prefH->user }}" class="form-control">
                                                <div class="flex flex-col mb-2 input-group">
                                                    <input id="dusername" name="dusername" class="form-control"
                                                        value="{{ $prefH->user_name }}" readonly>
                                                    <span class="input-group-text bg-primary text-light"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                        data-bs-toggle="modal" data-bs-target="#modalUser">
                                                        <i class="fas fa-search"></i>
                                                    </span>

                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- Modal User --}}
                            <div class="modal fade bd-example-modal-lg" id="modalUser" tabindex="-1"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">List user
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div id="tableModalWrapper" class="table-responsive">
                                                <h5 class="font-weight-bolder"></h5>
                                                <table id="tableUser" class="table table-bordered table-striped">
                                                    <thead style="background-color: #daecff;">
                                                        <tr>
                                                            <th>Action</th>
                                                            <th>Id</th>
                                                            <th>User</th>
                                                            <th>Departemen</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="kategori-list">
                                                        @foreach ($users as $user)
                                                            <!-- Baris customer dengan data kategori -->
                                                            <tr>
                                                                <td>
                                                                    <!-- Tombol untuk memilih customer -->
                                                                    <span class="btn badge bg-primary"
                                                                        onclick="select_user('{{ $user->nik }}', '{{ $user->nama }}' )">
                                                                        <i class="bi bi-check-circle me-1"></i>
                                                                        Select
                                                                    </span>
                                                                </td>
                                                                <td>{{ $user->nik }}</td>
                                                                <td>{{ $user->nama }}</td>
                                                                <td>{{ $user->namedept }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Date</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="date" class="form-control" id="date" name="date"
                                                    value="{{ $prefH->date }}" max="2026-10-03">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            {{-- <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Reqby</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="text" class="form-control" id="reqby" name="reqby"
                                                    value="{{ $prefH->reqby }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div> --}}
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">

                                                <label for="reqby" class="form-label me-2" style="min-width: 150px;">
                                                    Reqby
                                                </label>

                                                @if ($createdByUser?->lastname == 'DL')
                                                    {{-- Creator DL: tidak bisa diganti --}}
                                                    @php
                                                        $selectedReqby = $reqby->firstWhere('username', $prefH->reqby);
                                                    @endphp

                                                    <input type="text" class="form-control"
                                                        value="{{ $selectedReqby?->firstname ?? $prefH->reqby }}"
                                                        readonly>

                                                    <input type="hidden" id="reqby" name="reqby"
                                                        value="{{ $prefH->reqby }}">
                                                @else
                                                    {{-- Creator IN: masih bisa diganti --}}
                                                    <select class="form-select" id="reqby" name="reqby">


                                                        @foreach ($reqby as $req)
                                                            <option value="{{ $req->username }}"
                                                                {{ $prefH->reqby == $req->username ? 'selected' : '' }}>
                                                                {{ $req->firstname }}
                                                            </option>
                                                        @endforeach

                                                    </select>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm-center">CPU</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Hardware Section -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Label "Hardware" di kiri -->
                                                <div class="col-md-3 d-flex align-items-center">
                                                    <p class="text-uppercase fw-bold mb-0">Hardware</p>
                                                </div>
                                                <!-- Checkbox di kanan -->
                                                <div class="col-md-9">
                                                    <hr class="horizontal dark mt-0">
                                                    <div class="row">
                                                        @php
                                                            // Ubah string hardware yang tersimpan menjadi array
                                                            $selectedHardware = explode(',', $prefH->hardware);
                                                            $selectedSoftware = explode(',', $prefH->software);

                                                        @endphp
                                                        @foreach ($hardwareList->chunk(ceil($hardwareList->count() / 2)) as $hardwareChunk)
                                                            <div class="col-md-6">
                                                                @foreach ($hardwareChunk as $hardware)
                                                                    <div class="form-check text-start">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            id="hardware_{{ $hardware->id }}"
                                                                            name="hardware" value="{{ $hardware->id }}"
                                                                            {{ in_array($hardware->id, $selectedHardware) ? 'checked' : '' }}>
                                                                        <!-- Cek apakah ID ada dalam data tersimpan -->
                                                                        <label class="form-check-label"
                                                                            for="hardware_{{ $hardware->id }}"
                                                                            style="font-color: black; opacity: 1;">
                                                                            {{ $hardware->action }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p></p>
                            <hr>
                            <p></p>
                            <!-- Software Section -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <!-- Label "Software" di kiri -->
                                                <div class="col-md-3 d-flex align-items-center">
                                                    <p class="text-uppercase fw-bold mb-0">Software</p>
                                                </div>
                                                <!-- Checkbox di kanan -->
                                                <div class="col-md-9">
                                                    <hr class="horizontal dark mt-0">
                                                    <div class="row">
                                                        @foreach ($softwareList->chunk(ceil($softwareList->count() / 2)) as $softwareChunk)
                                                            <div class="col-md-6">
                                                                @foreach ($softwareChunk as $software)
                                                                    <div class="form-check text-start">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            id="software_{{ $software->id }}"
                                                                            name="software" value="{{ $software->id }}"
                                                                            {{ in_array($software->id, $selectedSoftware) ? 'checked' : '' }}>
                                                                        <label class="form-check-label"
                                                                            for="software_{{ $software->id }}"
                                                                            style="font-color: black; opacity: 1;">
                                                                            {{ $software->action }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- List Detail --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Peripheral</p>
                        <hr class="horizontal dark mt-0">

                        <!-- Table  ADD PR-->
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered" id="tpureq_pr">
                                <thead style="background-color: #daecff; text-align: left;">
                                    <tr>
                                        <th></th>
                                        <th>Item</th>
                                        <th>Tipe</th>
                                        <th>Code</th>
                                        <th>Merk</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="table-data">
                                    @php
                                        $jmlItem = 0;
                                        $idItem = 0;
                                    @endphp
                                    @foreach ($prefD as $d)
                                        <tr class="prefen" data-item="{{ $d->item }}">
                                            <td scope="row"><button class="btn btn-danger btn-sm hapus" type="button"
                                                    onclick="confirmDelete('{{ $d->item }}', '{{ $d->code }}',this)">X</button>
                                                <input type="hidden" name="prefen-detail-item[]" value="update">
                                            </td>
                                            <td style="text-align: center">
                                                <input type="hidden" name="prefen-item-number[]" id="prefen-item-number"
                                                    value="{{ $d->item }}" />{{ $d->item }}
                                            </td>
                                            <td scope="row">
                                                <select name="prefen-tipe[]" class="form-select"
                                                    onchange="change_tipe(this)" id="prefen-tipe" style="width: 150px;">
                                                    @foreach ($kategori as $k)
                                                        <option value="{{ $k->value }}"
                                                            {{ $d->tipe == $k->value ? 'selected' : '' }}>
                                                            {{ $k->name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td scope="row">
                                                <div class="input-group mb-3" style="width: 250px;">
                                                    <input type="text" name="prefen-code[]" id="prefen-code"
                                                        placeholder="Code" class="form-control prefen-code btn-search"
                                                        value="{{ $d->code }}" readonly>
                                                    <span class="input-group-text bg-primary btn-search text-light"
                                                        onclick="getCode(this)"
                                                        style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            </td>
                                            <td scope="row">
                                                <input type="text" class="form-control prefen-merk"
                                                    name="prefen-merk[]" id="prefen-merk" placeholder="Deskripsi"
                                                    style="width: 200px;" value="{{ $d->merk }}" readonly>
                                            </td>

                                            <td scope="row">
                                                <select class="form-control prefen-action"
                                                    id="actionSelect-{{ $d->id }}" class="actionSelect"
                                                    data-tipe="{{ $d->tipe }}" name="prefen-action[]" multiple
                                                    style="width: 700px;" required>
                                                    @php
                                                        $selectedActionIds = !empty($d->action)
                                                            ? explode(',', $d->action)
                                                            : [];
                                                        if ($d->tipe == 'mont') {
                                                            $filteredActions = $monitorList;
                                                        }
                                                        if ($d->tipe == 'prin') {
                                                            $filteredActions = $printerList;
                                                        }
                                                        if ($d->tipe == 'scan') {
                                                            $filteredActions = $scannerList;
                                                        }

                                                    @endphp
                                                    @foreach ($filteredActions as $action)
                                                        <option value="{{ $action->id }}"
                                                            {{ in_array($action->id, $selectedActionIds) ? 'selected' : '' }}>
                                                            {{ $action->action }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>

                                        </tr>
                                        @php
                                            $jmlItem += 1;
                                            $idItem = $d->item;
                                        @endphp
                                    @endforeach
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-primary" id="additem">
                                Add Item <i class="bi bi-file-earmark-plus"></i>
                            </button>
                            <input type="hidden" id="jumlah_item" name="jumlah_item" value="{{ $jmlItem }}" />
                            <input type="hidden" id="id_item" name="id_item" value="{{ $idItem }}" />

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk menampilkan code -->
    <div class="modal fade" id="modalCode" tabindex="-1" aria-labelledby="modalCode" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCode">List Asset</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="obatDetail">
                    <div class="table-responsive">

                        <table id="tableCode" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Code</th>
                                    <th scope="col">User/Location</th>
                                    <th scope="col">Merk</th>
                                </tr>
                            </thead>
                            <tbody id="codeTableBody">

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const kategori = @json($kategori);
        const monitorList = @json($monitorList);
        const printerList = @json($printerList);
        const scannerList = @json($scannerList);

        // jumlah baris pada detail
        let jumlah_item = $('input[name="jumlah_item"]').val();
        var id_item = $('input[name="id_item"]').val();

        $(document).ready(function() {
            $('.prefen-action').select2();

            // Inisialisasi DataTable
            $('#tableUser').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            // Ambil data prefD
            var prefDetail = @json($prefD);

            for (var i = 0; i < prefDetail.length; i++) {
                tempDetail.push({
                    code: prefDetail[i].code
                });
            }



        });


        function select_user(nik, nama) {
            // Set the selected code to the material input
            document.getElementById('duser').value = nik;
            document.getElementById('dusername').value = nama;


            // Close the modal after selection
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalUser'));
            $('#modalUser').modal('hide');
        }

        $("#additem").click(function() {
            jumlah_item++;
            id_item = parseInt(id_item) + 10;


            // Tambahkan baris baru
            var newRow = $(
                `
            <tr class="tdeliv-row">
                <td scope="row"><button class="btn btn-danger btn-sm hapus" type="button">X</button><input type="hidden" name="prefen-detail-item[]" value="insert" /></td>
                
                <td scope="row" style="text-align: center;"><input type="hidden" name="prefen-item-number[]" id="prefen-item-number" value="` +
                id_item + `" />` + id_item + `</td>
                <td scope="row">
                   <select name="prefen-tipe[]" class="form-select" onchange="change_tipe(this)" id="prefen-tipe" style="width: 150px;">
                    <option value="" selected>Pilih Tipe</option> 
                    ` + kategori.map(kategori =>
                    `<option value="${kategori.value}">${kategori.name}</option>`).join('') + `
                    </select>
                </td>
                <td scope="row">
                    <div class="input-group mb-3" style="width: 250px;">
                        <input type="text" name="prefen-code[]" id="prefen-code" placeholder="Code" class="form-control prefen-code btn-search" readonly>
                        <span class="input-group-text bg-primary btn-search text-light" onclick="getCode(this)" style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
                <td scope="row"><input type="text" class="form-control prefen-merk" name="prefen-merk[]" id="prefen-merk" placeholder="Deskripsi" style="width: 200px;" required readonly></td>
                
                <td scope="row">
                    <select class="form-control prefen-action" name="prefen-action[]" multiple style="width: 700px;" required>
                    </select>
                </td>
            </tr>
            `);

            // Tambahkan baris baru ke dalam tabel
            $('#table-data').append(newRow);

            // Fungsi klik untuk tombol hapus
            newRow.find('.hapus').on('click', function() {
                $(this).closest('tr').remove();
                jumlah_item--;
            });
        });

        function change_tipe(obj) {
            var row = $(obj).closest('tr');
            var tipe = row.find('select[id="prefen-tipe"]').val(); // Cari berdasarkan 'name'
            var actionSelect = row.find('.prefen-action');
            var cariKode = row.find('input[id="prefen-code"]').val(); // Cari kode
            console.log('carikode', cariKode);

            // hapus code dari array tempDetail
            var delCode = tempDetail.filter(obj => obj.code !== cariKode);
            tempDetail = delCode;

            console.log('tempdetail', tempDetail);


            // Reset code dan merk jika tipe berubah
            row.find('.prefen-code').val('');
            row.find('.prefen-merk').val('');
            row.find('.prefen-action').val('');
            console.log('tipe', tipe);

            // Kosongkan select sebelum menambahkan opsi baru
            actionSelect.empty().append('<option value="">Pilih Action</option>');

            let dataList = [];

            if (tipe === "mont") {
                dataList = monitorList;
            } else if (tipe === "prin") {
                dataList = printerList;
            } else if (tipe === "scan") {
                dataList = scannerList;
            }

            // Debugging: Cek apakah dataList memiliki data
            console.log("Selected Type:", tipe);
            console.log("Data List:", dataList);

            if (dataList.length > 0) {
                dataList.forEach(item => {
                    actionSelect.append(`<option value="${item.id}">${item.action}</option>`);
                });
            }

            // Jika menggunakan Select2, inisialisasi ulang
            if ($.fn.select2) {
                actionSelect.select2();
            }
        }

        var tempCode = '';

        function getCode(obj) {
            var row = $(obj).closest('tr');
            var tipe = row.find('select[id="prefen-tipe"]').val(); // Cari berdasarkan 'name'
            var kode = row.find('input[id="prefen-code"]').val();
            if (kode != '') {
                tempCode = kode;
            }

            $('.waiting').removeClass('waiting');
            $('.waiting-code').removeClass('waiting-code');
            $('.waiting-merk').removeClass('waiting-merk');
            $(obj).parents('.input-group').find('input[id="prefen-code"]').addClass('waiting');
            $(obj).parents('tr').find('input[id="prefen-merk"]').addClass('waiting-merk');

            $.ajax({
                url: "{{ URL::to('/') }}/preven/code",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipe: tipe
                },
                success: function(data) {
                    // masukkan kedalam modal list material
                    loadCode(data);
                    $('#modalCode').modal('show');
                },
                error: function(xhr, status, error) {
                    // Menangani kesalahan
                    console.error("Error occurred:", error);
                }
            });

        }

        function confirmDelete(item, code, obj) {

            Swal.fire({
                title: "Apakah anda yakin?",
                text: `Material: ${code} akan dihapus`,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya, Hapus!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Jika pengguna menekan OK, panggil fungsi untuk menghapus data
                    $(obj).parent('td').find('input[type="hidden"]').val('delete');
                    $(obj).parents('tr').css('display', 'none');
                    $(obj).parents('tr').removeClass('prefen');

                    var delCode = tempDetail.filter(obj => obj.code !== code);
                    tempDetail = delCode;


                    Swal.fire(
                        "Dihapus!",
                        `Material "${code}" telah dihapus.`,
                        "success"
                    );

                }
            });
        }

        function loadCode(list) {
            var listCode = [];
            var i = 0;
            list.forEach($c => {
                var object = {};
                let actionHTML;

                var findCode = tempDetail.find(item => item.code == $c['code']);

                if (findCode) {
                    actionHTML = `
                    <span class="btn badge bg-secondary" disabled>
                        Selected
                    </span>`;
                } else {
                    actionHTML = `
                    <span class="btn badge bg-primary"
                        onclick="select_code('` + $c['code'] + `', '` + $c['merk_name'] + `', '` + $c['type'] + `')">
                        <i class="fa fa-check-circle-o me-1"></i>
                        Select
                    </span>`;
                }

                object['ACTION'] = actionHTML;

                object['CODE'] = $c['code'];
                object['USER'] = $c['user_name'];
                object['MERK'] = $c['merk_name'] + ' - ' + $c['type'];

                listCode.push(object);

                if (i == (list.length - 1)) {
                    refreshTableCode(listCode);
                }
                i = i + 1;
            });
        }

        function refreshTableCode(list) {
            $('#tableCode').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                "responsive": true,

                "data": list,
                "columns": [{
                    data: 'ACTION'
                }, {
                    data: 'CODE'
                }, {
                    data: 'USER'
                }, {
                    data: 'MERK'
                }],

            });
        }

        // variabel untuk menampung code yang telah dipilih
        var tempDetail = [];

        function select_code(code, merk, type) {
            $('.waiting').val(code);
            $('.waiting-merk').val(merk + '-' + type);

            // hapus code dari array tempDetail
            var delCode = tempDetail.filter(obj => obj.code !== tempCode);
            tempDetail = delCode;
            // push code ke array tempDetail
            tempDetail.push({
                code: code
            });


            $('.btn-close').click();
        }

        $('#prefen-save').click(function(e) {
            e.preventDefault();

            let btn = $(this); // simpan referensi tombol

            btn.append(
                ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            btn.prop('disabled', true);

            var id = $('input[name="idpref"]').val();
            var user = $('input[name="duser"]').val();
            var date = $('input[name="date"]').val();
            var reqby = $('[name="reqby"]').val();

            var hardware = [];
            $('input[name="hardware"]:checked').each(function() {
                hardware.push($(this).val());
            });

            if ($('#hardware').is(':checked')) {
                var otherValue = $('#hardware_other_input').val().trim();
                if (otherValue !== "") {
                    hardware.push(otherValue);
                }
            }

            var software = [];
            $('input[name="software"]:checked').each(function() {
                software.push($(this).val());
            });

            if ($('#software').is(':checked')) {
                var otherValue = $('#software_other_input').val().trim();
                if (otherValue !== "") {
                    software.push(otherValue);
                }
            }

            // ✅ VALIDASI hardware/ software
            if (hardware.length === 0 && software.length === 0) {
                btn.find('.icon-load').remove();
                btn.prop('disabled', false);

                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan!',
                    text: 'Harap lengkapi data sebelum menyimpan!',
                });
                return;
            }

            var prefenKet = document.querySelectorAll('input[name="prefen-detail-item[]"]');
            var prefenItem = document.getElementsByName('prefen-item-number[]');
            var prefenTipe = document.getElementsByName('prefen-tipe[]');
            var prefenCode = document.getElementsByName('prefen-code[]');
            var prefenMerk = document.getElementsByName('prefen-merk[]');
            var prefenAction = document.getElementsByName('prefen-action[]');

            var listDetail = [];
            let select = document.getElementsByName("prefen-action[]");
            for (var i = 0; i < jumlah_item; i++) {
                let selectedValues = Array.from(select[i].selectedOptions).map(option => option.value);

                if (selectedValues.length === 0 && prefenKet[i].value != 'delete') {
                    btn.find('.icon-load').remove();
                    btn.prop('disabled', false);

                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Harap lengkapi action pada detail!',
                    });
                    return;
                }

                var object = {};
                object['ket'] = prefenKet[i].value;
                object['item'] = prefenItem[i].value;
                object['tipe'] = prefenTipe[i].value;
                object['codeD'] = prefenCode[i].value;
                object['merk'] = prefenMerk[i].value;
                object['action'] = selectedValues;
                listDetail.push(object);
            }

            var frm = {
                'user': user,
                'date': date,
                'reqby': reqby,
                'hardware': hardware,
                'software': software,
                'detail': listDetail
            }

            console.log(frm);

            $.ajax({
                url: "{{ URL::to('/') }}/preven/update/" + id,
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    frm: frm
                },
                success: function(data) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Data telah berhasil diperbarui!',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/') }}/preven";
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error("Error occurred:", error);
                    // Aktifkan kembali tombol dan hilangkan spinner
                    btn.find('.icon-load').remove();
                    btn.prop('disabled', false);

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: 'Terjadi kesalahan saat menyimpan data.',
                    });
                }
            });
        });
    </script>
@endsection