@extends('web.layouts.layout')

@section('css')
    <link rel="stylesheet" href="{{asset('assets/web/css/customer_styles.css')}}" />
@endsection

@section('container_content')

    <!--Contents-->
    <main class="menu-main">
        <section class="turn-time">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6 text-center">
                        <div class="content p-5">
                            <div class="img">
                                <img src="{{asset('assets/web/images/mac.png')}}" alt="">
                                <div class="valign">
                                    <h5>Macdonald</h5>
                                </div>
                            </div>
                            <p><span>Vendor Details : </span>simply dummy text of the printing</p>
                            <div class="d-flex justify-content-between">
                                <div class="circle-number color mt-5">
                                    <h6 class="mt-4">your number</h6>
                                    <h2>{{session('customerNumber')}}</h2>
                                </div>
                                <div class="circle-number small color mt-5">
                                    <h6 class="mt-4">Guest number</h6>
                                    <h2>{{session('personCount')}}</h2>
                                </div>
                            </div>
                            <h6 class="main-color mb-3 mt-5">
                                The System will exit queue after <span class="seconds">{{$seconds > 0 ? $seconds:120}}</span> seconds
                            </h6>
                            <div class="circle-timer">
                                <h2>0</h2>
                                <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
                                    <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#332F80" fill="none"/>
                                </svg>
                                <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: calc(50% - 80px); top: 0; z-index: 0; ">
                                    <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f1f1f1" fill="none"/>
                                </svg>
                            </div>
                            <button class="butn color d-block text-center mt-5 w-100 confirm_button"><span>Confirm</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('web.layouts.customer_side_menu')

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {

            // $(document).keydown(function (e) {
            //     if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82){
            //         e.preventDefault();
            //     }
            // });
            //
            {{--window.onbeforeunload = function() {--}}
            {{--    window.location.href = "{{route('customer.home')}}"--}}
            {{--};--}}

            var time = parseInt("{{$seconds?$seconds:120}}");
            var initialOffset = '440';
            var i = 1;

            var interval = setInterval(function() {
                $('.turn-time .circle-timer h2').text(i);
                if (i === time || time < 0) {
                    $('.turn-time .circle_animation').css('stroke-dashoffset', '1px');
                    $('.turn-time .circle-timer h2').text(120);
                    clearInterval(interval);
                    return false;
                }
                $('.turn-time .circle_animation').css('stroke-dashoffset', initialOffset - ((i + 1) * (initialOffset / time)));
                i++;
            }, 1000);

            $('.confirm_button').click(function () {
                clearInterval(interval);
                return false;
            });

        })
    </script>
@endsection