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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Menambah'])

    {{-- Alert Messages --}}
    @include('components.alert')

    {{-- Action Buttons --}}
    <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 type="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 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>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Form Content --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                {{-- GANTI: Sesuaikan action URL --}}
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="form-add"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            {{-- GANTI: Sesuaikan judul --}}
                            <p class="text-uppercase text-sm">Tambah Permintaan</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                {{-- KOLOM KIRI --}}
                                <div class="col-md-6">
                                    {{-- Nomor Permintaan --}}
                                    <div class="form-group">
                                        <label for="no_permintaan" class="form-control-label">Nomor Permintaan</label>
                                        <input type="text" class="form-control" {{-- <input type="text" class="form-control bg-primary text-white fw-bold border-primary" --}}
                                            name="no_permintaan" id="no_permintaan" readonly value="-">
                                    </div>

                                    {{-- Input Select Values untuk Jabatan --}}
                                    <div class="form-group">
                                        <label for="id_jabatan" class="form-control-label">Posisi yang Dibutuhkan <span
                                                class="text-danger">*</span></label>
                                        <select class="form-control custom-select" name="id_jabatan" id="id_jabatan"
                                            required>
                                            <option value="">-- Pilih Posisi --</option>
                                            {{-- Loop data dari controller --}}
                                            @foreach ($jabatans as $jabatan)
                                                <option value="{{ $jabatan->id }}"
                                                    {{ old('id_jabatan') == $jabatan->id ? 'selected' : '' }}>
                                                    {{ $jabatan->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_jabatan')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="id_alasan" class="form-control-label">Alasan <span
                                                class="text-danger">*</span></label>
                                        <select class="form-control custom-select" name="id_alasan" id="id_alasan" required>
                                            <option value="">-- Pilih Alasan --</option>
                                            {{-- Loop data dari controller --}}
                                            @foreach ($alasans as $alasan)
                                                <option value="{{ $alasan->id }}"
                                                    {{ old('id_alasan') == $alasan->id ? 'selected' : '' }}>
                                                    {{ $alasan->nama }}
                                                </option>
                                            @endforeach
                                            <option value="lain-lain"
                                                {{ old('id_alasan') == 'lain-lain' ? 'selected' : '' }}>
                                                Lain-lain
                                            </option>
                                        </select>
                                        @error('id_alasan')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror

                                        <div id="detail-alasan-wrapper" class="mt-2" style="display: none;">
                                            <textarea class="form-control" name="detail_alasan" id="detail_alasan" rows="1" maxlength="255"
                                                placeholder="Alasan *">{{ old('detail_alasan') }}</textarea>
                                        </div>
                                        @error('detail_alasan')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                {{-- END KOLOM KIRI --}}

                                {{-- KOLOM KANAN --}}
                                <div class="col-md-6">
                                    {{-- Input Nama Karyawan --}}
                                    <div class="form-group">
                                        <label for="nama_karyawan" class="form-control-label">Nama Karyawan yang
                                            Mengajukan <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control mb-0" name="nama_karyawan"
                                                id="nama_karyawan" value="{{ old('nama_karyawan') }}" maxlength="50"
                                                placeholder="Pilih Karyawan" readonly style="background-color:#ffffff"
                                                required>
                                            <input type="hidden" name="nik_karyawan" id="nik_karyawan"
                                                value="{{ old('nik_karyawan') }}">
                                            <button type="button" class="btn btn-primary mt-0 mb-0"
                                                id="btn-search-karyawan" title="Cari Karyawan">
                                                <i class="fas fa-magnifying-glass"></i>
                                            </button>
                                        </div>

                                        @error('nama_karyawan')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                        @error('nik_karyawan')
                                            <small class="text-danger d-block">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Select Bagian & Departemen --}}
                                    <div class="form-group">
                                        <label for="bagian_departemen" class="form-control-label">Ditempatkan di Bagian
                                            <span class="text-danger">*</span></label>
                                        <select class="form-control custom-select" id="bagian_departemen">
                                            <option value="">-- Pilih Bagian --</option>
                                            @foreach ($bagianDepartemen as $item)
                                                @php
                                                    $combinedValue = $item['id_departemen'] . '|' . $item['id_bagian'];
                                                    $oldCombined = old('id_departemen') . '|' . old('id_bagian');
                                                @endphp
                                                <option value="{{ $combinedValue }}"
                                                    {{ $oldCombined === $combinedValue ? 'selected' : '' }}>
                                                    {{ $item['label'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_departemen')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                        @error('id_bagian')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror

                                        {{-- Hidden inputs yang dikirim ke controller --}}
                                        <input type="hidden" name="id_departemen" id="id_departemen"
                                            value="{{ old('id_departemen') }}">
                                        <input type="hidden" name="id_bagian" id="id_bagian"
                                            value="{{ old('id_bagian') }}">
                                    </div>

                                    {{-- Textarea Uraian Pekerjaan --}}
                                    <div class="form-group">
                                        <label for="uraian_pekerjaan" class="form-control-label">Uraian Pekerjaan <span
                                                class="text-danger">*</span></label>
                                        <textarea class="form-control" name="uraian_pekerjaan" id="uraian_pekerjaan" rows="1" required minlength="10"
                                            maxlength="100" placeholder="Isi Uraian Pekerjaan">{{ old('uraian_pekerjaan') }}</textarea>
                                        @error('uraian_pekerjaan')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                {{-- END KOLOM KANAN --}}
                            </div>

                            <div class="form-group mt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="form-control-label">Tanggal dan Jumlah Tenaga Kerja <span
                                            class="text-danger">*</span></label>
                                    <button type="button" id="add-request" class="btn btn-primary">+ Tambah</button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0" id="request-table" style="width: 100%;">
                                        <thead style="background-color: #daecff;">
                                            <tr>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Tanggal</th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Shift 1</th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Shift 2</th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Shift 3</th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Total</th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                    Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                        <tfoot style="background-color: #f8fbff;">
                                            <tr>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center">Total
                                                </th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center"><span
                                                        id="total-shift-1">0</span>
                                                </th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center"><span
                                                        id="total-shift-2">0</span>
                                                </th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center"><span
                                                        id="total-shift-3">0</span>
                                                </th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center"><span
                                                        id="grand-total">0</span>
                                                </th>
                                                <th class="text-uppercase text-sm font-weight-bolder text-center"></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-karyawan" tabindex="-1" aria-labelledby="modal-karyawan-label"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable modal-karyawan-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-karyawan-label">Cari Karyawan</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 class="table table-sm align-items-center mb-0" id="karyawan-table">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th class="text-center mb-0">Aksi</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Bagian</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($karyawans as $karyawan)
                                    <tr data-nik="{{ strtolower($karyawan->nik) }}"
                                        data-nama="{{ strtolower($karyawan->nama) }}"
                                        data-id-departemen="{{ $karyawan->id_departemen }}"
                                        data-id-bagian="{{ $karyawan->id_bagian }}">
                                        <td class="text-center align-middle mb-0">
                                            <button type="button"
                                                class="btn btn-primary btn-sm js-select-karyawan mb-0 px-4 mt-0"
                                                data-nik="{{ $karyawan->nik }}" data-nama="{{ $karyawan->nama }}">
                                                Pilih
                                            </button>
                                        </td>
                                        <td class="align-middle">{{ $karyawan->nik }}</td>
                                        <td class="align-middle">{{ $karyawan->nama }}</td>
                                        <td class="align-middle">{{ $karyawan->departemen->nama ?? '-' }}</td>
                                        <td class="align-middle">{{ $karyawan->bagian->nama ?? '-' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">Data karyawan tidak tersedia.
                                        </td>
                                    </tr>
                                @endforelse
                            </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>

    <style>
        /* Hilangkan highlight DataTables */
        table.dataTable tbody tr>.sorting_1,
        table.dataTable tbody tr>.sorting_2,
        table.dataTable tbody tr>.sorting_3 {
            background-color: transparent !important;
        }

        /* Pastikan row tidak punya background aneh */
        #request-table tbody tr,
        #request-table tbody td {
            background-color: #ffffff !important;
        }

        /* Hilangkan efek focus row */
        #request-table tbody tr:focus,
        #request-table tbody tr:focus-within {
            background-color: #ffffff !important;
            outline: none !important;
        }

        #karyawan-table tbody tr:nth-child(odd),
        #karyawan-table tbody tr:nth-child(odd) td {
            background-color: #f2f2f2;
        }

        #karyawan-table th,
        #karyawan-table td {
            border-right: 1px solid #e0e0e0;
        }

        #karyawan-table th:last-child,
        #karyawan-table td:last-child {
            border-right: none;
        }

        #karyawan-table> :not(caption)>*>* {
            border-bottom: 0;
        }
    </style>

    <script>
        $(document).ready(function() {
            const addRequestButton = document.getElementById('add-request');
            const requestTableEl = document.getElementById('request-table');
            const saveButton = document.getElementById('btn-simpan');
            const formAdd = document.getElementById('form-add');
            const grandTotalEl = document.getElementById('grand-total');
            const totalShift1El = document.getElementById('total-shift-1');
            const totalShift2El = document.getElementById('total-shift-2');
            const totalShift3El = document.getElementById('total-shift-3');
            const namaKaryawanInput = document.getElementById('nama_karyawan');
            const nikKaryawanInput = document.getElementById('nik_karyawan');
            const btnSearchKaryawan = document.getElementById('btn-search-karyawan');
            const modalKaryawanEl = document.getElementById('modal-karyawan');
            const karyawanTableEl = document.getElementById('karyawan-table');
            const selectBagianDep = document.getElementById('bagian_departemen');
            const inputDepartemen = document.getElementById('id_departemen');
            const inputBagian = document.getElementById('id_bagian');
            const alasanSelect = document.getElementById('id_alasan');
            const detailAlasanWrapper = document.getElementById('detail-alasan-wrapper');
            const detailAlasanInput = document.getElementById('detail_alasan');
            const hiddenPermintaanContainer = document.createElement('div');
            let rowKeyCounter = 0;
            let requestDataTable = null;
            let karyawanDataTable = null;
            let customSearchTerm = '';
            let karyawanSearchTerm = '';
            let modalKaryawan = null;
            let lastSelectedDepartemen = '';

            hiddenPermintaanContainer.id = 'permintaan-hidden-inputs';
            hiddenPermintaanContainer.style.display = 'none';
            if (formAdd) {
                formAdd.appendChild(hiddenPermintaanContainer);
            }

            if (modalKaryawanEl && window.bootstrap && bootstrap.Modal) {
                modalKaryawan = new bootstrap.Modal(modalKaryawanEl);
            }

            const getSelectedBagianDepartemen = () => {
                const value = selectBagianDep ? (selectBagianDep.value || '').trim() : '';
                if (!value) {
                    return {
                        idDepartemen: '',
                        idBagian: ''
                    };
                }

                const [idDepartemen = '', idBagian = ''] = value.split('|');
                return {
                    idDepartemen,
                    idBagian
                };
            };

            const clearSelectedKaryawan = () => {
                if (namaKaryawanInput) {
                    namaKaryawanInput.value = '';
                }
                if (nikKaryawanInput) {
                    nikKaryawanInput.value = '';
                }
            };

            const redrawKaryawanTable = () => {
                if (karyawanDataTable) {
                    karyawanDataTable.draw();
                }
            };

            btnSearchKaryawan.addEventListener('click', function() {
                const selectedBagianDepartemen = getSelectedBagianDepartemen();
                if (!selectedBagianDepartemen.idDepartemen) {
                    if (window.Swal) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Pilih bagian dan departemen',
                            text: 'Silahkan memilih bagian dan departemen terlebih dahulu.'
                        });
                    }
                    return;
                }

                if (modalKaryawan) {
                    karyawanSearchTerm = '';
                    modalKaryawan.show();
                    if (karyawanDataTable) {
                        karyawanDataTable.search('').draw();
                        const searchInput = document.querySelector('#karyawan-table_filter input');
                        if (searchInput) {
                            setTimeout(() => searchInput.focus(), 200);
                        }
                    }
                }
            });

            if (karyawanTableEl && $.fn.DataTable) {
                $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                    if (settings.nTable !== karyawanTableEl) {
                        return true;
                    }

                    const {
                        idDepartemen,
                        idBagian
                    } = getSelectedBagianDepartemen();
                    if (!idDepartemen) {
                        return false;
                    }

                    const rowNode = karyawanDataTable ? karyawanDataTable.row(dataIndex).node() : null;
                    if (!rowNode) {
                        return true;
                    }

                    const rowDepartemen = rowNode.getAttribute('data-id-departemen') || '';
                    const searchableText =
                        `${rowNode.getAttribute('data-nik') || ''} ${rowNode.getAttribute('data-nama') || ''}`;

                    return rowDepartemen === idDepartemen &&
                        searchableText.includes(karyawanSearchTerm);
                });

                karyawanDataTable = $(karyawanTableEl).DataTable({
                    paging: true,
                    searching: true,
                    ordering: false,
                    pageLength: 10,
                    lengthChange: true,
                    autoWidth: false,
                    dom: '<"d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2"l f>rt<"d-flex justify-content-between align-items-center flex-wrap gap-2 mt-2"i p>',
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        search: 'Cari:',
                        paginate: {
                            previous: 'Previous',
                            next: 'Next'
                        },
                        zeroRecords: 'Data tidak ditemukan',
                        info: 'Halaman _PAGE_ dari _PAGES_',
                        infoEmpty: 'Tidak ada data'
                    }
                });


                const karyawanSearchInput = document.querySelector('#karyawan-table_filter input');
                if (karyawanSearchInput) {
                    $(karyawanSearchInput).off('.DT');
                    karyawanSearchInput.addEventListener('input', function() {
                        karyawanSearchTerm = this.value.trim().toLowerCase();
                        redrawKaryawanTable();
                    });
                }
                $(karyawanTableEl).on('click', '.js-select-karyawan', function() {
                    const btn = this;
                    const nik = btn.getAttribute('data-nik') || '';
                    const nama = btn.getAttribute('data-nama') || '';
                    namaKaryawanInput.value = nama;
                    nikKaryawanInput.value = nik;
                    namaKaryawanInput.dispatchEvent(new Event('input', {
                        bubbles: true
                    }));

                    if (modalKaryawan) {
                        modalKaryawan.hide();
                    }
                });
            }

            if (selectBagianDep) {
                $(selectBagianDep).on('change', function() {
                    const selectedBagianDepartemen = getSelectedBagianDepartemen();

                    inputDepartemen.value = selectedBagianDepartemen.idDepartemen || '';
                    inputBagian.value = selectedBagianDepartemen.idBagian || '';

                    // reset karyawan setiap ganti bagian/departemen
                    namaKaryawanInput.value = '';
                    nikKaryawanInput.value = '';

                    karyawanSearchTerm = '';

                    const karyawanSearchInput = document.querySelector('#karyawan-table_filter input');
                    if (karyawanSearchInput) {
                        karyawanSearchInput.value = '';
                    }

                    redrawKaryawanTable();
                });
            }

            const toggleDetailAlasan = () => {
                if (!alasanSelect || !detailAlasanWrapper || !detailAlasanInput) {
                    return;
                }

                const selected = (alasanSelect.value || '').trim().toLowerCase();
                const isOther = selected === 'lain-lain';
                detailAlasanWrapper.style.display = isOther ? 'block' : 'none';
                detailAlasanInput.required = isOther;
                if (!isOther) {
                    detailAlasanInput.value = '';
                }
            };

            if (alasanSelect) {
                alasanSelect.addEventListener('change', toggleDetailAlasan);
            }

            $(document).on('change', '#id_alasan', toggleDetailAlasan);

            // Atur lebar kolom manual (persentase)
            const columnWidths = {
                date: '20%',
                shift1: '15%',
                shift2: '15%',
                shift3: '15%',
                total: '15%',
                action: '20%'
            };

            // Old values dan errors dari Laravel
            const oldPermintaan = @json(old('permintaan', []));
            const allErrors = @json($errors->messages());

            // Date range:
            // - jika hari ini < 5: mulai tanggal 1 bulan sebelumnya
            // - jika hari ini >= 5: mulai tanggal 1 bulan ini
            // - maksimal sampai tanggal 14 bulan berikutnya

            // const isBeforeCutoffDay = now.getDate() < 5;
            // const startDate = isBeforeCutoffDay ?
            // new Date(now.getFullYear(), now.getMonth() - 1, 1) :
            // new Date(now.getFullYear(), now.getMonth(), 1);

            // Date range:
            // - jika hari ini tanggal 1 s.d. 20:
            //   boleh input tanggal 21 bulan sebelumnya s.d. tanggal 20 bulan ini
            // - jika hari ini tanggal 21 s.d. akhir bulan:
            //   boleh input tanggal 21 bulan ini s.d. tanggal 20 bulan berikutnya

            const now = new Date();

            let startDate;
            let endDate;

            if (now.getDate() >= 21) {
                // Tanggal 21 ke atas:
                // mulai 21 bulan ini sampai 20 bulan depan
                startDate = new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    21
                );

                endDate = new Date(
                    now.getFullYear(),
                    now.getMonth() + 1,
                    20
                );
            } else {
                // Tanggal 1 sampai 20:
                // mulai 21 bulan kemarin sampai 20 bulan ini
                startDate = new Date(
                    now.getFullYear(),
                    now.getMonth() - 1,
                    21
                );

                endDate = new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    20
                );
            }

            const formatDate = (dateObj) => {
                const y = dateObj.getFullYear();
                const m = String(dateObj.getMonth() + 1).padStart(2, '0');
                const d = String(dateObj.getDate()).padStart(2, '0');
                return `${y}-${m}-${d}`;
            };

            const formatDisplayDate = (isoDate) => {
                if (!isoDate) {
                    return '';
                }

                const parts = isoDate.split('-');
                if (parts.length !== 3) {
                    return isoDate;
                }

                return `${parts[2]}/${parts[1]}/${parts[0]}`;
            };

            const formatIsoDate = (displayDate) => {
                if (!displayDate) {
                    return '';
                }

                const parts = displayDate.split('/');
                if (parts.length !== 3) {
                    return displayDate;
                }

                return `${parts[2]}-${parts[1]}-${parts[0]}`;
            };

            const minDate = startDate;
            const maxDate = endDate;

            const minDateIso = formatDate(startDate);
            const maxDateIso = formatDate(endDate);

            const minDateText = formatDisplayDate(minDateIso);
            const maxDateText = formatDisplayDate(maxDateIso);

            const dateRangeText = `Tanggal hanya boleh antara ${minDateText} s.d. ${maxDateText}`;

            const initDatePickers = (scope = document) => {
                if (!window.flatpickr) {
                    return;
                }

                scope.querySelectorAll('.js-input-date').forEach((input) => {
                    if (input._flatpickr) {
                        return;
                    }

                    flatpickr(input, {
                        dateFormat: 'd/m/Y',
                        allowInput: false,
                        minDate,
                        maxDate,
                        onChange: function(selectedDates, dateStr, instance) {
                            instance.input.value = dateStr || '';
                            const hidden = instance.input.closest('td')?.querySelector(
                                '.js-input-date-hidden');
                            if (hidden) {
                                hidden.value = selectedDates[0] ? instance.formatDate(
                                    selectedDates[0], 'Y-m-d') : '';
                            }
                        },
                        onValueUpdate: function(selectedDates, dateStr, instance) {
                            instance.input.value = dateStr || '';
                            const hidden = instance.input.closest('td')?.querySelector(
                                '.js-input-date-hidden');
                            if (hidden) {
                                hidden.value = selectedDates[0] ? instance.formatDate(
                                    selectedDates[0], 'Y-m-d') : '';
                            }
                        }
                    });
                });
            };

            const syncDatePickerValues = (scope = document) => {
                scope.querySelectorAll('.js-input-date').forEach((input) => {
                    const instance = input._flatpickr;
                    const hidden = input.closest('td')?.querySelector('.js-input-date-hidden');
                    if (!instance) {
                        if (hidden) {
                            hidden.value = formatIsoDate(input.value || '');
                        }
                        return;
                    }

                    const selected = instance.selectedDates && instance.selectedDates[0];
                    if (selected) {
                        const formattedDisplay = instance.formatDate(selected, 'd/m/Y');
                        const formattedIso = instance.formatDate(selected, 'Y-m-d');
                        input.value = formattedDisplay;
                        if (hidden) {
                            hidden.value = formattedIso;
                        }
                        return;
                    }

                    input.value = '';
                    if (hidden) {
                        hidden.value = '';
                    }
                });
            };

            const syncBagianDepartemen = () => {
                if (!selectBagianDep || !inputDepartemen || !inputBagian) {
                    return;
                }

                const selectedBagianDepartemen = getSelectedBagianDepartemen();
                if (selectedBagianDepartemen.idDepartemen && selectedBagianDepartemen.idBagian) {
                    inputDepartemen.value = selectedBagianDepartemen.idDepartemen;
                    inputBagian.value = selectedBagianDepartemen.idBagian;
                } else {
                    inputDepartemen.value = '';
                    inputBagian.value = '';
                }
            };

            // Restore selected option saat ada old value (setelah validasi gagal)
            const oldDep = inputDepartemen ? inputDepartemen.value : '';
            const oldBag = inputBagian ? inputBagian.value : '';
            if (selectBagianDep && oldDep && oldBag) {
                const targetVal = oldDep + '|' + oldBag;
                const matchingOpt = [...selectBagianDep.options].find(o => o.value === targetVal);
                if (matchingOpt) {
                    selectBagianDep.value = targetVal;
                }
            } else if (selectBagianDep && !oldDep && !oldBag && selectBagianDep.options.length === 2) {
                // Jika hanya 1 pilihan (selain default), pilih otomatis
                selectBagianDep.selectedIndex = 1;
                syncBagianDepartemen();
            }

            const syncBeforeSubmit = () => {
                // Pastikan hidden inputs selalu ter-sync sebelum submit
                syncBagianDepartemen();

                // Pastikan nilai tanggal tersimpan sebelum submit
                syncDatePickerValues(requestTableEl);

                // Pastikan index array konsisten sebelum submit
                reindexInputNames();

                // Pastikan data baris di luar DOM tetap terkirim
                rebuildDetachedRowInputs();
            };

            saveButton.addEventListener('click', function() {
                syncBeforeSubmit();

                if (formAdd.checkValidity()) {
                    formAdd.submit();
                } else {
                    formAdd.reportValidity();
                }
            });

            formAdd.addEventListener('submit', function() {
                syncBeforeSubmit();
            });

            const toErrorKey = (name) => name.replace(/\[/g, '.').replace(/\]/g, '');

            const getFieldErrorHtml = (name) => {
                const errorKey = toErrorKey(name);
                if (allErrors && allErrors[errorKey] && allErrors[errorKey][0]) {
                    return `<small class="text-danger d-block mt-1">${allErrors[errorKey][0]}</small>`;
                }
                return '';
            };

            const buildInputCell = (rowIndex, field, type, value = '', min = null, max = null) => {
                const name = `permintaan[${rowIndex}][${field}]`;
                const safeValue = value ?? '';
                const minAttr = type === 'date' && min ? `min="${min}"` : '';
                const maxAttr = type === 'date' && max ? `max="${max}"` : '';
                const alignClass = field === 'date' || field.includes('shift') ? 'text-center' : '';
                const classes =
                    `form-control form-control-sm js-input-${field} ${field.includes('shift') ? 'js-shift-input' : ''} ${alignClass}`;

                if (field === 'date') {
                    return `
            <input type="hidden" class="js-input-date-hidden" name="${name}" value="${safeValue}">
            <input
              type="text"
              class="${classes}"
              value="${formatDisplayDate(safeValue)}"
              style="background-color:#ffffff; font-size:13px;"
              readonly
              required
            >
            ${getFieldErrorHtml(name)}
          `;
                }

                return `
          <input
            type="${type}"
            class="${classes}"
            name="${name}"
            value="${safeValue}"
            ${minAttr}
            ${maxAttr}
            ${field.includes('shift') ? 'min="0" step="1"' : ''}
            ${field.includes('shift') ? 'style="font-size:13px;"' : ''}
            required
          >
          ${getFieldErrorHtml(name)}
        `;
            };

            const buildRowHtml = (rowIndex, data = {}) => {
                const dateVal = data.date || '';
                const firstVal = data.first_shift || '';
                const secondVal = data.second_shift || '';
                const thirdVal = data.third_shift || '';
                const total = (parseInt(firstVal, 10) || 0) + (parseInt(secondVal, 10) || 0) + (parseInt(
                        thirdVal, 10) ||
                    0);
                const rowKey = rowKeyCounter++;

                return `
          <tr data-row-key="${rowKey}">
            <td>${buildInputCell(rowIndex, 'date', 'text', dateVal)}</td>
            <td>${buildInputCell(rowIndex, 'first_shift', 'number', firstVal)}</td>
            <td>${buildInputCell(rowIndex, 'second_shift', 'number', secondVal)}</td>
            <td>${buildInputCell(rowIndex, 'third_shift', 'number', thirdVal)}</td>
            <td>
              <input type="text" class="text-center form-control form-control-sm js-row-total" value="${total}" readonly tabindex="-1">
            </td>
            <td class="text-center align-middle">
              <div class="d-flex justify-content-center align-items-center h-100">
                <button type="button" class="btn btn-danger btn-sm js-delete-row mb-0">
                  <i class="fas fa-trash me-1"></i>Hapus
                </button>
              </div>
            </td>
          </tr>
        `;
            };

            const parseShiftValue = (val) => {
                const num = parseInt(val, 10);
                return Number.isFinite(num) && num > 0 ? num : 0;
            };

            const getDateSearchTokens = (dateValue) => {
                if (!dateValue) {
                    return '';
                }

                if (dateValue.includes('/')) {
                    const parts = dateValue.split('/');
                    if (parts.length === 3) {
                        const day = parts[0];
                        const month = parts[1];
                        const year = parts[2];
                        return [
                            dateValue,
                            `${year}-${month}-${day}`,
                            `${month}/${day}/${year}`,
                            `${day}/${month}/${year}`
                        ].join(' ');
                    }
                }

                const parts = dateValue.split('-');
                if (parts.length === 3) {
                    const year = parts[0];
                    const month = parts[1];
                    const day = parts[2];
                    return [
                        dateValue,
                        `${month}/${day}/${year}`,
                        `${day}/${month}/${year}`
                    ].join(' ');
                }

                return dateValue;
            };

            const updateSingleRowTotal = (rowNode) => {
                const first = parseShiftValue(rowNode.querySelector('.js-input-first_shift')?.value);
                const second = parseShiftValue(rowNode.querySelector('.js-input-second_shift')?.value);
                const third = parseShiftValue(rowNode.querySelector('.js-input-third_shift')?.value);
                const total = first + second + third;
                const totalInput = rowNode.querySelector('.js-row-total');
                if (totalInput) {
                    totalInput.value = total;
                }
                return total;
            };

            const updateGrandTotal = () => {
                if (!requestDataTable) {
                    totalShift1El.textContent = '0';
                    totalShift2El.textContent = '0';
                    totalShift3El.textContent = '0';
                    grandTotalEl.textContent = '0';
                    return;
                }

                let grand = 0;
                let totalShift1 = 0;
                let totalShift2 = 0;
                let totalShift3 = 0;
                requestDataTable.rows().every(function() {
                    const rowNode = this.node();
                    totalShift1 += parseShiftValue(rowNode.querySelector('.js-input-first_shift')
                        ?.value);
                    totalShift2 += parseShiftValue(rowNode.querySelector('.js-input-second_shift')
                        ?.value);
                    totalShift3 += parseShiftValue(rowNode.querySelector('.js-input-third_shift')
                        ?.value);
                    grand += updateSingleRowTotal(rowNode);
                });

                totalShift1El.textContent = totalShift1;
                totalShift2El.textContent = totalShift2;
                totalShift3El.textContent = totalShift3;
                grandTotalEl.textContent = grand;
            };

            const reindexInputNames = () => {
                if (!requestDataTable) {
                    return;
                }

                requestDataTable.rows().every(function(rowIdx) {
                    const rowNode = this.node();
                    rowNode.querySelectorAll('input[name^="permintaan["]').forEach((input) => {
                        input.name = input.name.replace(/permintaan\[\d+\]/,
                            `permintaan[${rowIdx}]`);
                    });
                });
            };

            const rebuildDetachedRowInputs = () => {
                if (!requestDataTable || !hiddenPermintaanContainer) {
                    return;
                }

                hiddenPermintaanContainer.innerHTML = '';

                requestDataTable.rows().every(function(rowIdx) {
                    const rowNode = this.node();
                    if (!rowNode || document.body.contains(rowNode)) {
                        return;
                    }

                    syncDatePickerValues(rowNode);

                    const dateVal = rowNode.querySelector('.js-input-date-hidden')?.value ||
                        formatIsoDate(rowNode.querySelector('.js-input-date')?.value || '');
                    const firstVal = rowNode.querySelector('.js-input-first_shift')?.value || '';
                    const secondVal = rowNode.querySelector('.js-input-second_shift')?.value || '';
                    const thirdVal = rowNode.querySelector('.js-input-third_shift')?.value || '';

                    const addHidden = (name, value) => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = name;
                        input.value = value;
                        hiddenPermintaanContainer.appendChild(input);
                    };

                    addHidden(`permintaan[${rowIdx}][date]`, dateVal);
                    addHidden(`permintaan[${rowIdx}][first_shift]`, firstVal);
                    addHidden(`permintaan[${rowIdx}][second_shift]`, secondVal);
                    addHidden(`permintaan[${rowIdx}][third_shift]`, thirdVal);
                });
            };

            const addRequestRow = (data = {}) => {
                const rowIndex = requestDataTable ? requestDataTable.rows().count() : 0;
                const rowHtml = buildRowHtml(rowIndex, data);

                if (requestDataTable) {
                    requestDataTable.row.add($(rowHtml)).draw(false);
                    reindexInputNames();
                    updateGrandTotal();
                    initDatePickers(requestTableEl);
                } else {
                    $('#request-table tbody').append(rowHtml);
                    updateGrandTotal();
                    initDatePickers(requestTableEl);
                }
            };

            const setupDataTable = () => {
                if (!$.fn.DataTable) {
                    console.error('DataTables plugin tidak ditemukan.');
                    return;
                }

                // Search kustom agar DataTables mencari value input terkini saat redraw.
                $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                    if (!requestDataTable || settings.nTable !== requestTableEl) {
                        return true;
                    }

                    if (!customSearchTerm) {
                        return true;
                    }

                    const rowNode = requestDataTable.row(dataIndex).node();
                    if (!rowNode) {
                        return true;
                    }

                    const dateVal = (rowNode.querySelector('.js-input-date')?.value || '')
                        .toLowerCase();
                    const firstVal = (rowNode.querySelector('.js-input-first_shift')?.value || '')
                        .toLowerCase();
                    const secondVal = (rowNode.querySelector('.js-input-second_shift')?.value || '')
                        .toLowerCase();
                    const thirdVal = (rowNode.querySelector('.js-input-third_shift')?.value || '')
                        .toLowerCase();
                    const dateTokens = getDateSearchTokens(dateVal);

                    const searchableText = `${dateTokens} ${firstVal} ${secondVal} ${thirdVal}`;
                    return searchableText.includes(customSearchTerm);
                });

                requestDataTable = $('#request-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: false,
                    pageLength: 5,
                    lengthChange: false,
                    info: true,
                    autoWidth: false,
                    dom: '<"d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2 request-table-toolbar"<"request-date-range text-muted small">f>rt<"request-table-footer d-flex justify-content-between align-items-center flex-wrap gap-2 mt-2"ip>',
                    language: {
                        search: 'Cari:',
                        paginate: {
                            previous: 'Sebelumnya',
                            next: 'Berikutnya'
                        },
                        zeroRecords: 'Data tidak ditemukan',
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ baris',
                        infoEmpty: 'Tidak ada data'
                    },
                    columnDefs: [{
                        targets: 0,
                        width: columnWidths.date,
                        orderable: false,
                        searchable: true
                    }, {
                        targets: 1,
                        width: columnWidths.shift1,
                        orderable: false,
                        searchable: true
                    }, {
                        targets: 2,
                        width: columnWidths.shift2,
                        orderable: false,
                        searchable: true
                    }, {
                        targets: 3,
                        width: columnWidths.shift3,
                        orderable: false,
                        searchable: true
                    }, {
                        targets: 4,
                        width: columnWidths.total,
                        orderable: false,
                        searchable: true
                    }, {
                        targets: 5,
                        width: columnWidths.action,
                        orderable: false,
                        searchable: true
                    }]
                });

                const toolbarLeft = document.querySelector('#request-table_wrapper .request-date-range');
                if (toolbarLeft) {
                    toolbarLeft.textContent = dateRangeText;
                }

                const searchInput = document.querySelector('#request-table_filter input');
                if (searchInput) {
                    // Matikan handler default agar filtering selalu berdasarkan value input terbaru.
                    $(searchInput).off('.DT');
                    searchInput.addEventListener('input', function() {
                        customSearchTerm = this.value.trim().toLowerCase();
                        requestDataTable.draw();
                    });
                }

                requestDataTable.on('draw', function() {
                    updateGrandTotal();
                    initDatePickers(requestTableEl);
                });
            };

            setupDataTable();

            $(requestTableEl).on('input change', '.js-shift-input', function() {
                const rowNode = $(this).closest('tr')[0];
                if (rowNode) {
                    updateSingleRowTotal(rowNode);
                    updateGrandTotal();
                }
            });

            $(requestTableEl).on('click', '.js-delete-row', function() {
                if (requestDataTable) {
                    requestDataTable.row($(this).closest('tr')).remove().draw(false);
                } else {
                    $(this).closest('tr').remove();
                }

                reindexInputNames();
                updateGrandTotal();

                const rowCount = requestDataTable ? requestDataTable.rows().count() : $(
                    '#request-table tbody tr').length;
                if (rowCount === 0) {
                    addRequestRow();
                }
            });

            addRequestButton.addEventListener('click', function(e) {
                e.preventDefault();
                addRequestRow();
            });

            // Load old data atau tambah 1 baris default
            if (oldPermintaan && oldPermintaan.length > 0) {
                oldPermintaan.forEach((data) => addRequestRow(data));
            } else {
                addRequestRow();
            }

            toggleDetailAlasan();

            initDatePickers(requestTableEl);

            reindexInputNames();
            updateGrandTotal();
        });
    </script>
@endsection