@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/products/booking.css') }}">

    <style>
        p {
            color: #e4e6eb;
        }
    </style>
@endsection

@section('title', __('global.meta_title'))
@section('description', __('global.meta_description'))
@section('keywords', __('global.meta_keywords'))

@section('content')
<section class="content-section dark-mode">
    <div class="container">
        <div class="tabs d-flex justify-content-center aling-items-center mb-5">
            <div class="tab active" data-tab="1">
                დადასტურება
            </div>
        </div>

        <div class="row">
            <div class="col-12 content active" data-content="1">
                <div class="bookingtimer pb-4">
                    <div class="book_area-timer">
                        <div class="book_area-countdown d-flex justify-content-center">
                            <svg class="timer">
                                <circle class="progress-frame" cx="100" cy="100" r="96"></circle>
                                <circle class="progress-stroke" cx="100" cy="100" r="96" style="stroke-dasharray: 603.186; stroke-dashoffset: 0;"></circle>
                            </svg>
                            <div class="time">
                                <p class="mb-0"><span class="minutes">15</span>:<span class="seconds">00</span></p>
                                <p class="text">Minutes</p>
                            </div>
                        </div>
                    </div>

                    <p class="text-center">მიმდინარეობს ჯავშნის დადასტურება, <br> დადასტურების შემთხვევაში მოგივათ SMS გადახდის ლინკთან ერთად ტელეფონის ნომერზე!</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
    <script>
        const csrfToken = $('meta[name="csrf-token"]').attr('content');

        if(sessionStorage.getItem('order_id') != '{{ $orderId }}' && '{{ $orderId }}') {
            sessionStorage.removeItem('already_visited');
            sessionStorage.removeItem('order_token');
            sessionStorage.removeItem('order_id');
            sessionStorage.removeItem('countdownTime');
            sessionStorage.removeItem('notification_send');
        }

        if (!sessionStorage.getItem('already_visited')) {
            sessionStorage.setItem('already_visited', 'true');
            sessionStorage.setItem('order_token', '{{ $token }}');
            sessionStorage.setItem('order_id', '{{ $orderId }}');
            const initialCountdownTime = new Date().getTime() + (15 * 60 * 1000);
            sessionStorage.setItem('countdownTime', initialCountdownTime);
            sessionStorage.setItem('notification_send', 'false');
        }

        var token = sessionStorage.getItem('order_token');
        if (!token) {
            window.location.href = '/404'; 
        }

        const timerInterval = setInterval(updateTimer, 1000);


        const countdownTime = parseInt(sessionStorage.getItem('countdownTime'));
        const timerElement = $('.book_area-timer .time');
        const progressFrame = $('.progress-frame');
        const progressStroke = $('.progress-stroke');

        function updateTimer() {
            const currentTime = new Date().getTime();
            const timeRemaining = countdownTime - currentTime;

            if (timeRemaining <= 0) {
                timerElement.html('<p class="mb-0">Time\'s up!</p>');

                clearInterval(timerInterval);


                if(sessionStorage.getItem('notification_send') == 'false') {
                    $.ajax({
                        url: '{{ route("products.get.venue.faild.sms") }}',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: { timerExpired: true },
                        success: function(response) {
                        },
                        error: function(xhr, status, error) {
                        }
                    });

                    sessionStorage.setItem('notification_send', 'true');
                }

                return;
            }

            const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
            timerElement.html(`<p class="mb-0"><span class="minutes">${minutes}</span>:<span class="seconds">${seconds < 10 ? '0' + seconds : seconds}</span></p><p class="text mb-0">Minutes</p>`);

            const totalTime = 15 * 60 * 1000;
            const elapsedTime = totalTime - timeRemaining;
            const progressPercentage = (elapsedTime / totalTime) * 100; 
            const progressOffset = (613 * progressPercentage) / 100;

            if(progressOffset < 603.792) {
                progressStroke.css('stroke-dashoffset', progressOffset);
            }
        }

        updateTimer();

        function makeAjaxCall() {
            $.ajax({
                url: '{{ route("order.get.waitroom.status") }}',
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: { orderId: '{{ $orderId }}' },
                success: function(response) {
                    if(response.confirmed == 1) {
                        window.location.href = '{{ route("order.get.waitroom.success", $orderId) }}';
                    } else if(response.declined == 1) {
                        window.location.href = '{{ route("order.get.waitroom.fail") }}';
                    }
                },
                error: function(xhr, status, error) {

                }
            });
        }

        $(document).ready(function() {
            makeAjaxCall();

            setInterval(makeAjaxCall, 5000);
        });

        
    </script>
@endsection