@extends('web.layouts.layout')

@section('container_content')

    <!--Contents-->
    <main class="menu-main">
        <!-- -------------- login-splash ----------------- -->
        <section class="queue-date">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-4">
                        <button class="butn color mt-4" type="button" data-toggle="modal" data-target="#exampleModalCenter"><span>{{__('merchants.reset_taboor')}}</span></button>
                    </div>
                    <div class="col-lg-4 col-md-7 col-sm-10">
                        <div class="side-title">
                            <h3>{{__('merchants.customer_queue_data')}}</h3>
                            <p>{{__('merchants.check_queue_data')}}</p>
                        </div>

                        <div class="queue_wrapper">
                            <div class="d-flex mb-5 justify-content-between">
                                {{--                                @if($current)--}}
                                {{--                                    <div class="circle-number m-0">--}}
                                {{--                                        <h2>{{$current->serial}}</h2>--}}
                                {{--                                        <h6>Current</h6>--}}
                                {{--                                        <h6>{{$current->customer_name}}</h6>--}}
                                {{--                                        <small>{{$current->person_count . ' Persons'}}</small>--}}
                                {{--                                    </div>--}}
                                {{--                                @endif--}}
                                @if($next)
                                    <div class="circle-number m-0 color queue_container">
                                        <h2>{{$next->serial}}</h2>
                                        <h6>{{__('merchants.current')}}</h6>
                                        <h6>{{$next->customer_name}}</h6>
                                        <small>{{$next->person_count . __('merchants.persons')}}</small>
                                        <a href="#" data-href="{{route('merchant.nextCustomer', $next->id)}}" data-id="{{$next->id}}" data-method="post" class="next"><i class="fas fa-long-arrow-alt-right"></i></a>
                                    </div>
                                @endif
                                @if (!$current && !$next)
                                    <div class="circle-number m-0 color queue_container">
                                        <h2>{{$queueCount}}</h2>
                                        <h6>FINISH</h6>
                                    </div>
                                @endif

                            </div>
                            <p>{{__('merchants.total_queue_number')}} <br> {{$queueCount}} {{__('merchants.customer')}}</p>
                        </div>

                        <div class="rounded-box text-center d-block">
                            <h5 class="queue_closed_opened">{{$merchant->shop->queue_enabled == 1 ? __('merchants.queue_open') : __('merchants.queue_closed')}}</h5>
                            <div class="switch-btn w-100">

                                <form action="{{route('merchant.closeOpenQueue')}}" method="post" class="queue_status_form">
                                    @csrf()
                                    <label class="switch">
                                        <input {{$queue_status}} type="checkbox" name="queue_status" class="queue_status" {{$merchant->shop->queue_enabled == 1 ? 'checked' : ''}}>
                                        <span class="slider round"></span>
                                    </label>
                                </form>
                            </div>
                        </div>
                        <div class="mt-5">
                            <div class="alert alert-success success_queue d-none"></div>
                            <div class="alert alert-danger error_queue d-none"></div>
                        </div>
                        <form action="{{route('merchant.createQueueByVendor')}}" method="get" class="add_queue_by_vendor_form">
                            @csrf()
                            <input type="hidden" value="{{$merchant->shop->id}}" name="shop_id">
                            <div class="form-group">
                                <input type="text" name="customer_name" class="form-control" placeholder="{{__('merchants.name')}}">
                            </div>
                            <div class="form-group">
                                <input type="tel" name="customer_phone" class="form-control" placeholder="{{__('merchants.phone')}}">
                            </div>
                            <div class="form-group">
                                <input type="number" name="person_count" class="form-control" placeholder="{{__('merchants.person_count')}}" min="1" max="5">
                            </div>

                            <!------------- new ------------->
                            {{--                            <div class="text-center d-block pt-3 pb-3 mt-3 mb-3 pl-2 pr-2">--}}
                            {{--                                <div class="switch-btn w-100 d-flex justify-content-between">--}}
                            {{--                                    <strong class="text-light">الارسال بالعربيه</strong>--}}
                            {{--                                    <label class="switch">--}}
                            {{--                                        <input type="checkbox" class="language_button">--}}
                            {{--                                        <span class="slider round"></span>--}}
                            {{--                                    </label>--}}
                            {{--                                    <strong class="text-light">send in english</strong>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}

                            {{--                            @foreach(languages() as $language)--}}
                            {{--                                <div class="form-group send-lang">--}}
                            {{--                                    <div class="custom-control custom-radio">--}}
                            {{--                                        <input type="radio" id="customRadio_{{$language->id}}" name="language_id" data-local="{{$language->local}}" value="{{$language->id}}" class="custom-control-input">--}}
                            {{--                                        <label class="custom-control-label" for="customRadio_{{$language->id}}">--}}
                            {{--                                            {{$language->local == 'ar' ? 'أرسال باللغه العربيه' : 'Send in English'}}--}}
                            {{--                                        </label>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                            @endforeach--}}
                            <div class="text-center mt-4">
                                <button data-language="en" class="butn color add_queue_by_vendor_button"><span>{{__('merchants.add_to_queue_english')}}</span></button>
                            </div>
                            <div class="text-center mt-4">
                                <button data-language="ar" class="butn color add_queue_by_vendor_button"><span>{{__('merchants.add_to_queue_arabic')}}</span></button>
                            </div>
                        </form>
                    </div>

                    <div class="col-lg-3 offset-lg-1">
                        <div class="check-list">
                            <div class="side-title">
                                <h3>{{__('merchants.check_list')}}</h3>
                            </div>
                            <div class="content">
                                @foreach($checkLists as $list)
                                    <div class="circle-number small">
                                        <a href="#" data-href="{{route('merchant.transferFromCheckToDone', $list->id)}}" data-method="post" class="transferFromCheckToDone">
                                            <h3>{{$list->serial}}</h3>
                                            <h6>{{$list->customer_name}}</h6>
                                            <span class="cl-num">{{$list->person_count}}</span>
                                        </a>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade reset-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">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>

                            <div class="alert alert-success ajaxSuccess d-none text-center"></div>
                            <div class="alert alert-danger ajaxError d-none text-center"></div>

                            <div class="modal-h text-center items-gray mt-2">
                                <h6 class="mb-4">{{__('merchants.reset_queue_confirm')}}</h6>
                                <button class="butn color small" data-dismiss="modal"><span>{{__('merchants.no')}}</span></button>
                                <button class="butn small reset-yes"><span>{{__('merchants.yes')}}</span></button>
                            </div>
                            <div class="reset-reason text-center items-gray mt-4">
                                <form method="get" action="{{route('merchant.resetQueue')}}" class="form reset_form">
                                    @csrf()
                                    <div class="form-group">
                                        <h6 class="mb-4">{{__('merchants.reason_of_reset')}}</h6>
                                        <select class="custom-select" name="message_type" id="inputGroupSelect01">
                                            <option value="" selected>{{__('merchants.select')}}...</option>
                                            @foreach($cancelReason as $reason)
                                                <option value="{{$reason->id}}">{!! $reason->message !!}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="text-left pl-2">
                                        <small class="mb-2 mt-4 d-block">{{__('merchants.send_message_confirm')}}</small>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="customRadioInline1" name="send_message" value="1" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadioInline1"><small>{{__('merchants.yes')}}</small></label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="customRadioInline2" name="send_message" value="0" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadioInline2"><small>{{__('merchants.no')}}</small></label>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button class="butn color mt-4 reset_button"><span>{{__('merchants.reset')}}</span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('web.layouts.side_menu')

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

@endsection

@section('inner_js')
    <script>
        var refreshQueueUrl= '{{ route("merchant.refreshQueue") }}';
        var queueOpen= "{{__('merchants.queue_open')}}";
        var queueClosed= "{{__('merchants.queue_closed')}}";
        var transferToCheckList= "{{route('merchant.transferToCheckList')}}";
        var refreshCheckList= "{{route('merchant.refreshCheckList')}}";
        var waitingTime= "{{$waitingTime}}";
    </script>
    <script src="{{asset('assets/web/js/queue.js')}}"></script>
@endsection