@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@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 class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button type="button" class="btn btn-primary mb-0" id="btn-simpan">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-2">Form Movement Asset</p>
                        <hr class="horizontal dark mt-0">

                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="movement-form"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="row g-3">
                                {{-- KIRI --}}
                                <div class="col-lg-12">

                                    {{-- Row: ID + Date + MoveType --}}
                                    <div class="row g-2 align-items-center">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">ID</label>
                                            <input type="text" class="form-control form-control-sm" id="did"
                                                name="did" placeholder="--" disabled>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Date</label>
                                            <input type="date" class="form-control form-control-sm" id="date"
                                                name="date" value="{{ date('Y-m-d') }}" readonly>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Move Type</label>
                                            <select class="form-select form-select-sm" name="move_type" id="move_type">
                                                <option value="TF" selected>Transfer</option>
                                                <option value="DF">Defect</option>
                                            </select>
                                           
                                        </div>
                                    </div>

                                    {{-- Row: Kategori + Code (picker modal) --}}
                                    <div class="row g-2 align-items-end mt-1">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Kategori <code>*</code></label>
                                            <select class="form-select form-select-sm" name="category" id="category">
                                                <option value=""></option>
                                                <option value="CPU">CPU</option>
                                                <option value="LCD">Monitor</option>
                                                <option value="PRN">Printer</option>
                                                <option value="SCN">Scanner</option>
                                                <option value="SWT">Switch</option>
                                                <option value="OTH">Others</option>
                                            </select>
                                        </div>

                                        <div class="col-md-8">
                                            <label class="form-label mb-0">Code <code>*</code></label>
                                            <input type="hidden" id="dkategori" name="dkategori">

                                            <div class="input-group input-group-sm">
                                                <input type="text" id="code" name="code" class="form-control"
                                                    readonly required>
                                                <button type="button" class="input-group-text bg-primary text-light"
                                                    style="cursor:pointer" onclick="searchItems()">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>

                                        </div>
                                    </div>

                                    {{-- FIELD DINAMIS: tujuan user/lokasi/vendor/dokumen --}}
                                    <div class="row g-2 mt-2">
                                        {{-- USER --}}
                                        <div class="col-md-6 d-none" id="fld-from-user">
                                            <label class="form-label mb-0"><span id="label-from-user">User Sebelumnya</span></label>
                                            <input type="text" id="fromuser" name="fromuser" class="d-none"></iput>
                                            <input class="form-control form-control-sm" type="text" name="from_user_id"
                                                id="from_user_id" disabled></input>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-user">
                                            <label class="form-label mb-0">User Saat Ini</label>
                                            {{-- <select class="form-select form-select-sm" name="to_user_id"
                                                id="to_user_id"></select> --}}
                                            <input type="hidden" id="to_user" name="to_user"></input>
                                            <div class="input-group input-group-sm">
                                                <input id="to_user_id" name="to_user_id" class="form-control" readonly
                                                    required>
                                                <button type="button" class="input-group-text bg-primary text-light"
                                                    style="cursor:pointer" data-bs-toggle="modal"
                                                    data-bs-target="#modalUser">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                        {{-- Modal User MIS --}}
                                        <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="tableReqby"
                                                                class="table table-bordered table-striped">
                                                                <thead style="background-color: #daecff;">
                                                                    <tr>
                                                                        <th>Action</th>
                                                                        <th>ID</th>
                                                                        <th>Name</th>
                                                                        <th>Departemen</th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody id="kategori-list">
                                                                    @foreach ($user as $req)
                                                                        <!-- Baris customer dengan data kategori -->
                                                                        <tr>
                                                                            <td>
                                                                                <!-- Tombol untuk memilih customer -->
                                                                                <span class="btn badge bg-primary"
                                                                                    onclick="select_user('{{ $req->id }}', '{{ $req->user }}', '{{ $req->dept }}', '{{ $req->deptname }}')">
                                                                                    <i class="bi bi-check-circle me-1"></i>
                                                                                    Select
                                                                                </span>
                                                                            </td>
                                                                            <td>{{ $req->id }}</td>
                                                                            <td>{{ $req->user }}</td>
                                                                            <td>{{ $req->deptname }}</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>


                                        {{-- LOCATION --}}
                                        {{-- <div class="col-md-6 d-none" id="fld-from-location">
                                            <label class="form-label mb-0">Lokasi Sebelumnya</label>
                                            <input type="text" id="fromloc" name="fromloc" class="d-none"></iput>
                                            <input class="form-control form-control-sm" type="text"
                                                name="from_location_id" id="from_location_id" disabled></input>
                                        </div> --}}
                                        <div class="col-md-6 d-none" id="fld-from-location">
                                            <label class="form-label mb-0"><span id="label-from-location">Lokasi Sebelumnya</span></label>
                                            <input type="hidden" id="fromloc" name="fromloc">
                                            <input class="form-control form-control-sm" type="text"
                                                name="from_location_id" id="from_location_id" disabled>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-location-modal">
                                            <label class="form-label mb-0">Lokasi Saat Ini</label>
                                            <input type="hidden" id="to_loc" name="to_loc">
                                            <div class="input-group input-group-sm">
                                                <input id="to_location_id" name="to_location_id" class="form-control"
                                                    readonly required>
                                                <button type="button" class="input-group-text bg-primary text-light"
                                                    style="cursor: pointer" data-bs-toggle="modal"
                                                    data-bs-target="#modalLoc">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-location-text">
                                            <label class="form-label mb-0">Lokasi Saat Ini <code>*</code></label>
                                            <input type="text" 
                                                id="to_location_text" 
                                                name="to_location_text" 
                                                class="form-control form-control-sm">
                                        </div>

                                        {{-- Modal Location --}}
                                        <div class="modal fade bd-example-modal-lg" id="modalLoc" 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 Location

                                                        </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="tableLoc"
                                                                class="table table-bordered table-striped">
                                                                <thead style="background-color: #daecff;">
                                                                    <tr>
                                                                        <th>Action</th>
                                                                        <th>ID</th>
                                                                        <th>Name</th>
                                                                        <th>Departemen</th>

                                                                    </tr>
                                                                </thead>
                                                                <tbody id="kategori-list">
                                                                    @foreach ($location as $loc)
                                                                        <!-- Baris customer dengan data kategori -->
                                                                        <tr>
                                                                            <td>
                                                                                <!-- Tombol untuk memilih customer -->
                                                                                <span class="btn badge bg-primary"
                                                                                    onclick="select_loc('{{ $loc->id }}', '{{ $loc->name }}', '{{ $loc->dept }}', '{{ $loc->deptname }}')">
                                                                                    <i class="bi bi-check-circle me-1"></i>
                                                                                    Select
                                                                                </span>
                                                                            </td>
                                                                            <td>{{ $loc->id }}</td>
                                                                            <td>{{ $loc->name }}</td>
                                                                            <td>{{ $loc->deptname }}</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>

                                        {{-- Departemen --}}
                                        <div class="col-md-6 d-none" id="fld-from-dept">
                                            <label class="form-label mb-0"><span id="label-from-dept">Dept Sebelumnya</span></label>
                                            <iput type="hidden" id="fromdept" name="fromdept"></iput>
                                            <input class="form-control form-control-sm" type="text"
                                                name="from_dept_id" id="from_dept_id" disabled></input>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-dept">
                                            <label class="form-label mb-0">Departemen Saat Ini</label>

                                            <div class="input-group input-group-sm">
                                                <select class="form-select form-select-sm" name="to_dept_id"
                                                    id="to_dept_id" disabled>
                                                    <option value=""></option>
                                                    @foreach ($dept as $de)
                                                        <option value="{{ $de->value }}">{{ $de->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- AREA --}}

                                        <div class="col-md-6 d-none" id="fld-from-area">
                                            <label class="form-label mb-0"><span id="label-from-area">Area Sebelumnya</span></label>
                                            <input type="hidden" id="fromarea" name="fromarea"></input>
                                            <input class="form-control form-control-sm" type="text"
                                                name="from_area_id" id="from_area_id" disabled></input>
                                        </div>

                                        <div class="col-md-6 d-none" id="fld-to-area">
                                            <label class="form-label mb-0">Area Saat Ini</label>
                                            <select class="form-select form-select-sm" name="to_area_id" id="to_area_id">
                                                @foreach ($area as $a)
                                                    <option value="{{ $a->value }}">{{ $a->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- <div class="col-md-6" id="fld-vendor">
                                            <label class="form-label mb-0">Vendor</label>
                                            <select class="form-select form-select-sm" name="vendor_id"
                                                id="vendor_id"></select>
                                        </div>

                                        <div class="col-md-6" id="fld-loan-plan">
                                            <label class="form-label mb-0">Estimasi Selesai Perbaikan</label>
                                            <input type="date" class="form-control form-control-sm"
                                                name="plan_return_date" id="plan_return_date">
                                        </div> --}}

                                    </div>
                                    <p></p>
                                    <hr class="horizontal dark mt-0">
                                    {{-- Catatan --}}
                                    <div class="mt-2">
                                        <label class="form-label mb-0">Catatan</label>
                                        <textarea name="remark" id="remark" rows="2" class="form-control form-control-sm"
                                            placeholder="Catatan singkat…"></textarea>
                                    </div>

                                    {{-- Lampiran --}}
                                    {{-- <div class="mt-2">
                                        <label class="form-label mb-0">Lampiran</label>
                                        <input type="file" name="files[]" class="form-control form-control-sm"
                                            multiple>
                                    </div> --}}

                                    {{-- Aksi --}}
                                        
                                        {{-- <button type="button" class="btn btn-outline-secondary btn-sm"
                                            id="btnPreview">Preview</button> --}}
                                    
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            <div class="col-md-6 d-none" id="cardinfo">
                {{-- FROM ASSET --}}
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">Form Asset</p>
                        <hr class="horizontal dark mt-0">


                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <!-- USER -->
                            <div>
                                <div class="text-xs text-muted mb-1">User</div>
                                <h4 class="mb-1" id="info_from_user"></h4>
                                <span class="badge bg-gradient-info rounded-pill" id="info_from_dept_name"></span>
                            </div>

                            <!-- AREA -->
                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1" id="info_from_area"></h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    <i id="info_category"></i>
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="me-3">
                                        <small class="text-muted text-uppercase">Code</small>
                                        <div class="fw-semibold" id="info_from_code"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="me-3">
                                        <small class="text-muted text-uppercase">Detail Info</small>
                                        <div class="fw-semibold info-detail" id="info_from_detail"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div>
                                    <small class="text-muted text-uppercase">Tanggal Pembelian</small>
                                    <div class="fw-semibold info-date" id="info_dategr"></div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div>
                                    <small class="text-muted text-uppercase">Kode SAP</small>
                                    <div class="fw-semibold info-sap" id="info_codesap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                {{-- TO ASSET --}}
                <div class="card" id="card-move-to">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">Move To :</p>
                        <hr class="horizontal dark mt-0">

                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <!-- USER -->
                            <div>
                                <div class="text-xs text-muted mb-1">User</div>
                                <h4 class="mb-1" id="info_to_user">-</h4>
                                <span class="badge bg-gradient-info rounded-pill" id="info_to_dept_name">-</span>
                            </div>

                            <!-- AREA -->
                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1" id="info_to_area">-</h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    <i id="info_to_category"></i>
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <!-- INFO LAIN (LEBIH KECIL) -->
                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="me-3">
                                        <small class="text-muted text-uppercase">Code</small>
                                        <div class="fw-semibold" id="info_to_code"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="me-3">
                                        <small class="text-muted text-uppercase">Detail Info</small>
                                        <div class="fw-semibold info-detail" id="info_to_detail"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div>
                                    <small class="text-muted text-uppercase">Tanggal Pembelian</small>
                                    <div class="fw-semibold info-date" id="info_to_dategr"></div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div>
                                    <small class="text-muted text-uppercase">Kode SAP</small>
                                    <div class="fw-semibold info-sap" id="info_to_codesap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- modal menampilkan master data --}}
    <div class="modal fade" id="codeModal" tabindex="-1" aria-labelledby="codeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="codeModalLabel">Master Data </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="myTableMaster" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Kode</th>
                                    <th scope="col">Departement</th>
                                    <th scope="col">User/Location</th>

                                </tr>
                            </thead>
                            <tbody id="modal-body-content">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#btn-simpan').click(function(e) {
            e.preventDefault();

            const $btn = $(this);
            const category = $('select[name="category"]').val();
            const move_type = $('select[name="move_type"]').val();

            // Ambil data wajib diisi
            var date = $('input[name="date"]').val();
            var code = $('input[name="code"]').val();
            var fromuser = $('input[name="fromuser"]').val();
            var fromloc = $('input[name="fromloc"]').val();
            var remark = $('#remark').val();
           

            // Validasi header
            if (!date || !move_type || !code || !category) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Harap lengkapi semua data!',
                });
                return;
            }
            
            var dept = null;
            var area = null;
            var touser = null;
            var toloc = null;

            if (move_type. toUpperCase() === 'DF') {
                dept = null;
                area = null;
                touser = null;
                toloc = null;
            } 
            else if (move_type.toUpperCase() === 'TF') {
                dept = $('#to_dept_id_hidden').val() || $('select[name="to_dept_id"]').val();
                area = $('select[name="to_area_id"]').val();
                touser = $('input[name="to_user"]').val();

                if (category.toUpperCase() === 'OTH') {
                    toloc = $('input[name="to_location_text"]').val();
                    if (!toloc) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text:  'Lokasi harus diisi untuk kategori Others!',
                        });
                        return;
                    }
                } else {
                    toloc = $('input[name="to_loc"]').val();
                }

                if (!dept || !area) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text:  'Untuk Transfer, Departemen dan Area tujuan harus diisi!',
                    });
                    return;
                }
            }
            
            const parts = code.split('.');
            const cat_cpu = parts[3];

            var params = {
                'date': date,
                'move_type': move_type,
                'code': code,
                'dept': dept,
                'area':  area,
                'category': category,
                'fromuser': fromuser,
                'touser': touser,
                'fromloc': fromloc,
                'toloc': toloc,
                'cat_cpu': cat_cpu,
                'remark': remark
            };

            console.log('param', params);
            
            const moveTypeText = move_type.toUpperCase() === 'DF' ? 'DEFECT' : 'TRANSFER';
            const confirmText = `Data akan disimpan sebagai ${moveTypeText}. Apakah Anda yakin? `;
            
            Swal.fire({
                title: 'Konfirmasi',
                text: confirmText,
                icon: 'warning',
                showCancelButton:  true,
                confirmButtonText:  'Ya, simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33'
            }).then((result) => {
                if (! result.isConfirmed) return;
                
                $btn.append(
                    ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                );
                $btn.prop('disabled', true);

                $. ajax({
                    url: "{{ URL::to('/') }}/trmove/store",
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: {
                        params: params
                    },
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Data berhasil disimpan.',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window. location.href = "{{ URL:: to('/') }}/trmove";
                            }
                        });
                    },
                    // error: function(xhr, status, error) {
                    //     const msg = xhr.responseJSON?.message || xhr.responseJSON?.error || 'Terjadi kesalahan saat menyimpan data! ';
                    //     Swal.fire({
                    //         icon: 'error',
                    //         title: 'Gagal!',
                    //         text: msg,
                    //     });
                    // },
                     error: function(xhr, status, error) {
                        const msg = xhr.responseJSON?.error || 'Terjadi kesalahan saat menyimpan data!';
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: msg,
                        });
                    },
                    complete: function() {
                        $btn.find('.icon-load').remove();
                        $btn.prop('disabled', false);
                    }
                });
            });
        });

        $(document).ready(function() {
            let tableReqby = $('#tableReqby').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,
            });

            let tableLoc = $('#tableLoc').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,
            });
        });

        function toggleMoveToCard() {
            const moveType = $('#move_type').val();

            if (moveType === 'DF') {
                $('#card-move-to').hide();
            } else {
                $('#card-move-to').show();
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            const moveType = document.getElementById('move_type');
            const category = document.getElementById('category');

            const $all = (sel) => Array.from(document.querySelectorAll(sel));
            const hide = (nodes) => nodes.forEach(n => n.classList.add('d-none'));
            const show = (nodes) => nodes.forEach(n => n.classList.remove('d-none'));

            function clearMovementValues() {
                const inputs = $all(
                    '#fld-from-user input, #fld-to-user input,' +
                    '#fld-from-location input, #fld-to-location-modal input, #fld-to-location-text input,' +
                    '#fld-from-dept input, #fld-to-dept input,' +
                    '#fld-from-area input, #fld-to-area input'
                );
                inputs.forEach(el => {
                    el.value = '';
                });

                const code = document.getElementById('code');
                const dkategori = document.getElementById('dkategori');
                if (code) code.value = '';
                if (dkategori) dkategori.value = '';

                $('#to_dept_id').val('');
                $('#to_area_id').val('');
            }

             function setDepartmentReadonly(category) {
                const cat = (category || '').toUpperCase();
                const $deptSelect = $('#to_dept_id');
                
                if (cat === 'OTH') {
                    $deptSelect.prop('disabled', false);
                } else if (['CPU', 'LCD', 'PRN', 'SCN', 'SWT'].includes(cat)) {
                    $deptSelect.prop('disabled', true);
                }
            }

            function toggleFieldLayout() {
                const mt = ($('#move_type').val() || '').toUpperCase();
               
                const fromFields = [
                    '#fld-from-user',
                    '#fld-from-location',
                    '#fld-from-dept',
                    '#fld-from-area'
                ];
                
                fromFields.forEach(fieldId => {
                    const $field = $(fieldId);
                    if (mt === 'DF') {
                        $field.removeClass('col-md-6').addClass('col-md-12');
                    } else {
                        $field. removeClass('col-md-12').addClass('col-md-6');
                    }
                });
            }

            function refresh() {
                const mt = (moveType. value || '').toUpperCase();
                const cat = (category.value || '').toUpperCase();

                // user
                const userLast = $all('#fld-from-user');
                const userCur = $all('#fld-to-user');

                // lokasi dari/sebelumnya
                const locLast = $all('[id="fld-from-location"]');
                
                // lokasi saat ini - MODAL (untuk PRN, SCN, SWT)
                const locCurModal = $all('[id="fld-to-location-modal"]');
                
                // lokasi saat ini - TEXT INPUT (untuk OTH)
                const locCurText = $all('[id="fld-to-location-text"]');

                // dept
                const deptLast = $all('[id="fld-from-dept"]');
                const deptCur = $all('[id="fld-to-dept"]');

                // area
                const areaLast = $all('[id="fld-from-area"]');
                const areaCur = $all('[id="fld-to-area"]');

                // default:  sembunyikan semua
                hide([
                    ... userLast, ...userCur, 
                    ...locLast, ... locCurModal, ... locCurText,
                    ... deptLast, ...deptCur, 
                    ...areaLast, ...areaCur
                ]);

                 if (mt === 'DF') {
                    if (cat === 'CPU' || cat === 'LCD') {
                        // Defect + (CPU/Monitor)
                        show([... userLast, ...deptLast, ...areaLast]);
                    } 
                    else if (cat === 'PRN' || cat === 'SCN' || cat === 'SWT' || cat === 'OTH') {
                        // Defect + (Printer/Scanner/Switch/Others) 
                        show([...locLast, ...deptLast, ...areaLast]);
                    }
                }

                // Transfer
                else if (mt === 'TF') {
                    if (cat === 'CPU' || cat === 'LCD') {
                        // Transfer + (CPU/Monitor) 
                        show([...userLast, ...userCur, ... deptLast, ... deptCur, ...areaLast, ...areaCur]);
                    } 
                    else if (cat === 'PRN' || cat === 'SCN' || cat === 'SWT') {
                        // Transfer + (Printer/Scanner/Switch) 
                        show([...locLast, ...locCurModal, ...deptLast, ... deptCur, ...areaLast, ...areaCur]);
                    }
                    else if (cat === 'OTH') {
                        // Transfer + Others 
                        show([... locLast, ...locCurText, ...deptLast, ...deptCur, ...areaLast, ...areaCur]);
                    }
                }
                
                toggleFieldLayout();
                if (mt === 'DF') {
                    document.getElementById('label-from-user').textContent = 'User';
                    document.getElementById('label-from-location').textContent = 'Lokasi';
                    document.getElementById('label-from-dept').textContent = 'Dept';
                    document.getElementById('label-from-area').textContent = 'Area';
                } else {
                    document.getElementById('label-from-user').textContent = 'User Sebelumnya';
                    document.getElementById('label-from-location').textContent = 'Lokasi Sebelumnya';
                    document.getElementById('label-from-dept').textContent = 'Dept Sebelumnya';
                    document.getElementById('label-from-area').textContent = 'Area Sebelumnya';
                }
                setDepartmentReadonly(cat);
                toggleMoveToCard();
            }

            moveType.addEventListener('change', () => {
                clearMovementValues();
                refresh();
            });
            category.addEventListener('change', () => {
                clearMovementValues(); // 🔥 reset semua isi field terkait
                $('#cardinfo').addClass('d-none');
                refresh(); // lalu hitung ulang aturan show/hide
            });

            refresh();

        });

        var listCode = []; 
        var tableData = []; 
        
        function searchItems() {
            var category = $('select[name="category"]').val();
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

            if (!category) {
                Swal.fire({ title: 'Kategori Belum Dipilih!', text: 'Harap memilih kategori terlebih dahulu.', icon: 'warning', confirmButtonText: 'OK' });
                return;
            }

            $.ajax({
                url: '{{ URL::to('/') }}/search-asset',
                type: 'GET',
                data: { category: category },
                success: function(response) {
                    listCode = [];
                    for (const r of response) {
                        const userId = r.user || r.user_id || '';
                        const userName = r.user_name || r.userName || '';
                        const locationId = r.location || r.location_id || '';
                        const locationName = r.location_name || r.locationName || '';
                        const deptVal = r.dept || r.dept_value || '';
                        const deptName = r.dept_name || r.deptName || '';
                        const areaVal = r.area || r.area_value || '';
                        const areaName = r.area_name || r.areaName || '';

                        const cat = (category || '').toUpperCase();
                        let displayBrandModel = '';
                        if (cat === 'CPU') {
                            displayBrandModel = r.type_name || '';
                        } else if (cat === 'LCD' || cat === 'MONITOR') {
                            const merk = r.merk_name || '';
                            const tipe = r.type_name || '';
                            const size = r.size_name || '';
                            displayBrandModel = `${merk} ${tipe}${size ? ' - ' + size : ''}`.trim();
                        } else {
                            const merk = r.merk_name || '';
                            const tipe = r.type_name || '';
                            displayBrandModel = `${merk} ${tipe}`.trim();
                        }

                        const already = tableData.some(t => t.code === r.code);
                        const actionHtml = already ? `<span class="btn badge bg-secondary select-btn" disabled>Selected</span>` :
                            `<button type="button" class="btn badge bg-success select-btn"
                                data-code="${r.code || ''}"
                                data-category="${category || ''}"
                                data-dept="${deptVal}"
                                data-dept-name="${deptName}"
                                data-user-id="${userId}"
                                data-user-name="${userName}"
                                data-location-id="${locationId}"
                                data-location-name="${locationName}"
                                data-area="${areaVal}"
                                data-area-name="${areaName}"
                                data-info-detail="${displayBrandModel}"
                                data-date-gr="${r.date_gr || '-'}"
                                data-sap-code="${r.kode_sap || ''}"
                                onclick="selectItemFromBtn(this)">
                                <i class="fa fa-check-circle-o me-1"></i> Select
                            </button>`;

                        listCode.push({
                            ACTION: actionHtml,
                            CODE: r.code,
                            DEPT: deptName,
                            KOL3: (userName || locationName)
                        });
                    }

                    $('#myTableMaster').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,
                        responsive: true,
                        "data": listCode,
                        "columns": [{ data: 'ACTION' }, { data: 'CODE' }, { data: 'DEPT' }, { data: 'KOL3' }]
                    });

                    $('#codeModal').modal('show');
                },
                error: function(xhr) {
                    console.error('AJAX request error:', xhr.responseText);
                    Swal.fire({ title: 'Warning!', text: 'Data tidak ditemukan.', icon: 'warning', confirmButtonText: 'OK' });
                }
            });
        }

        function setSelectReadonly($select, id, text) {
            $select.empty();
            if (id && text) $select.append(new Option(text, id, true, true));
            $select.prop('disabled', true);
        }

        // update card ringkasan
        function fillSummaryCard(d) {
            const cat = (d.category || '').toUpperCase();

            // tentukan icon berdasarkan kategori
            let iconClass = 'fa-tag'; // default

            if (cat === 'CPU') {
                iconClass = 'fa fa-hard-drive';
            } else if (cat === 'LCD' || cat === 'MONITOR') {
                iconClass = 'fa fa-desktop';
            } else if (cat === 'PRN' || cat === 'PRINTER') {
                iconClass = 'fa fa-print';
            } else if (cat === 'SCN' || cat === 'SCANNER') {
                iconClass = 'fa fa-qrcode';
            } else if (cat === 'SWT' || cat === 'SWITCH') {
                iconClass = 'fa-network-wired';
            }

            $('#info_from_user').text(d.user_name || d.locationName || '-');
            $('#info_from_dept_name').text(d.dept_name || '-');
            $('#info_from_area').text(d.area_name || '-');
            $('#info_category, #info_to_category').html(
                `<i class="fas ${iconClass} me-1"></i> ${d.category || '-'}`
            );
            $('#info_from_code').text(d.code || '-');
            $('#info_to_code').text('-');

            $('#info_from_detail, #info_to_detail').text(d.infoDetail || '-');
            $('#info_dategr, #info_to_dategr').text(d.dateGr || '-');
            $('#info_codesap, #info_to_codesap').text(d.sapCode || '-');
        }

        function selectItemFromBtn(btn) {
            const d = btn.dataset;
            const selectedCategory = ($('#category').val() || '').toUpperCase();

            $('#dkategori').val(d.category || '');
            $('#code').val(d.code || '');

            if (typeof refresh === 'function') refresh();

            if ($('#fld-from-user').is(':visible')) {
                $('#from_user_id').val(d.userName || '');
                $('#fromuser').val(d.userId || '');
            }

            if ($('#fld-from-location').is(':visible')) {
                $('#from_location_id').val(d.locationName || '');
                $('#fromloc').val(d.locationId || '');
            }

            if ($('#fld-from-dept').is(':visible')) {
                $('#from_dept_id').val(d.deptName || '');
                $('#fromdept').val(d.dept || '');
            }

            if ($('#fld-from-area').is(':visible')) {
                $('#from_area_id').val(d.areaName || '');
                $('#fromarea').val(d.area || '');
            }

            $('#to_user').val('');
            $('#to_user_id').val('');
            $('#to_loc').val('');
            $('#to_location_id').val('');
            $('#to_location_text').val('');
            $('#to_dept_id').val('');
            $('#to_area_id').val('');

            $('#to_dept_id').prop('disabled', false);
            $('#to_dept_id_hidden').remove();
            
            $('#cardinfo').removeClass('d-none');

            fillSummaryCard({
                code: d.code,
                category: d.category,
                user_name: d.userName || d.locationName,
                dept_name: d.deptName,
                area_name: d. areaName,
                infoDetail: d.infoDetail,
                dateGr: d.dateGr,
                sapCode: d.sapCode
            });

            syncToAssetCard();

            try {
                $('#codeModal').modal('hide');
            } catch (e) {}
        }

        $('#category').on('change', function() {
            const cat = $(this).val();
            
            clearMovementValues();
            $('#cardinfo').addClass('d-none');
            
            // Set readonly status departemen
            setDepartmentReadonly(cat);
            
            if (typeof refresh === 'function') refresh();
        });
        $('#to_location_text').on('input', function() {
            const selectedCategory = ($('#category').val() || '').toUpperCase();
            
            if (selectedCategory === 'OTH') {
                $('#to_dept_id').prop('disabled', false);
                $('#to_dept_id_hidden').remove();
            }
            
            syncToAssetCard();
        });

        $('#to_dept_id, #to_area_id').on('change', function() {
            if ($('#to_dept_id_hidden').length > 0) {
                $('#to_dept_id_hidden').val($('#to_dept_id').val());
            }
            syncToAssetCard();
        });


        function select_user(id, name, deptValue, deptName) {
            const selectedCategory = ($('#category').val() || '').toUpperCase();
            
            document.getElementById('to_user').value = id;
            document.getElementById('to_user_id').value = name;
            
            if (selectedCategory === 'CPU' || selectedCategory === 'LCD') {
                $('#to_dept_id').val(deptValue);
                
                $('#to_dept_id').prop('disabled', true);
                
                if ($('#to_dept_id_hidden').length === 0) {
                    $('#to_dept_id').after('<input type="hidden" id="to_dept_id_hidden" name="to_dept_id">');
                }
                $('#to_dept_id_hidden').val(deptValue);
            }
            
            $('#modalUser').modal('hide');
            syncToAssetCard();
        }

        $('#to_loc, #to_location_id').on('change input', function () {
            const selectedCategory = ($('#category').val() || '').toUpperCase();
            if (selectedCategory === 'PRN' || selectedCategory === 'SCN' || selectedCategory === 'SWT' || selectedCategory === 'OTH') {
                const locId = $('#to_loc').val() || '';
                const locName = $('#to_location_id').val() || '';
                $('#to_user').val(locId);
                $('#to_user_id').val(locName);
            }
            syncToAssetCard();
        });

        function select_loc(id, name, deptValue, deptName) {
            const selectedCategory = ($('#category').val() || '').toUpperCase();
            
            document.getElementById('to_loc').value = id;
            document.getElementById('to_location_id').value = name;
            
            if (selectedCategory === 'PRN' || selectedCategory === 'SCN' || selectedCategory === 'SWT') {
                $('#to_user').val(id);
                $('#to_user_id').val(name);
                $('#to_dept_id').val(deptValue);
                $('#to_dept_id').prop('disabled', true);
                if ($('#to_dept_id_hidden').length === 0) {
                    $('#to_dept_id').after('<input type="hidden" id="to_dept_id_hidden" name="to_dept_id">');
                }
                $('#to_dept_id_hidden').val(deptValue);
            }
            
            $('#modalLoc').modal('hide');
            syncToAssetCard();
        }

        $('#to_dept_id, #to_area_id').on('change', function() {
            syncToAssetCard();
        });

        $('#to_location_text').on('input', function() {
            syncToAssetCard();
        });

       function syncToAssetCard() {
            const selectedCategory = ($('#category').val() || '').toUpperCase();
            
            let userName = '-';
            let locationText = '-';
            
            if (selectedCategory === 'OTH') {
                locationText = $('#to_location_text').val() || '-';
                userName = locationText; 
            } else {
                userName = $('#to_user_id').val() || '-';
                locationText = $('#to_location_id').val() || '-';
            }
            
            const deptText = $('#to_dept_id option:selected').text() || '-';
            const areaText = $('#to_area_id option:selected').text() || '-';

            $('#info_to_user').text(userName);
            $('#info_to_dept_name').text(deptText);
            $('#info_to_area').text(areaText);
        }
    </script>
@endsection