@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="numbers">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="content p-5">
                            <div class="numb"><span>1</span></div>
                            <div class="numb"><span>2</span></div>
                            <div class="numb"><span>3</span></div>
                            <div class="numb"><span>4</span></div>
                            <div class="numb"><span>5</span></div>
                            <div class="numb"><span>6</span></div>
                            <form action="{{route('customer.createQueue')}}" method="post" class="next_form">
                                @csrf()
                                <input type="hidden" name="person_count" class="person_count" value="">
                                <input type="hidden" name="customer_name" value="{{$customer->name}}">
                                <input type="hidden" name="customer_phone" value="{{$customer->phone}}">
                                <input type="hidden" name="shop_id" value="{{$shop->id}}">
                                <input type="hidden" name="user_id" value="{{$customer->id}}">
                            </form>
                            <button class="butn color d-block text-center mt-5 w-100 next_button"><span>Next</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modal -->
        <div class="modal fade turn_alert_modal" id="exampleModalCenter" 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">
                        <h3>Error</h3>
                        <p>You can't access the same queue more than 3 Times in the same hour</p>
                        <h6>You can Try again after <span class="minutes">{{$minutes?$minutes:60}}</span> Minutes</h6>
                        <div class="circle-timer">
                            <h2>{{$seconds?$seconds:3600}}</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 data-dismiss="modal" aria-hidden="true" class="butn color mt-3 try_again_button"><span>Try again</span></button>
                    </div>
                </div>
            </div>
        </div>


        @include('web.layouts.customer_side_menu')

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

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            if ("{{session('error')}}"){
                $('.turn_alert_modal').modal()
            }
            $('.numb').click(function () {
                let person_count = $(this).children('span').html();
                $('.next_form input.person_count').val(person_count);
            });

            $('.next_button').click(function () {
                if ($('.next_form input.person_count').val() === ''){
                    return false
                }
                $('.next_form').submit();
            });

            $(".numbers .numb span").on("click", function() {
                $(".numbers .numb").removeClass("active");
                $(this).parent().addClass("active");
            });

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

            $('.turn_alert_modal .circle_animation').css('stroke-dashoffset', initialOffset + ((i + 1) * (initialOffset / time)));

            var interval = setInterval(function() {
                $('.turn_alert_modal h2').html(i);
                let minutesCount = Math.ceil(i / 60);
                $('.minutes').html(minutesCount);
                $('.turn_alert_modal .circle_animation').css('stroke-dashoffset', initialOffset + ((i + 1) * (initialOffset / time)));
                if (i === 0) {
                    clearInterval(interval);
                    return false;
                }
                i--;
            }, 1000);

        })
    </script>
@endsection