@extends('web.layouts.layout')
@section('content')


    <main>

        <!-- ---------- cart_pg ----------- -->
        <section class="cart_pg">
            <div class="container">
                <div class="section_title mb-5 pb-4">
                    <h3 class="title"> {{__('web.cart')}} <span class="line wow"></span> </h3>
                </div>
                <div class="content">
                    <form method="post" action="{{route('web.order')}}" onsubmit="formAction(this)">
                        @CSRF
                        <div class="row gx-lg-5">
                            <div class="col-lg-8">
                                <div class="products_table">
                                    <div class="table_title d-none d-lg-block">
                                        <div class="row align-items-center">
                                            <div class="col-lg-5 mb-4 mb-lg-0">
                                                <h6> {{__('web.product')}} </h6>
                                            </div>
                                            <div class="col-lg-2 col-5">
                                                <h6> {{__('web.quantity')}} </h6>
                                            </div>
                                            <div class="col-lg-3 offset-lg-1 col-5">
                                                <h6> {{__('web.product_total')}} </h6>
                                            </div>
                                            <div class="col-lg-1 col-2">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="products">

                                    </div>

                                    <!--<div class="cart_form mt-5">-->
                                    <!--    <h5 class="mb-3"> {{__('web.discount_code')}} </h5>-->
                                    <!--    <div class="form-group d-flex">-->
                                    <!--        <input type="text" id="cobon" name="cobon" onchange="calculate()" class="form-control px-3" placeholder="{{__('web.discount_code')}}">-->
                                    <!--        <button type="button" class="butn ms-4 flex-shrink-0"> <span> {{__('web.user_cobon')}} </span> </button>-->
                                    <!--    </div>-->
                                    <!--    <p id="cobon_msg"></p>-->
                                    <!--</div>-->
                                </div>
                                <div class="delivery_type">
                                    <!--<h6 class="mb-5"> - {{__('web.select_way')}} </h6>-->
                                    <nav>
                                        <input type="hidden" id="status" name="status" value="table">
                                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                           {{-- <button type="button" onclick="selectStatus(this)" data-id="room" class="nav-link active" id="nav-dlv1-tab" data-bs-toggle="tab" data-bs-target="#nav-dlv1"> <i class="fal fa-person-shelter me-2"></i> {{__('web.select_room')}}</button>
                                            --}} <!-- <span class="or"> - OR - </span> -->
                                            <button type="button" onclick="selectStatus(this)" data-id="table" class="nav-link" id="nav-dlv2-tab" data-bs-toggle="tab" data-bs-target="#nav-dlv2"><i class="fal fa-table-picnic me-2"></i> {{__('web.select_table')}}</button>
                                            <!-- <span class="or"> - OR - </span> -->
                                            <button type="button" onclick="selectStatus(this)" data-id="pickup" class="nav-link" id="nav-dlv3-tab" data-bs-toggle="tab" data-bs-target="#nav-dlv3"><i class="fal fa-utensils me-2"></i> {{__('web.pickup_restaurant')}}</button>
                                        </div>
                                    </nav>
                                    <div class="tab-content" id="nav-tabContent">
                                        {{--
                                        <div class="tab-pane fade show active" id="nav-dlv1">
                                            <div class="form-group mt-5">
                                                <h6 class="mb-2"> {{__('web.select_room')}} </h6>
                                                <select name="room_id" id="" class="form-control form-select px-4">
                                                    <option value=""> {{__('web.room')}} </option>
                                                    @foreach($rooms as $row)
                                                        <option {{$row->id == $room_id ? 'selected' : ''}} value="{{$row->id}}"> {{$row->name}} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        --}}
                                        <div class="tab-pane fade show active" id="nav-dlv2">
                                            <div class="form-group mt-5">
                                                <h6 class="mb-2"> {{__('web.select_table')}} </h6>
                                                <select name="table_id" id="" class="form-control form-select px-4">
                                                    <option value=""> {{__('web.select_table')}} </option>
                                                    @foreach($tables as $row)
                                                        <option value="{{$row->foodics_id}}"> {{$row->number}} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="tab-pane fade" id="nav-dlv3">
                                            <div class"row">
                                                <p class="text-center">{{__('web.date')}} : {{date('Y-m-d')}}</p>
                                            </div>
                                            <div class="row gx-2">
                                                @foreach($times as $i=>$time)
                                                <div class="col-lg-3">
                                                    <div class="check_item">
                                                        @php 
                                                            $lastTime = $startTimes[$i];
                                                            if($lastTime > '00:00:00' && '06:00:00')
                                                            {
                                                                $lastTime = '23:59:00';
                                                            }
                                                        @endphp
                                                        <input type="radio" {{ $lastTime < date('H:i:s') ? 'disabled' : '' }} class="btn-check" name="time" value="{{$fullTimes[$i]}}" id="time{{$time}}" {{ strtotime($fullTimes[$i]) < time() ? 'disabled' : ''}}>
                                                        <label class="" for="time{{$time}}">
                                                            <div class="time_card">
                                                                <div class="icon">
                                                                    <i class="fal fa-clock"></i>
                                                                </div>
                                                                <h6> <!-- {{__('web.from')}}: --> <span class="subColor"> {{date('g:i ',strtotime( $startTimes[$i])) . __('web.'.date('a',strtotime($startTimes[$i])))}} </span> 
                                                                {{-- {{__('web.to')}}: <span class="subColor">  {{$endTimes[$i]}} </span> --}}
                                                                </h6>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="total_cart mt-5 mt-lg-0">
                                    <h5> {{__('web.cart_total')}} </h5>
                                    <ul id="calculate">
                                    </ul>
                                    <div class="form-group d-flex cobon-group">
                                        <input type="text" id="cobon" name="cobon" onchange="calculate()" class="form-control px-3" placeholder="{{__('web.discount_code')}}">
                                        <button type="button" class="butn ms-4 flex-shrink-0"> <span> {{__('web.user_cobon')}} </span> </button>
                                    </div>
                                    <p id="cobon_msg"></p>
                                    <div class="form-check terms">
                                      <input class="form-check-input" type="checkbox" name="accept_on" id="flexCheckDefault">
                                      <label class="form-check-label" for="flexCheckDefault">
                                            {!! __('web.terms_desc') !!}
                                      </label>
                                    </div>
                                    <button class="butn w-100 mt-5"> <span> {{__('web.complete_order')}} </span> </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>



        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@section('inject_js')
    <script>
        function deleteCart(elem)
        {
            let url = $(elem).attr('data-id')
            $.ajax
            ({
                url : url,
                type: "DELETE",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType:'json',
                success:function(data)
                {
                    $('.product_row').fadeOut(1000)
                    toasterSuccess(data.message);
                    calculate()
                    getCartCount()
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
        // Increment button click event
        $(".qt-plus").click(function() {
            var value = parseInt($(this).siblings(".qt").val()); // Get the current value
            let url = $(this).attr('data-id')
            let item = $(this).siblings(".qt")
            $.ajax
            ({
                url : url,
                type: "PUT",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: 'count='+(value+1),
                dataType:'json',
                success:function(data)
                {
                    item.val(value + 1); // Increment the value and set it
                    toasterSuccess(data.message);
                    calculate()
                    getCartCount()
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        });

        // Decrement button click event
        $(".qt-minus").click(function() {
            var value = parseInt($(this).siblings(".qt").val()); // Get the current value
            if (value > 1) {
                let url = $(this).attr('data-id')
                let item = $(this).siblings(".qt")

                $.ajax
                ({
                    url : url,
                    type: "PUT",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: 'count='+(value-1),
                    dataType:'json',
                    success:function(data)
                    {
                        item.val(value - 1); // Decrement the value and set it
                        toasterSuccess(data.message);
                        calculate()
                        getCartCount()
                    }
                    ,error:function(data)
                    {
                        toasterError(Object.values(data.responseJSON.errors)[0]);
                    }
                })
            }
        });
        function calculate()
        {
            let cobon = $('#cobon').val()
            $.ajax
            ({
                url : "{{route('cart.calculate')}}",
                type: "GET",
                data: 'cobon='+cobon,
                success:function(data)
                {
                    $('#calculate').html(data.calculate);
                    $('#products').html(data.products);
                    $('#cobon_msg').hide();
                    $('#cobon_msg').html('');

                    if(data.cobon_msg != '')
                    {
                        $('#cobon_msg').html(data.cobon_msg);
                        if(data.cobon_id != null)
                        {
                            $('#cobon_msg').css('color','green');
                        }
                        else
                        {
                            $('#cobon_msg').css('color','red');
                        }
                        $('#cobon_msg').show();
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
        setTimeout(
            function()
            {
                calculate()
            }, 1000);
        function selectStatus(elem)
        {
            let data = $(elem).attr('data-id');
            $('#status').val(data)
        }
    </script>
@endsection
@stop
