@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' => ''])
    {{-- Sweet Alert handlers untuk session error/success --}}
    @if (session('error'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: @json(session('error')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('success'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: @json(session('success')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    <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">Tambah {{ $title_menu }}</h5>
                        </div>
                        <div class="card-body">
                            @include('components.alert')
                            <form action="{{ URL::to($url_menu) }}" method="POST" id="formRedeem">
                                @csrf

                                <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="{{ $profile->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="{{ $profile->nama ?? '' }}" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="departemen">Departemen</label>
                                            <input type="text" class="form-control" id="departemen" value="{{ $profile->departemen ?? '' }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="jabatan">Jabatan</label>
                                            <input type="text" class="form-control" id="jabatan" value="{{ $profile->jabatan ?? '' }}" 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 }}">
                                                        {{ $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"></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">(Anda otomatis terdaftar sebagai peserta, hapus jika 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>Simpan
                                    </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;

        // Auto-add current user as participant on page load
        @if($profile && $user_login)
            participants.push({
                nik: '{{ $profile->nik ?? "" }}',
                nama: '{{ $profile->nama ?? "" }}',
                departemenId: '{{ $profile->departemen_id ?? "" }}',
                jabatanId: '{{ $profile->jabatan_id ?? "" }}',
                bagianId: '{{ $profile->bagian_id ?? "" }}',
                userId: '{{ $user_login->id }}',
                departemenNama: '{{ $profile->departemen ?? "" }}',
                jabatanNama: '{{ $profile->jabatan ?? "" }}',
                bagianNama: '{{ $profile->bagian ?? "" }}'
            });
            renderParticipants();
        @endif

        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('formRedeem').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