@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>

            <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> Biometric
                            </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, // ✅ Week starts from Monday
                events: '{{ route('calendar.events') }}',
                timeZone: 'local', // ✅ FIX for timezone issues

                dayCellDidMount: function(info) {
                    const day = info.date.getDay(); // 0 = Sunday, 6 = Saturday

                    if (day === 6) {
                        // Saturday
                        info.el.style.backgroundColor = '#e3f2fd';
                    }

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

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

                    for (let ev of events) {

                        // Block if event says block = true
                        if (ev.extendedProps?.block) {

                            const evStart = ev.start;
                            const evEnd = ev.end ?? new Date(ev.start.getTime() + 86400000);

                            if (selectInfo.start < evEnd && selectInfo.end > evStart) {
                                return false;
                            }
                        }
                    }
                    return true;
                },


                select: function(info) {

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

                    const start = info.start;
                    const end = new Date(info.end);
                    end.setDate(end.getDate() - 1); // ✅ only once

                    // FullCalendar end is exclusive
                    const diffDays = Math.ceil((info.end - info.start) / (1000 * 60 * 60 * 24));

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

                    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>
        // function validateLeaveBalance() {

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

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

        //     const errorBox = document.getElementById('leaveBalanceError');

        //     // find submit button INSIDE leave tab
        //     const submitBtn = leaveTab.querySelector('button[type="submit"]');

        //     if (!submitBtn) return;

        //     if (lastWorkingDays > leaveBalance) {

        //         errorBox.classList.remove('d-none');
        //         submitBtn.disabled = true;

        //         alert(
        //             `Selected leave days (${lastWorkingDays}) exceed your leave balance (${leaveBalance}).`
        //         );

        //     } else {

        //         errorBox.classList.add('d-none');
        //         submitBtn.disabled = false;
        //     }
        // }

        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