{{-- ═══════════ ALL SCRIPTS ═══════════ --}}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

{{-- Birthday Modal Script --}}
<script>
    (function () {
        var overlay = document.getElementById('bdayOverlay');
        var modal = document.getElementById('bdayModal');
        var closeBtn = document.getElementById('closeBtn');
        var closeBtn2 = document.getElementById('closeBtn2');
        var celebrateBtn = document.getElementById('celebrateBtn');
        var mainContent = document.getElementById('mainContent');
        var thankyou = document.getElementById('thankyouState');
        var canvas = document.getElementById('confetti-canvas');
        var ctx2d = canvas.getContext('2d');
        var song = document.getElementById('birthdaySong');

        var pieces = [];
        var animating = false;
        var COLORS = ['#ffd580', '#ff7eb3', '#c77dff', '#80d4ff', '#80ffb0', '#ffb347'];

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        function spawnConfetti(count) {
            for (var i = 0; i < count; i++) {
                pieces.push({
                    x: Math.random() * canvas.width,
                    y: -20,
                    w: Math.random() * 10 + 5,
                    h: Math.random() * 6 + 3,
                    color: COLORS[Math.floor(Math.random() * COLORS.length)],
                    vx: (Math.random() - 0.5) * 4,
                    vy: Math.random() * 3 + 2,
                    angle: Math.random() * 360,
                    spin: (Math.random() - 0.5) * 6,
                    opacity: 1
                });
            }
        }

        function drawConfetti() {
            ctx2d.clearRect(0, 0, canvas.width, canvas.height);
            pieces = pieces.filter(function (p) {
                return p.opacity > 0.05;
            });
            pieces.forEach(function (p) {
                ctx2d.save();
                ctx2d.translate(p.x, p.y);
                ctx2d.rotate(p.angle * Math.PI / 180);
                ctx2d.globalAlpha = p.opacity;
                ctx2d.fillStyle = p.color;
                ctx2d.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
                ctx2d.restore();
                p.x += p.vx;
                p.y += p.vy;
                p.angle += p.spin;
                if (p.y > canvas.height * 0.8) p.opacity -= 0.02;
            });
            if (pieces.length > 0 || animating) {
                requestAnimationFrame(drawConfetti);
            } else {
                ctx2d.clearRect(0, 0, canvas.width, canvas.height);
            }
        }

        function launchConfetti() {
            animating = true;
            spawnConfetti(200);
            drawConfetti();
            setTimeout(function () {
                animating = false;
            }, 4000);
        }

        function openModal() {
            overlay.style.display = 'block';
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
            mainContent.classList.remove('hide');
            thankyou.classList.remove('show');
            launchConfetti();
        }

        /* Close disabled — matches original behaviour */
        //closeBtn.addEventListener('click',  function(e) { e.preventDefault(); });
        // closeBtn2.addEventListener('click', function(e) { e.preventDefault(); });
        // overlay.addEventListener('click',   function(e) { e.preventDefault(); });
        // document.addEventListener('keydown', function(e) {
        //     if (e.key === 'Escape') e.preventDefault();
        // });
        function closeModal() {
            overlay.style.display = 'none';
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }

        closeBtn.addEventListener('click', closeModal);
        closeBtn2.addEventListener('click', closeModal);
        overlay.addEventListener('click', closeModal);
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeModal();
        });
        celebrateBtn.addEventListener('click', function () {
            mainContent.classList.add('hide');
            thankyou.classList.add('show');
            launchConfetti();
            song.volume = 1;
            song.play();
        });

        window.addEventListener('load', function () {
            setTimeout(openModal, 600);
        });
    })();
</script>

{{-- Staff Popup Script --}}
@if($popups->count())
    <script>
        var popupModal;
        window.addEventListener('load', function () {
            popupModal = new bootstrap.Modal(document.getElementById('staffPopupModal'));
            if (popupQueue.length > 0) {
                loadPopup(currentPopupIndex);
                popupModal.show();
            }
        });

        function loadPopup(index) {
            document.getElementById('popupTitle').innerText = popupQueue[index].title || 'Important Notice';
            document.getElementById('popupMessage').innerText = popupQueue[index].message;
        }

        function popupNoted() {
            var popup = popupQueue[currentPopupIndex];
            var btn = event.currentTarget;
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Processing...';
            fetch('{{ route("popupNoted", ":id") }}'.replace(':id', popup.id), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
                .then(function (r) {
                    return r.json();
                })
                .then(function (data) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="ti tabler-eye-check me-1"></i>Noted';
                    if (data.success) {
                        currentPopupIndex++;
                        if (currentPopupIndex < popupQueue.length) {
                            loadPopup(currentPopupIndex);
                        } else {
                            popupModal.hide();
                        }
                    }
                })
                .catch(function (err) {
                    console.error(err);
                    btn.disabled = false;
                    btn.innerHTML = '<i class="ti tabler-eye-check me-1"></i>Noted';
                });
        }

        function popupDone() {
            var popup = popupQueue[currentPopupIndex];
            fetch('{{ route("popupDone", ":id") }}'.replace(':id', popup.id), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
                .then(function (r) {
                    return r.json();
                })
                .then(function (data) {
                    if (data.success) {
                        popupQueue.splice(currentPopupIndex, 1);
                        document.getElementById('popupUnreadCount').innerText = popupQueue.length;
                        if (popupQueue.length > 0) {
                            if (currentPopupIndex >= popupQueue.length) currentPopupIndex = 0;
                            loadPopup(currentPopupIndex);
                        } else {
                            popupModal.hide();
                        }
                    }
                })
                .catch(function (err) {
                    console.error(err);
                });
        }
    </script>
@endif

{{-- Unread Mail Modal Script --}}
<script>
    window.addEventListener('load', function () {
        var unreadCount = {
            {
            $unreadMails - > count()
        }
    };
    if (unreadCount > 0) {
        var mandatoryModal = new bootstrap.Modal(document.getElementById('mandatoryPopup'));
        mandatoryModal.show();
    }
    });
</script>

{{-- Check-in time + late section --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var liveTime = document.getElementById('liveTime');
        var lateSection = document.getElementById('lateSection');
        var reasonInput = document.querySelector('input[name="late_reason"]');
        if (!liveTime || !lateSection || !reasonInput) return;
        var now = new Date();
        var lateTime = new Date();
        lateTime.setHours(9, 10, 0, 0);
        liveTime.innerText = now.toLocaleDateString('en-GB') + ' | ' + now.toLocaleTimeString('en-US');
        if (now <= lateTime) {
            liveTime.classList.add('text-success');
            lateSection.classList.add('d-none');
            reasonInput.removeAttribute('required');
        } else {
            liveTime.classList.add('text-danger');
            lateSection.classList.remove('d-none');
            reasonInput.setAttribute('required', true);
        }
    });
</script>

{{-- Check-in form submit guard --}}
<script>
    document.getElementById('finalSubmit').addEventListener('click', function () {
        this.disabled = true;
        this.innerText = 'Processing...';
        document.getElementById('checkinForm').submit();
    });
</script>

{{-- Performance Chart --}}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var ctx = document.getElementById('performanceChart').getContext('2d');
        var gradientBlue = ctx.createLinearGradient(0, 0, 0, 350);
        gradientBlue.addColorStop(0, 'rgba(13,110,253,0.25)');
        gradientBlue.addColorStop(1, 'rgba(13,110,253,0.02)');
        var gradientRed = ctx.createLinearGradient(0, 0, 0, 350);
        gradientRed.addColorStop(0, 'rgba(220,53,69,0.25)');
        gradientRed.addColorStop(1, 'rgba(220,53,69,0.02)');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: @json($months),
                datasets: [{
                    label: 'Earned Points',
                    data: @json($earnedPoints),
                    borderColor: '#0d6efd',
                    backgroundColor: gradientBlue,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 3,
                    pointHoverRadius: 6,
                    borderWidth: 2
                },
                {
                    label: 'Reduced Points',
                    data: @json($reducedPoints),
                    borderColor: '#dc3545',
                    backgroundColor: gradientRed,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 3,
                    pointHoverRadius: 6,
                    borderWidth: 2
                }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'nearest',
                    intersect: true
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 8,
                            padding: 20
                        }
                    },
                    tooltip: {
                        backgroundColor: '#111',
                        padding: 10,
                        cornerRadius: 8
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            drawBorder: false
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    });
</script>

{{-- Progress bar --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var progressBar = document.getElementById('progressBar');
        var progressPercent = document.getElementById('progressPercent');
        if (!progressBar || !progressPercent) return;
        var val = progressBar.getAttribute('data-progress');
        progressBar.style.width = val + '%';
        progressPercent.textContent = val;
    });
</script>

{{-- Web Push --}}
<meta name="vapid-key" content="{{ config('webpush.vapid.public_key') }}">
<script>
    (async function () {
        if (!('serviceWorker' in navigator)) return;
        var registration = await navigator.serviceWorker.register('/service-worker.js');
        var permission = await Notification.requestPermission();
        if (permission !== 'granted') return;
        var vapidPublicKey = document.querySelector('meta[name="vapid-key"]').content;

        function urlBase64ToUint8Array(base64String) {
            var padding = '='.repeat((4 - base64String.length % 4) % 4);
            var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
            var rawData = atob(base64);
            return Uint8Array.from([...rawData].map(function (c) {
                return c.charCodeAt(0);
            }));
        }
        var subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
        });
        await fetch("{{ route('push.subscription.store') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(subscription.toJSON())
        });
    })();
</script>

{{-- Break timer --}}
<script>
    var breakStart = @json($breakStartTime);
    if (breakStart) {
        var today = new Date().toISOString().split('T')[0];
        var startTime = new Date(today + 'T' + breakStart);

        function updateBreakTimer() {
            var now = new Date();
            var diff = Math.floor((now - startTime) / 1000);
            if (diff < 0) diff = 0;
            var h = Math.floor(diff / 3600);
            var m = Math.floor((diff % 3600) / 60);
            var s = diff % 60;
            var el = document.getElementById('breakTimer');
            if (el) {
                el.innerHTML =
                    String(h).padStart(2, '0') + ':' +
                    String(m).padStart(2, '0') + ':' +
                    String(s).padStart(2, '0');
            }
        }
        updateBreakTimer();
        setInterval(updateBreakTimer, 1000);
    }
</script>

{{-- Break SweetAlert confirmations --}}
<script>
    function confirmBreakStart() {
        Swal.fire({
            title: 'Start Break?',
            text: 'Are you sure you want to start your break?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Start Break'
        }).then(function (result) {
            if (result.isConfirmed) {
                document.getElementById('startBreakForm').submit();
            }
        });
    }

    function confirmBreakEnd() {
        Swal.fire({
            title: 'End Break?',
            text: 'Are you sure you want to end your break?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, End Break'
        }).then(function (result) {
            if (result.isConfirmed) {
                document.getElementById('endBreakForm').submit();
            }
        });
    }
</script>