@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>{{$shop->name}}</h5>
                                </div>
                            </div>
                            <p><span>Vendor Details : </span>{{$shop->user->about_me}}</p>
                            <div class="d-flex justify-content-between">
                                <div class="circle-number color mt-5">
                                    <h6 class="mt-4">your number</h6>
                                    <h2>{{$customerNumber}}</h2>
                                </div>
                                <div class="circle-number small color mt-5">
                                    <h6 class="mt-4">Guest number</h6>
                                    <h2>{{$personCount}}</h2>
                                </div>
                            </div>
                            <h6 class="main-color mb-3 mt-5">
                                Front Reservation
                            </h6>
                            <div id="countdown">
                                <div id="countdown-number">{{$queuesCount}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('web.layouts.customer_side_menu')

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

@endsection
<!-- Modal -->
<div class="modal fade your_turn_modal" id="your_turn_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="circle-number color mt-5">
                    <h5 class="mt-5 light turn_time_click">It's Your Turn</h5>
                </div>
            </div>
        </div>
    </div>
</div>


@section('inner_js')
    {{-- FIREBASE--}}
    <script>

        $(document).ready(function () {
            $('.your_turn_modal').on('hide.bs.modal', function () {
                window.location.href = "{{route('customer.turnTimeAlert')}}"
            });
        });
        var shopId = "{{ $shop->id }}";
        var countdownNumberEl = document.getElementById('countdown-number');

        var countdown = "{{$queuesCount}}";
        countdownNumberEl.textContent = countdown;

        // setInterval(function() {

        //     countdown = --countdown <= 0 ? 0 : countdown;

        //     if (countdown === 0){
        //         setTimeout(function () {
        //             // window.location.href = "{{route('customer.turnTimeAlert')}}"
        //         }, 1000)
        //     }

        //     countdownNumberEl.textContent = countdown;
        // }, 1000);


    </script>

    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
{{--    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-analytics.js"></script>--}}

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-auth.js"></script>
{{--    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-firestore.js"></script>--}}
    <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>

    <script src="{{asset('assets/web/js/home.js')}}"></script>
{{--    <script src="{{asset('firebase-messaging-sw.js')}}"></script>--}}
@endsection