@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Form Pengajuan SPL</h5>
                            <a href="{{ url($url_menu) }}" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="p-3 mb-3 bg-danger text-white rounded position-relative">
                                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" aria-label="Close" onclick="this.parentElement.style.display='none';"></button>
                                <ul class="mb-0 pe-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if(empty($is_periode_active))
                            <div class="alert alert-danger text-white p-3 mb-3 d-flex align-items-center" role="alert">
                                <i class="fas fa-exclamation-triangle fa-lg me-2"></i>
                                <div>
                                    <strong>Perhatian:</strong> {{ $periode_message ?? ' Periode Lembur sedang tidak aktif. Pengajuan lembur tidak dapat dilakukan.' }}
                                </div>
                            </div>
                        @endif
                        <form role="form" method="POST" action="{{ url('/pengajuan-spl/store') }}"
                            id="spl-form">
                            @csrf

                            {{-- ====== HEADER SPL ====== --}}
                            <div class="card mb-4 border">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Header SPL</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        {{-- Tanggal Pengajuan --}}
                                        <div class="col-md-4 mb-3">
                                            <label for="tanggal_pengajuan" class="form-label">Tanggal Pengajuan <span
                                                    class="text-danger">*</span></label>
                                            <input type="date" name="tanggal_pengajuan" id="tanggal_pengajuan"
                                                class="form-control"
                                                value="{{ old('tanggal_pengajuan', date('Y-m-d')) }}"
                                                required>
                                            @error('tanggal_pengajuan')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- NIK Pemohon --}}
                                        <div class="col-md-4 mb-3">
                                            <label for="nik_display" class="form-label">NIK Pemohon <span
                                                    class="text-danger">*</span></label>
                                            <input type="hidden" name="nik" id="nik" value="{{ old('nik', !empty($use_self_default) ? ($self_nik ?? '') : '') }}">
                                            <div class="input-group">
                                                <input type="text" id="nik_display" class="form-control" value="" required readonly>
                                                <span class="input-group-text bg-primary text-light"
                                                    style="cursor: pointer;" data-bs-toggle="modal"
                                                    data-bs-target="#searchModalPemohon">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                            <small id="nama_pemohon_display" class="form-text text-muted" style="display:none;">{{ !empty($use_self_default) ? ($self_nama ?? '') : '' }}</small>
                                            @if (!empty($self_nik))
                                                <div class="form-check mt-2">
                                                    <input class="form-check-input" type="checkbox" id="pemohon_self"
                                                        name="pemohon_self" value="1"
                                                        @checked(old('pemohon_self', $use_self_default ?? false))>
                                                    <label class="form-check-label" for="pemohon_self">
                                                        Gunakan data diri sendiri
                                                    </label>
                                                </div>
                                            @endif
                                            @error('nik')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- Departemen --}}
                                        <div class="col-md-4 mb-3">
                                            <label for="id_departemen" class="form-label">Departemen <span
                                                    class="text-danger">*</span></label>
                                            <select name="departemen" id="id_departemen" class="form-select" required>
                                                <option value="">Pilih Departemen</option>
                                                @foreach ($departemen as $dept)
                                                    <option value="{{ $dept->id }}"
                                                        @if (old('departemen', !empty($use_self_default) ? ($self_id_departemen ?? '') : '') == $dept->id) selected @endif>
                                                        {{ $dept->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('departemen')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        {{-- Keterangan --}}
                                        <div class="col-md-8 mb-3">
                                            <label for="keterangan" class="form-label">Keterangan</label>
                                            <textarea name="keterangan" id="keterangan" class="form-control" rows="2"
                                                placeholder="Keterangan umum SPL (opsional)">{{ old('keterangan') }}</textarea>
                                        </div>

                                        {{-- Sending Approval To --}}
                                        <div class="col-md-4 mb-3">
                                            <label for="send_to" class="form-label">Sending Approval To <span
                                                    class="text-danger">*</span></label>
                                            @if (!empty($is_atasan) && $is_atasan && !empty($auto_approver_id))
                                                {{-- Atasan: otomatis ke HRD, tidak bisa dipilih --}}
                                                <input type="hidden" name="send_to" id="send_to" value="{{ $auto_approver_id }}" required>
                                                <div class="input-group">
                                                    <input type="text" id="send_to_display" class="form-control" readonly
                                                        value="{{ $auto_approver_name }}" style="background:#e9ecef;">
                                                </div>
                                            @else
                                                <input type="hidden" name="send_to" id="send_to" value="{{ old('send_to') }}" required>
                                                <div class="input-group">
                                                    <input type="text" id="send_to_display" class="form-control" readonly
                                                        placeholder="Pilih Approver..."
                                                        value="{{ old('send_to') ? (($approver_list->firstWhere('id', (int) old('send_to'))->nama ?? '')) : '' }}">
                                                    <span class="input-group-text bg-primary text-light"
                                                        style="cursor: pointer;" onclick="openApproverModal()">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            @endif
                                            <small id="approver_info_display" class="form-text">
                                                @if (!empty($is_atasan) && $is_atasan)
                                                    <span class="text-info"><i class="fas fa-info-circle"></i> Otomatis dikirim ke HRD</span>
                                                @elseif (!empty($approver_from_hierarki) && $approver_from_hierarki)
                                                    <span class="text-success"><i class="fas fa-check-circle"></i> Berdasarkan hierarki atasan Anda</span>
                                                @else
                                                    <span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Hierarki belum diatur, menampilkan semua user</span>
                                                @endif
                                            </small>
                                            @error('send_to')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ====== DETAIL SPL ====== --}}
                            <div class="card mb-4 border">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <h6 class="mb-0">Detail Lembur</h6>
                                    </div>
                                    <button type="button" id="btn-tambah-baris" class="btn btn-sm btn-success" onclick="addDetailRow()">
                                        <i class="fas fa-plus me-1"></i> Tambah Baris
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="detail-table" style="min-width:1600px;">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th width="40px">No</th>
                                                    <th width="160px">NIK Karyawan <span class="text-danger">*</span></th>
                                                    <th width="150px">Nama</th>
                                                    <th width="250px">Agenda <span class="text-danger">*</span></th>
                                                    <th width="170px">Mulai Pengerjaan<span class="text-danger">*</span></th>
                                                    <th width="170px">Selesai Pengerjaan<span class="text-danger">*</span></th>
                                                    <th width="80px">Istirahat (Menit)</th>
                                                    <th width="70px">Jam</th>
                                                    <th width="200px">Jenis <span class="text-danger">*</span></th>
                                                    <th width="200px">Tipe</th>
                                                    <th width="70px">Aksi</th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody id="detail-body">
                                                {{-- Dynamic rows --}}
                                            </tbody>
                                        </table>
                                    </div>
                                    <small class="text-muted"><span class="text-danger">*</span> Kolom wajib diisi. Jam dihitung otomatis dari Mulai Pengerjaan - Selesai Pengerjaan - Istirahat.</small>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="d-flex flex-column align-items-end gap-2">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ url($url_menu) }}" class="btn btn-secondary">Batal</a>
                                    <button type="submit" class="btn btn-primary" id="btn-save" @if(empty($is_periode_active)) disabled title="Master Periode Lembur tidak aktif" @endif>
                                        <i class="fas fa-save me-1"></i> Simpan SPL
                                    </button>
                                </div>
                                <small class="text-danger fw-bold" id="overlap-submit-warning" style="display:none;">
                                    <i class="fas fa-exclamation-triangle me-1"></i> Harap perbaiki tanggal pengerjaan yang bentrok/overlap sebelum menyimpan.
                                </small>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ====== MODAL SEARCH PEMOHON (AJAX + Pagination) ====== --}}
    <div class="modal fade" id="searchModalPemohon" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Pemohon</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="search_pemohon_input" class="form-control mb-3"
                        placeholder="Cari NIK, Nama, atau Departemen...">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table_pemohon">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="60px">Pilih</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="pemohon_tbody">
                                <tr><td colspan="4" class="text-center text-muted">Memuat data...</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small id="pemohon_info" class="text-muted"></small>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-secondary" id="pemohon_prev" onclick="loadPemohon('prev')"><i class="fas fa-chevron-left"></i></button>
                            <button type="button" class="btn btn-outline-secondary" id="pemohon_page_display" disabled>1</button>
                            <button type="button" class="btn btn-outline-secondary" id="pemohon_next" onclick="loadPemohon('next')"><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ====== MODAL SEARCH KARYAWAN DETAIL (AJAX + Pagination) ====== --}}
    <div class="modal fade" id="searchModalKaryawan" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Karyawan Lembur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="search_karyawan_input" class="form-control mb-3"
                        placeholder="Cari NIK, Nama, atau Departemen...">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table_karyawan">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="60px">Pilih</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="karyawan_tbody">
                                <tr><td colspan="4" class="text-center text-muted">Memuat data...</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small id="karyawan_info" class="text-muted"></small>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-secondary" id="karyawan_prev" onclick="loadKaryawan('prev')"><i class="fas fa-chevron-left"></i></button>
                            <button type="button" class="btn btn-outline-secondary" id="karyawan_page_display" disabled>1</button>
                            <button type="button" class="btn btn-outline-secondary" id="karyawan_next" onclick="loadKaryawan('next')"><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ====== MODAL SEARCH APPROVER (AJAX + Pagination) ====== --}}
    <div class="modal fade" id="searchModalApprover" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Approver</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="search_approver_input" class="form-control mb-3"
                        placeholder="Cari Nama, NIK, atau Departemen...">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table_approver">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="60px">Pilih</th>
                                    <th>Nama</th>
                                    <th>NIK</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="approver_tbody">
                                <tr><td colspan="4" class="text-center text-muted">Memuat data...</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small id="approver_info" class="text-muted"></small>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-secondary" id="approver_prev" onclick="loadApprover('prev')"><i class="fas fa-chevron-left"></i></button>
                            <button type="button" class="btn btn-outline-secondary" id="approver_page_display" disabled>1</button>
                            <button type="button" class="btn btn-outline-secondary" id="approver_next" onclick="loadApprover('next')"><i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let rowIndex = 0;
        let activeDetailRow = null;
        let initialDetailRows = [];
        let initialHeader = {};
        let isInitializing = true;
        const selfPemohon = {
            nik: @json($self_nik ?? ''),
            nama: @json($self_nama ?? ''),
            id_departemen: @json($self_id_departemen ?? '')
        };

        const periodeMinDateTime = '{{ !empty($periode_min_date) ? $periode_min_date . "T00:00" : "" }}';
        const periodeMaxDateTime = '{{ !empty($periode_max_date) ? $periode_max_date . "T23:59" : "" }}';
        const periodeMinDateFormatted = '{{ !empty($periode_min_date) ? \Carbon\Carbon::parse($periode_min_date)->format("d M Y") : "" }}';
        const periodeMaxDateFormatted = '{{ !empty($periode_max_date) ? \Carbon\Carbon::parse($periode_max_date)->format("d M Y") : "" }}';

        const karyawanNameMap = @json(($karyawan_list ?? collect())->pluck('nama', 'nik'));
        const approverNameMap = @json(($approver_list ?? collect())->pluck('nama', 'id'));

        // Jenis & Tipe lembur options (for dynamic row creation)
        const jenisLemburOptions = [
            {value: '', label: '-'},
            @foreach ($jenis_lembur as $jl)
                {value: '{{ $jl->id }}', label: '{{ $jl->nama }}'},
            @endforeach
        ];
        const tipeLemburOptions = [
            {value: '', label: '-'},
            @foreach ($tipe_lembur as $tl)
                {value: '{{ $tl->id }}', label: '{{ $tl->nama }}'},
            @endforeach
        ];

        const oldDetailInput = {
            nik: @json(old('detail_nik', [])),
            agenda: @json(old('detail_agenda', [])),
            datetime_from: @json(old('detail_datetime_from', [])),
            datetime_to: @json(old('detail_datetime_to', [])),
            break_jam: @json(old('detail_break_jam', [])),
            jam_lembur: @json(old('detail_jam_lembur_display', [])),
            id_jenis_lembur: @json(old('detail_id_jenis_lembur', [])),
            id_tipe_lembur: @json(old('detail_id_tipe_lembur', [])),
        };

        // ====== Pagination state ======
        let pemohonPage = 1, pemohonLastPage = 1;
        let karyawanPage = 1, karyawanLastPage = 1;
        let approverPage = 1, approverLastPage = 1;

        // ====== AJAX Load: Pemohon ======
        function loadPemohon(direction) {
            if (direction === 'prev' && pemohonPage > 1) pemohonPage--;
            else if (direction === 'next' && pemohonPage < pemohonLastPage) pemohonPage++;

            let search = $('#search_pemohon_input').val() || '';
            $.get('{{ route("pengajuan.spl.search.karyawan") }}', { search: search, page: pemohonPage }, function(res) {
                pemohonLastPage = res.last_page;
                pemohonPage = res.page;
                let html = '';
                if (res.data.length === 0) {
                    html = '<tr><td colspan="4" class="text-center text-muted">Data tidak ditemukan</td></tr>';
                } else {
                    res.data.forEach(function(k) {
                        html += `<tr>
                            <td><button type="button" class="btn badge bg-primary badge-sm" onclick="selectPemohon('${k.nik}', '${k.nama}', '${k.departemen || ''}')"><i class="bi bi-check-circle"></i> Pilih</button></td>
                            <td>${k.nik}</td>
                            <td>${k.nama}</td>
                            <td>${k.departemen || '-'}</td>
                        </tr>`;
                    });
                }
                $('#pemohon_tbody').html(html);
                $('#pemohon_page_display').text(res.page + ' / ' + res.last_page);
                $('#pemohon_info').text('Total: ' + res.total + ' data');
                $('#pemohon_prev').prop('disabled', res.page <= 1);
                $('#pemohon_next').prop('disabled', res.page >= res.last_page);
            });
        }

        // ====== AJAX Load: Karyawan Detail ======
        function loadKaryawan(direction) {
            if (direction === 'prev' && karyawanPage > 1) karyawanPage--;
            else if (direction === 'next' && karyawanPage < karyawanLastPage) karyawanPage++;

            let search = $('#search_karyawan_input').val() || '';

            // Get selected NIKs to exclude (excluding active row's NIK)
            let excludeNiks = [];
            let rows = document.querySelectorAll('#detail-body tr');
            rows.forEach((row, idx) => {
                if (idx + 1 !== activeDetailRow) {
                    let inputNik = row.querySelector('input[name="detail_nik[]"]');
                    if (inputNik && inputNik.value) {
                        excludeNiks.push(inputNik.value);
                    }
                }
            });

            $.get('{{ route("pengajuan.spl.search.karyawan") }}', { 
                search: search, 
                page: karyawanPage,
                exclude_niks: excludeNiks
            }, function(res) {
                karyawanLastPage = res.last_page;
                karyawanPage = res.page;
                let html = '';
                if (res.data.length === 0) {
                    html = '<tr><td colspan="4" class="text-center text-muted">Data tidak ditemukan</td></tr>';
                } else {
                    res.data.forEach(function(k) {
                        html += `<tr>
                            <td><button type="button" class="btn badge bg-primary badge-sm" onclick="selectKaryawanDetail('${k.nik}', '${k.nama}')"><i class="bi bi-check-circle"></i> Pilih</button></td>
                            <td>${k.nik}</td>
                            <td>${k.nama}</td>
                            <td>${k.departemen || '-'}</td>
                        </tr>`;
                    });
                }
                $('#karyawan_tbody').html(html);
                $('#karyawan_page_display').text(res.page + ' / ' + res.last_page);
                $('#karyawan_info').text('Total: ' + res.total + ' data');
                $('#karyawan_prev').prop('disabled', res.page <= 1);
                $('#karyawan_next').prop('disabled', res.page >= res.last_page);
            });
        }

        // ====== AJAX Load: Approver ======
        function loadApprover(direction) {
            if (direction === 'prev' && approverPage > 1) approverPage--;
            else if (direction === 'next' && approverPage < approverLastPage) approverPage++;

            let search = $('#search_approver_input').val() || '';
            $.get('{{ route("pengajuan.spl.search.approver") }}', { search: search, page: approverPage })
            .done(function(res) {
                approverLastPage = res.last_page;
                approverPage = res.page;
                let html = '';
                if (res.data.length === 0) {
                    html = '<tr><td colspan="4" class="text-center text-muted">Data tidak ditemukan</td></tr>';
                } else {
                    res.data.forEach(function(a) {
                        html += `<tr>
                            <td><button type="button" class="btn badge bg-primary badge-sm" onclick="selectApprover('${a.id}', '${a.nama}')"><i class="bi bi-check-circle"></i> Pilih</button></td>
                            <td>${a.nama}</td>
                            <td>${a.nik || '-'}</td>
                            <td>${a.departemen || '-'}</td>
                        </tr>`;
                    });
                }
                $('#approver_tbody').html(html);
                $('#approver_page_display').text(res.page + ' / ' + res.last_page);
                $('#approver_info').text('Total: ' + res.total + ' data');
                $('#approver_prev').prop('disabled', res.page <= 1);
                $('#approver_next').prop('disabled', res.page >= res.last_page);

                if (res.from_hierarki) {
                    $('#approver_info_display').html('<span class="text-success"><i class="fas fa-check-circle"></i> Berdasarkan hierarki atasan Anda</span>');
                } else {
                    $('#approver_info_display').html('<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Hierarki belum diatur, menampilkan semua user</span>');
                }
            }).fail(function(xhr) {
                console.error('Load approver error:', xhr.responseText);
                $('#approver_tbody').html('<tr><td colspan="4" class="text-center text-danger">Gagal memuat data</td></tr>');
            });
        }

        // ====== Select functions ======
        function selectPemohon(nik, nama, departemen) {
            const selfCheckbox = document.getElementById('pemohon_self');
            const isSelfModeActive = !!(selfCheckbox && selfCheckbox.checked);
            const isSelectingSelf = !!(selfPemohon.nik && nik === selfPemohon.nik);

            if (isSelfModeActive && !isSelectingSelf) {
                const shouldDisableSelfMode = confirm('Mode "Gunakan data diri sendiri" sedang aktif. Nonaktifkan mode ini dan pilih pemohon lain?');
                if (!shouldDisableSelfMode) {
                    return;
                }

                selfCheckbox.checked = false;
                toggleSelfPemohon(false, true);
            }

            document.getElementById('nik').value = nik;
            document.getElementById('nama_pemohon_display').textContent = nama;
            const displayEl = document.getElementById('nik_display');
            if (displayEl) {
                displayEl.value = nik ? (nik + ' - ' + nama) : '';
                displayEl.setCustomValidity("");
            }

            let deptSelect = document.getElementById('id_departemen');
            for (let i = 0; i < deptSelect.options.length; i++) {
                if (deptSelect.options[i].text === departemen) {
                    deptSelect.selectedIndex = i;
                    break;
                }
            }
            deptSelect.disabled = false;

            bootstrap.Modal.getInstance(document.getElementById('searchModalPemohon')).hide();
        }

        function applySelfPemohon(preserveExisting = false) {
            if (!selfPemohon.nik) {
                return;
            }

            document.getElementById('nik').value = selfPemohon.nik;
            document.getElementById('nama_pemohon_display').textContent = selfPemohon.nama || '-';
            const displayEl = document.getElementById('nik_display');
            if (displayEl) {
                displayEl.value = selfPemohon.nik + ' - ' + (selfPemohon.nama || '');
                displayEl.setCustomValidity("");
            }

            let deptSelect = document.getElementById('id_departemen');
            if (selfPemohon.id_departemen) {
                deptSelect.value = selfPemohon.id_departemen;
            }
            deptSelect.disabled = true;

            if (!preserveExisting) {
                document.getElementById('search_pemohon_input').value = '';
            }
        }

        function isSelfModeEnabled() {
            const selfCheckbox = document.getElementById('pemohon_self');
            return !!(selfCheckbox && selfCheckbox.checked && selfPemohon.nik);
        }

        function setDetailRowAsSelf(row) {
            if (!row || !selfPemohon.nik) {
                return;
            }

            const nikInput = row.querySelector('input[name="detail_nik[]"]');
            const namaDisplay = row.querySelector('.nama-display');

            if (nikInput) {
                nikInput.value = selfPemohon.nik;
            }
            if (namaDisplay) {
                namaDisplay.textContent = selfPemohon.nama || '-';
            }
        }

        function setDetailRowNikSelectorState(row, locked) {
            if (!row) {
                return;
            }

            const searchBtn = row.querySelector('.input-group-text');
            if (!searchBtn) {
                return;
            }

            if (locked) {
                searchBtn.setAttribute('onclick', 'return false;');
                searchBtn.classList.add('disabled');
                searchBtn.style.pointerEvents = 'none';
                searchBtn.style.opacity = '0.5';
                return;
            }

            const rowNumber = row.querySelector('td:first-child')?.textContent || '1';
            searchBtn.setAttribute('onclick', `openKaryawanModal(${rowNumber})`);
            searchBtn.classList.remove('disabled');
            searchBtn.style.pointerEvents = '';
            searchBtn.style.opacity = '';
        }

        function applySelfModeToDetails(forceFill = true) {
            const rows = document.querySelectorAll('#detail-body tr');
            rows.forEach(function(row) {
                if (forceFill) {
                    setDetailRowAsSelf(row);
                }
                setDetailRowNikSelectorState(row, true);
            });
        }

        function releaseSelfModeFromDetails() {
            const rows = document.querySelectorAll('#detail-body tr');
            rows.forEach(function(row) {
                setDetailRowNikSelectorState(row, false);
            });
        }

        function toggleDeleteButtons(show) {
            const rows = document.querySelectorAll('#detail-body tr');
            const isSelf = isSelfModeEnabled();
            rows.forEach(function(row) {
                const deleteBtn = row.querySelector('.btn-danger');
                if (deleteBtn) {
                    if (isSelf) {
                        deleteBtn.style.setProperty('display', 'none', 'important');
                    } else {
                        if (show === false) {
                            deleteBtn.style.setProperty('display', 'none', 'important');
                        } else {
                            if (rows.length >= 2) {
                                deleteBtn.style.setProperty('display', 'inline-block', 'important');
                            } else {
                                deleteBtn.style.setProperty('display', 'none', 'important');
                            }
                        }
                    }
                }
            });
        }

        function restoreInitialState() {
            document.getElementById('nik').value = initialHeader.nik || '';
            const displayEl = document.getElementById('nik_display');
            if (displayEl) {
                displayEl.value = initialHeader.nik_display || '';
            }
            document.getElementById('nama_pemohon_display').textContent = initialHeader.nama_pemohon || '';
            
            let deptSelect = document.getElementById('id_departemen');
            if (deptSelect) {
                deptSelect.value = initialHeader.departemen || '';
                deptSelect.disabled = initialHeader.departemen_disabled;
            }

            const selfCheckbox = document.getElementById('pemohon_self');
            if (selfCheckbox) {
                selfCheckbox.checked = initialHeader.pemohon_self;
            }

            let tbody = document.getElementById('detail-body');
            if (tbody) {
                tbody.innerHTML = '';
            }
            rowIndex = 0;

            initialDetailRows.forEach(function(row) {
                addDetailRow(row);
            });
            
            updateCopyButtonsVisibility();
            toggleDeleteButtons();
            updateSubmitButtonState();
        }

        function toggleSelfPemohon(checked, preserveExisting = false) {
            if (checked) {
                applySelfPemohon(preserveExisting);
                
                let rows = document.querySelectorAll('#detail-body tr');
                if (rows.length > 0) {
                    for (let i = 1; i < rows.length; i++) {
                        rows[i].remove();
                    }
                    reindexRows();
                    let firstRow = document.querySelector('#detail-body tr');
                    if (firstRow) {
                        setDetailRowAsSelf(firstRow);
                        setDetailRowNikSelectorState(firstRow, true);
                    }
                } else {
                    addDetailRow({
                        nik: selfPemohon.nik,
                        nama: selfPemohon.nama || '-',
                    });
                }
                
                applySelfModeToDetails(true);
                $('#btn-tambah-baris').hide();
                toggleDeleteButtons(false);
                return;
            }

            if (!preserveExisting && !initialHeader.pemohon_self) {
                restoreInitialState();
            } else {
                releaseSelfModeFromDetails();

                let deptSelect = document.getElementById('id_departemen');
                deptSelect.disabled = false;

                if (!preserveExisting) {
                    document.getElementById('nik').value = '';
                    document.getElementById('nama_pemohon_display').textContent = '';
                    const displayEl = document.getElementById('nik_display');
                    if (displayEl) {
                        displayEl.value = '';
                    }
                    deptSelect.value = '';
                }
            }
            $('#btn-tambah-baris').show();
            toggleDeleteButtons(true);
        }

        function selectKaryawanDetail(nik, nama) {
            if (isSelfModeEnabled()) {
                bootstrap.Modal.getInstance(document.getElementById('searchModalKaryawan')).hide();
                return;
            }

            // Check if employee NIK is already selected in another row
            let exists = false;
            let rows = document.querySelectorAll('#detail-body tr');
            rows.forEach((row, idx) => {
                if (idx + 1 !== activeDetailRow) {
                    let inputNik = row.querySelector('input[name="detail_nik[]"]');
                    if (inputNik && inputNik.value === nik) {
                        exists = true;
                    }
                }
            });

            if (exists) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Karyawan Sudah Ada',
                    text: `Karyawan dengan NIK ${nik} sudah ditambahkan dalam detail lembur.`,
                    confirmButtonColor: '#028284'
                });
                return;
            }

            if (activeDetailRow !== null) {
                let tr = document.querySelector(`#detail-body tr:nth-child(${activeDetailRow})`);
                tr.querySelector('input[name="detail_nik[]"]').value = nik;
                tr.querySelector('.nama-display').textContent = nama;
                
                let dateInput = tr.querySelector('input[name="detail_datetime_from[]"]');
                if (dateInput) {
                    checkDateOverlap(dateInput);
                }
                let dateInputTo = tr.querySelector('input[name="detail_datetime_to[]"]');
                if (dateInputTo) {
                    checkDateOverlap(dateInputTo);
                }
            }
            bootstrap.Modal.getInstance(document.getElementById('searchModalKaryawan')).hide();
        }

        let activeOverlapChecks = 0;
        function updateSubmitButtonState() {
            let hasOverlap = false;
            document.querySelectorAll('.overlap-warning').forEach(function(warningEl) {
                if (warningEl.style.display !== 'none' && warningEl.textContent.trim() !== '') {
                    hasOverlap = true;
                }
            });

            const btnSave = document.getElementById('btn-save');
            const submitWarning = document.getElementById('overlap-submit-warning');
            
            if (btnSave) {
                if (activeOverlapChecks > 0) {
                    btnSave.disabled = true;
                    if (submitWarning && !hasOverlap) {
                        submitWarning.style.display = 'none';
                    }
                } else {
                    if (hasOverlap) {
                        btnSave.disabled = true;
                        if (submitWarning) {
                            submitWarning.style.display = 'block';
                        }
                    } else {
                        btnSave.disabled = false;
                        if (submitWarning) {
                            submitWarning.style.display = 'none';
                        }
                    }
                }
            }
        }

        function checkDateOverlap(el) {
            let tr = el.closest('tr');
            let nikInput = tr.querySelector('input[name="detail_nik[]"]');
            let nik = nikInput ? nikInput.value : '';
            
            let dateFromInput = tr.querySelector('input[name="detail_datetime_from[]"]');
            let dateToInput = tr.querySelector('input[name="detail_datetime_to[]"]');
            
            let datetimeFrom = dateFromInput ? dateFromInput.value : '';
            let datetimeTo = dateToInput ? dateToInput.value : '';

            let warningFrom = dateFromInput ? dateFromInput.closest('td').querySelector('.overlap-warning') : null;
            let warningTo = dateToInput ? dateToInput.closest('td').querySelector('.overlap-warning') : null;

            if (!nik || !datetimeFrom || !datetimeTo) {
                if (warningFrom) {
                    warningFrom.style.display = 'none';
                    warningFrom.textContent = '';
                }
                if (warningTo) {
                    warningTo.style.display = 'none';
                    warningTo.textContent = '';
                }
                updateSubmitButtonState();
                return;
            }

            let excludeSplId = document.getElementById('spl_id')?.value || null;

            activeOverlapChecks++;
            updateSubmitButtonState();

            $.get('{{ route("pengajuan.spl.check.date.overlap") }}', {
                nik: nik,
                datetime_from: datetimeFrom,
                datetime_to: datetimeTo,
                exclude_spl_id: excludeSplId
            }, function(res) {
                if (res.overlap) {
                    let msg = `Jam lembur bentrok dengan ${res.no_spl || 'SPL lain'}`;
                    if (warningFrom) {
                        warningFrom.style.display = 'none';
                        warningFrom.textContent = '';
                    }
                    if (warningTo) {
                        warningTo.textContent = msg;
                        warningTo.style.setProperty('display', 'block', 'important');
                    }
                } else {
                    if (warningFrom) {
                        warningFrom.style.display = 'none';
                        warningFrom.textContent = '';
                    }
                    if (warningTo) {
                        warningTo.style.display = 'none';
                        warningTo.textContent = '';
                    }
                }
            }).fail(function() {
                if (warningFrom) {
                    warningFrom.style.display = 'none';
                    warningFrom.textContent = '';
                }
                if (warningTo) {
                    warningTo.style.display = 'none';
                    warningTo.textContent = '';
                }
            }).always(function() {
                activeOverlapChecks--;
                updateSubmitButtonState();
            });
        }

        function selectApprover(id, nama) {
            document.getElementById('send_to').value = id;
            document.getElementById('send_to_display').value = nama;
            closeModalSafely('searchModalApprover');
        }

        function closeModalSafely(modalId) {
            const modalEl = document.getElementById(modalId);
            if (!modalEl) {
                return;
            }

            const instance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            instance.hide();

            setTimeout(function() {
                if (document.querySelectorAll('.modal.show').length === 0) {
                    document.body.classList.remove('modal-open');
                    document.body.style.removeProperty('padding-right');
                    document.querySelectorAll('.modal-backdrop').forEach(function(backdrop) {
                        backdrop.remove();
                    });
                }
            }, 200);
        }

        // ====== Open modals ======
        function openKaryawanModal(rowNum) {
            if (isSelfModeEnabled()) {
                return;
            }

            activeDetailRow = rowNum;
            karyawanPage = 1;
            $('#search_karyawan_input').val('');
            loadKaryawan();
            new bootstrap.Modal(document.getElementById('searchModalKaryawan')).show();
        }

        function openApproverModal() {
            approverPage = 1;
            $('#search_approver_input').val('');
            loadApprover();
            new bootstrap.Modal(document.getElementById('searchModalApprover')).show();
        }

        // Build select options HTML
        function buildOptions(optionsArr, selectedVal) {
            return optionsArr.map(o => {
                let sel = (String(o.value) === String(selectedVal ?? '')) ? 'selected' : '';
                return `<option value="${o.value}" ${sel}>${o.label}</option>`;
            }).join('');
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        // Add detail row
        function addDetailRow(data) {
            if (isInitializing) {
                initialDetailRows.push(data ? JSON.parse(JSON.stringify(data)) : {});
            }
            rowIndex++;
            data = data || {};

            if (isSelfModeEnabled()) {
                data.nik = selfPemohon.nik;
                data.nama = selfPemohon.nama || '-';
            }

            const safeData = {
                nik: escapeHtml(data.nik || ''),
                nama: escapeHtml(data.nama || '-'),
                agenda: escapeHtml(data.agenda || ''),
                datetime_from: escapeHtml(data.datetime_from || ''),
                datetime_to: escapeHtml(data.datetime_to || ''),
                break_jam: escapeHtml(data.break_jam ?? 0),
                jam_lembur: escapeHtml(data.jam_lembur ?? 0),
            };

            let tbody = document.getElementById('detail-body');
            let tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="text-center">${rowIndex}</td>
                <td>
                    <div class="input-group input-group-sm">
                        <input type="text" name="detail_nik[]" class="form-control form-control-sm" required readonly value="${safeData.nik}">
                        <span class="input-group-text bg-primary text-light" style="cursor:pointer;"
                            onclick="openKaryawanModal(${rowIndex})">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
                <td><span class="nama-display text-sm">${safeData.nama}</span></td>
                <td><textarea name="detail_agenda[]" class="form-control form-control-sm" required placeholder="Pekerjaan..." rows="2" style="resize:vertical;min-height:38px;">${safeData.agenda}</textarea></td>
                <td>
                    <input type="datetime-local" name="detail_datetime_from[]" class="form-control form-control-sm" required
                        ${periodeMinDateTime ? `min="${periodeMinDateTime}"` : ''}
                        ${periodeMaxDateTime ? `max="${periodeMaxDateTime}"` : ''}
                        onchange="calcHour(this); checkDateOverlap(this); updateMinDateTime(this);" value="${safeData.datetime_from}">
                    <small class="text-danger overlap-warning" style="display:none; font-size: 11px; margin-top: 4px; font-weight: bold;"></small>
                </td>
                <td>
                    <input type="datetime-local" name="detail_datetime_to[]" class="form-control form-control-sm" required
                        ${periodeMinDateTime ? `min="${periodeMinDateTime}"` : ''}
                        ${periodeMaxDateTime ? `max="${periodeMaxDateTime}"` : ''}
                        onchange="calcHour(this); checkDateOverlap(this);" value="${safeData.datetime_to}">
                    <small class="text-danger overlap-warning" style="display:none; font-size: 11px; margin-top: 4px; font-weight: bold;"></small>
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm break-menit-input" value="${safeData.break_jam ? Math.round(safeData.break_jam * 60) : 0}" min="0" oninput="updateBreakHours(this)">
                    <input type="hidden" name="detail_break_jam[]" class="break-jam-hidden" value="${safeData.break_jam || 0}">
                    <small class="text-muted break-hours-display" style="font-size: 11px; display: block; margin-top: 2px;">
                        ${safeData.break_jam ? parseFloat(safeData.break_jam).toFixed(2).replace(/\.00$/, '') : 0} jam
                    </small>
                </td>
                <td><input type="text" name="detail_jam_lembur_display[]" class="form-control form-control-sm" readonly value="${safeData.jam_lembur}" style="background:#f0f0f0"></td>
                <td>
                    <select name="detail_id_jenis_lembur[]" class="form-select form-select-sm" required style="white-space:normal;overflow:visible;text-overflow:unset;width:100%;">
                        ${buildOptions(jenisLemburOptions, data.id_jenis_lembur || '')}
                    </select>
                </td>
                <td>
                    <select name="detail_id_tipe_lembur[]" class="form-select form-select-sm" style="white-space:normal;overflow:visible;text-overflow:unset;width:100%;">
                        ${buildOptions(tipeLemburOptions, data.id_tipe_lembur || '')}
                    </select>
                </td>
                <td class="text-center">
                    <div class="d-flex justify-content-center gap-1">
                        <button type="button" class="btn btn-sm btn-info btn-copy mb-0 px-2" onclick="copyRowData(this)" title="Copy" style="display: none;">
                            <i class="fas fa-copy"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-success btn-paste mb-0 px-2" onclick="pasteRowData(this)" title="Paste" style="display: none;">
                            <i class="fas fa-paste"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-danger mb-0 px-2" onclick="removeRow(this)" title="Hapus baris">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </td>
                
            `;
            tbody.appendChild(tr);

            if (isSelfModeEnabled()) {
                setDetailRowAsSelf(tr);
                setDetailRowNikSelectorState(tr, true);
                const deleteBtn = tr.querySelector('.btn-danger');
                if (deleteBtn) {
                    deleteBtn.style.setProperty('display', 'none', 'important');
                }
            }
            updateCopyButtonsVisibility();
            toggleDeleteButtons();

            let dateInput = tr.querySelector('input[name="detail_datetime_from[]"]');
            if (dateInput) {
                if (safeData.datetime_from) {
                    checkDateOverlap(dateInput);
                }
                updateMinDateTime(dateInput);
            }
            if (safeData.datetime_to) {
                let dateInputTo = tr.querySelector('input[name="detail_datetime_to[]"]');
                if (dateInputTo) {
                    checkDateOverlap(dateInputTo);
                }
            }
        }

        function removeRow(btn) {
            btn.closest('tr').remove();
            reindexRows();
            updateSubmitButtonState();
        }

        function reindexRows() {
            let rows = document.querySelectorAll('#detail-body tr');
            rowIndex = 0;
            rows.forEach((row, idx) => {
                rowIndex = idx + 1;
                row.querySelector('td:first-child').textContent = rowIndex;
                let searchBtn = row.querySelector('.input-group-text');
                if (searchBtn) {
                    searchBtn.setAttribute('onclick', `openKaryawanModal(${rowIndex})`);
                }

                if (isSelfModeEnabled()) {
                    setDetailRowAsSelf(row);
                    setDetailRowNikSelectorState(row, true);
                    const deleteBtn = row.querySelector('.btn-danger');
                    if (deleteBtn) {
                        deleteBtn.style.setProperty('display', 'none', 'important');
                    }
                }
            });
            updateCopyButtonsVisibility();
            toggleDeleteButtons();
        }

        let copiedData = null;

        function copyRowData(btn) {
            let tr = btn.closest('tr');
            copiedData = {
                agenda: tr.querySelector('textarea[name="detail_agenda[]"]').value,
                datetime_from: tr.querySelector('input[name="detail_datetime_from[]"]').value,
                datetime_to: tr.querySelector('input[name="detail_datetime_to[]"]').value,
                break_jam: tr.querySelector('input[name="detail_break_jam[]"]').value,
                jenis: tr.querySelector('select[name="detail_id_jenis_lembur[]"]').value,
                tipe: tr.querySelector('select[name="detail_id_tipe_lembur[]"]').value
            };
            updateCopyButtonsVisibility();

            let rowNum = tr.querySelector('td:first-child').textContent;
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: `Baris ke-${rowNum} berhasil disalin!`,
                showConfirmButton: false,
                timer: 1500,
                timerProgressBar: true
            });
        }

        function pasteRowData(btn) {
            if (!copiedData) return;
            let tr = btn.closest('tr');
            tr.querySelector('textarea[name="detail_agenda[]"]').value = copiedData.agenda;
            tr.querySelector('input[name="detail_datetime_from[]"]').value = copiedData.datetime_from;
            tr.querySelector('input[name="detail_datetime_to[]"]').value = copiedData.datetime_to;
            
            let breakJamVal = parseFloat(copiedData.break_jam) || 0;
            tr.querySelector('.break-jam-hidden').value = breakJamVal;
            
            let breakMenitInput = tr.querySelector('.break-menit-input');
            if (breakMenitInput) {
                breakMenitInput.value = Math.round(breakJamVal * 60);
            }
            
            let display = tr.querySelector('.break-hours-display');
            if (display) {
                display.textContent = `${breakJamVal} jam`;
            }

            tr.querySelector('select[name="detail_id_jenis_lembur[]"]').value = copiedData.jenis;
            tr.querySelector('select[name="detail_id_tipe_lembur[]"]').value = copiedData.tipe;
            calcHour(tr.querySelector('input[name="detail_datetime_from[]"]'));
        }

        function updateCopyButtonsVisibility() {
            let rows = document.querySelectorAll('#detail-body tr');
            let hasCopiedData = (copiedData !== null);

            rows.forEach((row) => {
                let copyBtn = row.querySelector('.btn-copy');
                let pasteBtn = row.querySelector('.btn-paste');

                if (rows.length >= 2) {
                    if (copyBtn) {
                        copyBtn.style.setProperty('display', 'inline-block', 'important');
                    }
                    if (pasteBtn) {
                        if (hasCopiedData) {
                            pasteBtn.style.setProperty('display', 'inline-block', 'important');
                        } else {
                            pasteBtn.style.setProperty('display', 'none', 'important');
                        }
                    }
                } else {
                    if (copyBtn) {
                        copyBtn.style.setProperty('display', 'none', 'important');
                    }
                    if (pasteBtn) {
                        pasteBtn.style.setProperty('display', 'none', 'important');
                    }
                }
            });
        }

        function updateBreakHours(el) {
            let tr = el.closest('tr');
            let minutes = parseFloat(el.value) || 0;
            let hours = minutes / 60;
            
            let roundedHours = Math.round(hours * 100) / 100;
            
            let hiddenInput = tr.querySelector('.break-jam-hidden');
            if (hiddenInput) {
                hiddenInput.value = roundedHours;
            }
            
            let display = tr.querySelector('.break-hours-display');
            if (display) {
                display.textContent = `${roundedHours} jam`;
            }
            
            calcHour(el);
        }

        function updateMinDateTime(el) {
            let tr = el.closest('tr');
            let dtFrom = tr.querySelector('input[name="detail_datetime_from[]"]').value;
            let dtToInput = tr.querySelector('input[name="detail_datetime_to[]"]');
            if (dtToInput) {
                dtToInput.min = dtFrom || (periodeMinDateTime || '');
                if (periodeMaxDateTime) {
                    dtToInput.max = periodeMaxDateTime;
                }
                if (dtToInput.value && dtToInput.value < dtFrom) {
                    dtToInput.value = '';
                    calcHour(dtToInput);
                }
            }
        }

        function calcHour(el) {
            let tr = el.closest('tr');
            let dtFrom = tr.querySelector('input[name="detail_datetime_from[]"]').value;
            let dtTo = tr.querySelector('input[name="detail_datetime_to[]"]').value;
            let breakJam = parseFloat(tr.querySelector('input[name="detail_break_jam[]"]').value) || 0;

            if (dtFrom && dtTo) {
                let start = parseCustomDateTime(dtFrom);
                let end = parseCustomDateTime(dtTo);
                if (!start || !end) {
                    tr.querySelector('input[name="detail_jam_lembur_display[]"]').value = '0';
                    return;
                }
                if (end <= start) {
                    tr.querySelector('input[name="detail_jam_lembur_display[]"]').value = '0';
                    return;
                }
                let diffMs = end - start;
                let diffHours = diffMs / (1000 * 60 * 60);
                let totalHours = Math.max(0, diffHours - breakJam);
                tr.querySelector('input[name="detail_jam_lembur_display[]"]').value = totalHours.toFixed(2);
            }
        }

        function parseCustomDateTime(value) {
            // Browser datetime-local returns YYYY-MM-DDTHH:mm
            const dt = new Date(value);
            return Number.isNaN(dt.getTime()) ? null : dt;
        }

        function getOldDetailRowCount() {
            return Math.max(
                oldDetailInput.nik.length,
                oldDetailInput.agenda.length,
                oldDetailInput.datetime_from.length,
                oldDetailInput.datetime_to.length,
                oldDetailInput.break_jam.length,
                oldDetailInput.jam_lembur.length,
                oldDetailInput.id_jenis_lembur.length,
                oldDetailInput.id_tipe_lembur.length
            );
        }

        function hydrateDetailRowsFromOldInput() {
            const rowCount = getOldDetailRowCount();
            if (rowCount <= 0) {
                return false;
            }

            for (let i = 0; i < rowCount; i++) {
                const nik = oldDetailInput.nik[i] || '';
                addDetailRow({
                    nik: nik,
                    nama: karyawanNameMap[nik] || '-',
                    agenda: oldDetailInput.agenda[i] || '',
                    datetime_from: oldDetailInput.datetime_from[i] || '',
                    datetime_to: oldDetailInput.datetime_to[i] || '',
                    break_jam: oldDetailInput.break_jam[i] ?? 0,
                    jam_lembur: oldDetailInput.jam_lembur[i] ?? 0,
                    id_jenis_lembur: oldDetailInput.id_jenis_lembur[i] || '',
                    id_tipe_lembur: oldDetailInput.id_tipe_lembur[i] || '',
                });
            }

            return true;
        }

        // ====== Debounced search on typing ======
        let pemohonTimer, karyawanTimer, approverTimer;

        $(document).ready(function() {
            $('#search_pemohon_input').on('keyup', function() {
                clearTimeout(pemohonTimer);
                pemohonTimer = setTimeout(function() {
                    pemohonPage = 1;
                    loadPemohon();
                }, 300);
            });

            $('#search_karyawan_input').on('keyup', function() {
                clearTimeout(karyawanTimer);
                karyawanTimer = setTimeout(function() {
                    karyawanPage = 1;
                    loadKaryawan();
                }, 300);
            });

            $('#search_approver_input').on('keyup', function() {
                clearTimeout(approverTimer);
                approverTimer = setTimeout(function() {
                    approverPage = 1;
                    loadApprover();
                }, 300);
            });

            $('#searchModalPemohon').on('shown.bs.modal', function() {
                pemohonPage = 1;
                $('#search_pemohon_input').val('').focus();
                loadPemohon();
            });

            $('#pemohon_self').on('change', function() {
                toggleSelfPemohon(this.checked);
            });

            const hasOldDetails = hydrateDetailRowsFromOldInput();
            if (!hasOldDetails) {
                addDetailRow();
            }

            const sendToInput = document.getElementById('send_to');
            const sendToDisplay = document.getElementById('send_to_display');
            if (sendToInput && sendToDisplay && !sendToDisplay.value && sendToInput.value) {
                sendToDisplay.value = approverNameMap[sendToInput.value] || '';
            }

            if ($('#pemohon_self').is(':checked')) {
                applySelfPemohon(true);
                applySelfModeToDetails(true);
                $('#btn-tambah-baris').hide();
                toggleDeleteButtons(false);
            }

            // Initialize nik_display on page load
            const initNik = document.getElementById('nik').value;
            if (initNik) {
                let initNama = karyawanNameMap[initNik] || document.getElementById('nama_pemohon_display').textContent;
                const displayEl = document.getElementById('nik_display');
                if (displayEl) {
                    displayEl.value = initNik + (initNama ? ' - ' + initNama : '');
                }
            }

            // Capture initial header state
            initialHeader.nik = document.getElementById('nik')?.value || '';
            const displayEl = document.getElementById('nik_display');
            if (displayEl) {
                initialHeader.nik_display = displayEl.value || '';
            }
            initialHeader.nama_pemohon = document.getElementById('nama_pemohon_display')?.textContent || '';
            
            const deptSelect = document.getElementById('id_departemen');
            if (deptSelect) {
                initialHeader.departemen = deptSelect.value || '';
                initialHeader.departemen_disabled = deptSelect.disabled;
            }
            
            const selfCheckbox = document.getElementById('pemohon_self');
            if (selfCheckbox) {
                initialHeader.pemohon_self = selfCheckbox.checked;
            }

            isInitializing = false;
        });

        document.getElementById('spl-form').addEventListener('submit', function(e) {
            // Check NIK Pemohon
            const nikInput = document.getElementById('nik');
            const nikDisplay = document.getElementById('nik_display');
            if (nikDisplay && (!nikInput || !nikInput.value)) {
                e.preventDefault();
                nikDisplay.setCustomValidity("Harap pilih NIK Pemohon.");
                nikDisplay.reportValidity();
                return;
            } else if (nikDisplay) {
                nikDisplay.setCustomValidity("");
            }

            // Re-enable disabled fields sebelum submit agar value terkirim
            document.getElementById('id_departemen').disabled = false;

            let rows = document.querySelectorAll('#detail-body tr');
            if (rows.length === 0) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Minimal harus ada 1 detail karyawan lembur.',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            for (let i = 0; i < rows.length; i++) {
                const row = rows[i];
                const dtFrom = row.querySelector('input[name="detail_datetime_from[]"]').value;
                const dtTo = row.querySelector('input[name="detail_datetime_to[]"]').value;

                if (!dtFrom || !dtTo) {
                    continue;
                }

                if (periodeMinDateTime && periodeMaxDateTime) {
                    if (dtFrom < periodeMinDateTime || dtFrom > periodeMaxDateTime || dtTo < periodeMinDateTime || dtTo > periodeMaxDateTime) {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'warning',
                            title: 'Di Luar Periode Lembur',
                            text: `Baris ke-${i + 1}: Tanggal mulai dan selesai pengerjaan harus berada dalam rentang Master Periode Aktif (${periodeMinDateFormatted} s/d ${periodeMaxDateFormatted}).`,
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }                }

                const start = parseCustomDateTime(dtFrom);
                const end = parseCustomDateTime(dtTo);
                if (start && end && end <= start) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: `Baris ke-${i + 1}: DateTime To harus lebih besar dari DateTime From.`,
                        confirmButtonColor: '#028284'
                    });
                    return;
                }
            }

            if (!document.getElementById('send_to').value) {
                e.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Pilih Approver (Sending Approval To) terlebih dahulu.',
                    confirmButtonColor: '#028284'
                });
            }
        });
    </script>
@endsection