@extends('layout.mainlayout')

@section('content')
    @php
        $employeeType = auth()->user()->employee_type;
    @endphp

    <div class="page-wrapper">
        <div class="content">

            <div class="page-header">
                <h3 class="page-title">Attendance & Leave Calendar</h3>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="card">
                <div class="card-body">
                    <div class="d-flex gap-3 mb-3">
                        <div class="d-flex flex-wrap gap-3 align-items-center">

                            <span class="d-flex align-items-center gap-1">
                                <span class="badge" style="background:#2ecc71;">&nbsp;</span> Present
                            </span>

                            <span class="d-flex align-items-center gap-1">
                                <span class="badge" style="background:#c9178e;">&nbsp;</span> Leave
                            </span>

                            <span class="d-flex align-items-center gap-1">
                                <span class="badge" style="background:#f1c40f; color:#000;">&nbsp;</span> Pending
                            </span>

                            <span class="d-flex align-items-center gap-1">
                                <span class="badge" style="background:#81190d;">&nbsp;</span> Holiday
                            </span>

                            {{-- <span class="d-flex align-items-center gap-1">
                                <span class="badge" style="background:#3498db;">&nbsp;</span> Attendance Applied
                            </span> --}}

                        </div>

                    </div>

                    <div id="calendar"></div>
                </div>
            </div>

        </div>
    </div>

    <!-- APPLY MODAL -->
    <div class="modal fade" id="applyModal">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Apply Attendance / Leave</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="alert alert-info mb-3">

                    <div class="d-flex flex-wrap gap-3 align-items-center">

                        <div>
                            <strong>📅 Date Range:</strong>
                            <span id="selectedStartDate">—</span>
                            →
                            <span id="selectedEndDate">—</span>
                        </div>

                        <div>
                            <strong>🧮 Days:</strong>
                            <span id="totalDays">0</span>
                            |
                            <span class="text-danger">Weekends: <span id="weekendDays">0</span></span>
                            |
                            <span class="text-success">Working: <span id="workingDays">0</span></span>
                        </div>

                        <div id="leaveBalanceBox" class="ms-auto">
                            <strong>🌴 Leave Balance:</strong>
                            <span id="leaveBalance">—</span> days
                        </div>

                    </div>
                </div>


                <div class="modal-body">

                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#attendanceTab">Attendance</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#leaveTab">Leave</a>
                        </li>
                    </ul>

                    <div class="tab-content">

                        {{-- ATTENDANCE --}}
                        <div class="tab-pane fade show active" id="attendanceTab">

                            @if ($employeeType == '2')
                                @include('attendance.forms.attendance-international')
                            @elseif($employeeType == '1')
                                @include('attendance.forms.attendance-domestic')
                            @else
                                @include('attendance.forms.attendance-onsite')
                            @endif
                        </div>

                        {{-- LEAVE --}}
                        <div class="tab-pane fade" id="leaveTab">
                            <div class="alert alert-danger d-none" id="leaveBalanceError">
                                Selected leave days exceed your available leave balance.
                                Please select fewer days.
                            </div>
                            @if ($employeeType == '2')
                                @include('attendance.forms.leave-international')
                            @elseif($employeeType == '1')
                                @include('attendance.forms.leave-domestic')
                            @else
                                @include('attendance.forms.leave-onsite')
                            @endif
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection


@push('scripts')
   
<script>
let lastWorkingDays = 0;

document.addEventListener('DOMContentLoaded', function() {

    let calendarEl = document.getElementById('calendar');
    if (!calendarEl) return;

    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        selectable: true,
        height: 'auto',

        firstDay: 1,                 // ✅ Monday start
        timeZone: 'local',           // 🌍 global safe
        events: '{{ route('calendar.events') }}',

        dayCellDidMount: function(info) {
            const day = info.date.getDay();

            if (day === 6) info.el.style.backgroundColor = '#e3f2fd'; // Saturday
            if (day === 0) info.el.style.backgroundColor = '#e8f5e9'; // Sunday
        },

        selectAllow: function(selectInfo) {
            const events = calendar.getEvents();

            for (let ev of events) {

                if (ev.extendedProps?.block) {

                    const evStart = new Date(ev.start.getFullYear(), ev.start.getMonth(), ev.start.getDate());
                    const evEnd = ev.end
                        ? new Date(ev.end.getFullYear(), ev.end.getMonth(), ev.end.getDate())
                        : new Date(evStart.getTime() + 86400000);

                    const selStart = new Date(selectInfo.start.getFullYear(), selectInfo.start.getMonth(), selectInfo.start.getDate());
                    const selEnd   = new Date(selectInfo.end.getFullYear(), selectInfo.end.getMonth(), selectInfo.end.getDate());

                    if (selStart < evEnd && selEnd > evStart) {
                        return false;
                    }
                }
            }
            return true;
        },

        select: function(info) {

            if (!info.start || !info.end) return;

            // 🛡 normalize to date-only (no timezone drift)
            const start = new Date(info.start.getFullYear(), info.start.getMonth(), info.start.getDate());
            const rawEnd = new Date(info.end.getFullYear(), info.end.getMonth(), info.end.getDate());
            const end = new Date(rawEnd);
            end.setDate(end.getDate() - 1); // your original logic kept

            const diffDays = Math.ceil((rawEnd - start) / 86400000);

            if (diffDays > 5) {
                alert('You can select a maximum of 5 days at a time.');
                calendar.unselect();
                return;
            }

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

            document.getElementById('selectedStartDate').innerText = format(start);
            document.getElementById('selectedEndDate').innerText = format(end);

            // DAY COUNTS (safe)
            let total = 0, weekends = 0;

            for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
                total++;
                if (d.getDay() === 0 || d.getDay() === 6) weekends++;
            }

            let working = total - weekends;
            lastWorkingDays = working;

            document.getElementById('totalDays').innerText = total;
            document.getElementById('weekendDays').innerText = weekends;
            document.getElementById('workingDays').innerText = working;

            document.getElementById('leaveBalance').innerText = "{{ $leaveBalance }}";

            const setIfExists = (id, value) => {
                const el = document.getElementById(id);
                if (el) el.value = value;
            };

            const toYMD = (date) =>
                date.getFullYear() + '-' +
                String(date.getMonth() + 1).padStart(2, '0') + '-' +
                String(date.getDate()).padStart(2, '0');

            setIfExists('att_start_date', toYMD(start));
            setIfExists('att_end_date', toYMD(end));
            setIfExists('leave_start_date', toYMD(start));
            setIfExists('leave_end_date', toYMD(end));

            window.dispatchEvent(new CustomEvent('attendance-date-selected', {
                detail: {
                    startDate: toYMD(start),
                    endDate: toYMD(end)
                }
            }));

            const year = start.getFullYear();
            const month = start.toLocaleString('default', { month: 'long' });

            setIfExists('att_year', year);
            setIfExists('leave_year', year);
            setIfExists('att_month', month);
            setIfExists('leave_month', month);

            $('#applyModal').modal('show');
        }
    });

    calendar.render();
});
</script>


    <script>
        $(document).ready(function() {

            // Normal Select2 (outside modal)
            $('.select2').select2();

            // Select2 inside Apply Modal
            $('#applyModal').on('shown.bs.modal', function() {

                setupLeaveObserver();

                $(this).find('.select2').each(function() {

                    if ($(this).data('select2')) {
                        $(this).select2('destroy');
                    }

                    $(this).select2({
                        dropdownParent: $('#applyModal'),
                        width: '100%'
                    });
                });
            });

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const biometricToggle = document.getElementById('att_use_biometric_entry');
            const inBox = document.getElementById('att_biometric_in_box');
            const outBox = document.getElementById('att_biometric_out_box');
            const inSelect = document.getElementById('att_biometric_in_log_id');
            const outSelect = document.getElementById('att_biometric_out_log_id');
            const notice = document.getElementById('att_biometric_notice');
            const startInput = document.getElementById('att_start_date');
            const endInput = document.getElementById('att_end_date');
            const attendanceForm = document.querySelector('#attendanceTab form[action="{{ route('attendance.apply') }}"]');
            const submitBtn = attendanceForm?.querySelector('button[type="submit"]');

            if (!biometricToggle || !inSelect || !outSelect || !startInput || !endInput || !attendanceForm) {
                return;
            }

            const biometricEntriesUrl = "{{ route('attendance.biometric.entries') }}";

            const resetOptions = () => {
                inSelect.innerHTML = '<option value="">Select IN entry</option>';
                outSelect.innerHTML = '<option value="">Select OUT entry</option>';
                inSelect.value = '';
                outSelect.value = '';
            };

            const setNotice = (message) => {
                if (!message) {
                    notice.classList.add('d-none');
                    notice.textContent = '';
                    return;
                }
                notice.classList.remove('d-none');
                notice.textContent = message;
            };

            const hasBiometricSelection = () => {
                return Boolean(inSelect.value || outSelect.value);
            };

            const updateSubmitState = () => {
                if (!submitBtn) {
                    return;
                }

                if (!biometricToggle.checked) {
                    submitBtn.disabled = false;
                    return;
                }

                submitBtn.disabled = !isSingleDaySelected() || !hasBiometricSelection();
            };

            const setBiometricState = (enabled) => {
                if (enabled) {
                    inBox.classList.remove('d-none');
                    outBox.classList.remove('d-none');
                    inSelect.disabled = false;
                    outSelect.disabled = false;
                } else {
                    inBox.classList.add('d-none');
                    outBox.classList.add('d-none');
                    inSelect.disabled = true;
                    outSelect.disabled = true;
                    resetOptions();
                }

                updateSubmitState();
            };

            const isSingleDaySelected = () => {
                return startInput.value && endInput.value && startInput.value === endInput.value;
            };

            const populateOptions = (entries) => {
                resetOptions();

                const inEntries = entries.filter((entry) => (entry.punch_type || '').toLowerCase() === 'in');
                const outEntries = entries.filter((entry) => (entry.punch_type || '').toLowerCase() === 'out');

                inEntries.forEach((entry) => {
                    const option = document.createElement('option');
                    option.value = entry.id;
                    option.textContent = entry.label;
                    inSelect.appendChild(option);
                });

                outEntries.forEach((entry) => {
                    const option = document.createElement('option');
                    option.value = entry.id;
                    option.textContent = entry.label;
                    outSelect.appendChild(option);
                });

                updateSubmitState();
            };

            const loadBiometricEntries = async () => {
                if (!biometricToggle.checked) {
                    return;
                }

                if (!isSingleDaySelected()) {
                    biometricToggle.checked = false;
                    setBiometricState(false);
                    setNotice('Biometric entry can be used only for a single selected date.');
                    return;
                }

                setNotice('');
                setBiometricState(true);

                try {
                    const response = await fetch(`${biometricEntriesUrl}?date=${startInput.value}`);
                    if (!response.ok) {
                        throw new Error('Failed to load biometric entries');
                    }
                    const data = await response.json();
                    const entries = Array.isArray(data.entries) ? data.entries : [];
                    populateOptions(entries);

                    const hasIn = entries.some((entry) => (entry.punch_type || '').toLowerCase() === 'in');
                    const hasOut = entries.some((entry) => (entry.punch_type || '').toLowerCase() === 'out');

                    if (!hasIn && !hasOut) {
                        setNotice('Biometric entries are not available for this date.');
                    } else if (!hasIn || !hasOut) {
                        setNotice('Only one biometric direction is available for this date. You can submit with the available entry.');
                    }
                } catch (error) {
                    resetOptions();
                    setNotice('Unable to load biometric entries right now. Please try again.');
                    updateSubmitState();
                }
            };

            biometricToggle.addEventListener('change', function () {
                if (!this.checked) {
                    setNotice('');
                    setBiometricState(false);
                    return;
                }

                loadBiometricEntries();
            });

            inSelect.addEventListener('change', updateSubmitState);
            outSelect.addEventListener('change', updateSubmitState);

            if (window.jQuery) {
                $(inSelect).on('change select2:select select2:clear', updateSubmitState);
                $(outSelect).on('change select2:select select2:clear', updateSubmitState);
            }

            window.addEventListener('attendance-date-selected', () => {
                if (!biometricToggle.checked) {
                    updateSubmitState();
                    return;
                }
                loadBiometricEntries();
            });

            attendanceForm.addEventListener('submit', function (event) {
                if (!biometricToggle.checked) {
                    return;
                }

                if (!isSingleDaySelected()) {
                    event.preventDefault();
                    setNotice('Biometric entry can be submitted only for a single selected date.');
                    updateSubmitState();
                    return;
                }

                if (!hasBiometricSelection()) {
                    event.preventDefault();
                    setNotice('Please select at least one biometric entry.');
                    updateSubmitState();
                }
            });

            updateSubmitState();
        });
    </script>

    <script>
       
        function validateLeaveBalance() {

            const leaveBalance = parseFloat("{{ $leaveBalance }}");
            const leaveTab = document.getElementById('leaveTab');

            if (!leaveTab.classList.contains('show')) return;

            const infoBox = document.getElementById('leaveBalanceError');
            const submitBtn = leaveTab.querySelector('button[type="submit"]');

            if (!submitBtn) return;

            // 🚫 DO NOT BLOCK
            submitBtn.disabled = false;

            if (lastWorkingDays > leaveBalance) {

                infoBox.classList.remove('d-none');
                infoBox.innerHTML = `
            <strong>⚠ Notice:</strong>
            ${lastWorkingDays - leaveBalance} day(s) will be treated as
            <b>Leave Without Pay (LWP)</b>.
        `;
            } else {
                infoBox.classList.add('d-none');
            }
        }
    </script>

    <script>
        let leaveObserver = null;

        function setupLeaveObserver() {

            const leaveTab = document.getElementById('leaveTab');

            if (!leaveTab) return;

            // Watch class changes (show / active)
            leaveObserver = new MutationObserver(() => {
                if (leaveTab.classList.contains('show')) {
                    validateLeaveBalance();
                }
            });

            leaveObserver.observe(leaveTab, {
                attributes: true,
                attributeFilter: ['class']
            });
        }
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ URL::asset('build/plugins/select2/css/select2.min.css') }}">

    <style>
        /* Customize FullCalendar event appearance */
        .fc-event {
            font-size: 0.85rem;
            padding: 2px 4px;
            border-radius: 4px;
        }

        .alert-info .text-danger {
            font-weight: 600;
        }

        .alert-info .text-success {
            font-weight: 600;
        }
    </style>
@endpush