@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">Edit Pengajuan SPL - {{ $spl->no_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-warning 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 ?? 'Master Periode Lembur sedang tidak aktif atau hari ini di luar rentang periode aktif. Pengajuan lembur tidak dapat diedit/disimpan.' }}
                                </div>
                            </div>
                        @endif
                        <form role="form" method="POST" action="{{ url('/pengajuan-spl/update') }}"
                            id="spl-form">
                            @csrf
                            <input type="hidden" name="spl_id" value="{{ $spl->id }}">

                            {{-- ====== 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">
                                        {{-- No SPL (readonly) --}}
                                        <div class="col-md-3 mb-3">
                                            <label class="form-label">No SPL</label>
                                            <input type="text" class="form-control" value="{{ $spl->no_spl }}" readonly
                                                style="background:#f0f0f0">
                                        </div>

                                        {{-- Tanggal Pengajuan --}}
                                        <div class="col-md-3 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', $spl->tanggal_pengajuan) }}" required>
                                            @error('tanggal_pengajuan')
                                                <span class="text-danger d-block">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- NIK Pemohon --}}
                                        <div class="col-md-3 mb-3">
                                            <label for="nik" class="form-label">NIK Pemohon <span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" name="nik" id="nik" class="form-control"
                                                    value="{{ old('nik', $spl->nik) }}" 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">
                                                {{ !empty($use_self_default) ? ($self_nama ?? '') : ($karyawan_map[$spl->nik] ?? '') }}
                                            </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-3 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', $spl->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', $spl->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', $spl->send_to) }}" required>
                                                <div class="input-group">
                                                    <input type="text" id="send_to_display" class="form-control" readonly
                                                        placeholder="Pilih Approver..."
                                                        value="{{ $approver_selected_name ?? '' }}">
                                                    <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>
                                        @if(!empty($is_periode_active))
                                            <span class="badge bg-primary text-white" style="font-size: 11px;">
                                                <i class="fas fa-calendar-check me-1"></i>Periode Lembur Aktif: {{ \Carbon\Carbon::parse($periode_min_date)->format('d M Y') }} s/d {{ \Carbon\Carbon::parse($periode_max_date)->format('d M Y') }}
                                            </span>
                                        @else
                                            <span class="badge bg-danger text-white" style="font-size: 11px;">
                                                <i class="fas fa-exclamation-circle me-1"></i>Master Periode Lembur Tidak Aktif
                                            </span>
                                        @endif
                                    </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">DateTime From <span class="text-danger">*</span></th>
                                                    <th width="170px">DateTime To <span class="text-danger">*</span></th>
                                                    <th width="80px">Break (Menit)</th>
                                                    <th width="70px">Hour</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">
                                                {{-- Existing rows loaded via JS --}}
                                            </tbody>
                                        </table>
                                    </div>
                                    <small class="text-muted"><span class="text-danger">*</span> Kolom wajib diisi. Hour dihitung otomatis dari From - To - Break.</small>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <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" @if(empty($is_periode_active)) disabled title="Master Periode Lembur tidak aktif" @endif>
                                    <i class="fas fa-save me-1"></i> Update SPL
                                </button>
                            </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;
        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('{{ route("pengajuan.spl.search.karyawan") }}', { search: search, page: karyawanPage }, 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;

            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 || '-';

            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 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;
            }

            releaseSelfModeFromDetails();

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

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

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

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

        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 = (o.value == 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 (optionally with existing data)
        function addDetailRow(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); updateMinDateTime(this);" value="${safeData.datetime_from}">
                </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)" value="${safeData.datetime_to}">
                </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">
                    <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>
                </td>
                
            `;
            tbody.appendChild(tr);

            if (isSelfModeEnabled()) {
                setDetailRowAsSelf(tr);
                setDetailRowNikSelectorState(tr, true);
            }
            toggleDeleteButtons();
            let dateInput = tr.querySelector('input[name="detail_datetime_from[]"]');
            if (dateInput) {
                updateMinDateTime(dateInput);
            }
        }

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

        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);
                }
            });
            toggleDeleteButtons();
        }

        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 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 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 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) {
                // Load existing detail rows
                @foreach ($spl_details as $detail)
                    addDetailRow({
                        nik: '{{ $detail->nik }}',
                        nama: '{{ $karyawan_map[$detail->nik] ?? "-" }}',
                        datetime_from: '{{ $detail->tanggal_lembur ? \Carbon\Carbon::parse($detail->tanggal_lembur)->format("Y-m-d") : "" }}T{{ $detail->jam_mulai ? \Carbon\Carbon::parse($detail->jam_mulai)->format("H:i") : "" }}',
                        datetime_to: '{{ $detail->tanggal_lembur ? \Carbon\Carbon::parse($detail->tanggal_lembur)->format("Y-m-d") : "" }}T{{ $detail->jam_selesai ? \Carbon\Carbon::parse($detail->jam_selesai)->format("H:i") : "" }}',
                        agenda: '{{ addslashes($detail->agenda) }}',
                        break_jam: '{{ $detail->break_jam }}',
                        jam_lembur: '{{ $detail->jam_lembur }}',
                        id_jenis_lembur: '{{ $detail->id_jenis_lembur }}',
                        id_tipe_lembur: '{{ $detail->id_tipe_lembur }}'
                    });
                @endforeach
            }

            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);
            }
        });

        document.getElementById('spl-form').addEventListener('submit', function(e) {
            // 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