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

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

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

    @if ($errors->any())
        <div class="px-4 pt-2">
            <div class="alert alert-danger alert-dismissible fade show p-2" role="alert">
                <span class="alert-icon"><i class="ni ni-fat-remove"></i></span>
                <span class="alert-text"><strong>Error</strong> {{ $errors->first() }}</span>
                <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

    {{-- Action Buttons --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex gap-2">
                        <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        <button type="submit" form="form-realisasi" class="btn btn-success mb-0">
                            <i class="fas fa-save me-1"></i>
                            <span class="font-weight-bold">{{ 'Simpan Realisasi' }}</span>
                        </button>
                        <button type="button" class="btn btn-info mb-0"
                            onclick="confirmSubmitRealisasi('{{ encrypt($permintaan->id) }}')">
                            <i class="fas fa-paper-plane me-1"></i>
                            <span class="font-weight-bold">Finalisasi Realisasi</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Form Content --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Realisasi Permintaan Tenaga Kerja</p>
                        <hr class="horizontal dark mt-0">

                        <div class="row">
                            {{-- KOLOM KIRI --}}
                            <div class="col-md-6">

                                {{-- Nomor Permintaan --}}
                                <div class="form-group">
                                    <label for="no_permintaan" class="form-control-label">Nomor Permintaan</label>
                                    <input type="text" class="form-control bg-primary text-white fw-bold border-primary"
                                        name="no_permintaan" id="no_permintaan" readonly
                                        value="{{ $permintaan->no_permintaan }}">
                                </div>

                                {{-- Input Select Values untuk Jabatan --}}
                                <div class="form-group">
                                    <label for="id_jabatan" class="form-control-label">Posisi yang Dibutuhkan</label>
                                    <input type="text" class="form-control" readonly
                                        value="{{ $permintaan->jabatan->nama }}">
                                </div>

                                {{-- Input Select Values untuk Alasan --}}
                                <div class="form-group">
                                    <label for="id_alasan" class="form-control-label">Alasan</label>
                                    <input type="text" class="form-control" readonly
                                        value="{{ $permintaan->nama_alasan }}">
                                </div>
                            </div>
                            {{-- END KOLOM KIRI --}}

                            {{-- KOLOM KANAN --}}
                            <div class="col-md-6">

                                {{-- Input Nama Karyawan --}}
                                <div class="form-group">
                                    <label for="nama_karyawan" class="form-control-label">Karyawan yang Mengajukan</label>
                                    <input type="text" class="form-control" name="nama_karyawan" id="nama_karyawan"
                                        readonly value="{{ $permintaan->karyawan->nama }}">
                                </div>

                                {{-- Select Bagian --}}
                                <div class="form-group">
                                    <label for="id_bagian" class="form-control-label">Ditempatkan di Bagian</label>
                                    <input type="text" class="form-control"
                                        value="{{ $permintaan->departemen->nama }} - {{ $permintaan->bagian->nama }}"
                                        readonly>
                                </div>

                                {{-- Textarea Uraian Pekerjaan --}}
                                <div class="form-group">
                                    <label for="uraian_pekerjaan" class="form-control-label">Uraian Pekerjaan</label>
                                    <textarea class="form-control" name="uraian_pekerjaan" id="uraian_pekerjaan" rows="1" readonly>{{ $permintaan->uraian_pekerjaan ?? '-' }}</textarea>
                                </div>
                            </div>
                            {{-- END KOLOM KANAN --}}
                        </div>

                        <form action="{{ url('trptkm/realisasi/' . encrypt($permintaan->id)) }}" method="POST"
                            id="form-realisasi">
                            @csrf

                            <div class="form-group">
                                <label class="form-control-label d-block mb-3 mt-4">Tanggal dan Jumlah Permintaan Tenaga
                                    Kerja</label>

                                @error('dataRealisasi')
                                    <small class="text-danger d-block mb-2">{{ $message }}</small>
                                @enderror

                                @php
                                    $grouped = [];
                                    foreach ($detailPermintaan as $item) {
                                        if (!isset($grouped[$item->tanggal])) {
                                            $grouped[$item->tanggal] = [
                                                'tanggal' => $item->tanggal,
                                                'shifts' => [
                                                    1 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                                                    2 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                                                    3 => ['id_detail_permintaan' => null, 'jumlah' => 0],
                                                ],
                                            ];
                                        }

                                        $grouped[$item->tanggal]['shifts'][(int) $item->shift] = [
                                            'id_detail_permintaan' => $item->id,
                                            'jumlah' => (int) $item->jumlah,
                                            'status_os' => $item->status_os,
                                        ];
                                    }

                                    $oldByDetail = [];
                                    foreach (old('dataRealisasi', []) as $oldItem) {
                                        if (!empty($oldItem['id_detail_permintaan'])) {
                                            $detailId = (int) $oldItem['id_detail_permintaan'];
                                            $oldByDetail[$detailId][] = $oldItem['nik'] ?? '';
                                        }
                                    }

                                    $oldStatusByDetail = old('statusOsByDetail', []);

                                    $seedGrouped = [];
                                    foreach ($grouped as $tanggal => $group) {
                                        $seedGrouped[$tanggal] = [
                                            'tanggal' => $tanggal,
                                            'display' => \Carbon\Carbon::parse($tanggal)->format('d-m-Y'),
                                            'shifts' => [],
                                        ];

                                        for ($shift = 1; $shift <= 3; $shift++) {
                                            $shiftData = $group['shifts'][$shift];
                                            $requiredCount = (int) $shiftData['jumlah'];
                                            $detailId = $shiftData['id_detail_permintaan'];
                                            $existingRows =
                                                $detailId && isset($existingByDetail[$detailId])
                                                    ? $existingByDetail[$detailId]
                                                    : [];
                                            $rows =
                                                $detailId && isset($oldByDetail[$detailId])
                                                    ? $oldByDetail[$detailId]
                                                    : (!empty($existingRows)
                                                        ? $existingRows
                                                        : array_fill(0, $requiredCount, ''));

                                            $rows = array_slice(
                                                array_pad($rows, $requiredCount, ''),
                                                0,
                                                $requiredCount,
                                            );

                                            $seedGrouped[$tanggal]['shifts'][$shift] = [
                                                'detail_id' => $detailId,
                                                'required' => $requiredCount,
                                                'niks' => $rows,
                                                'status_os' =>
                                                    $detailId && isset($oldStatusByDetail[$detailId])
                                                        ? $oldStatusByDetail[$detailId]
                                                        : $shiftData['status_os'] ?? null,
                                            ];
                                        }
                                    }

                                    $karyawanMap = [];
                                    foreach ($karyawans as $karyawan) {
                                        $karyawanMap[$karyawan->nik] = $karyawan->nama;
                                    }
                                @endphp

                                @if (empty($seedGrouped))
                                    <div class="alert alert-info mb-3">Tidak ada data detail permintaan.</div>
                                @else
                                    <div class="table-responsive border rounded">
                                        <table class="table align-items-center mb-0" id="realisasi-table"
                                            style="width: 100%;">
                                            <thead style="background-color: #daecff;">
                                                <tr>
                                                    <th class="text-uppercase text-sm font-weight-bolder text-center">
                                                        Tanggal</th>
                                                    <th class="text-uppercase text-sm font-weight-bolder text-center">Shift
                                                        1</th>
                                                    <th class="text-uppercase text-sm font-weight-bolder text-center">Shift
                                                        2</th>
                                                    <th class="text-uppercase text-sm font-weight-bolder text-center">Shift
                                                        3</th>
                                                    <th class="text-uppercase text-sm font-weight-bolder text-center">Action
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($seedGrouped as $tanggal => $item)
                                                    <tr data-date="{{ $tanggal }}">
                                                        <td class="text-center fw-bold">
                                                            {{ \Carbon\Carbon::parse($tanggal)->format('d-m-Y') }}</td>
                                                        @for ($shift = 1; $shift <= 3; $shift++)
                                                            @php
                                                                $required =
                                                                    (int) ($item['shifts'][$shift]['required'] ?? 0);
                                                            @endphp
                                                            <td class="text-center">
                                                                <span class="fw-bold js-summary-cell"
                                                                    data-date="{{ $tanggal }}"
                                                                    data-shift="{{ $shift }}"
                                                                    data-required="{{ $required }}">{{ $required }}</span>
                                                            </td>
                                                        @endfor
                                                        <td class="text-center">
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm mb-0 px-3 js-open-realisasi-modal"
                                                                data-date="{{ $tanggal }}">
                                                                <i class="fas fa-user-check me-1"></i> Realisasi
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endif

                                <div id="realisasi-hidden-inputs"></div>

                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="keterangan_os" class="form-control-label">Keterangan OS</label>
                                            <textarea class="form-control" name="keterangan_os" id="keterangan_os" rows="3">{{ old('keterangan_os', $permintaan->keterangan_os) }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-flex align-items-end">
                                        @error('statusOsByDetail')
                                            <small class="text-danger d-block mb-2">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                        </form>

                        <div class="modal fade" id="modal-realisasi-per-tanggal" tabindex="-1"
                            aria-labelledby="modal-realisasi-per-tanggal-label" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="modal-realisasi-per-tanggal-label">Realisasi Tanggal
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <ul class="nav nav-tabs" id="realisasi-shift-tabs" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="tab-shift-1" data-bs-toggle="tab"
                                                    data-bs-target="#panel-shift-1" type="button" role="tab">
                                                    Shift 1
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="tab-shift-2" data-bs-toggle="tab"
                                                    data-bs-target="#panel-shift-2" type="button" role="tab">
                                                    Shift 2
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="tab-shift-3" data-bs-toggle="tab"
                                                    data-bs-target="#panel-shift-3" type="button" role="tab">
                                                    Shift 3
                                                </button>
                                            </li>
                                        </ul>

                                        <div class="tab-content pt-3">
                                            <div class="tab-pane fade show active" id="panel-shift-1" role="tabpanel">
                                            </div>
                                            <div class="tab-pane fade" id="panel-shift-2" role="tabpanel"></div>
                                            <div class="tab-pane fade" id="panel-shift-3" role="tabpanel"></div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary mb-0"
                                            id="btn-modal-realisasi-batal" data-bs-dismiss="modal">Batal</button>
                                        <button type="button" class="btn btn-primary mb-0"
                                            id="btn-modal-realisasi-simpan">Simpan</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="modal-pilih-karyawan" tabindex="-1"
                            aria-labelledby="modal-pilih-karyawan-label" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable modal-karyawan-wide">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="modal-pilih-karyawan-label">Pilih Karyawan</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="table-responsive" style="overflow-x: hidden;">
                                            <table class="table table-sm table-hover nowrap" id="picker-karyawan-table"
                                                style="width:100%">
                                                <thead style="background-color: #daecff;">
                                                    <tr>
                                                        <th class="text-center">Aksi</th>
                                                        <th>NIK</th>
                                                        <th>Nama</th>
                                                        <th>Departemen</th>
                                                        <th>Bagian</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

        /* Tabel Zebra & Garis Karyawan */
        #picker-karyawan-table tbody tr:nth-child(odd),
        #picker-karyawan-table tbody tr:nth-child(odd) td {
            background-color: #f2f2f2;
        }

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

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

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

@push('js')
    <script>
        $(document).ready(function() {
            const groupedData = @json($seedGrouped);
            const karyawanMap = @json($karyawanMap);
            const karyawanList = {!! json_encode(
                $karyawans->map(function ($item) {
                        return [
                            'nik' => $item->nik,
                            'nama' => $item->nama,
                            'departemen' => $item->departemen->nama ?? '-',
                            'bagian' => $item->bagian->nama ?? '-',
                            'status' => $item->status->nama ?? '-',
                        ];
                    })->values()->all(),
            ) !!};

            const formRealisasi = document.getElementById('form-realisasi');
            const hiddenInputsContainer = document.getElementById('realisasi-hidden-inputs');
            const pickerTable = document.getElementById('picker-karyawan-table');
            const modalRealisasiEl = document.getElementById('modal-realisasi-per-tanggal');
            const btnModalBatal = document.getElementById('btn-modal-realisasi-batal');
            const btnModalSimpan = document.getElementById('btn-modal-realisasi-simpan');

            let activeDate = null;
            let activePickerCtx = null;
            let modalRealisasi = null;
            let modalPicker = null;
            let pickerDataTable = null;
            let modalDateBackup = null;
            let modalIsSaving = false;

            if (window.bootstrap && bootstrap.Modal) {
                const modalRealisasiEl = document.getElementById('modal-realisasi-per-tanggal');
                const modalPickerEl = document.getElementById('modal-pilih-karyawan');

                modalRealisasi = new bootstrap.Modal(modalRealisasiEl);
                modalPicker = new bootstrap.Modal(modalPickerEl);

                modalPickerEl.addEventListener('shown.bs.modal', function() {
                    if (pickerDataTable) {
                        pickerDataTable.columns.adjust().draw();
                    }
                });
            }

            const showWarnMessage = (message) => {
                if (window.Swal && typeof window.Swal.fire === 'function') {
                    window.Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: message,
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#344767'
                    });
                    return;
                }

                window.alert(message);
            };

            const getShiftData = (dateKey, shift) => {
                if (!groupedData[dateKey] || !groupedData[dateKey].shifts[shift]) {
                    return null;
                }
                return groupedData[dateKey].shifts[shift];
            };

            const getFilledCount = (dateKey, shift) => {
                const shiftData = getShiftData(dateKey, shift);
                if (!shiftData) {
                    return 0;
                }
                return (shiftData.niks || []).filter((nik) => String(nik || '').trim() !== '').length;
            };

            const getStatusClass = (required, filled) => {
                if (required === 0) {
                    return 'text-secondary';
                }
                if (filled === required) {
                    return 'text-success';
                }
                return 'text-danger';
            };

            const syncSummaryColor = (dateKey, shift) => {
                const shiftData = getShiftData(dateKey, shift);
                if (!shiftData) {
                    return;
                }

                const required = parseInt(shiftData.required || 0, 10);
                const filled = getFilledCount(dateKey, shift);
                const summaryEl = document.querySelector(
                    `.js-summary-cell[data-date="${dateKey}"][data-shift="${shift}"]`
                );

                if (!summaryEl) {
                    return;
                }

                summaryEl.classList.remove('text-success', 'text-danger', 'text-secondary');
                summaryEl.classList.add(getStatusClass(required, filled));
                summaryEl.textContent = `${required}`;
                summaryEl.title = required === 0 ? 'Tidak ada permintaan' :
                    `Terealisasi ${filled} dari ${required}`;
            };

            const renderAllSummary = () => {
                Object.keys(groupedData).forEach((dateKey) => {
                    [1, 2, 3].forEach((shift) => syncSummaryColor(dateKey, shift));
                });
            };

            const formatDateDisplay = (dateKey) => {
                const parts = dateKey.split('-');
                if (parts.length !== 3) {
                    return dateKey;
                }
                return `${parts[2]}-${parts[1]}-${parts[0]}`;
            };

            const getDisplayKaryawan = (nik) => {
                if (!nik) {
                    return '';
                }
                const nama = karyawanMap[nik] || '-';
                return `${nik} - ${nama}`;
            };

            const isDuplicateNikOnDate = (dateKey, nik, exceptCtx = null) => {
                const n = String(nik || '').trim();
                if (!n) {
                    return false;
                }

                const shifts = groupedData[dateKey] ? groupedData[dateKey].shifts : null;
                if (!shifts) {
                    return false;
                }

                for (let s = 1; s <= 3; s++) {
                    const shiftData = shifts[s];
                    if (!shiftData || !Array.isArray(shiftData.niks)) {
                        continue;
                    }

                    for (let i = 0; i < shiftData.niks.length; i++) {
                        if (exceptCtx && exceptCtx.dateKey === dateKey && exceptCtx.shift === s && exceptCtx
                            .index === i) {
                            continue;
                        }
                        if (String(shiftData.niks[i] || '').trim() === n) {
                            return true;
                        }
                    }
                }

                return false;
            };

            const parseDateKey = (dateKey) => {
                const parts = String(dateKey || '').split('-');
                if (parts.length !== 3) {
                    return null;
                }

                const year = parseInt(parts[0], 10);
                const month = parseInt(parts[1], 10);
                const day = parseInt(parts[2], 10);

                if (!year || !month || !day) {
                    return null;
                }

                return new Date(year, month - 1, day);
            };

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

            const addDaysToDateKey = (dateKey, days) => {
                const parsed = parseDateKey(dateKey);
                if (!parsed) {
                    return null;
                }

                parsed.setDate(parsed.getDate() + days);
                return formatDateKey(parsed);
            };

            const isNikInShift = (dateKey, shift, nik, exceptCtx = null) => {
                const n = String(nik || '').trim();
                if (!n) {
                    return false;
                }

                const shiftData = groupedData[dateKey] ? groupedData[dateKey].shifts[shift] : null;
                if (!shiftData || !Array.isArray(shiftData.niks)) {
                    return false;
                }

                for (let i = 0; i < shiftData.niks.length; i++) {
                    if (exceptCtx && exceptCtx.dateKey === dateKey && exceptCtx.shift === shift && exceptCtx
                        .index === i) {
                        continue;
                    }

                    if (String(shiftData.niks[i] || '').trim() === n) {
                        return true;
                    }
                }

                return false;
            };

            const hasForbiddenShiftTransition = (dateKey, shift, nik, exceptCtx = null) => {
                const n = String(nik || '').trim();
                if (!n) {
                    return false;
                }

                // Aturan: jika hari ini shift 3, maka besok tidak boleh shift 1.
                // Dicek dua arah agar aman walau urutan input dibalik.
                if (shift === 1) {
                    const prevDate = addDaysToDateKey(dateKey, -1);
                    return !!prevDate && isNikInShift(prevDate, 3, n, exceptCtx);
                }

                if (shift === 3) {
                    const nextDate = addDaysToDateKey(dateKey, 1);
                    return !!nextDate && isNikInShift(nextDate, 1, n, exceptCtx);
                }

                return false;
            };

            const getStatusOsOptions = (selectedValue = '', allowTerpenuhi = false) => {
                const options = [{
                        value: '',
                        label: '-- Pilih status --'
                    },
                    {
                        value: 'unmet_os',
                        label: 'Tidak Terpenuhi karena OS tidak bisa mencukupi'
                    },
                    {
                        value: 'unmet_user',
                        label: 'Tidak Terpenuhi karena dibatalkan oleh user'
                    }
                ];

                if (allowTerpenuhi) {
                    options.unshift({
                        value: 'terpenuhi',
                        label: 'Terpenuhi'
                    });
                }

                return options.map((opt) => {
                    const selected = opt.value === String(selectedValue || '') ? 'selected' : '';
                    return `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
                }).join('');
            };

            const buildShiftEntryHtml = (dateKey, shift, index, nik) => {
                const value = getDisplayKaryawan(nik);

                return `
            <div class="input-group mb-2 js-entry-row" data-date="${dateKey}" data-shift="${shift}" data-index="${index}">
              <input type="text" class="form-control bg-white" value="${value}" placeholder="Pilih karyawan" readonly
                style="height: 42px; background-color: #ffffff !important; color: #344767;">
              <button type="button" class="btn fw-bold btn-primary js-open-picker" title="Cari karyawan"
                style="height: 42px; min-width: 42px; padding: 0 24px;">
                <i class="fas fa-magnifying-glass me-1"></i> Cari Karyawan
              </button>
              <button type="button" class="btn fw-bold btn-danger js-delete-entry" title="Hapus baris"
                style="height: 42px; min-width: 42px; padding: 0 24px;">
                <i class="fas fa-trash me-1"></i> Hapus
              </button>
            </div>
          `;
            };

            const renderShiftPanel = (dateKey, shift) => {
                const panel = document.getElementById(`panel-shift-${shift}`);
                if (!panel) {
                    return;
                }

                const shiftData = getShiftData(dateKey, shift);
                if (!shiftData) {
                    panel.innerHTML =
                        '<div class="alert alert-light border mb-0">Data shift tidak ditemukan.</div>';
                    return;
                }

                const required = parseInt(shiftData.required || 0, 10);
                const filled = getFilledCount(dateKey, shift);
                const isFull = required > 0 && filled === required;
                let statusOs = String(shiftData.status_os || '');

                if (required === 0 || !shiftData.detail_id) {
                    panel.innerHTML = `
              <div class="alert mb-0" style="background-color: #daecff; border-color: #daecff; color: #344767;">
                Tidak ada permintaan tenaga kerja pada Shift ${shift}.
              </div>
            `;
                    return;
                }

                const rowCount = (shiftData.niks || []).length;
                const entriesHtml = (shiftData.niks || []).map((nik, index) =>
                    buildShiftEntryHtml(dateKey, shift, index, nik)
                ).join('');
                const canAddRow = rowCount < required;
                const isAutoFulfilled = required > 0 && filled === required;

                if (isAutoFulfilled) {
                    statusOs = 'terpenuhi';
                    shiftData.status_os = 'terpenuhi';
                } else if (statusOs === 'terpenuhi') {
                    statusOs = '';
                    shiftData.status_os = '';
                }

                panel.innerHTML = `
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
              <div class="d-flex flex-wrap gap-2">
                <span class="badge bg-light text-dark border px-3 py-2">Permintaan Shift ${shift}: ${required} orang</span>
                <span class="badge bg-light text-dark border px-3 py-2">Terealisasi: ${filled} orang</span>
                <span class="badge ${isFull ? 'bg-success' : 'bg-danger'} px-3 py-2">${isFull ? 'Sudah Memenuhi' : 'Belum Memenuhi'}</span>
              </div>
              <button type="button" class="text-sm btn btn-sm btn-primary mb-0 js-add-entry" data-date="${dateKey}" data-shift="${shift}" ${canAddRow ? '' : 'disabled'}>
                <i class="fas fa-plus me-2"></i>Tambah Karyawan
              </button>
            </div>
            <div class="mb-4 p-3 rounded" style="background: #f1f7ff; border: 1px solid #cfe2ff; border-left: 4px solid #0d6efd;">
              <label class="form-control-label d-block mb-2 fw-bold text-primary">Status <span class="text-danger">*</span></label>
              <select class="form-control custom-select js-status-os-select" data-date="${dateKey}" data-shift="${shift}" ${isAutoFulfilled ? 'disabled' : ''}>
                ${getStatusOsOptions(statusOs, isAutoFulfilled)}
              </select>
            </div>
            <div class="border-top">
              <div class="text-sm text-uppercase text-secondary fw-bold mt-3 mb-3">Daftar Karyawan</div>
              ${entriesHtml || '<div class="text-muted">Belum ada karyawan yang ditambahkan.</div>'}
            </div>
          `;
            };

            const renderTanggalModal = (dateKey) => {
                activeDate = dateKey;
                modalIsSaving = false;
                modalDateBackup = JSON.parse(JSON.stringify(groupedData[dateKey].shifts || {}));

                const titleEl = document.getElementById('modal-realisasi-per-tanggal-label');
                if (titleEl) {
                    titleEl.textContent = `Realisasi Tanggal ${formatDateDisplay(dateKey)}`;
                }

                [1, 2, 3].forEach((shift) => renderShiftPanel(dateKey, shift));

                const preferredShift = [1, 2, 3].find((s) => {
                    const d = getShiftData(dateKey, s);
                    return d && parseInt(d.required || 0, 10) > 0;
                }) || 1;

                const tabButton = document.getElementById(`tab-shift-${preferredShift}`);
                if (tabButton && bootstrap.Tab) {
                    bootstrap.Tab.getOrCreateInstance(tabButton).show();
                }
            };

            if (modalRealisasiEl) {
                modalRealisasiEl.addEventListener('hide.bs.modal', function() {
                    if (!modalIsSaving && activeDate && modalDateBackup && groupedData[activeDate]) {
                        groupedData[activeDate].shifts = JSON.parse(JSON.stringify(modalDateBackup));
                        [1, 2, 3].forEach((shift) => syncSummaryColor(activeDate, shift));
                    }
                });

                modalRealisasiEl.addEventListener('hidden.bs.modal', function() {
                    modalIsSaving = false;
                    modalDateBackup = null;
                    activePickerCtx = null;
                    activeDate = null;
                });
            }

            if (btnModalSimpan) {
                btnModalSimpan.addEventListener('click', function() {
                    if (activeDate) {
                        for (let shift = 1; shift <= 3; shift++) {
                            const shiftData = getShiftData(activeDate, shift);
                            if (!shiftData || !shiftData.detail_id || parseInt(shiftData.required || 0,
                                    10) === 0) {
                                continue;
                            }

                            if (!String(shiftData.status_os || '').trim()) {
                                showWarnMessage(
                                    'Status setiap shift wajib diisi sebelum menyimpan realisasi tanggal ini.'
                                );
                                return;
                            }
                        }
                    }

                    modalIsSaving = true;
                    if (modalRealisasi) {
                        modalRealisasi.hide();
                    }
                });
            }

            if (btnModalBatal) {
                btnModalBatal.addEventListener('click', function() {
                    modalIsSaving = false;
                });
            }

            document.querySelectorAll('#realisasi-shift-tabs [data-bs-toggle="tab"]').forEach((tabEl) => {
                tabEl.addEventListener('shown.bs.tab', function() {
                    if (!activeDate) {
                        return;
                    }

                    const tabId = this.getAttribute('id') || '';
                    const match = tabId.match(/tab-shift-(\d+)/);
                    const shift = match ? parseInt(match[1], 10) : 0;

                    if (shift >= 1 && shift <= 3) {
                        renderShiftPanel(activeDate, shift);
                    }
                });
            });

            const ensurePickerTable = () => {
                if (!pickerTable || !window.jQuery || !$.fn.DataTable) {
                    return;
                }

                if (pickerDataTable) {
                    pickerDataTable.clear();
                    pickerDataTable.rows.add(karyawanList);
                    pickerDataTable.draw();
                    return;
                }

                pickerDataTable = $(pickerTable).DataTable({
                    paging: true,
                    searching: true,
                    ordering: false,
                    info: true,
                    pageLength: 10,
                    scrollX: true,
                    responsive: false,
                    lengthChange: true,
                    autoWidth: false,
                    stripeClasses: [],

                    dom: '<"row d-flex justify-content-between align-items-center mb-2"<"col-auto"l><"col-auto"f>>rt<"row d-flex justify-content-between align-items-center mt-2"<"col-auto"i><"col-auto"p>>',

                    language: {
                        search: 'Cari :',
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Data karyawan tidak ditemukan.',
                        info: 'Halaman _PAGE_ dari _PAGES_',
                        infoEmpty: 'Halaman 0 dari 0',
                        paginate: {
                            previous: 'Previous',
                            next: 'Next'
                        }
                    },

                    columns: [{
                            data: null,
                            className: 'text-center align-middle py-1 border-0',
                            render: function(data) {
                                return `
                                <button type="button" class="btn btn-primary btn-sm mb-2 px-4 py-2 js-picker-select"
                                    data-nik="${data.nik}" data-nama="${data.nama}">
                                    Pilih
                                </button>
                            `;
                            }
                        },
                        {
                            data: 'nik',
                            className: 'py-1 align-middle border-0'
                        },
                        {
                            data: 'nama',
                            className: 'py-1 align-middle border-0'
                        },
                        {
                            data: 'departemen',
                            className: 'py-1 align-middle border-0'
                        },
                        {
                            data: 'bagian',
                            className: 'py-1 align-middle border-0'
                        },
                        {
                            data: 'status',
                            className: 'py-1 align-middle border-0'
                        }
                    ],
                    data: karyawanList
                });
            };

            const syncHiddenInputs = () => {
                if (!hiddenInputsContainer) {
                    return 0;
                }

                hiddenInputsContainer.innerHTML = '';
                let index = 0;

                Object.keys(groupedData).forEach((dateKey) => {
                    [1, 2, 3].forEach((shift) => {
                        const shiftData = getShiftData(dateKey, shift);
                        if (!shiftData || !shiftData.detail_id || parseInt(shiftData.required ||
                                0, 10) === 0) {
                            return;
                        }

                        (shiftData.niks || []).forEach((nik) => {
                            const value = String(nik || '').trim();
                            if (!value) {
                                return;
                            }

                            const detailInput = document.createElement('input');
                            detailInput.type = 'hidden';
                            detailInput.name =
                                `dataRealisasi[${index}][id_detail_permintaan]`;
                            detailInput.value = shiftData.detail_id;

                            const nikInput = document.createElement('input');
                            nikInput.type = 'hidden';
                            nikInput.name = `dataRealisasi[${index}][nik]`;
                            nikInput.value = value;

                            hiddenInputsContainer.appendChild(detailInput);
                            hiddenInputsContainer.appendChild(nikInput);
                            index++;
                        });

                        const statusOs = String(shiftData.status_os || '').trim();
                        if (statusOs) {
                            const statusInput = document.createElement('input');
                            statusInput.type = 'hidden';
                            statusInput.name = `statusOsByDetail[${shiftData.detail_id}]`;
                            statusInput.value = statusOs;
                            hiddenInputsContainer.appendChild(statusInput);
                        }
                    });
                });

                return index;
            };

            const hasDuplicateOnAnyDate = () => {
                for (const dateKey of Object.keys(groupedData)) {
                    const used = new Set();

                    for (let shift = 1; shift <= 3; shift++) {
                        const shiftData = getShiftData(dateKey, shift);
                        if (!shiftData) {
                            continue;
                        }

                        for (const nik of shiftData.niks || []) {
                            const val = String(nik || '').trim();
                            if (!val) {
                                continue;
                            }

                            if (used.has(val)) {
                                return true;
                            }
                            used.add(val);
                        }
                    }
                }

                return false;
            };

            const hasInvalidShiftTransitionOnAnyDate = () => {
                for (const dateKey of Object.keys(groupedData)) {
                    const nextDate = addDaysToDateKey(dateKey, 1);
                    if (!nextDate || !groupedData[nextDate]) {
                        continue;
                    }

                    const shift3Data = getShiftData(dateKey, 3);
                    const shift1NextData = getShiftData(nextDate, 1);

                    if (!shift3Data || !shift1NextData) {
                        continue;
                    }

                    const nextShift1Set = new Set(
                        (shift1NextData.niks || [])
                        .map((nik) => String(nik || '').trim())
                        .filter((nik) => nik !== '')
                    );

                    for (const nik of shift3Data.niks || []) {
                        const val = String(nik || '').trim();
                        if (!val) {
                            continue;
                        }

                        if (nextShift1Set.has(val)) {
                            return true;
                        }
                    }
                }

                return false;
            };

            const hasMissingStatusOnAnyDate = () => {
                for (const dateKey of Object.keys(groupedData)) {
                    for (let shift = 1; shift <= 3; shift++) {
                        const shiftData = getShiftData(dateKey, shift);
                        if (!shiftData || !shiftData.detail_id || parseInt(shiftData.required || 0, 10) === 0) {
                            continue;
                        }

                        if (!String(shiftData.status_os || '').trim()) {
                            return true;
                        }
                    }
                }

                return false;
            };

            window.confirmSubmitRealisasi = function(id) {
                if (hasMissingStatusOnAnyDate()) {
                    showWarnMessage('Status setiap shift wajib diisi sebelum finalisasi realisasi.');
                    return;
                }

                Swal.fire({
                    title: 'Finalisasi Realisasi',
                    text: 'Apakah Anda yakin ingin untuk finalisasi realisasi ini? Setelah finalisasi, status permintaan akan menjadi Terealisasi.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0d6efd',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Finalisasi!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (!formRealisasi) {
                            return;
                        }

                        syncHiddenInputs();

                        let methodField = formRealisasi.querySelector('input[name="_method"]');
                        if (!methodField) {
                            methodField = document.createElement('input');
                            methodField.type = 'hidden';
                            methodField.name = '_method';
                            formRealisasi.appendChild(methodField);
                        }
                        methodField.value = 'PUT';

                        formRealisasi.action = "{{ url('trptkm/submit-realisasi') }}/" + id;
                        formRealisasi.submit();
                    }
                });
            };

            document.querySelectorAll('.js-open-realisasi-modal').forEach((btn) => {
                btn.addEventListener('click', function() {
                    const dateKey = this.getAttribute('data-date');
                    if (!dateKey) {
                        return;
                    }

                    renderTanggalModal(dateKey);
                    if (modalRealisasi) {
                        modalRealisasi.show();
                    }
                });
            });

            $(document).on('click', '.js-open-picker', function() {
                if (!modalPicker) {
                    return;
                }

                const wrapper = this.closest('.js-entry-row');
                if (!wrapper) {
                    return;
                }

                const dateKey = wrapper.getAttribute('data-date');
                const shift = parseInt(wrapper.getAttribute('data-shift') || '0', 10);
                const index = parseInt(wrapper.getAttribute('data-index') || '-1', 10);

                if (!dateKey || !shift || index < 0) {
                    return;
                }

                activePickerCtx = {
                    dateKey,
                    shift,
                    index
                };

                ensurePickerTable();
                if (pickerDataTable) {
                    pickerDataTable.search('').draw();
                }
                modalPicker.show();
            });

            $(document).on('click', '.js-delete-entry', function() {
                const wrapper = this.closest('.js-entry-row');
                if (!wrapper) {
                    return;
                }

                const dateKey = wrapper.getAttribute('data-date');
                const shift = parseInt(wrapper.getAttribute('data-shift') || '0', 10);
                const index = parseInt(wrapper.getAttribute('data-index') || '-1', 10);

                const shiftData = getShiftData(dateKey, shift);
                if (!shiftData || index < 0) {
                    return;
                }

                shiftData.niks.splice(index, 1);
                renderShiftPanel(dateKey, shift);
                syncSummaryColor(dateKey, shift);
            });

            $(document).on('click', '.js-add-entry', function() {
                const dateKey = this.getAttribute('data-date');
                const shift = parseInt(this.getAttribute('data-shift') || '0', 10);
                const shiftData = getShiftData(dateKey, shift);

                if (!shiftData) {
                    return;
                }

                const required = parseInt(shiftData.required || 0, 10);
                if ((shiftData.niks || []).length >= required) {
                    return;
                }

                shiftData.niks.push('');
                renderShiftPanel(dateKey, shift);
                syncSummaryColor(dateKey, shift);
            });

            $(document).on('change', '.js-status-os-select', function() {
                const dateKey = this.getAttribute('data-date');
                const shift = parseInt(this.getAttribute('data-shift') || '0', 10);
                const shiftData = getShiftData(dateKey, shift);

                if (!shiftData) {
                    return;
                }

                shiftData.status_os = this.value || '';
            });

            if (pickerTable) {
                pickerTable.addEventListener('click', function(e) {
                    const btn = e.target.closest('.js-picker-select');
                    if (!btn || !activePickerCtx) {
                        return;
                    }

                    const nik = btn.getAttribute('data-nik') || '';
                    if (!nik) {
                        return;
                    }

                    if (isDuplicateNikOnDate(activePickerCtx.dateKey, nik, activePickerCtx)) {
                        showWarnMessage(
                            'Karyawan yang sama tidak boleh dipilih lebih dari 1x di tanggal yang sama.'
                        );
                        return;
                    }

                    if (hasForbiddenShiftTransition(activePickerCtx.dateKey, activePickerCtx.shift, nik,
                            activePickerCtx)) {
                        showWarnMessage(
                            'Karyawan yang diinput di Shift 3 pada hari ini tidak boleh diinput di Shift 1 pada hari berikutnya.'
                        );
                        return;
                    }

                    const shiftData = getShiftData(activePickerCtx.dateKey, activePickerCtx.shift);
                    if (!shiftData) {
                        return;
                    }

                    shiftData.niks[activePickerCtx.index] = nik;
                    renderShiftPanel(activePickerCtx.dateKey, activePickerCtx.shift);
                    syncSummaryColor(activePickerCtx.dateKey, activePickerCtx.shift);

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

            if (formRealisasi) {
                formRealisasi.addEventListener('submit', function(e) {
                    if (hasMissingStatusOnAnyDate()) {
                        e.preventDefault();
                        showWarnMessage('Status setiap shift wajib diisi sebelum menyimpan realisasi.');
                        return;
                    }

                    if (hasDuplicateOnAnyDate()) {
                        e.preventDefault();
                        showWarnMessage(
                            'Terdapat karyawan yang dipilih lebih dari 1x pada tanggal yang sama.');
                        return;
                    }

                    if (hasInvalidShiftTransitionOnAnyDate()) {
                        e.preventDefault();
                        showWarnMessage(
                            'Terdapat karyawan yang diinput di Shift 3 lalu di Shift 1 pada hari berikutnya.'
                        );
                        return;
                    }

                    syncHiddenInputs();
                });
            }

            ensurePickerTable();
            renderAllSummary();
        });
    </script>
@endpush