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

    @push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Edit {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body">
                            @include('components.alert')
                            <form action="{{ URL::to($url_menu . '/update/' . encrypt($record->id)) }}" method="POST" id="formRedeemEdit">
                                @csrf
                                @method('PUT')

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nik_pemohon">NIK Pemohon</label>
                                            <input type="text" class="form-control" id="nik_pemohon" value="{{ $record->nik }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nama_pemohon">Nama Pemohon</label>
                                            <input type="text" class="form-control" id="nama_pemohon" value="{{ $record->nama }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tanggal">Tanggal Cuti Bersama <span class="text-danger">*</span></label>
                                            <select class="form-select" id="tanggal" name="tanggal" required>
                                                <option value="">-- Pilih Tanggal --</option>
                                                @foreach($liburList as $libur)
                                                    <option value="{{ $libur->tanggal }}" {{ $record->tanggal == $libur->tanggal ? 'selected' : '' }}>
                                                        {{ $format->TanggalIndonesia($libur->tanggal) }} - {{ $libur->deskripsi }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="catatan">Catatan</label>
                                            <textarea class="form-control" id="catatan" name="catatan" rows="1">{{ $record->catatan }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <hr class="horizontal dark mt-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Peserta <span class="text-muted" style="font-size:0.8em">(Hapus peserta yang tidak ikut)</span></h6>
                                    <button type="button" class="btn btn-sm btn-success" onclick="openParticipantModal()">
                                        <i class="fas fa-plus me-1"></i>Tambah Peserta
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped" id="tableParticipants">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>NIK</th>
                                                <th>Nama</th>
                                                <th>Departemen</th>
                                                <th>Jabatan</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody id="participantsBody">
                                        </tbody>
                                    </table>
                                </div>

                                <div class="mt-4 d-flex justify-content-between">
                                    <a href="{{ URL::to($url_menu) }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i>Perbarui
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Participant Search Modal -->
    <div class="modal fade" id="participantModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cari Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm display" id="karyawanTable" style="width:100%">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="40"><input type="checkbox" id="selectAllKaryawan"></th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                    <th>Jabatan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($karyawanList as $k)
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="karyawan-check"
                                                data-nik="{{ $k->nik }}"
                                                data-nama="{{ $k->nama }}"
                                                data-departemen-id="{{ $k->id_departemen }}"
                                                data-jabatan-id="{{ $k->id_jabatan }}"
                                                data-bagian-id="{{ $k->id_bagian }}"
                                                data-user-id="{{ optional(DB::table('users')->where('username', $k->nik)->first())->id ?? '' }}"
                                                data-departemen-nama="{{ $k->departemen ?? '' }}"
                                                data-jabatan-nama="{{ $k->jabatan ?? '' }}"
                                                data-bagian-nama="{{ $k->bagian ?? '' }}">
                                        </td>
                                        <td>{{ $k->nik }}</td>
                                        <td>{{ $k->nama }}</td>
                                        <td>{{ $k->departemen ?? '-' }}</td>
                                        <td>{{ $k->jabatan ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" onclick="selectCheckedParticipants()">
                        <i class="fas fa-plus me-1"></i>Pilih Terpilih
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        let participants = [];
        let karyawanDt = null;
        @foreach($record->participants as $p)
            participants.push({
                nik: '{{ $p->nik }}',
                nama: '{{ $p->nama }}',
                departemenId: '{{ $p->id_departemen ?? '' }}',
                jabatanId: '{{ $p->id_jabatan ?? '' }}',
                bagianId: '{{ $p->id_bagian ?? '' }}',
                userId: '{{ $p->user_id }}',
                departemenNama: '{{ $p->departemen ?? '' }}',
                jabatanNama: '{{ $p->jabatan ?? '' }}',
                bagianNama: '{{ $p->bagian ?? '' }}'
            });
        @endforeach
        renderParticipants();

        function openParticipantModal() {
            const modal = new bootstrap.Modal(document.getElementById('participantModal'));
            modal.show();
            if (!karyawanDt) {
                karyawanDt = $('#karyawanTable').DataTable({
                    pageLength: 10,
                    lengthChange: true,
                    ordering: true,
                    language: {
                        search: "Cari :",
                        lengthMenu: "Tampilkan _MENU_ baris",
                        zeroRecords: "Maaf - Data tidak ada",
                        info: "Data _START_ - _END_ dari _TOTAL_",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(pencarian dari _MAX_ data)"
                    }
                });
            }
        }

        document.getElementById('selectAllKaryawan').addEventListener('change', function() {
            document.querySelectorAll('.karyawan-check').forEach(cb => cb.checked = this.checked);
        });

        function selectCheckedParticipants() {
            const checked = document.querySelectorAll('#karyawanTable tbody .karyawan-check:checked');
            if (checked.length === 0) {
                Swal.fire('Info', 'Tidak ada karyawan yang dipilih.', 'info');
                return;
            }

            let added = 0;
            let skipped = 0;

            checked.forEach(cb => {
                const nik = cb.dataset.nik;
                const nama = cb.dataset.nama;
                const departemenId = cb.dataset.departemenId;
                const jabatanId = cb.dataset.jabatanId;
                const bagianId = cb.dataset.bagianId;
                const userId = cb.dataset.userId;
                const departemenNama = cb.dataset.departemenNama;
                const jabatanNama = cb.dataset.jabatanNama;
                const bagianNama = cb.dataset.bagianNama;

                if (!userId) {
                    skipped++;
                    return;
                }
                if (participants.find(p => p.nik === nik)) {
                    skipped++;
                    return;
                }

                participants.push({ nik, nama, departemenId, jabatanId, bagianId, userId, departemenNama, jabatanNama, bagianNama });
                added++;
            });

            document.querySelectorAll('#karyawanTable .karyawan-check').forEach(cb => cb.checked = false);
            document.getElementById('selectAllKaryawan').checked = false;

            renderParticipants();
            bootstrap.Modal.getInstance(document.getElementById('participantModal')).hide();

            if (added > 0 && skipped > 0) {
                Swal.fire('Info', `${added} karyawan ditambahkan, ${skipped} dilewati (sudah ada atau tidak punya akun).`, 'info');
            } else if (skipped > 0) {
                Swal.fire('Info', `${skipped} karyawan dilewati (sudah ada atau tidak punya akun).`, 'info');
            }
        }

        function removeParticipant(nik) {
            participants = participants.filter(p => p.nik !== nik);
            renderParticipants();
        }

        function renderParticipants() {
            const tbody = document.getElementById('participantsBody');
            if (participants.length === 0) {
                tbody.innerHTML = '<tr id="emptyRow"><td colspan="5" class="text-center text-danger"><i class="fas fa-exclamation-circle me-1"></i>Belum ada peserta. Tambahkan minimal 1 peserta untuk melanjutkan.</td></tr>';
                return;
            }
            tbody.innerHTML = participants.map((p, i) => `
                <tr>
                    <td>${p.nik}<input type="hidden" name="participants[${i}][nik]" value="${p.nik}"></td>
                    <td>${p.nama}<input type="hidden" name="participants[${i}][nama]" value="${p.nama}"></td>
                    <td>${p.departemenNama || '-'}<input type="hidden" name="participants[${i}][departemen_id]" value="${p.departemenId || ''}"></td>
                    <td>${p.jabatanNama || '-'}<input type="hidden" name="participants[${i}][jabatan_id]" value="${p.jabatanId || ''}"></td>
                    <td>
                        <input type="hidden" name="participants[${i}][user_id]" value="${p.userId}">
                        <input type="hidden" name="participants[${i}][bagian_id]" value="${p.bagianId || ''}">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeParticipant('${p.nik}')"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
            `).join('');
        }

        document.getElementById('formRedeemEdit').addEventListener('submit', function(e) {
            if (!document.getElementById('tanggal').value) {
                e.preventDefault();
                Swal.fire('Error', 'Tanggal cuti bersama wajib dipilih.', 'error');
                return;
            }
            if (participants.length === 0) {
                e.preventDefault();
                Swal.fire('Error', 'Peserta wajib diisi, paling tidak 1 peserta.', 'error');
                return;
            }
        });
    </script>
@endpush