@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('components.swallalert')
    @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</span></button>
                        {{-- Button to clear the form --}}
                        <button class="btn btn-secondary mb-0" onclick="resetForm()">
                            <i class="fas fa-sync-alt me-1"></i>
                            <span class="font-weight-bold">Reset</span>
                        </button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            <button id="btnSimpan" class="btn btn-primary mb-0" onclick="submitFormWithSpinner(event)">
                                <i class="fas fa-floppy-disk me-1" id="icon-simpan"></i>
                                <span id="text-simpan" 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-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data" onsubmit="submitFormWithSpinner(event)">
                        @csrf
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-2">
                                    <label class="form-control-label">Tanggal</label>
                                    <input class="form-control readonly" type="date" value="{{ now()->format('Y-m-d') }}"
                                        readonly style="background-color: #e9ecef;">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-control-label">PIC</label>
                                    <input class="form-control readonly" type="text" value="{{ $firstname }}" readonly
                                        style="background-color: #e9ecef;">
                                </div>
                            </div>
                            <hr class="horizontal dark mt-0">


                            {{-- Error messages --}}
                            @if ($errors->any())
                                <div class="alert alert-danger text-white text-sm">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="table-responsive">
                                <p class="text-uppercase text-sm mb-3">Daftar Pengajuan Aset</p>
                                <table class="table align-items-center mb-0" id="tbl-rows">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center text-xs" style="width: 5%; min-width:50px;">No</th>
                                            <th class="text-xs" style="width: 10%; min-width:120px;">Tipe <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 20%; min-width:220px;">Penerima / Bagian <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 15%; min-width:180px;">Departemen <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 15%; min-width:160px;">Lokasi <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 10%; min-width:120px;">Area <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 10%; min-width:120px;">Qty <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-xs" style="width: 20%; min-width:200px;">Deskripsi Pengajuan
                                                <span class="text-danger">*</span>
                                            </th>
                                            <th class="text-xs" style="display:none;">Tanggal <span
                                                    class="text-danger">*</span></th>
                                            <th class="text-center text-xs" style="width: 5%; min-width:80px;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="rows-container">
                                        <tr class="request-row" data-index="0">
                                            <td class="text-center text-sm row-number" data-label="No">
                                                1
                                            </td>

                                            <td data-label="Tipe">
                                                <select name="rows[0][user_type]"
                                                    class="form-select form-select-sm user-type-select"
                                                    onchange="toggleUserType(this, 0)">
                                                    <option value="karyawan" selected>Karyawan</option>
                                                    <option value="bagian">Bagian/Ruangan</option>
                                                </select>
                                            </td>

                                            <td data-label="Penerima / Bagian">
                                                {{-- Panel Karyawan --}}
                                                <div class="panel-karyawan">

                                                    <input type="hidden" name="rows[0][bagian_id]"
                                                        class="karyawan-bagian-id">

                                                    <div class="input-group input-group-sm user-picker">
                                                        <input type="hidden" name="rows[0][user_name]"
                                                            class="user-name-val">

                                                        <input type="text"
                                                            class="form-control form-control-sm user-name-display" readonly
                                                            placeholder="Pilih karyawan...">

                                                        <span class="input-group-text bg-primary text-light"
                                                            style="cursor:pointer;" onclick="openKaryawanModal(0)">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </div>
                                                </div>

                                                {{-- Panel Bagian --}}
                                                <div class="panel-bagian" style="display:none;">
                                                    <select name="rows[0][bagian_id]"
                                                        class="form-select form-select-sm bagian-select" disabled>
                                                        <option value="">Pilih Bagian/Ruangan</option>

                                                        @foreach ($bagian_list as $bagian)
                                                            <option value="{{ $bagian->bagian_id }}">
                                                                {{ $bagian->bagian_name }}
                                                            </option>
                                                        @endforeach

                                                        <option value="__other__" style="color:#888; font-style:italic;">
                                                            ── Lainnya ──
                                                        </option>
                                                    </select>
                                                </div>
                                            </td>

                                            <td data-label="Departemen">
                                                {{-- Departemen karyawan --}}
                                                <div class="panel-karyawan">

                                                    <input type="hidden" name="rows[0][departemen_id]"
                                                        class="karyawan-departemen-id">

                                                    <input type="text"
                                                        class="form-control form-control-sm dept-display" readonly
                                                        style="background-color: #e9ecef;" placeholder="-">
                                                </div>

                                                {{-- Departemen bagian --}}
                                                <div class="panel-bagian" style="display:none;">
                                                    <select name="rows[0][departemen_id]"
                                                        class="form-select form-select-sm dept-select-bagian" disabled>
                                                        <option value="">Pilih Departemen</option>

                                                        @foreach ($department_list as $dept)
                                                            <option value="{{ $dept->department_id }}">
                                                                {{ $dept->department_name }}
                                                            </option>
                                                        @endforeach

                                                        <option value="__dept_other__"
                                                            style="color:#888; font-style:italic;">
                                                            ── Lainnya ──
                                                        </option>
                                                    </select>
                                                </div>
                                            </td>

                                            <td data-label="Lokasi" style="vertical-align: middle;">
                                                <select name="rows[0][user_location2]"
                                                    class="form-select form-select-sm loc2-select">
                                                    <option value="">Pilih Lokasi</option>

                                                    @foreach ($location_list as $loc)
                                                        <option value="{{ $loc->location_id }}"
                                                            data-area="{{ $loc->area_id }}">
                                                            {{ $loc->location_name }}
                                                        </option>
                                                    @endforeach

                                                    <option value="__loc_other__" style="color:#888; font-style:italic;">
                                                        ── Lainnya ──
                                                    </option>
                                                </select>
                                            </td>

                                            <td data-label="Area">
                                                <input type="text" name="rows[0][user_location]"
                                                    class="form-control form-control-sm area-input" readonly
                                                    style="background-color: #e9ecef;" placeholder="Otomatis">
                                            </td>

                                            <td data-label="qty">
                                                <input type="number" name="rows[0][qty]"
                                                    class="form-control form-control-sm" rows="1"
                                                    placeholder="qty"></textarea>
                                            </td>

                                            <td data-label="Deskripsi">
                                                <textarea name="rows[0][request_desc]" class="form-control form-control-sm" rows="1"
                                                    placeholder="Deskripsi pengajuan..."></textarea>
                                            </td>

                                            <td class="d-none">
                                                <input type="hidden" name="rows[0][tanggal]"
                                                    value="{{ now()->format('Y-m-d') }}">
                                            </td>

                                            <td class="text-center td-aksi" data-label="Aksi">
                                                <button type="button" class="btn btn-sm btn-danger mb-0 px-2 py-1"
                                                    onclick="removeRow(this)" title="Hapus baris" disabled>
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3 mt-3">
                                <button type="button" class="btn btn-sm btn-primary mb-0" onclick="addRow()">
                                    <i class="fas fa-plus me-1"></i> Tambah Pengajuan
                                </button>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pilih Karyawan (satu modal dipakai semua baris) --}}
    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-labelledby="karyawanModalLabel" 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="karyawanModalLabel">Pilih Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display w-100" id="tbl-karyawan">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Action</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Bagian</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($karyawan_list as $karyawan)
                                    @php
                                        $deptName = $karyawan->Departemen;
                                        foreach ($department_list as $dept) {
                                            if ($dept->department_id == $karyawan->Departemen) {
                                                $deptName = $dept->department_name;
                                                break;
                                            }
                                        }
                                        // Fallback mapping if ID is an integer stored in mst_karyawan
                                        if ($deptName == $karyawan->Departemen) {
                                            foreach ($bagian_list as $bag) {
                                                if ($bag->bagian_id == $karyawan->Departemen) {
                                                    $deptName = $bag->bagian_name;
                                                    break;
                                                }
                                            }
                                        }

                                        $bagianName = $karyawan->Bagian;
                                        foreach ($bagian_list as $bag) {
                                            if ($bag->bagian_id == $karyawan->Bagian) {
                                                $bagianName = $bag->bagian_name;
                                                break;
                                            }
                                        }
                                    @endphp
                                    {{-- <tr>
                                        <td>
                                            <span class="btn badge badge-lg text-white"
                                                style="background: linear-gradient(135deg, #028284, #00b7bd); cursor:pointer;"
                                                onclick="selectKaryawan('{{ addslashes($karyawan->nik) }}', '{{ addslashes($karyawan->Nama) }}', '{{ addslashes($deptName) }}')">
                                                Select
                                            </span>
                                        </td>
                                        <td class="text-sm font-weight-normal">{{ $karyawan->Nama }}</td>
                                        <td class="text-sm font-weight-normal">{{ $deptName }}</td>
                                        <td class="text-sm font-weight-normal">{{ $bagianName }}</td>
                                    </tr> --}}
                                    <tr>
                                        <td>
                                            <span class="btn badge badge-lg text-white"
                                                style="background: linear-gradient(135deg, #028284, #00b7bd); cursor:pointer;"
                                                onclick="selectKaryawan(
                                                    '{{ addslashes($karyawan->nik) }}',
                                                    '{{ addslashes($karyawan->Nama) }}',
                                                    '{{ addslashes($karyawan->Departemen) }}',
                                                    '{{ addslashes($deptName) }}',
                                                    '{{ addslashes($karyawan->Bagian) }}'
                                                )">
                                                Select
                                            </span>
                                        </td>

                                        <td class="text-sm font-weight-normal">
                                            {{ $karyawan->Nama }}
                                        </td>

                                        <td class="text-sm font-weight-normal">
                                            {{ $deptName }}
                                        </td>

                                        <td class="text-sm font-weight-normal">
                                            {{ $bagianName }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        let rowIndex = 1;
        let activeRowIndex = null;

        function addToHistory(key, val) {
            if (!val || val.includes('other')) return;
            var history = JSON.parse(sessionStorage.getItem(key) || '[]');
            var idx = history.indexOf(val.toString());
            if (idx > -1) {
                history.splice(idx, 1);
            }
            history.unshift(val.toString());
            sessionStorage.setItem(key, JSON.stringify(history));
        }

        function getHistory(key) {
            return JSON.parse(sessionStorage.getItem(key) || '[]');
        }

        // Inisialisasi DataTable untuk modal karyawan
        $(document).ready(function() {
            $('#tbl-karyawan').DataTable({
                pageLength: 10,
                ordering: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    }
                }
            });

            // Inisialisasi Select2 pada dropdown lokasi, bagian & departemen
            initSelect2Location();
            initSelect2Bagian();
            initSelect2Departemen();

            // Restore data terakhir dari sessionStorage (jika ada)
            var savedType = sessionStorage.getItem('trreqs_last_user_type');
            var savedBagianId = sessionStorage.getItem('trreqs_last_bagian_id');
            var savedLocationId = sessionStorage.getItem('trreqs_last_location_id');

            // Set row pertama sesuai data terakhir
            if (savedType && savedType === 'bagian') {
                var firstRow = document.querySelector('tr[data-index="0"]');
                if (firstRow) {
                    var typeSelect = firstRow.querySelector('.user-type-select');
                    typeSelect.value = 'bagian';
                    toggleUserType(typeSelect, 0);

                    if (savedBagianId) {
                        var bagianSelect = $(firstRow).find('.bagian-select');
                        bagianSelect.val(savedBagianId).trigger('change');
                    }
                }
            }
        });

        var allLocationData = @json($location_list);

        function initSelect2Location() {
            $('.loc2-select').each(function() {
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    var $sel = $(this);
                    var currentVal = $sel.val();
                    var history = getHistory('trreqs_history_location_id');

                    // Jika sudah ada yang dipilih atau ada history, tampilkan mode compact
                    if ((currentVal && currentVal !== '' && currentVal !== '__loc_other__') || history.length > 0) {
                        buildCompactLocationOptions($sel, currentVal);
                    }

                    $sel.select2({
                        placeholder: 'Cari lokasi...',
                        allowClear: false,
                        width: '100%'
                    }).on('change', handleLocationChange);

                    $sel.off('change').on('change', handleLocationChange);
                }
            });
        }

        function handleLocationChange() {
            var val = $(this).val();
            var $this = $(this);
            var index = $this.closest('tr').data('index');

            if (val === '__loc_other__') {
                // Klik Lainnya → tampilkan semua opsi dan buka ulang
                $this.select2('destroy');
                buildAllLocationOptions($this, '');
                $this.select2({
                    placeholder: 'Cari lokasi...',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleLocationChange);
                $this.select2('open');
                // Reset area
                var row = $this.closest('tr')[0];
                if (row) row.querySelector('.area-input').value = '';
            } else if (val) {
                sessionStorage.setItem('trreqs_last_location_id', val);
                addToHistory('trreqs_history_location_id', val);
                // Set area otomatis
                onLocationChange($this[0], index);
                // Compact mode
                $this.select2('destroy');
                buildCompactLocationOptions($this, val);
                $this.select2({
                    placeholder: 'Cari lokasi...',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleLocationChange);
            } else {
                // Reset area
                var row = $this.closest('tr')[0];
                if (row) row.querySelector('.area-input').value = '';
            }
        }

        // Mode compact lokasi: tampilkan history terpilih + Lainnya
        function buildCompactLocationOptions($sel, selectedId) {
            var history = getHistory('trreqs_history_location_id');
            if (selectedId && selectedId !== '__loc_other__' && history.indexOf(selectedId.toString()) === -1) {
                history.unshift(selectedId.toString());
            }

            var html = '<option value="">Pilih Lokasi</option>';
            history.forEach(function(hId) {
                var item = allLocationData.find(function(l) {
                    return l.location_id == hId;
                });
                if (item) {
                    var sel = (selectedId && item.location_id == selectedId) ? ' selected' : '';
                    html += '<option value="' + item.location_id + '" data-area="' + item.area_id + '"' + sel +
                        '>' + item.location_name + '</option>';
                }
            });
            html += '<option value="__loc_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        // Mode expanded lokasi: tampilkan semua opsi
        function buildAllLocationOptions($sel, selectedId) {
            var lastLocId = sessionStorage.getItem('trreqs_last_location_id');
            var html = '<option value="">Pilih Lokasi</option>';

            // Urutkan: terakhir dipilih di atas
            var sorted = allLocationData.slice();
            if (lastLocId) {
                sorted.sort(function(a, b) {
                    if (a.location_id == lastLocId) return -1;
                    if (b.location_id == lastLocId) return 1;
                    return 0;
                });
            }

            sorted.forEach(function(l) {
                var sel = (l.location_id == selectedId) ? ' selected' : '';
                html += '<option value="' + l.location_id + '" data-area="' + l.area_id + '"' + sel + '>' + l
                    .location_name + '</option>';
            });
            html += '<option value="__loc_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        var allBagianData = @json($bagian_list);
        var allDepartemenData = @json($department_list);

        function initSelect2Bagian() {
            $('.bagian-select').each(function() {
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    var $sel = $(this);
                    var currentVal = $sel.val();

                    var history = getHistory('trreqs_history_bagian_id');
                    // Jika sudah ada yang dipilih atau ada history, tampilkan mode compact
                    if ((currentVal && currentVal !== '' && currentVal !== '__other__') || history.length > 0) {
                        buildCompactOptions($sel, currentVal);
                    }

                    $sel.select2({
                        placeholder: 'Cari bagian/ruangan...',
                        allowClear: false,
                        width: '100%'
                    }).on('change', function() {
                        var val = $(this).val();
                        if (val === '__other__') {
                            // Klik Lainnya → tampilkan semua opsi dan buka ulang
                            var $this = $(this);
                            $this.select2('destroy');
                            buildAllOptions($this, '');
                            $this.select2({
                                placeholder: 'Cari bagian/ruangan...',
                                allowClear: false,
                                width: '100%'
                            }).on('change', handleBagianChange);
                            $this.select2('open');
                        } else if (val) {
                            // Pilihan valid → simpan & compact
                            sessionStorage.setItem('trreqs_last_bagian_id', val);
                            addToHistory('trreqs_history_bagian_id', val);
                            var $this = $(this);
                            $this.select2('destroy');
                            buildCompactOptions($this, val);
                            $this.select2({
                                placeholder: 'Cari bagian/ruangan...',
                                allowClear: false,
                                width: '100%'
                            }).on('change', handleBagianChange);
                        }
                    });

                    // Simpan handler agar bisa dipasang ulang
                    $sel.off('change').on('change', handleBagianChange);
                }
            });
        }

        function handleBagianChange() {
            var val = $(this).val();
            if (val === '__other__') {
                var $this = $(this);
                $this.select2('destroy');
                buildAllOptions($this, '');
                $this.select2({
                    placeholder: 'Cari bagian/ruangan...',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleBagianChange);
                $this.select2('open');
            } else if (val) {
                sessionStorage.setItem('trreqs_last_bagian_id', val);
                addToHistory('trreqs_history_bagian_id', val);
                var $this = $(this);
                var name = $this.attr('name');
                $this.select2('destroy');
                buildCompactOptions($this, val);
                $this.select2({
                    placeholder: 'Cari bagian/ruangan...',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleBagianChange);
            }
        }

        // Mode compact: tampilkan history terpilih + Lainnya
        function buildCompactOptions($sel, selectedId) {
            var history = getHistory('trreqs_history_bagian_id');
            if (selectedId && selectedId !== '__other__' && history.indexOf(selectedId.toString()) === -1) {
                history.unshift(selectedId.toString());
            }

            var html = '<option value="">Pilih Bagian/Ruangan</option>';
            history.forEach(function(hId) {
                var item = allBagianData.find(function(b) {
                    return b.bagian_id == hId;
                });
                if (item) {
                    var sel = (item.bagian_id == selectedId) ? ' selected' : '';
                    html += '<option value="' + item.bagian_id + '"' + sel + '>' + item.bagian_name + '</option>';
                }
            });
            html += '<option value="__other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        // Mode expanded: tampilkan semua opsi
        function buildAllOptions($sel, selectedId) {
            var lastBagianId = sessionStorage.getItem('trreqs_last_bagian_id');
            var html = '<option value="">Pilih Bagian/Ruangan</option>';

            // Urutkan: terakhir dipilih di atas
            var sorted = allBagianData.slice();
            if (lastBagianId) {
                sorted.sort(function(a, b) {
                    if (a.bagian_id == lastBagianId) return -1;
                    if (b.bagian_id == lastBagianId) return 1;
                    return 0;
                });
            }

            sorted.forEach(function(b) {
                var sel = (b.bagian_id == selectedId) ? ' selected' : '';
                html += '<option value="' + b.bagian_id + '"' + sel + '>' + b.bagian_name + '</option>';
            });
            html += '<option value="__other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        function buildCompactDepartemenOptions($sel, selectedId) {
            var history = getHistory('trreqs_history_departemen_id');
            if (selectedId && selectedId !== '__dept_other__' && selectedId !== '' && history.indexOf(selectedId
                    .toString()) === -1) {
                history.unshift(selectedId.toString());
            }

            var html = '<option value="">Pilih Departemen</option>';
            history.forEach(function(hId) {
                var item = allDepartemenData.find(function(b) {
                    return b.department_id == hId;
                });
                if (item) {
                    var sel = (item.department_id == selectedId) ? ' selected' : '';
                    html += '<option value="' + item.department_id + '"' + sel + '>' + item.department_name +
                        '</option>';
                }
            });
            html += '<option value="__dept_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        function buildAllDepartemenOptions($sel, selectedId) {
            var lastDeptId = sessionStorage.getItem('trreqs_last_departemen_id');
            var html = '<option value="">Pilih Departemen</option>';

            var sorted = allDepartemenData.slice();
            if (lastDeptId && lastDeptId !== '') {
                sorted.sort(function(a, b) {
                    if (a.department_id == lastDeptId) return -1;
                    if (b.department_id == lastDeptId) return 1;
                    return 0;
                });
            }

            sorted.forEach(function(b) {
                var sel = (b.department_id == selectedId) ? ' selected' : '';
                html += '<option value="' + b.department_id + '"' + sel + '>' + b.department_name + '</option>';
            });
            html += '<option value="__dept_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';
            $sel.html(html);
        }

        function initSelect2Departemen() {
            $('.dept-select-bagian').each(function() {
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    var $sel = $(this);
                    var currentVal = $sel.val();
                    var history = getHistory('trreqs_history_departemen_id');

                    if (currentVal && currentVal !== '' && currentVal !== '__dept_other__') {
                        buildCompactDepartemenOptions($sel, currentVal);
                    } else if (history.length > 0) {
                        buildCompactDepartemenOptions($sel, currentVal);
                    }

                    $sel.select2({
                        placeholder: 'Cari departemen...',
                        allowClear: false,
                        width: '100%'
                    }).on('change', handleDepartemenChange);

                    $sel.off('change').on('change', handleDepartemenChange);
                }
            });
        }

        function handleDepartemenChange() {
            var val = $(this).val();
            if (val === '__dept_other__') {
                var $this = $(this);
                $this.select2('destroy');
                buildAllDepartemenOptions($this, '');
                $this.select2({
                    placeholder: 'Pilih Departemen',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleDepartemenChange);
                $this.select2('open');
            } else if (val && val !== '') {
                sessionStorage.setItem('trreqs_last_departemen_id', val);
                addToHistory('trreqs_history_departemen_id', val);
                var $this = $(this);
                $this.select2('destroy');
                buildCompactDepartemenOptions($this, val);
                $this.select2({
                    placeholder: 'Pilih Departemen',
                    allowClear: false,
                    width: '100%'
                }).on('change', handleDepartemenChange);
            }
        }

        // Toggle antara Karyawan dan Bagian
        function toggleUserType(selectEl, index) {
            const row = document.querySelector(
                'tr[data-index="' + index + '"]'
            );

            if (!row) {
                return;
            }

            const panelsKaryawan = row.querySelectorAll('.panel-karyawan');
            const panelsBagian = row.querySelectorAll('.panel-bagian');

            // Input untuk tipe karyawan
            const userNameVal = row.querySelector('.user-name-val');
            const userNameDisplay = row.querySelector('.user-name-display');
            const deptDisplay = row.querySelector('.dept-display');
            const karyawanBagianId = row.querySelector('.karyawan-bagian-id');
            const karyawanDepartemenId = row.querySelector(
                '.karyawan-departemen-id'
            );

            // Input untuk tipe bagian
            const bagianSelect = $(row).find('.bagian-select');
            const deptSelectBagian = $(row).find('.dept-select-bagian');

            if (selectEl.value === 'karyawan') {
                /*
                |--------------------------------------------------------------------------
                | Tipe Karyawan
                |--------------------------------------------------------------------------
                */

                panelsKaryawan.forEach(function(el) {
                    el.style.display = '';
                });

                panelsBagian.forEach(function(el) {
                    el.style.display = 'none';
                });

                // Input karyawan diaktifkan agar ikut terkirim
                if (userNameVal) {
                    userNameVal.disabled = false;
                }

                if (karyawanBagianId) {
                    karyawanBagianId.disabled = false;
                }

                if (karyawanDepartemenId) {
                    karyawanDepartemenId.disabled = false;
                }

                // Select bagian tidak ikut terkirim
                if (bagianSelect.length) {
                    bagianSelect.prop('disabled', true);

                    if (bagianSelect.hasClass('select2-hidden-accessible')) {
                        bagianSelect.val('').trigger('change');
                    } else {
                        bagianSelect.val('');
                    }
                }

                if (deptSelectBagian.length) {
                    deptSelectBagian.prop('disabled', true);

                    if (deptSelectBagian.hasClass('select2-hidden-accessible')) {
                        deptSelectBagian.val('').trigger('change');
                    } else {
                        deptSelectBagian.val('');
                    }
                }

            } else {
                /*
                |--------------------------------------------------------------------------
                | Tipe Bagian/Ruangan
                |--------------------------------------------------------------------------
                */

                panelsKaryawan.forEach(function(el) {
                    el.style.display = 'none';
                });

                panelsBagian.forEach(function(el) {
                    el.style.display = '';
                });

                // Input karyawan tidak ikut terkirim
                if (userNameVal) {
                    userNameVal.value = '';
                    userNameVal.disabled = true;
                }

                if (userNameDisplay) {
                    userNameDisplay.value = '';
                }

                if (deptDisplay) {
                    deptDisplay.value = '';
                }

                if (karyawanBagianId) {
                    karyawanBagianId.value = '';
                    karyawanBagianId.disabled = true;
                }

                if (karyawanDepartemenId) {
                    karyawanDepartemenId.value = '';
                    karyawanDepartemenId.disabled = true;
                }

                // Select bagian diaktifkan agar ikut terkirim
                if (bagianSelect.length) {
                    bagianSelect.prop('disabled', false);
                }

                if (deptSelectBagian.length) {
                    deptSelectBagian.prop('disabled', false);
                }
            }
        }

        // Buka modal pilih karyawan untuk baris tertentu
        function openKaryawanModal(index) {
            activeRowIndex = index;
            $('#karyawanModal').modal('show');
        }

        // Pilih karyawan dari modal  set ke baris yg aktif
        function selectKaryawan(
            nik,
            nama,
            departemenId,
            departemenName,
            bagianId
        ) {
            if (activeRowIndex !== null) {
                const row = document.querySelector(
                    'tr[data-index="' + activeRowIndex + '"]'
                );

                if (row) {
                    const userNameVal = row.querySelector('.user-name-val');
                    const userNameDisplay = row.querySelector('.user-name-display');
                    const deptDisplay = row.querySelector('.dept-display');
                    const departemenHidden = row.querySelector('.karyawan-departemen-id');
                    const bagianHidden = row.querySelector('.karyawan-bagian-id');

                    if (userNameVal) {
                        userNameVal.value = nik || '';
                    }

                    if (userNameDisplay) {
                        userNameDisplay.value = nama || '';
                    }

                    if (deptDisplay) {
                        deptDisplay.value = departemenName || '';
                    }

                    if (departemenHidden) {
                        departemenHidden.value = departemenId || '';
                    }

                    if (bagianHidden) {
                        bagianHidden.value = bagianId || '';
                    }
                }
            }

            $('#karyawanModal').modal('hide');
        }

        // Ketika lokasi berubah  isi area otomatis dari data-area attribute
        function onLocationChange(selectEl, index) {
            const row = document.querySelector('tr[data-index="' + index + '"]');
            const selectedOption = selectEl.options[selectEl.selectedIndex];
            const areaId = selectedOption.getAttribute('data-area') || '';
            row.querySelector('.area-input').value = areaId;
        }

        // Tambah baris baru (copy data terakhir)
        function addRow() {
            var today = '{{ now()->format('Y-m-d') }}';
            var locationData = @json($location_list);
            var bagianData = @json($bagian_list);
            var departemenData = @json($department_list);

            // Ambil data dari row terakhir
            var lastRow = document.querySelector('.request-row:last-child');
            var lastUserType = 'karyawan';
            var lastBagianId = '';
            var lastLocationId = '';
            var lastUserName = '';
            var lastUserNameDisplay = '';
            var lastDepartemenId = '';
            var lastDepartemenName = '';
            var lastKaryawanBagianId = '';
            var lastKaryawanDepartemenId = '';

            if (lastRow) {
                var lastTypeSelect = lastRow.querySelector('.user-type-select');
                if (lastTypeSelect) lastUserType = lastTypeSelect.value;

                if (lastUserType === 'bagian') {
                    var lastBagianSelect = $(lastRow).find('.bagian-select');
                    if (lastBagianSelect.length) lastBagianId = lastBagianSelect.val() || '';
                    var lastDeptSelect = $(lastRow).find('.dept-select-bagian');
                    if (lastDeptSelect.length) lastDepartemenId = lastDeptSelect.val() || '';
                } else {
                    lastUserName = lastRow.querySelector('.user-name-val') ?
                        lastRow.querySelector('.user-name-val').value :
                        '';

                    lastUserNameDisplay = lastRow.querySelector('.user-name-display') ?
                        lastRow.querySelector('.user-name-display').value :
                        '';

                    var hiddenBagian = lastRow.querySelector('.karyawan-bagian-id');
                    lastKaryawanBagianId = hiddenBagian ?
                        hiddenBagian.value :
                        '';

                    var hiddenDepartemen = lastRow.querySelector('.karyawan-departemen-id');
                    lastKaryawanDepartemenId = hiddenDepartemen ?
                        hiddenDepartemen.value :
                        '';

                    var lastDeptDisplay = lastRow.querySelector('.dept-display');
                    lastDepartemenName = lastDeptDisplay ?
                        lastDeptDisplay.value :
                        '';
                }

                // Ambil lokasi terakhir
                var lastLocSelect = $(lastRow).find('.loc2-select');
                if (lastLocSelect.length) lastLocationId = lastLocSelect.val() || '';
            }

            // Simpan ke sessionStorage
            sessionStorage.setItem('trreqs_last_user_type', lastUserType);
            if (lastUserType === 'bagian' && lastBagianId) {
                sessionStorage.setItem('trreqs_last_bagian_id', lastBagianId);
            }
            if (lastUserType === 'bagian' && lastDepartemenId) {
                sessionStorage.setItem('trreqs_last_departemen_id', lastDepartemenId);
            }
            if (lastLocationId) {
                sessionStorage.setItem('trreqs_last_location_id', lastLocationId);
            }

            var locationOptions = '<option value="">Pilih Lokasi</option>';
            // Urutkan: terakhir dipilih di atas
            var sortedLoc = locationData.slice();
            if (lastLocationId) {
                sortedLoc.sort(function(a, b) {
                    if (a.location_id == lastLocationId) return -1;
                    if (b.location_id == lastLocationId) return 1;
                    return 0;
                });
            }
            sortedLoc.forEach(function(loc) {
                var selected = (loc.location_id == lastLocationId) ? ' selected' : '';
                locationOptions += '<option value="' + loc.location_id + '" data-area="' + loc.area_id + '"' +
                    selected + '>' + loc
                    .location_name + '</option>';
            });
            locationOptions +=
                '<option value="__loc_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';

            var departemenOptions = '<option value="">Pilih Departemen</option>';
            departemenData.forEach(function(d) {
                var selected = (lastUserType === 'bagian' && d.department_id == lastDepartemenId) ? ' selected' :
                    '';
                departemenOptions += '<option value="' + d.department_id + '"' + selected + '>' + d
                    .department_name + '</option>';
            });
            departemenOptions +=
                '<option value="__dept_other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';

            var bagianOptions = '<option value="">Pilih Bagian/Ruangan</option>';
            // Urutkan: terakhir dipilih di atas
            var sortedBagian = bagianData.slice();
            if (lastBagianId) {
                sortedBagian.sort(function(a, b) {
                    if (a.bagian_id == lastBagianId) return -1;
                    if (b.bagian_id == lastBagianId) return 1;
                    return 0;
                });
            }
            sortedBagian.forEach(function(b) {
                var selected = (lastUserType === 'bagian' && b.bagian_id == lastBagianId) ? ' selected' : '';
                bagianOptions += '<option value="' + b.bagian_id + '"' + selected + '>' + b.bagian_name +
                    '</option>';
            });
            bagianOptions += '<option value="__other__" style="color:#888; font-style:italic;">── Lainnya ──</option>';

            var karyawanSelected = (lastUserType === 'karyawan') ? ' selected' : '';
            var bagianSelected = (lastUserType === 'bagian') ? ' selected' : '';
            var panelKaryawanDisplay = (lastUserType === 'karyawan') ? '' : 'display:none;';
            var panelBagianDisplay = (lastUserType === 'bagian') ? '' : 'display:none;';

            var newRow = '<tr class="request-row" data-index="' + rowIndex + '">' +
                '<td class="text-center text-sm row-number" data-label="No"></td>' +
                '<td data-label="Tipe">' +
                '<select name="rows[' + rowIndex +
                '][user_type]" class="form-select form-select-sm user-type-select" onchange="toggleUserType(this, ' +
                rowIndex + ')">' +
                '<option value="karyawan"' + karyawanSelected + '>Karyawan</option>' +
                '<option value="bagian"' + bagianSelected + '>Bagian/Ruangan</option>' +
                '</select>' +
                '</td>' +
                '<td data-label="Penerima / Bagian">' +
                '<div class="panel-karyawan" style="' + panelKaryawanDisplay + '">' +

                '<input type="hidden" ' +
                'name="rows[' + rowIndex + '][bagian_id]" ' +
                'class="karyawan-bagian-id" ' +
                'value="' + lastKaryawanBagianId + '">' +

                '<input type="hidden" ' +
                'name="rows[' + rowIndex + '][departemen_id]" ' +
                'class="karyawan-departemen-id" ' +
                'value="' + lastKaryawanDepartemenId + '">' +

                '<div class="input-group input-group-sm user-picker">' +

                '<input type="hidden" ' +
                'name="rows[' + rowIndex + '][user_name]" ' +
                'class="user-name-val" ' +
                'value="' + lastUserName + '">' +
                '<input type="text" class="form-control form-control-sm user-name-display" readonly placeholder="Pilih karyawan..." value="' +
                lastUserNameDisplay + '">' +
                '<span class="input-group-text bg-primary text-light" style="cursor:pointer;" onclick="openKaryawanModal(' +
                rowIndex + ')">' +
                '<i class="fas fa-search"></i>' +
                '</span>' +
                '</div>' +
                '</div>' +
                '<div class="panel-bagian" style="' + panelBagianDisplay + '">' +
                '<select name="rows[' + rowIndex + '][bagian_id]" class="form-select form-select-sm bagian-select">' +
                bagianOptions +
                '</select>' +
                '</div>' +
                '</td>' +
                '<td data-label="Departemen">' +
                '<div class="panel-karyawan" style="' + panelKaryawanDisplay + '">' +
                '<input type="text" class="form-control form-control-sm dept-display" readonly style="background-color: #e9ecef;" placeholder="-" value="' +
                (lastUserType === 'karyawan' ? lastDepartemenName : '') + '">' +
                '</div>' +
                '<div class="panel-bagian" style="' + panelBagianDisplay + '">' +
                '<select name="rows[' + rowIndex +
                '][departemen_id]" class="form-select form-select-sm dept-select-bagian">' +
                departemenOptions +
                '</select>' +
                '</div>' +
                '</td>' +
                '<td data-label="Lokasi">' +
                '<select name="rows[' + rowIndex + '][user_location2]" class="form-select form-select-sm loc2-select">' +
                locationOptions +
                '</select>' +
                '</td>' +
                '<td data-label="Area">' +
                '<input type="text" name="rows[' + rowIndex +
                '][user_location]" class="form-control form-control-sm area-input" readonly style="background-color: #e9ecef;" placeholder="Otomatis">' +
                '</td>' +
                '<td data-label="qty">' +
                '<input type="number" name="rows[' + rowIndex +
                '][request_qty]" class="form-control form-control-sm" rows="1" placeholder="qty"></textarea>' +
                '</td>' +
                '<td data-label="Deskripsi">' +
                '<textarea name="rows[' + rowIndex +
                '][request_desc]" class="form-control form-control-sm" rows="1" placeholder="Deskripsi pengajuan..."></textarea>' +
                '</td>' +
                '<td class="d-none">' +
                '<input type="hidden" name="rows[' + rowIndex + '][tanggal]" value="' + today + '">' +
                '</td>' +
                '<td class="text-center td-aksi" data-label="Aksi">' +
                '<button type="button" class="btn btn-sm btn-danger mb-0 px-2 py-1" onclick="removeRow(this)" title="Hapus baris">' +
                '<i class="fas fa-trash"></i>' +
                '</button>' +
                '</td>' +
                '</tr>';

            document.getElementById('rows-container').insertAdjacentHTML('beforeend', newRow);
            var newRowEl = document.querySelector(
                'tr[data-index="' + rowIndex + '"]'
            );

            if (newRowEl) {
                var userTypeSelect = newRowEl.querySelector('.user-type-select');

                if (userTypeSelect) {
                    toggleUserType(userTypeSelect, rowIndex);
                }
            }
            initSelect2Location();
            initSelect2Bagian();
            initSelect2Departemen();

            // Set area otomatis jika lokasi sudah terpilih
            if (lastLocationId) {
                var newRowEl = document.querySelector('tr[data-index="' + rowIndex + '"]');
                if (newRowEl) {
                    var locItem = locationData.find(function(l) {
                        return l.location_id == lastLocationId;
                    });
                    if (locItem) {
                        newRowEl.querySelector('.area-input').value = locItem.area_id || '';
                    }
                }
            }

            rowIndex++;
            updateRowNumbers();
            updateDeleteButtons();
        }

        // Hapus baris
        function removeRow(btn) {
            var rows = document.querySelectorAll('.request-row');
            if (rows.length <= 1) {
                Swal.fire({
                    title: 'Peringatan',
                    text: 'Minimal harus ada 1 baris pengajuan!',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            var row = btn.closest('tr');
            $(row).find('.loc2-select').select2('destroy');
            var bagianSel = $(row).find('.bagian-select');
            if (bagianSel.hasClass('select2-hidden-accessible')) bagianSel.select2('destroy');
            var deptSel = $(row).find('.dept-select-bagian');
            if (deptSel.hasClass('select2-hidden-accessible')) deptSel.select2('destroy');
            row.remove();
            updateRowNumbers();
            updateDeleteButtons();
        }

        // Update nomor urut baris
        function updateRowNumbers() {
            document.querySelectorAll('.request-row').forEach(function(row, idx) {
                row.querySelector('.row-number').textContent = idx + 1;
            });
        }

        // Update status tombol delete (disable jika hanya 1 baris)
        function updateDeleteButtons() {
            var rows = document.querySelectorAll('.request-row');
            rows.forEach(function(row) {
                var btn = row.querySelector('.btn-danger');
                if (btn) {
                    btn.disabled = rows.length <= 1;
                }
            });
        }

        // Reset form ke kondisi awal (1 baris kosong)
        function resetForm() {
            // Hapus sessionStorage agar mulai dari awal
            sessionStorage.removeItem('trreqs_last_user_type');
            sessionStorage.removeItem('trreqs_last_bagian_id');
            sessionStorage.removeItem('trreqs_last_location_id');
            sessionStorage.removeItem('trreqs_history_bagian_id');
            sessionStorage.removeItem('trreqs_history_location_id');
            sessionStorage.removeItem('trreqs_last_user_name');
            sessionStorage.removeItem('trreqs_last_user_name_display');
            sessionStorage.removeItem('trreqs_last_departemen_id');
            sessionStorage.removeItem('trreqs_history_departemen_id');

            // Destroy Select2 sebelum menghapus baris
            $('.loc2-select').select2('destroy');
            $('.bagian-select').each(function() {
                if ($(this).hasClass('select2-hidden-accessible')) $(this).select2('destroy');
            });
            $('.dept-select-bagian').each(function() {
                if ($(this).hasClass('select2-hidden-accessible')) $(this).select2('destroy');
            });

            var rows = document.querySelectorAll('.request-row');
            rows.forEach(function(row, idx) {
                if (idx > 0) row.remove();
            });

            var firstRow = document.querySelector('.request-row');
            if (firstRow) {
                firstRow.querySelector('.user-type-select').value = 'karyawan';
                firstRow.querySelectorAll('.panel-karyawan').forEach(function(el) {
                    el.style.display = '';
                });
                firstRow.querySelectorAll('.panel-bagian').forEach(function(el) {
                    el.style.display = 'none';
                });
                firstRow.querySelector('.user-name-val').value = '';
                firstRow.querySelector('.user-name-display').value = '';
                var deptDisplay = firstRow.querySelector('.dept-display');
                if (deptDisplay) deptDisplay.value = '';
                var deptSelectBagian = $(firstRow).find('.dept-select-bagian');
                if (deptSelectBagian.hasClass('select2-hidden-accessible')) {
                    deptSelectBagian.val('').trigger('change');
                } else if (deptSelectBagian.length) {
                    deptSelectBagian.val('');
                }
                firstRow.querySelector('.loc2-select').value = '';
                firstRow.querySelector('.area-input').value = '';
                firstRow.querySelector('textarea').value = '';

                // Rebuild bagian dropdown ke semua opsi (tanpa compact)
                var $bagianSel = $(firstRow).find('.bagian-select');
                buildAllOptions($bagianSel, '');

                // Rebuild lokasi dropdown ke semua opsi (tanpa compact)
                var $locSel = $(firstRow).find('.loc2-select');
                buildAllLocationOptions($locSel, '');

                // Rebuild departemen dropdown ke semua opsi (tanpa compact)
                var $deptSel = $(firstRow).find('.dept-select-bagian');
                buildAllDepartemenOptions($deptSel, '');
            }

            rowIndex = 1;
            updateRowNumbers();
            updateDeleteButtons();

            // Re-inisialisasi Select2
            initSelect2Location();
            initSelect2Bagian();
            initSelect2Departemen();
        }

        // Submit form dengan validasi dan spinner
        function submitFormWithSpinner(event) {
            event.preventDefault();

            var valid = true;
            var firstError = '';

            document.querySelectorAll('.request-row').forEach(function(row, idx) {
                var userTypeSelect = row.querySelector('.user-type-select');
                var userType = userTypeSelect ? userTypeSelect.value : '';

                var location2 = $(row).find('.loc2-select').val();
                var areaInput = row.querySelector('.area-input');
                var descInput = row.querySelector('textarea');
                var tanggalInput = row.querySelector(
                    'input[type="hidden"][name*="[tanggal]"]'
                );

                var area = areaInput ? areaInput.value : '';
                var desc = descInput ? descInput.value.trim() : '';
                var tanggal = tanggalInput ? tanggalInput.value : '';

                /*
                |--------------------------------------------------------------------------
                | Validasi berdasarkan tipe penerima
                |--------------------------------------------------------------------------
                */
                if (userType === 'karyawan') {
                    var userNameInput = row.querySelector('.user-name-val');
                    var bagianKaryawanInput = row.querySelector('.karyawan-bagian-id');
                    var departemenKaryawanInput = row.querySelector(
                        '.karyawan-departemen-id'
                    );

                    var userName = userNameInput ? userNameInput.value : '';
                    var bagianKaryawanId = bagianKaryawanInput ?
                        bagianKaryawanInput.value :
                        '';
                    var departemenKaryawanId = departemenKaryawanInput ?
                        departemenKaryawanInput.value :
                        '';

                    if (!userName) {
                        valid = false;

                        if (!firstError) {
                            firstError =
                                'Baris ke-' + (idx + 1) +
                                ': Nama karyawan harus dipilih!';
                        }
                    } else if (!departemenKaryawanId) {
                        valid = false;

                        if (!firstError) {
                            firstError =
                                'Baris ke-' + (idx + 1) +
                                ': Departemen karyawan tidak ditemukan!';
                        }
                    } else if (!bagianKaryawanId) {
                        valid = false;

                        if (!firstError) {
                            firstError =
                                'Baris ke-' + (idx + 1) +
                                ': Bagian karyawan tidak ditemukan!';
                        }
                    }
                } else {
                    var bagianId = $(row).find('.bagian-select').val();
                    var departemenId = $(row).find('.dept-select-bagian').val();

                    if (!bagianId || bagianId === '__other__') {
                        valid = false;

                        if (!firstError) {
                            firstError =
                                'Baris ke-' + (idx + 1) +
                                ': Bagian/Ruangan harus dipilih!';
                        }
                    } else if (!departemenId || departemenId === '__dept_other__') {
                        valid = false;

                        if (!firstError) {
                            firstError =
                                'Baris ke-' + (idx + 1) +
                                ': Departemen harus dipilih!';
                        }
                    }
                }

                /*
                |--------------------------------------------------------------------------
                | Validasi kolom umum
                |--------------------------------------------------------------------------
                */
                if (
                    !location2 ||
                    location2 === '__loc_other__' ||
                    !area ||
                    !desc ||
                    !tanggal
                ) {
                    valid = false;

                    if (!firstError) {
                        firstError =
                            'Baris ke-' + (idx + 1) +
                            ': Semua kolom harus diisi!';
                    }
                }
            });

            if (!valid) {
                Swal.fire({
                    title: 'Data Belum Lengkap',
                    text: firstError,
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });

                return;
            }

            var btn = document.getElementById('btnSimpan');
            var icon = document.getElementById('icon-simpan');
            var text = document.getElementById('text-simpan');

            if (btn) {
                btn.disabled = true;
            }

            if (icon) {
                icon.className = 'fas fa-spinner fa-spin me-1';
            }

            if (text) {
                text.textContent = 'Menyimpan...';
            }

            /*
            |--------------------------------------------------------------------------
            | Simpan data baris terakhir ke sessionStorage
            |--------------------------------------------------------------------------
            */
            var lastRow = document.querySelector('.request-row:last-child');

            if (lastRow) {
                var lastTypeSelect = lastRow.querySelector('.user-type-select');
                var lastType = lastTypeSelect ?
                    lastTypeSelect.value :
                    'karyawan';

                sessionStorage.setItem(
                    'trreqs_last_user_type',
                    lastType
                );

                if (lastType === 'bagian') {
                    var lastBagian = $(lastRow).find('.bagian-select').val();
                    var lastDepartemen = $(lastRow)
                        .find('.dept-select-bagian')
                        .val();

                    sessionStorage.setItem(
                        'trreqs_last_bagian_id',
                        lastBagian || ''
                    );

                    sessionStorage.setItem(
                        'trreqs_last_departemen_id',
                        lastDepartemen || ''
                    );

                    sessionStorage.removeItem('trreqs_last_user_name');
                    sessionStorage.removeItem(
                        'trreqs_last_user_name_display'
                    );

                    sessionStorage.removeItem(
                        'trreqs_last_karyawan_bagian_id'
                    );
                } else {
                    var userNameInput = lastRow.querySelector('.user-name-val');
                    var userDisplayInput = lastRow.querySelector(
                        '.user-name-display'
                    );
                    var karyawanBagianInput = lastRow.querySelector(
                        '.karyawan-bagian-id'
                    );
                    var karyawanDepartemenInput = lastRow.querySelector(
                        '.karyawan-departemen-id'
                    );

                    sessionStorage.setItem(
                        'trreqs_last_user_name',
                        userNameInput ? userNameInput.value : ''
                    );

                    sessionStorage.setItem(
                        'trreqs_last_user_name_display',
                        userDisplayInput ? userDisplayInput.value : ''
                    );

                    sessionStorage.setItem(
                        'trreqs_last_departemen_id',
                        karyawanDepartemenInput ?
                        karyawanDepartemenInput.value :
                        ''
                    );

                    sessionStorage.setItem(
                        'trreqs_last_karyawan_bagian_id',
                        karyawanBagianInput ?
                        karyawanBagianInput.value :
                        ''
                    );

                    sessionStorage.removeItem(
                        'trreqs_last_bagian_id'
                    );
                }

                /*
                |--------------------------------------------------------------------------
                | Simpan lokasi terakhir
                |--------------------------------------------------------------------------
                */
                var lastLoc = $(lastRow).find('.loc2-select').val();

                if (lastLoc) {
                    sessionStorage.setItem(
                        'trreqs_last_location_id',
                        lastLoc
                    );
                } else {
                    sessionStorage.removeItem(
                        'trreqs_last_location_id'
                    );
                }
            }

            var form = document.getElementById('{{ $dmenu }}-form');

            if (form) {
                form.submit();
            }
        }
    </script>
    <style>
        .user-picker {
            border: 1px solid #ced4da;
            border-radius: 6px;
            overflow: hidden;
        }

        .user-picker .form-control,
        .user-picker .btn {
            border: 0 !important;
            border-radius: 0 !important;
            height: 31px;
        }

        .user-picker .form-control {
            box-shadow: none !important;
        }

        .user-picker .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            border-left: 1px solid rgba(255, 255, 255, .35);
        }

        .user-picker .user-name-display {
            padding-left: 12px !important;
        }

        .loc2-select+.select2-container {
            width: 100% !important;
        }

        .loc2-select+.select2-container .select2-selection--single,
        .bagian-select+.select2-container .select2-selection--single,
        .dept-select-bagian+.select2-container .select2-selection--single {
            height: 22px !important;
            min-height: 22px !important;
            border-radius: .3rem !important;
        }

        .loc2-select+.select2-container .select2-selection__rendered,
        .bagian-select+.select2-container .select2-selection__rendered,
        .dept-select-bagian+.select2-container .select2-selection__rendered {
            line-height: 22px !important;
            padding-left: 22px !important;
            padding-right: 22px !important;
        }

        .loc2-select+.select2-container .select2-selection__arrow,
        .bagian-select+.select2-container .select2-selection__arrow,
        .dept-select-bagian+.select2-container .select2-selection__arrow {
            height: 22px !important;
        }

        /* ===== TABLE STYLING ===== */
        #tbl-rows {
            width: 100%;
            border-collapse: collapse;
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: none !important;
        }

        /* Header sticky */
        #tbl-rows thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: #e6f7f7;
        }

        #tbl-rows td,
        #tbl-rows th {
            vertical-align: middle;
            padding: 8px 10px;
        }

        /* Hapus border default */
        #tbl-rows,
        #tbl-rows thead,
        #tbl-rows tbody,
        #tbl-rows tr,
        #tbl-rows td,
        #tbl-rows th {
            border: none !important;
        }

        #tbl-rows .request-row td {
            border-bottom: 1px solid #e9ecef !important;
        }

        #tbl-rows thead tr th {
            border-bottom: 2px solid #00b7bd !important;
        }

        .card-body {
            overflow-x: hidden;
        }
    </style>
@endpush