@extends('Staff.layout')


<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Give+You+Glory&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/staff_db_style.css') }}">

@section('title', 'Dashboard')
@section('content')

{{-- CONFETTI CANVAS --}}
<canvas id="confetti-canvas"></canvas>

@include('Staff.Partials.reminder_news')


@include('Staff.Partials.stats_cards')

@include('Staff.Partials.attendance_btns')



<!-- <div class="row">
    <div class="col-12 col-lg-12 mt-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6 class="fw-semibold mb-0">
                        <i class="ti tabler-chart-line me-2 text-primary"></i> Performance Overview
                    </h6>
                    <small class="text-muted">To Track Your Performance&nbsp;<a href="{{ route('performance_tracker') }}">Click Here...</a></small>
                </div>
                <div style="height: 350px;">
                    <canvas id="performanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div> -->


{{-- CHECK-IN MODAL --}}
<div class="modal fade" id="checkin" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5 shadow-sm">
            <p id="liveTime" class="fw-bold fs-5 mb-3"></p>
            <p class="mb-4 fs-6">Do you want to Check In now?</p>
            <form action="{{ route('check_in') }}" method="POST" id="checkinForm">
                @csrf
                <div id="lateSection" class="d-none text-start">
                    <label class="form fw-semibold">Reason <span class="text-danger">*</span></label>
                    <input type="text" class="form-control mb-3" name="late_reason" placeholder="Enter reason if you are late...">
                </div>
                <input type="hidden" name="latitude" id="latitude">
                <input type="hidden" name="longitude" id="longitude">
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary px-4 py-2 fw-semibold" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger px-4 py-2 fw-semibold" id="finalSubmit">Yes, Sure</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if($isBirthday)

{{-- BIRTHDAY MODAL --}}
<div class="birthday-overlay" id="bdayOverlay" style="display:none;"></div>

<div class="birthday-modal" id="bdayModal" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="bdayTitle">
    <div class="bday-card">

        <div class="bday-header">
            <button class="bday-close" id="closeBtn" data-bs-dismiss="modal" aria-label="Close">✕</button>
            <div class="cake-wrap">
                <span class="cake-emoji"><img src="{{ asset('assets/Images') }}/cake.png" alt="cake" height="150px"></span>
                <span class="sparkle">✨</span>
                <span class="sparkle">⭐</span>
                <span class="sparkle">✨</span>
                <span class="sparkle">🌟</span>
            </div>
            <p class="bday-eyebrow">Today is the day</p>
            <h1 class="neon" id="bdayTitle">Happy Birthday!</h1>
        </div>

        <div class="bday-body" id="mainContent">
            <div class="divider-stars">
                <span>🎉</span><span>🎊</span><span>🎈</span>
            </div>
            <p class="bday-message">
                Wishing <span class="bday-name fw-bold">
                    {{ Auth::guard('staff')->user()->name }}</span>
                the most magical birthday filled with joy,
                laughter, and everything your heart desires. May this year bring you incredible adventures and
                beautiful memories!
            </p>
            <div class="balloons-row">
                <span class="balloon">🎈</span>
                <span class="balloon">🎈</span>
                <span class="balloon">🎈</span>
                <span class="balloon">🎈</span>
                <span class="balloon">🎈</span>
            </div>
            <div class="bday-actions">
                <button class="btn-celebrate" id="celebrateBtn">🎉 Celebrate Now!</button>
                <button class="btn-later" id="closeBtn2">Later</button>
            </div>
        </div>

        <div class="thankyou-state" id="thankyouState">
            <span class="thankyou-emoji">🥳</span>
            <p class="thankyou-sub">Have a wonderful year ahead 🎉</p>
        </div>

    </div>
</div>

<audio id="birthdaySong" loop>
    <source src="{{ asset('assets/Images') }}/hbd.mp3" type="audio/mpeg">
</audio>

<script>
    window.addEventListener('load', function() {

        let overlay = document.getElementById('bdayOverlay');
        let modal = document.getElementById('bdayModal');

        if (overlay) {
            overlay.style.display = 'block';
        }

        if (modal) {
            modal.style.display = 'flex';
        }

        let song = document.getElementById('birthdaySong');

        if (song) {
            song.play().catch(function(error) {
                console.log(error);
            });
        }

        document.getElementById('closeBtn')?.addEventListener('click', function() {

            overlay.style.display = 'none';
            modal.style.display = 'none';

            if (song) {
                song.pause();
                song.currentTime = 0;
            }
        });

        document.getElementById('closeBtn2')?.addEventListener('click', function() {

            overlay.style.display = 'none';
            modal.style.display = 'none';

            if (song) {
                song.pause();
                song.currentTime = 0;
            }
        });

    });
</script>

@endif

{{-- STAFF POPUP MODAL --}}
@if($popups->count())
<script>
    let popupQueue = @json($popups);
    let currentPopupIndex = 0;
</script>

<div class="modal fade" id="staffPopupModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="glow-circle circle-1"></div>
                <div class="glow-circle circle-2"></div>
                <div class="popup-icon"><i class="ti tabler-mail"></i></div>
                <h5 class="text-white mb-3" id="popupTitle"></h5>
                <p class="mb-3">You have <strong id="popupUnreadCount">{{ $popups->where('done_status', 'pending')->count() }}</strong> unread popups.</p>
                <div class="text-center mb-4" id="popupMessage"></div>
                <div class="btn-area">
                    <button type="button" class="btn btn-popup btn-noted" onclick="popupNoted()">
                        <i class="ti tabler-eye-check me-1"></i> Noted
                    </button>
                    <button type="button" class="btn btn-popup btn-done" onclick="popupDone()">
                        <i class="ti tabler-circle-check me-1"></i> Done
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif


{{-- UNREAD MAIL MODAL --}}
<div class="modal fade" id="mandatoryPopup" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="glow-circle circle-1"></div>
                <div class="glow-circle circle-2"></div>
                <div class="popup-icon"><i class="ti tabler-mail"></i></div>
                <h5 class="text-white mb-3">Unread Emails</h5>
                <p class="mb-3">You have <strong>{{ $unreadMails->count() }}</strong> unread emails.</p>
                @if($unreadMails->count() > 0)
                <div class="text-start mb-4">
                    @foreach($unreadMails->take(3) as $mail)
                    <div class="mb-2 text-white">• {{ $mail->subject }}</div>
                    @endforeach
                </div>
                @endif
                <div class="btn-area">
                    @if($unreadMails->count() > 0)
                    <a href="{{ route('read_mail', $unreadMails->first()->id) }}" class="btn btn-popup btn-noted">
                        <i class="ti tabler-eye me-1"></i> View Email
                    </a>
                    @endif
                    <button class="btn btn-popup btn-done" data-bs-dismiss="modal">
                        <i class="ti tabler-circle-check me-1"></i> Noted
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@include('Staff.Partials.dashboard_scripts')

@endsection