@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="absensi-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="absensi-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: Period selection (checkboxes) + quick presets --}}
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Periode & Bulan</label>
                                        @foreach ($periods as $p)
                                            <div class="card mb-3" style="border: 1px solid #dee2e6;">
                                                <div class="card-header px-3 py-2" style="background-color: #f8f9fa;">
                                                    <h6 class="font-weight-bold mb-0">
                                                        Periode {{ $p->quarter }} - {{ $p->year }}
                                                        <span
                                                            class="badge badge-sm {{ $p->status == 'active' ? 'bg-gradient-success' : 'bg-gradient-warning' }}">
                                                            {{ strtoupper($p->status) }}
                                                        </span>
                                                    </h6>
                                                </div>
                                                <div class="card-body px-3 py-2">
                                                    <div class="d-flex flex-wrap gap-2">
                                                        @foreach ($p->months as $m)
                                                            <div class="form-check">
                                                                <input class="form-check-input month-check" type="checkbox"
                                                                    name="month_ids[]" id="month_{{ $m->id }}"
                                                                    value="{{ $m->id }}"
                                                                    {{ in_array($m->id, $selectedMonthIds ?? []) ? 'checked' : '' }}>
                                                                <label class="form-check-label"
                                                                    for="month_{{ $m->id }}">
                                                                    @php
                                                                        $monthName = date(
                                                                            'F',
                                                                            mktime(0, 0, 0, $m->month, 1),
                                                                        );
                                                                    @endphp
                                                                    {{ $monthName }} {{ $m->year }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                        <small class="text-secondary d-block mt-2">
                                            Centang satu atau beberapa bulan untuk menerapkan keterangan absensi. Hanya
                                            periode yang aktif
                                            yang ditampilkan.
                                        </small>
                                    </div>

                                    <div class="mb-3">
                                        <label for="reason" class="form-label">Alasan <span class="text-danger">*</span></label>
                                        <select name="reason" id="reason" class="form-select" required>
                                            <option value="">-- Pilih Alasan --</option>
                                            <option value="cuti"
                                                {{ old('reason', $reason) == 'cuti' ? 'selected' : '' }}>Cuti</option>
                                            <option value="nihil"
                                                {{ old('reason', $reason) == 'nihil' ? 'selected' : '' }}>Nihil</option>
                                        </select>
                                        <small class="text-secondary">Pilih alasan untuk keterangan absensi
                                            karyawan.</small>
                                    </div>
                                </div>

                                {{-- RIGHT: Employee checklist 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 (aktif)</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 (debounced, no button) --}}
                                            <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') }}">
                                        {{-- Server renders initial table as fallback. Optional:
             @include('transc.cutikaryawan.employees') --}}
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pb-2 pt-0">
                            {{-- empty footer; Save handled by top bar --}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

                    // IMPORTANT: re-load table on change / clear
                    $('#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();
                        });
                }
            });

            // Month helpers (removed select all / clear all buttons)
            const monthChecks = document.querySelectorAll('.month-check');

            // Employee helpers
            const masterEmp = document.getElementById('master_emp_check');
            const empChecks = document.querySelectorAll('.emp-check');
            masterEmp?.addEventListener('change', (e) => {
                empChecks.forEach(cb => cb.checked = e.target.checked);
            });

            (function() {
                const WRAP_ID = 'employees_wrapper';
                const LS_KEY = 'keteranganabsensi:selectedEmployees';

                window.addEventListener('pageshow', function(e) {
                    if (!e.persisted) {
                        localStorage.removeItem(LS_KEY);
                    }
                });

                // keep your existing localStorage helpers here...
                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;

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

                    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 q + department (and preserve page if provided)
                function buildUrl(baseUrl, pageUrl) {
                    const u = new URL(pageUrl || baseUrl, window.location.origin);
                    const q = document.getElementById('qInput')?.value?.trim() || '';
                    const dep = $('#departmentSelect').val() || '';

                    // Normalize to base path if not a pagination link
                    if (!pageUrl) {
                        u.search = ''; // reset
                    }

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

                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();
                    } catch {
                        wrap.innerHTML = '<div class="text-danger py-3">Gagal memuat data.</div>';
                    }
                }

                window.loadEmployeesTable = loadTable;

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

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

                // Department filter
                const depSel = document.getElementById('departmentSelect');
                depSel?.addEventListener('change', () => loadTable()); // immediate filter

                // Initial load
                loadTable();

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

                // Inject selected IDs into POST on submit
                const form = document.getElementById('absensi-form');
                form?.addEventListener('submit', (e) => {
                    // Prevent double submission
                    if (isSubmitting) {
                        e.preventDefault();
                        return false;
                    }

                    // Validate: Check if at least one month is selected
                    const selectedMonths = document.querySelectorAll('.month-check:checked');
                    if (selectedMonths.length === 0) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Periode Belum Dipilih',
                            text: 'Mohon pilih minimal satu bulan untuk keterangan absensi',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Check if reason is selected
                    const reason = document.getElementById('reason')?.value;
                    if (!reason) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Alasan Belum Dipilih',
                            text: 'Mohon pilih alasan untuk keterangan absensi',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Inject employee IDs 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: Check if at least one employee is selected
                    if (set.size === 0) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Karyawan Belum Dipilih',
                            text: 'Mohon pilih minimal satu karyawan untuk keterangan absensi',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Prevent form submission temporarily
                    e.preventDefault();

                    // Set submitting flag
                    isSubmitting = true;

                    // Close any existing Swal modals
                    Swal.close();

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

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

                    // Small delay to ensure Swal is fully rendered, then submit
                    setTimeout(() => {
                        form.submit();
                    }, 100);

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