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

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

{{-- Top bar: back & save --}}
<div class="card mx-4 shadow-lg">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper d-flex gap-2">
                    <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>

                    @if ($authorize && $authorize->add == '1')
                    <button type="submit" form="empas-form" class="btn btn-primary mb-0">
                        <i class="fas fa-floppy-disk me-1"></i>
                        <span class="font-weight-bold">Simpan</span>
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Main form --}}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <form role="form" method="POST" action="{{ url($url_menu) }}" id="empas-form">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase mb-2 text-sm">Tambah {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

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

                        {{-- validation errors --}}
                        @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Ada kesalahan dalam form:</strong>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif

                        <div class="row">
                            {{-- LEFT: Assignment details (position, supervisor, effective date) --}}
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label" for="pa_position_id">Posisi <span
                                            class="text-danger">*</span></label>
                                    <select class="form-control @error('pa_position_id') is-invalid @enderror"
                                        id="pa_position_id" name="pa_position_id" required>
                                        <option value="">Pilih Posisi</option>
                                        @foreach ($positions as $position)
                                        <option value="{{ $position->id }}" {{ old('pa_position_id')==$position->id ?
                                            'selected' : '' }}>
                                            {{ $position->position_name }} - {{ $position->department_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('pa_position_id')
                                    <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="supervisor_nik">Penilai <span
                                            class="text-danger">*</span></label>
                                    <select class="form-control @error('supervisor_nik') is-invalid @enderror"
                                        id="supervisor_nik" name="supervisor_nik" required>
                                        <option value="">Pilih Penilai</option>
                                        @foreach ($supervisors as $supervisor)
                                        <option value="{{ $supervisor->nik }}" {{ old('supervisor_nik')==$supervisor->
                                            nik ? 'selected' : '' }}>
                                            {{ $supervisor->full_name }} - {{ $supervisor->nik }}
                                            @if ($supervisor->job_title)
                                            ({{ $supervisor->job_title }})
                                            @endif
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('supervisor_nik')
                                    <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="effective_month">Berlaku Mulai <span
                                            class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-control @error('effective_year') is-invalid @enderror"
                                                id="effective_year" name="effective_year" required>
                                                <option value="">Pilih Tahun</option>
                                                @foreach ($yearOptions as $value => $label)
                                                <option value="{{ $value }}" {{ old('effective_year',
                                                    $selectedYear)==$value ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('effective_year')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control @error('effective_month') is-invalid @enderror"
                                                id="effective_month" name="effective_month" required>
                                                <option value="">Pilih Bulan</option>
                                                @foreach ($monthOptions as $value => $label)
                                                <option value="{{ $value }}" {{ old('effective_month',
                                                    $selectedMonth)==$value ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('effective_month')
                                            <p class='text-danger pt-1 text-xs'>{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    <small class="text-secondary d-block mt-2">
                                        Tanggal efektif yang sama akan diterapkan ke semua karyawan yang dipilih.
                                    </small>
                                </div>
                            </div>

                            {{-- RIGHT: Employee selection table --}}
                            <div class="col-md-8">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label mb-0">Pilih Karyawan</label>
                                    <div class="d-flex gap-2" style="min-width: 420px;">
                                        {{-- Department filter --}}
                                        <select id="departmentSelect" class="form-select" style="max-width: 220px;">
                                            <option value="">Semua Departemen</option>
                                            @foreach ($departments as $dep)
                                            <option value="{{ $dep->id }}" {{ ($selectedDepartment ?? '' )==$dep->id ?
                                                'selected' : '' }}>
                                                {{ $dep->nama }}
                                            </option>
                                            @endforeach
                                        </select>

                                        {{-- Search input --}}
                                        <div class="input-group">
                                            <input type="text" id="qInput" value="{{ request('q') }}"
                                                class="form-control" placeholder="Cari karyawan...">
                                        </div>
                                    </div>
                                </div>

                                <div id="employees_wrapper" data-url="{{ url($url_menu . '/employees') }}">
                                    {{-- AJAX table loaded here --}}
                                </div>
                            </div>
                        </div>

                        <hr class="horizontal dark">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .select2-container--bootstrap4 .select2-results__options {
        max-height: 220px;
        overflow-y: auto;
    }
</style>

@push('js')
<script>
    $(function() {
                // Initialize select2
                if ($.fn.select2) {
                    $('select').select2({
                        theme: 'bootstrap4',
                        width: '100%'
                    });

                    // Reload table on department change
                    $('#departmentSelect')
                        .on('change', function() {
                            if (window.loadEmployeesTable) window.loadEmployeesTable();
                        })
                        .on('select2:clear', function() {
                            if (window.loadEmployeesTable) window.loadEmployeesTable();
                        })
                        .on('select2:select', function() {
                            if (window.loadEmployeesTable) window.loadEmployeesTable();
                        });
                }
            });

            // Employee selection with localStorage persistence
            (function() {
                const WRAP_ID = 'employees_wrapper';
                const LS_KEY = 'empas:selectedEmployees';

                // Clear on page refresh
                window.addEventListener('pageshow', function(e) {
                    if (!e.persisted) {
                        localStorage.removeItem(LS_KEY);
                    }
                });

                // LocalStorage helpers
                function getSelected() {
                    try {
                        return new Set(JSON.parse(localStorage.getItem(LS_KEY) || '[]'));
                    } catch {
                        return new Set();
                    }
                }

                function saveSelected(set) {
                    localStorage.setItem(LS_KEY, JSON.stringify(Array.from(set)));
                }

                function toggleSelected(id, checked) {
                    const s = getSelected();
                    checked ? s.add(String(id)) : s.delete(String(id));
                    saveSelected(s);
                }

                function reapplyChecks() {
                    const s = getSelected();
                    document.querySelectorAll('#' + WRAP_ID + ' .emp-check').forEach(cb =>
                        cb.checked = s.has(String(cb.value))
                    );

                    const wrap = document.getElementById(WRAP_ID);
                    const all = wrap?.querySelectorAll('.emp-check') ?? [];
                    const chk = wrap?.querySelectorAll('.emp-check:checked') ?? [];
                    const master = wrap?.querySelector('#master_emp_check');
                    if (master) master.checked = all.length > 0 && chk.length === all.length;
                }

                function wireTableEvents() {
                    const wrap = document.getElementById(WRAP_ID);
                    if (!wrap) return;

                    // Individual checkboxes
                    wrap.querySelectorAll('.emp-check').forEach(cb => {
                        cb.addEventListener('change', () => {
                            toggleSelected(cb.value, cb.checked);
                            const all = wrap.querySelectorAll('.emp-check');
                            const chk = wrap.querySelectorAll('.emp-check:checked');
                            const master = wrap.querySelector('#master_emp_check');
                            if (master) master.checked = all.length > 0 && chk.length === all.length;
                        });
                    });

                    // Master checkbox
                    const master = wrap.querySelector('#master_emp_check');
                    if (master) {
                        master.addEventListener('change', () => {
                            wrap.querySelectorAll('.emp-check').forEach(cb => {
                                cb.checked = master.checked;
                                toggleSelected(cb.value, master.checked);
                            });
                        });
                    }

                    // Ajaxify pagination
                    wrap.querySelectorAll('.pagination a.page-link, .pagination a').forEach(a => {
                        a.addEventListener('click', e => {
                            e.preventDefault();
                            if (a.href) loadTable(a.href);
                        });
                    });
                }

                // Build URL with filters
                function buildUrl(baseUrl, pageUrl) {
                    const u = new URL(pageUrl || baseUrl, window.location.origin);
                    const q = document.getElementById('qInput')?.value?.trim() || '';
                    const dep = $('#departmentSelect').val() || '';

                    if (!pageUrl) u.search = '';
                    if (q) u.searchParams.set('q', q);
                    else u.searchParams.delete('q');
                    if (dep) u.searchParams.set('department', dep);
                    else u.searchParams.delete('department');

                    return u.toString();
                }

                // Load table via AJAX
                async function loadTable(pageUrl) {
                    const wrap = document.getElementById(WRAP_ID);
                    const baseUrl = wrap?.dataset.url;
                    if (!wrap || !baseUrl) return;

                    const url = buildUrl(baseUrl, pageUrl);

                    wrap.innerHTML = '<div class="text-center py-3">Memuat...</div>';
                    try {
                        const resp = await fetch(url, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        const html = await resp.text();
                        wrap.innerHTML = html;
                        reapplyChecks();
                        wireTableEvents();

                        // Initialize DataTables
                        const tableElem = wrap.querySelector('table');
                        if (tableElem) {
                            if ($.fn.DataTable.isDataTable(tableElem)) {
                                $(tableElem).DataTable().destroy();
                            }
                            $(tableElem).DataTable({
                                paging: false,
                                info: false,
                                searching: false,
                                ordering: true,
                                responsive: true,
                                order: [],
                                columnDefs: [{
                                        targets: 0,
                                        orderable: false
                                    } // Checkbox column not orderable
                                ]
                            });
                        }
                    } catch {
                        wrap.innerHTML = '<div class="text-danger py-3">Gagal memuat data.</div>';
                    }
                }

                window.loadEmployeesTable = loadTable;

                // Debounce helper
                function debounce(fn, delay) {
                    let t = null;
                    return (...a) => {
                        clearTimeout(t);
                        t = setTimeout(() => fn(...a), delay);
                    };
                }

                // Search input
                const qInput = document.getElementById('qInput');
                if (qInput) {
                    qInput.addEventListener('keydown', e => {
                        if (e.key === 'Enter') e.preventDefault();
                    });
                    qInput.addEventListener('input', debounce(() => loadTable(), 300));
                }

                // Initial load
                loadTable();

                // Form submission with duplicate validation
                let isSubmitting = false;
                const submitButton = document.querySelector('button[type="submit"][form="empas-form"]');
                const originalButtonHtml = submitButton?.innerHTML || '';

                const form = document.getElementById('empas-form');
                form?.addEventListener('submit', async (e) => {
                    e.preventDefault();

                    if (isSubmitting) {
                        return false;
                    }

                    // Inject employee NIKs from localStorage
                    const set = getSelected();
                    form.querySelectorAll('input[name="employee_niks[]"].injected').forEach(n => n.remove());
                    set.forEach(id => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'employee_niks[]';
                        input.value = id;
                        input.classList.add('injected');
                        form.appendChild(input);
                    });

                    // Validate: at least one employee selected
                    if (set.size === 0) {
                        Swal.fire({
                            title: 'Karyawan Belum Dipilih',
                            text: 'Mohon pilih minimal satu karyawan untuk penugasan',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: PA Position is selected
                    const paPositionId = document.getElementById('pa_position_id').value;
                    if (!paPositionId) {
                        Swal.fire({
                            title: 'Posisi Belum Dipilih',
                            text: 'Mohon pilih posisi PA untuk penugasan',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Supervisor is selected
                    const supervisorNik = document.getElementById('supervisor_nik').value;
                    if (!supervisorNik) {
                        Swal.fire({
                            title: 'Penilai Belum Dipilih',
                            text: 'Mohon pilih penilai untuk penugasan',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Get effective date
                    const effectiveMonth = document.getElementById('effective_month').value;
                    const effectiveYear = document.getElementById('effective_year').value;

                    if (!effectiveMonth || !effectiveYear) {
                        Swal.fire({
                            title: 'Tanggal Belum Dipilih',
                            text: 'Mohon pilih bulan dan tahun efektif',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Month must be between 1-12
                    const monthNum = parseInt(effectiveMonth);
                    if (isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
                        Swal.fire({
                            title: 'Bulan Tidak Valid',
                            text: 'Bulan harus antara 1-12',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Year must be between 1900-2100
                    const yearNum = parseInt(effectiveYear);
                    if (isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
                        Swal.fire({
                            title: 'Tahun Tidak Valid',
                            text: 'Tahun harus antara 1900-2100',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Check for duplicate assignments via AJAX
                    try {
                        Swal.fire({
                            title: 'Memeriksa Data...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => Swal.showLoading()
                        });

                        const response = await fetch('{{ url('ajax/check-duplicate-assignments') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                employee_niks: Array.from(set),
                                effective_month: effectiveMonth,
                                effective_year: effectiveYear
                            })
                        });

                        const result = await response.json();

                        Swal.close();

                        if (result.has_duplicates) {
                            // Show confirmation that existing assignments will be UPDATED
                            const duplicateList = result.duplicates.map(d =>
                                `• ${d.employee_name} - Posisi saat ini: <strong>${d.position_name}</strong>`
                            ).join('<br>');

                            const confirmResult = await Swal.fire({
                                title: 'Penugasan Sudah Ada',
                                html: `<div class="text-start">
                                    <p class="mb-2">Karyawan berikut sudah memiliki penugasan pada <strong>${result.effective_date_formatted}</strong>:</p>
                                    <div class="mb-3" style="max-height: 200px; overflow-y: auto;">
                                        ${duplicateList}
                                    </div>
                                    <p class="mb-2">Penugasan yang ada akan <strong>diperbarui</strong> dengan data baru.</p>
                                    <p class="mb-0 text-muted small">Lanjutkan?</p>
                                </div>`,
                                icon: 'info',
                                showCancelButton: true,
                                confirmButtonColor: '#028284',
                                cancelButtonColor: '#6c757d',
                                confirmButtonText: 'Ya, Lanjutkan',
                                cancelButtonText: 'Batal'
                            });

                            if (!confirmResult.isConfirmed) {
                                return false;
                            }
                        }else {
                            const confirmSave = await Swal.fire({
                            title: 'Konfirmasi Simpan',
                            text: 'Apakah data yang akan disimpan sudah benar?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#028284',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Ya, Simpan',
                            cancelButtonText: 'Batal'
                            });

                            if (!confirmSave.isConfirmed) {
                                return false;
                            }
                        }

                        // Proceed with submission
                        isSubmitting = true;

                        if (submitButton) {
                            submitButton.disabled = true;
                            submitButton.innerHTML =
                                '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Menyimpan...</span>';
                        }

                        Swal.fire({
                            title: 'Menyimpan Data...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => Swal.showLoading()
                        });

                        setTimeout(() => form.submit(), 100);

                    } catch (error) {
                        Swal.fire({
                            title: 'Terjadi Kesalahan',
                            text: 'Gagal memeriksa data. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        console.error('Duplicate check error:', error);
                    }

                    return false;
                });
            })();
</script>
@endpush
@endsection