@guest('web')
    <div class="modal fade" id="warningGuestModal" tabindex="-1" aria-labelledby="warningGuestModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content modal-danger">
                <div class="modal-body">
                    <div class="text-center">
                        <h4>KAMU BELUM LOGIN</h4>
                        <p>Segera login untuk dapatkan 100 poin, dan nikmati banyak keseruan Generasi Happy tahun ini!</p>
                        <button class="btn btn-outline-dark rounded-pill" data-bs-toggle="modal" data-bs-target="#loginModal">Login Sekarang</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @pushOnce('scripts')
    <script nonce="{{ Vite::cspNonce() }}">
    $(()=>{
        const guestFirstVisit = () => {
            let time = sessionStorage.getItem('guestFirstVisit');
            if(time == null){
                time = moment().format();
                sessionStorage.setItem("guestFirstVisit", time);
            }
            return time;
        }
        const resetGuestFirstVisit = () => {
            sessionStorage.removeItem("guestFirstVisit");
        }
        const getGuestCountdown = () => {
            let guestFirstVisitTime  = guestFirstVisit();
            let now = moment();
            return now.diff(guestFirstVisitTime, 'seconds');
        }
        const warningGuestModal = new bootstrap.Modal('#warningGuestModal', {
            keyboard: false
        });
        let guestCountdown = getGuestCountdown();
        setInterval(() => {
            guestCountdown++;
            if(guestCountdown >= 300){
                resetGuestFirstVisit();
                guestCountdown = getGuestCountdown();
                warningGuestModal.show();
            }
        }, 1000);
    })
    </script>    
    @endPushOnce
@endguest