@extends('web.layouts.layout')

@section('container_content')

    <!--Contents-->
    <main class="menu-main">
        <!-- -------------- login-splash ----------------- -->
        <section class="customer-management">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5 col-md-7 col-sm-10">
                        <div class="side-title">
                            <h3>{{__('merchants.customers_management')}}</h3>
                            <p>{{__('merchants.management_queue')}}</p>
                        </div>
                        <div class="vendor-img">
                            <img src="{{asset($merchant->photo) ?? asset('assets/web/images/mac.png')}}" alt="">
                            <h5 class="light">{{__('merchants.welcome')}} {{$merchant->name}}</h5>
                            <span class="light mt-3">{{$merchant->about_me}}</span>
                        </div>
                        <form action="{{route('merchant.checkQueueData')}}" method="post" class="queue_status_form">
                            @csrf()
                            <div class="rounded-box">
                                <div class="switch-btn">
                                    <label class="switch">
                                        <input {{$queue_status}} type="checkbox" class="queue_status_start">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                                <div class="content">
                                    <h6 class="queue_closed_opened">{{__('merchants.shop_status')}}</h6>
                                    <small>{{__('merchants.customers')}}</small>
                                </div>
                            </div>
                            <div class="text-center">
                                <button class="butn color mt-4 start_now_active" {{$queue_status?'':'disabled'}}><span>{{__('merchants.start_now')}}</span></button>
                            </div>
                        </form>

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

        @include('web.layouts.side_menu')

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

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            let queueStatusStart = $('.queue_status_start'), startNowButton = $('.start_now_active');
            queueStatusStart.click(async function () {

                let data = {};
                if ($(this).prop('checked') === true){
                    data.queue_status = 1;
                    $('.start_now_active').removeAttr('disabled')
                } else {
                    data.queue_status = 0;
                    $('.start_now_active').attr('disabled', 'disabled')
                }

                let form = $('.queue_status_form'),
                    method= form.attr('method');

                const url = form.attr('action');
                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });
            });

            startNowButton.click(function (e) {
                if (queueStatusStart.prop('checked') === false){
                    e.preventDefault();
                }
            })
        });
    </script>
@endsection