@extends('layouts.dashboard')

@section('title',trans('layout.restaurant').' | '.$restaurant->name)

@section('css')
    <link rel="stylesheet" href="{{asset('vendor/select2/css/select2.min.css')}}">
    <link href="{{asset('vendor/sweetalert2/dist/sweetalert2.min.css')}}" rel="stylesheet">
    <style>
        .dropdown.bootstrap-select.swal2-select {
            display: none !important;
        }

        .view-order-section {
            position: fixed;
            top: 0;
            text-align: center;
            z-index: 9;
            top: 88%;
            width: 100%;
        }

        .small-view-order-btn {
            position: relative;
            left: 38%;
        }

        .small-view-order-btn_t {
            position: relative;
            left: 24%;
        }

        .small-view-order-btn_p {
            position: relative;
            left: 24%;
        }
    </style>
@endsection

@section('main-content')
    <div id="restaurant-section">
        <div class="row">
            <div class="col-lg-12">
                <h2>{{$restaurant->name}}</h2>
                <div class="profile card card-body px-3 pt-3 pb-0">
                    <div class="profile-head">
                        @if($restaurant->cover_image)
                            <div class="photo-content">
                                <div class="cover-wrapper">
                                    <img class="cover-img" src="{{asset('uploads/'.$restaurant->cover_image)}}" alt="">
                                </div>
                            </div>
                        @endif
                        <div class="profile-info">
                            <div class="profile-photo">
                                <img src="{{asset('uploads/'.$restaurant->profile_image)}}"
                                     class="img-fluid rounded-circle" alt="">
                            </div>
                            <div class="profile-details flex-row d-flex flex-wrap">
                                @if($restaurant->location)
                                    <div class="flex-1 profile-name px-3 pt-2">
                                        <h4 class="text-muted mb-0">{{$restaurant->location}}</h4>
                                        <p>{{trans('layout.location')}}</p>
                                    </div>
                                @endif
                                @if($restaurant->email)
                                    <div class="flex-1 profile-email px-2 pt-2">
                                        <h4 class="text-muted mb-0">{{$restaurant->email}}</h4>
                                        <p>{{trans('layout.email')}}</p>
                                    </div>
                                @endif
                                @if($restaurant->phone_number)
                                    <div class="flex-1  profile-email px-2 pt-2">
                                        <h4 class="text-muted mb-0">{{$restaurant->phone_number}}</h4>
                                        <p>{{trans('layout.phone_number')}}</p>
                                    </div>
                                @endif
                                @if($restaurant->timing)
                                    <div class="flex-1  profile-email px-2 pt-2">
                                        <h4 class="text-muted mb-0">{{$restaurant->timing}}</h4>
                                        <p>{{trans('layout.timing')}}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <h3>{{trans('layout.description')}}</h3>
                        <div class="profile-statistics mb-5">
                            {!! clean($restaurant->description) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="item-lists">

        @foreach($categories as $categoryName=>$categoryItems)
            <div class="category-item-wrapper" id="category-item-wrapper-{{$categoryItems[0]->category_id}}">
                <div class="row page-titles mx-0">
                    <div class="col-sm-6 p-md-0">
                        <div class="">
                            <h2><span>{{$categoryName}}'s</span> {{trans('layout.items')}} </h2>
                        </div>
                    </div>

                </div>
                <div class="row">
                    @foreach($categoryItems as $item)
                        <div class="col-xl-3 col-lg-6 col-md-4 col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="new-arrival-product">
                                        <div class="new-arrivals-img-contnent">
                                            <img class="img-fluid" src="{{asset('uploads/'.$item->image)}}" alt="">
                                        </div>
                                        <div class="new-arrival-content text-center mt-3">
                                            <h4>{{$item->name}}</h4>
                                            <span class="d-block text-muted">{{$item->details}}</span>
                                            <ul class="star-rating d-none">
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star-half-empty"></i></li>
                                                <li><i class="fa fa-star-half-empty"></i></li>
                                            </ul>
                                            <div class="price">
                                                @if($item->discount>0)
                                                    @if($item->discount_type=='percent')
                                                        @php $discount = $item->discount*$item->price /100; $total= $item->price - $discount ; @endphp
                                                        <del>{{isset($restaurant->currency_symbol)? $restaurant->currency_symbol.''.$item->price:formatNumberWithCurrSymbol($item->price)}}</del> {{isset($restaurant->currency_symbol)? $restaurant->currency_symbol.''.$total :formatNumberWithCurrSymbol(($item->price-(($item->discount*$item->price)/100)))}}
                                                    @elseif($item->discount_type=='flat')
                                                        <del>{{isset($restaurant->currency_symbol)? $restaurant->currency_symbol.''.$item->price:formatNumberWithCurrSymbol($item->price)}}</del>
                                                        {{isset($restaurant->currency_symbol)? $restaurant->currency_symbol.''.($item->price-$item->discount):formatNumberWithCurrSymbol($item->price-$item->discount)}}
                                                    @endif
                                                @else
                                                    {{formatNumberWithCurrSymbol($item->price)}}
                                                @endif
                                                @if($item->tax->title)
                                                    <div class="item-tax" id="item-tax-{{$item->id}}"
                                                         data-tax-type="{{$item->tax->type}}"
                                                         data-tax="{{$item->tax->amount}}">
                                                        <span> + </span>({{$item->tax->type=='percentage'?formatNumber($item->tax->amount).'%': (isset($restaurant->currency_symbol)? $restaurant->currency_symbol.''.$item->tax->amount:formatNumberWithCurrSymbol($item->tax->amount))}} {{trans('layout.tax')}}
                                                        )
                                                    </div>
                                                @endif
                                            </div>
                                            @php  $orderStatus = json_decode(get_settings('manage_place_order')); @endphp
                                            @if(isset($orderStatus->admin_order_status) && $orderStatus->admin_order_status=='enable' && isset($restaurant->order_status) && $restaurant->order_status=='enable')
                                                <div class="text-right">
                                                    @if(isset($order) && $order->payment_status !='paid')
                                                        <button data-item-name="{{$item->name}}"
                                                                data-restaurant-id="{{$restaurant->id}}"
                                                                data-extras="{{json_encode($item->active_extras)}}"
                                                                data-value="{{json_encode($item->only(['name','id','price','details','discount','discount_type','discount_to']))}}"
                                                                class="btn btn-xxs btn-info update-order">{{trans('layout.add')}}
                                                        </button>
                                                    @else
                                                        <button
                                                            data-extras="{{json_encode($item->active_extras)}}"
                                                            data-value="{{json_encode($item->only(['name','id','price','details','discount','discount_type','discount_to']))}}"
                                                            class="btn btn-xxs btn-info add-to-cart">{{trans('layout.add')}}
                                                        </button>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <div class="add-overview w-100 pb-5 mb-5" id="add-overview">
        <form action="{{route('order.place')}}" method="post" id="orderForm">
            @csrf
            <input type="hidden" name="restaurant" value="{{$restaurant->id}}">
            <div class="row" id="orderOverviewSection">
                <div class="col-xl-8 col-11">
                    <div class="card border-2-blue">
                        <div class="card-header border-0 pb-0">
                            <h5 class="card-title">{{trans('layout.overview')}}</h5>
                            <div id="close-overview" class="pull-right "><i class="fa fa-close"></i></div>
                        </div>
                        <div class="card-body">
                            <div class="order-items">

                            </div>
                        </div>
                        <div class="card-footer border-0 pt-0">
                            <p class="card-text d-inline">{{trans('layout.total')}}: <span></span> <span
                                    id="totalAmount">0</span>
                            <div class="item-tax-total" id="item-tax-total">
                            </div>
                            </p>
                            <a id="processCheckout" href="javascript:void(0)"
                               class="btn btn-xs btn-primary float-right">{{trans('layout.process')}}</a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row" id="paymentOverviewSection">
                <div class="col-xl-8 col-11">
                    <div class="card border-2-blue">
                        <div class="card-header border-0 pb-0">
                            <h5 class="card-title">{{trans('layout.payment')}}</h5>
                            <div id="close-payment-overview" class="pull-right "><i class="fa fa-close"></i>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="order-items-payment">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="name">{{trans('layout.name')}}*</label>
                                        <input value="{{auth()->check()?auth()->user()->name:''}}" name="name"
                                               type="text" class="form-control" id="name"
                                               placeholder="{{trans('layout.ex_jone_doe')}}"
                                               required="">
                                        <span id="name-error" class="small text-danger p-2"></span>

                                    </div>
                                    <div class="col-md-6">
                                        <label for="phone">{{trans('layout.phone')}}</label>
                                        <input value="{{auth()->check()?auth()->user()->phone_number:''}}" name="phone"
                                               type="number" class="form-control" id="phone"
                                               placeholder="{{trans('layout.numder')}}">
                                        <span id="phone-error" class="small text-danger p-2"></span>

                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <label for="phone">{{trans('layout.email')}}</label>
                                        <input value="{{auth()->check()?auth()->user()->email:''}}" name="email"
                                               type="email" class="form-control" id="email"
                                               placeholder="{{trans('layout.ex_example_mail_com')}}">
                                        <span id="email-error" class="small text-danger p-2"></span>

                                    </div>

                                    @if(request()->get('table'))
                                        <div class="col-md-6 mb-3">
                                            <label for="table_id">{{trans('layout.table')}}</label>
                                            <select
                                                {{request()->get('table')?'disabled="true"':''}} class="form-control">
                                                @foreach($tables as $table)
                                                    <option
                                                        {{request()->get('table')==$table->id?'selected':''}} value="{{$table->id}}">{{$table->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    <div class="col-md-12 col-12 mb-3 ">
                                        <label for="table_id">{{trans('layout.select_delivery_type')}}</label>
                                        <select id="deliveryType" class="form-control" name="selectDeliveryType">
                                            <option value="table">{{trans('layout.table')}}</option>
                                            <option value="takeaway">{{trans('layout.takeaway')}}</option>
                                            <option value="delivery">{{trans('layout.cash_on_delivery')}}</option>
                                        </select>
                                    </div>

                                    <div id="table" class="col-md-6 {{request()->get('table')?'d-none':''}}">
                                        <label for="table_id">{{trans('layout.table')}}</label>
                                        <select name="table_id" id="table_id" class="form-control">
                                            @foreach($tables as $table)
                                                <option
                                                    {{request()->get('table')==$table->id?'selected':''}} value="{{$table->id}}">{{$table->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div id="takeawayTime" class="col-sm-12 mt-3 takeaway-section d-none">
                                        <label for="time">{{trans('layout.time')}}*</label>
                                        <select name="time" id="time" class="form-control">
                                            {!! generateOrderSlot() !!}
                                        </select>
                                    </div>
                                    <div id="delivery" class="col-sm-12 mt-3 d-none">
                                        <label for="deliveryAddress">Delivery address</label>
                                        <input value="" type="text" name="address" id="deliveryAddress"
                                               class="form-control" placeholder="Ex: 2806 Montague Rd, BC, Canada">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="comment">{{trans('layout.comment')}}</label>
                                        <input name="comment" type="text" class="form-control" id="comment"
                                               placeholder="{{trans('layout.ex_Need_extra_spoon')}}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="d-block my-3">
                                            @php
                                                $rest_gateway_credentials=get_restaurant_gateway_settings($restaurant->user_id);
                                                $isPaymentEnable=false;
                                            @endphp
                                            @php $credentials=isset($rest_gateway_credentials)?json_decode($rest_gateway_credentials->value):''; @endphp

                                            @if(isset($credentials->offline_status) && $credentials->offline_status=='active')
                                                @php $isPaymentEnable=true; // to enable submit button @endphp
                                                <div class="custom-control custom-radio mb-2 d-none">
                                                    <input value="pay_on_table" id="pay_on_table" name="pay_type"
                                                           type="radio"
                                                           class="custom-control-input" checked="" required="">
                                                    <label class="custom-control-label"
                                                           for="pay_on_table">{{trans('layout.pay_on_table')}}</label>
                                                </div>
                                            @endif
                                            <div class="custom-control custom-radio mb-2 d-none">
                                                <input value="takeaway" id="takeaway" name="pay_type"
                                                       type="radio"
                                                       class="custom-control-input" required="">
                                                <label class="custom-control-label"
                                                       for="takeaway">{{trans('layout.takeaway')}}</label>
                                            </div>

                                            @if((isset($credentials->paypal_status) && $credentials->paypal_client_id && $credentials->paypal_secret_key && $credentials->paypal_status=='active') ||
(isset($credentials->stripe_status) && $credentials->stripe_publish_key && $credentials->stripe_secret_key && $credentials->stripe_status=='active') ||
(isset($credentials->paytm_environment) && $credentials->paytm_mid && $credentials->paytm_secret_key && $credentials->paytm_website && $credentials->paytm_txn_url && $credentials->paytm_status=='active') ||
 (isset($credentials->mollie_status) && $credentials->mollie_api_key && $credentials->mollie_status=='active') || (isset($credentials->paystack_public_key) && $credentials->paystack_secret_key && $credentials->paystack_status=='active'))
                                                @php $isPaymentEnable=true; // to enable submit button @endphp

                                                <div id="payNow" class="custom-control custom-radio mb-2 d-none">
                                                    <input value="pay_now" id="pay_now"
                                                           name="pay_type"
                                                           type="radio"
                                                           class="custom-control-input" required="">
                                                    <label class="custom-control-label"
                                                           for="pay_now">{{trans('layout.pay_now')}}</label>
                                                </div>
                                            @endif

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

                                <div class="pay-now-section d-none">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="d-block my-3">

                                                @if($rest_gateway_credentials && $credentials)

                                                    @if(isset($credentials->paypal_status) && $credentials->paypal_client_id && $credentials->paypal_secret_key && $credentials->paypal_status=='active')
                                                        <div class="custom-control custom-radio mb-2">
                                                            <input id="paypal" name="paymentMethod" type="radio"
                                                                   class="custom-control-input"
                                                                   required="" checked="" value="paypal">
                                                            <label class="custom-control-label"
                                                                   for="paypal">{{trans('layout.paypal')}}</label>
                                                        </div>
                                                    @endif


                                                    @if(isset($credentials->paytm_environment) && $credentials->paytm_mid && $credentials->paytm_secret_key && $credentials->paytm_website && $credentials->paytm_txn_url && $credentials->paytm_status=='active')
                                                        <div class="custom-control custom-radio mb-2">
                                                            <input id="paytm" name="paymentMethod" type="radio"
                                                                   class="custom-control-input"
                                                                   required="" value="paytm">
                                                            <label class="custom-control-label"
                                                                   for="paytm">{{trans('layout.paytm')}}</label>
                                                        </div>
                                                    @endif

                                                    @if(isset($credentials->mollie_status) && $credentials->mollie_api_key && $credentials->mollie_status=='active')
                                                        <div class="custom-control custom-radio mb-2">
                                                            <input id="mollie" name="paymentMethod" type="radio"
                                                                   class="custom-control-input"
                                                                   required="" value="mollie">
                                                            <label class="custom-control-label"
                                                                   for="mollie">{{trans('layout.mollie')}}</label>
                                                        </div>
                                                    @endif
                                                    @if(isset($credentials->paystack_public_key) && $credentials->paystack_secret_key && $credentials->paystack_status=='active')
                                                        <div class="custom-control custom-radio mb-2">
                                                            <input id="paystack" name="paymentMethod" type="radio"
                                                                   class="custom-control-input"
                                                                   required="" value="paystack">
                                                            <label class="custom-control-label"
                                                                   for="paystack">{{trans('layout.paystack')}}</label>
                                                        </div>
                                                    @endif

                                                    @if(isset($credentials->stripe_status) && $credentials->stripe_publish_key && $credentials->stripe_secret_key && $credentials->stripe_status=='active')
                                                        <div class="custom-control custom-radio mb-2">
                                                            <input id="credit" name="paymentMethod" type="radio"
                                                                   class="custom-control-input"
                                                                   required="" value="stripe">
                                                            <label class="custom-control-label"
                                                                   for="credit">{{trans('layout.credit_or_debit_card')}}</label>
                                                        </div>
                                                    @endif

                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-payment-section">
                                    <div class="row">
                                        <div class="col-lg-12" id="stripe-card-element">
                                            <div id="card-element"
                                                 class="border-1-gray p-3 border-radius-1"></div>
                                            <div id="card-errors" role="alert"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer border-0 pt-0">
                            <p class="card-text d-inline">{{trans('layout.total')}}: <span
                                    id="totalAmountToPayment">0</span>
                            <div class="item-tax-total"></div>
                            </p>
                            @php  $orderStatus = json_decode(get_settings('manage_place_order')); @endphp
                            @if(isset($orderStatus->admin_order_status) && $orderStatus->admin_order_status=='enable' && isset($restaurant->order_status) && $restaurant->order_status=='enable')
                                <div id="placeOrderBtn">
                                    <button id="place_order_continue" type="button"
                                            class="btn btn-xs btn-primary float-right d-none">{{trans('Continue')}}</button>

                                    <a id="place-order" href="javascript:void(0)"
                                       class="btn btn-xs btn-primary float-right place-order {{auth()->user()?'':'disabled'}}">{{trans('layout.place_order')}}</a>
                                </div>
                            @endif
                        </div>
                    </div>

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

    <div class="modal fade" id="extraModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{trans('layout.modal_title')}}</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="">
                        <table class="table table-responsive">
                            <thead>
                            <tr>
                                <th style="width:50px;">
                                    <div class="custom-control custom-checkbox checkbox-success check-lg mr-3">
                                        <input type="checkbox" class="custom-control-input" id="checkAll" required="">
                                        <label class="custom-control-label" for="checkAll"></label>
                                    </div>
                                </th>
                                <th><strong>{{trans('layout.title')}}</strong></th>
                                <th><strong>{{trans('layout.price')}}</strong></th>
                                <th><strong>{{trans('layout.quantity')}}</strong></th>
                                <th><strong>{{trans('layout.amount')}}</strong></th>
                            </tr>
                            </thead>
                            <tbody id="extraTable">
                            <tr>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light"
                            data-dismiss="modal">{{trans('layout.close')}}</button>
                </div>
            </div>
        </div>
    </div>
    {{--    View Order--}}
    <div class="modal fade" id="viewOrder">
        <div class="modal-dialog modal-lg">

            <div class="modal-content">
                <div id="close_overview" class="pull-right p-1"><i class="fa fa-close p-1 float-right"></i></div>
                <div class="col-xl-10 col-10 offset-1 pt-3">
                    <div class="card ">
                        <div class="card-header border-0 pb-0">
                            <h5 class="card-title">{{trans('layout.order_overview')}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="order_items">

                            </div>
                        </div>
                        <div class="card-footer border-0 pt-0">
                            <p class="card-text d-inline">{{trans('layout.total')}}: <span></span> <span
                                    id="orderTotalAmount">0</span>
                            </p>
                            <a id="saveOrder" href="#"
                               class="btn btn-xs btn-primary float-right d-none text-white">{{trans('layout.save_change')}}</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {{--    End--}}
    {{--    Pay Now--}}
    <div class="modal fade" id="confirmPayment">
        <div class="modal-dialog modal-lg">

            <div class="modal-content">
                <div id="close_pay_modal" class="pull-right p-1"><i class="fa fa-close p-1 float-right"></i></div>
                <div class="col-xl-10 col-10 offset-1 pt-3">
                    <div class="card">
                        <div class="card-header row pb-0">
                            <h5 class="card-title col-sm-8 col-8">{{trans('layout.pay_now')}} </h5> <span
                                class="float-right text-muted col-sm-4 col-4">{{trans('layout.total')}}: {{isset($restaurant->currency_symbol) && isset($order->total_price)? $restaurant->currency_symbol.''.$order->total_price:formatNumberWithCurrSymbol(isset($order->total_price)?$order->total_price:0)}}</span>
                            <hr>
                        </div>
                        <div class="card-body">
                            <form action="{{route('settelement.mode')}}" method="get">
                                <div class="form-group">
                                    <label for="">{{trans('layout.payment_type')}}</label>
                                    <select name="payment_type" id="paymentType" class="form-control">
                                        <option>{{trans('layout.select_a_payment_type')}}</option>
                                        <option value="cash">{{trans('layout.cash')}}</option>
                                        @if(isset($credentials->paytm_environment) && $credentials->paytm_mid && $credentials->paytm_secret_key && $credentials->paytm_website && $credentials->paytm_txn_url && $credentials->paytm_status=='active')
                                            <option value="paytm">{{trans('layout.paytm')}}</option>
                                        @endif
                                        <option value="stripe">{{trans('layout.stripe')}}</option>
                                        <option value="paypal">{{trans('layout.paypal')}}</option>
                                        <option value="mollie">{{trans('layout.mollie')}}</option>
                                        <option value="paystack">{{trans('layout.paystack')}}</option>
                                    </select>
                                </div>
                                <div class="form-group cash_section payment_section">
                                    <h4 class="text-center p-3">{{trans('layout.pay_in_cash')}}</h4>
                                </div>
                                <div class="form-group  paytm_section payment_section" style="display: none">
                                    {{--                                    @if(isset($credentials->paytm_environment) && $credentials->paytm_mid && $credentials->paytm_secret_key && $credentials->paytm_website && $credentials->paytm_txn_url && $credentials->paytm_status=='active')--}}
                                    {{--                                        <div class="custom-control custom-radio mb-2">--}}
                                    {{--                                            <input  name="paymentMethod" type="radio"--}}
                                    {{--                                                   class="custom-control-input"--}}
                                    {{--                                                   required="" value="paytm">--}}
                                    {{--                                            <label class="custom-control-label"--}}
                                    {{--                                                   for="paytm">{{trans('layout.paytm')}}</label>--}}
                                    {{--                                        </div>--}}
                                    {{--                                    @endif--}}
                                    <h4 class="text-center p-3">{{trans('layout.pay_in_paytm')}}</h4>
                                </div>
                                <div class="form-group mt-2">
                                    <button
                                        class="btn btn-sm btn-primary float-right">{{trans('layout.confirm')}}</button>
                                </div>
                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {{--    End Pay Now--}}
    @php  $orderStatus = json_decode(get_settings('manage_place_order')); @endphp
    @if(isset($orderStatus->admin_order_status) && $orderStatus->admin_order_status=='enable' && isset($restaurant->order_status) && $restaurant->order_status=='enable')
        <div class="row  view-order-section">
            @if(isset($order) && $order->status !='delivered')
                <button
                    class="btn btn-sm badge-success light view-order-btn small-view-order-btn">{{trans('layout.view_order')}}</button>
            @elseif(isset($order) && $order->status =='delivered' && $order->payment_status=='unpaid')
                <button
                    class="btn btn-sm badge-success light view-order-btn small-view-order-btn_t">{{trans('layout.view_order')}}</button>
                <button
                    class="btn btn-sm badge-success light pay_now small-view-order-btn_p ml-3">{{trans('layout.pay_now')}}</button>
            @endif
        </div>
    @endif


    <div class="modal fade" id="orderItemUpdate" style="z-index: 9999">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header border-0 p-3">
                    <h4 class="modal-title item-add-title"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="orderId" name="order_id">
                    <input type="hidden" id="detailsId" name="details_id">
                    <input type="hidden" id="status" name="status">
                    <h5 id="confirmation"></h5>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer p-2">
                    <button id="itemUpdateConfirm" type="button"
                            class="btn btn-primary">{{trans('layout.confirm')}}</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script src="{{asset('vendor/sweetalert2/dist/sweetalert2.min.js')}}"></script>
    <script src="{{asset('vendor/select2/js/select2.full.min.js')}}"></script>

    @if(isset($credentials->stripe_status) && $credentials->stripe_status=='active')
        <script src="https://js.stripe.com/v3/"></script>
        <script !src="">
            "use strict";
            // Create a Stripe client.
            var stripe = Stripe('{{$credentials->stripe_publish_key}}');

            // Create an instance of Elements.
            var elements = stripe.elements();

            // Custom styling can be passed to options when creating an Element.
            // (Note that this demo uses a wider set of styles than the guide below.)
            var style = {
                base: {
                    color: '#32325d',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                        color: '#aab7c4'
                    }
                },
                invalid: {
                    color: '#fa755a',
                    iconColor: '#fa755a'
                }
            };

            // Create an instance of the card Element.
            var card = elements.create('card', {style: style});

            // Add an instance of the card Element into the `card-element` <div>.
            card.mount('#card-element');

            // Handle real-time validation errors from the card Element.
            card.on('change', function (event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });
        </script>
    @endif

    <script>

        $('.custom-control-input').on('click', function (e) {
            const value = $(this).val();

            if (value == 'stripe') {
                $('#stripe-card-element').addClass('d-none');
                $('#place_order_continue').removeClass('d-none');
                $('#place-order').addClass('d-none');
            } else {
                $('#place_order_continue').addClass('d-none');
                $('#place-order').removeClass('d-none');
            }
        });

        $(document).on('click', '#place_order_continue', function (e) {

            const order_total_amount = $('#totalAmountToPayment').attr('data-total-amount');
            $(this).html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $.ajax({
                method: "get",
                url: "{{route('stripe.payment-intent')}}",
                data: {
                    order_total_amount: order_total_amount,
                    restaurant_id: "{{$restaurant->id}}",
                },
                success: function (res) {
                    if (res.status == 'success') {
                        const clientSecret = res.data;
                        if (clientSecret) {
                            $('#stripe-card-element').removeClass('d-none');
                            $('#place_order_continue').addClass('d-none');
                            $('#place-order').removeClass('d-none').attr('data-intend-secret-key', clientSecret);
                        }

                    } else {
                        $(this).html('Continue');
                    }
                }
            })
        });
    </script>

    <script>
        // Handle form submission.
        var btn = document.getElementById('place-order');
        btn.addEventListener('click', function (event) {
            event.preventDefault();
            $('#name-error').text('');
            var name = document.getElementById('name');
            if (!name.value) {
                $('#name-error').text('Enter your name');
                return true;
            }


            let credit = document.getElementById('credit');
            if (credit && credit.checked) {
                let clientSecret = $('#place-order').attr('data-intend-secret-key');

                stripe.confirmCardPayment(clientSecret, {
                    payment_method: {
                        card: card
                    }
                })
                    .then(function (result) {
                        var displayError = document.getElementById('card-errors');
                        if (result.error) {
                            // Show error to your customer
                            displayError.textContent = result.error.message;
                        } else {
                            // The payment succeeded!
                            stripeTokenHandler(result.paymentIntent.id);
                        }
                    });
            } else {

                $('input[type=radio][name=pay_type]').each(function (index, value) {

                    if ($(value).is(':checked')) {
                        $('input[type=radio][name=paymentMethod]').each(function (i, v) {
                            if ($(v).is(':checked')) $('#orderForm').attr('data-can', 'true');
                        });
                    }
                    if ($(value).val() == 'pay_on_table') $('#orderForm').attr('data-can', 'true');

                });


                var form = $('#orderForm');
                if (form.attr('data-can') == 'true') {
                    form.submit();
                } else {
                    $('#place-order').addClass('disabled')
                }
            }
        });

        // Submit the form with the token ID.
        function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('orderForm');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        }
    </script>

    <script !src="">

        const currencySymbol = '{{isset($restaurant->currency_symbol)?$restaurant->currency_symbol:(isset(json_decode(get_settings('local_setting'))->currency_symbol)?json_decode(get_settings('local_setting'))->currency_symbol:'$')}}';

        Number.prototype.number_format = function (decimals, dec_point, thousands_sep) {
            let number = this.valueOf();
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        };
        Number.prototype.formatNumber = function () {
            const decimal_format = '{{isset(json_decode(get_settings('local_setting'))->decimal_format)?json_decode(get_settings('local_setting'))->decimal_format:'.'}}';
            const decimals = '{{isset(json_decode(get_settings('local_setting'))->decimals)?json_decode(get_settings('local_setting'))->decimals:'2'}}';
            const thousand_separator = '{{isset(json_decode(get_settings('local_setting'))->thousand_separator)?json_decode(get_settings('local_setting'))->thousand_separator:','}}';
            return this.valueOf().number_format(decimals, decimal_format, thousand_separator);
        };
        Number.prototype.formatNumberWithCurrSymbol = function () {
            const symbol_position = '{{isset(json_decode(get_settings('local_setting'))->currency_symbol_position)?json_decode(get_settings('local_setting'))->currency_symbol_position:'after'}}';

            if (symbol_position == 'after') {
                return this.valueOf().formatNumber() + currencySymbol;
            } else if (symbol_position == 'before') {
                return currencySymbol + this.valueOf().formatNumber();
            }

        };

        function calculateTotal() {
            let total = 0;
            $('.row-total').each((index, value) => {
                total += parseFloat($(value).text());
            });
            total += calculateExtraTotal();
            $('#totalAmount').text(total.formatNumberWithCurrSymbol());
            $('#totalAmountToPayment').text(total.formatNumberWithCurrSymbol()).attr('data-total-amount', total);
            return total;
        }

        function calculateTotalTax() {
            let total = 0;
            $('.row-tax').each((index, value) => {
                const quantity = $("#input-item-quantity-" + $(value).attr('data-item-id')).val();
                if (quantity)
                    total += parseFloat($(value).val()) * quantity;
            });
            if (total > 0) {
                $('.item-tax-total').html("+<span>" + total.formatNumberWithCurrSymbol() + " {{trans('layout.tax')}}</span>");
            }
        }

        $(document).on('click', '.item-category', function (e) {
            e.preventDefault();
            $('.hamburger').click();
            $('#restaurant-section').hide();
            $('#item-lists').show();
            $('.category-item-wrapper').hide();
            $('#category-item-wrapper-' + $(this).attr('data-id')).show();
        });
        $(document).on('click', '.add-to-cart', function (e) {
            e.preventDefault();
            $('#add-overview').animate({bottom: '0px'});
            $('#orderOverviewSection').show();
            $('#paymentOverviewSection').hide();

            const item = JSON.parse($(this).attr('data-value'));
            const itemExtras = $(this).attr('data-extras');

            const taxSection = $('#item-tax-' + item.id);
            let taxAmount = 0;
            let taxType = '';
            if (taxSection.length > 0) {
                taxAmount = parseFloat(taxSection.attr('data-tax'));
                taxType = taxSection.attr('data-tax-type');
            }
            if (taxType && taxType == 'percentage') {
                taxAmount = (taxAmount * item.price) / 100;
            }


            let singleItem = $('#single-item-' + item.id).length;
            let singleItemHtml = '';
            let discount = item.discount;
            let discountedPrice = 0;
            if (item.discount_type == 'flat') {
                discountedPrice = item.price - discount;
            } else if (item.discount_type == 'percent') {
                discountedPrice = (item.price * discount) / 100;
                discountedPrice = item.price - discountedPrice;
            }
            if (singleItem <= 0) {
                singleItemHtml = `<div class="single-item" id="single-item-${item.id}">
                                    <div class="item-details">
                                        <div class="item-title">${item.name}</div>
                                            <input type="hidden" name="item_id[]" value="${item.id}">
                                            <input type="hidden" class="row-tax" data-item-id="${item.id}" id="item-individual-tax-${item.id}" value="${taxAmount}">
                                            <input type="hidden" name="item_quantity[]" value="1" id="input-item-quantity-${item.id}">
                                        <div class="item-price"><span class="item-individual-currency-symbol"></span> <span class="item-individual-price d-none">${discountedPrice}</span> <span>${discountedPrice.formatNumberWithCurrSymbol()}</span></div>
                                    </div>
                                   <div style="position:relative;display:${itemExtras != '[]' ? 'initial' : 'none'}">

                                   <span data-id="${item.id}" data-item-name="${item.name}" data-extras='${itemExtras}' class="item-extra">{{trans('layout.extra')}}</span>
                                   <div class="extra-list">
                                   </div>
                                   </div>

                                    <div class="modify-item">
                                        <span class="d-none row-total">${discountedPrice}</span>
                                        <div data-id="${item.id}" class="minus-quantity">
                                            <i class="fa fa-minus"></i>
                                        </div>
                                        <div id="item-quantity-${item.id}" class="item-quantity">1</div>
                                        <div data-id="${item.id}" class="plus-quantity" id="plus-quantity-${item.id}">
                                            <i class="fa fa-plus"></i>
                                        </div>
                                    </div>
                                </div>`;
            } else {
                $('#plus-quantity-' + item.id).click();
            }
            $('.order-items').append(singleItemHtml);
            calculateTotal();
            calculateTotalTax();

        });

        $('#close-overview,#close-payment-overview').on('click', function (e) {
            $('#add-overview').animate({bottom: '-1000px'});
        });


        $(document).on('click', '.minus-quantity', function (e) {
            e.preventDefault();
            let price = parseFloat($(this).parent().parent().find('.item-individual-price').first().text());
            let quantity = parseInt($(this).parent().find('.item-quantity').first().text());
            quantity--;
            if (quantity <= 0) $(this).parent().parent().remove();
            $(this).parent().find('.item-quantity').text(quantity);
            const total = quantity * price;
            $(this).parent().find('.row-total').text(total);
            $('#input-item-quantity-' + $(this).attr('data-id')).val(quantity);
            calculateTotal();
            calculateTotalTax();
        });

        $(document).on('click', '.plus-quantity', function (e) {
            e.preventDefault();
            let price = parseFloat($(this).parent().parent().find('.item-individual-price').first().text());
            let quantity = parseInt($(this).parent().find('.item-quantity').first().text());
            quantity++;
            $(this).parent().find('.item-quantity').text(quantity);
            const total = quantity * price;
            $(this).parent().find('.row-total').text(total);
            $('#input-item-quantity-' + $(this).attr('data-id')).val(quantity);
            calculateTotal();
            calculateTotalTax();
        });

        $('#processCheckout').on('click', function (e) {
            e.preventDefault();
            $('#orderOverviewSection').hide();
            $('#paymentOverviewSection').show();
        });

        $('input[type=radio][name=pay_type]').change(function () {
            if (this.value == 'pay_on_table') {
                $('.pay-now-section').hide();
                $('.card-payment-section').hide();
            } else if (this.value == 'pay_now') {
                $('.pay-now-section').show();
                $('.takeaway-section').hide();
            } else if (this.value == 'takeaway') {
                $('.pay-now-section').hide();
                $('.card-payment-section').hide();
                $('.takeaway-section').show();
            }
        });

        $('input[type=radio][name=paymentMethod]').change(function () {
            if (this.value == 'paypal') {
                $('.card-payment-section').hide();
            } else if (this.value == 'paytm') {
                $('.card-payment-section').hide();
            } else if (this.value == 'stripe') {
                $('.card-payment-section').show();
            } else if (this.value == 'mollie') {
                $('.card-payment-section').hide();
            } else if (this.value == 'paystack') {
                $('.card-payment-section').hide();
            }
        });

        function changePreSelectedQuan(section_id, change_id, changedQuantity) {
            let preSelected = $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra');
            if (preSelected) {
                preSelected = JSON.parse(preSelected);
                const remainExtra = preSelected.filter(extra => extra.id != change_id);
                const preQuantity = preSelected.find(extra => extra.id == change_id);
                const newExtra = {
                    id: change_id,
                    quantity: changedQuantity
                };
                remainExtra.push(newExtra);

                $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra', JSON.stringify(remainExtra));

            }


        }

        $(document).on('click', '.item-extra', function (e) {
            e.preventDefault();
            const name = $(this).attr('data-item-name');
            let extras = $(this).attr('data-extras');
            const sectionid = $(this).attr('data-id');
            $('#extraModal .modal-title').text(name + " - {{trans('layout.extra')}}");
            let preSelected = $('#single-item-' + sectionid + ' .item-extra').attr('data-pre-selected-extra');
            if (preSelected) {
                preSelected = JSON.parse(preSelected);
            } else {
                preSelected = [];
            }
            let preExtras = [];

            $.each(preSelected, (index, extra) => {
                preExtras.push(extra.id);
            });

            let trHtml = '';
            extras = JSON.parse(extras);
            $.each(extras, (index, extra) => {

                const currentExtra = preSelected.find(pextra => pextra.id == extra.id);
                trHtml += ` <tr>
                             <td>
                                    <div class="custom-control custom-checkbox checkbox-success check-lg mr-3">
                                        <input ${preExtras.includes(extra.id.toString()) ? 'checked=true' : ''} data-section-id="${sectionid}" data-id="${extra.id}" type="checkbox" class="custom-control-input select-extra-checkbox" id="extraCheckbox${extra.id}">
                                        <label class="custom-control-label" for="extraCheckbox${extra.id}"></label>
                                    </div>
                              </td>
                            <td><span id="extra-indi-title-${extra.id}">${extra.title}</span></td>
                            <td><span>${parseFloat(extra.price).formatNumber()}</span><span class="d-none" id="extra-indi-price-${extra.id}">${extra.price}</span></td>
                            <td><div class="extra-item-action">
                                        <div data-section-id="${sectionid}" data-id="${extra.id}" class="extra-minus-quantity">
                                            <i class="fa fa-minus"></i>
                                        </div>
                                        <div id="extra-item-quantity-${extra.id}" class="extra-item-quantity">${currentExtra ? currentExtra.quantity : 1}</div>
                                        <div data-section-id="${sectionid}" data-id="${extra.id}" class="extra-plus-quantity" id="extra-plus-quantity-${extra.id}">
                                            <i class="fa fa-plus"></i>
                                        </div>
                                    </div></td>
                            <td><span id="extra-amount-indi-total-${extra.id}" class="extra-amount">${parseFloat(currentExtra ? currentExtra.quantity * extra.price : extra.price).formatNumberWithCurrSymbol()}</span></td>
                            </tr>
                           `;
            });

            $('#extraTable').html(trHtml);
            $('.select-extra-checkbox').trigger('change');
            $('#extraModal').modal('show');
        });

        $(document).on('click', '.extra-minus-quantity', function (e) {
            e.preventDefault();
            const section_id = $('#checkAll').attr('data-section-id');
            const id = $(this).attr('data-id');
            const quantityEl = $('#extra-item-quantity-' + id);
            const price = parseFloat($('#extra-indi-price-' + id).text());
            let preQuantity = parseInt(quantityEl.text());
            --preQuantity;
            if (preQuantity > 0) {
                quantityEl.text(preQuantity);
                const total = preQuantity * price;
                $('#extra-amount-indi-total-' + id).text(total.formatNumberWithCurrSymbol());
            }
            changePreSelectedQuan(section_id, id, preQuantity);
            $('.select-extra-checkbox').trigger('change');
            calculateTotal();
            calculateTotalTax();
        });

        $(document).on('click', '.extra-plus-quantity', function (e) {
            e.preventDefault();
            const section_id = $('#checkAll').attr('data-section-id');
            const id = $(this).attr('data-id');
            const quantityEl = $('#extra-item-quantity-' + id);
            const price = parseFloat($('#extra-indi-price-' + id).text());
            let preQuantity = parseInt(quantityEl.text());
            ++preQuantity;
            if (preQuantity > 0) {
                quantityEl.text(preQuantity);
                const total = preQuantity * price;
                $('#extra-amount-indi-total-' + id).text(total.formatNumberWithCurrSymbol());
            }
            changePreSelectedQuan(section_id, id, preQuantity);
            $('.select-extra-checkbox').trigger('change');
            calculateTotal();
            calculateTotalTax();
        });

        $(document).on('change', '.select-extra-checkbox', function (e) {
            const section_id = $(this).attr('data-section-id');
            const id = $(this).attr('data-id');
            const quantityEl = $('#extra-item-quantity-' + id);
            const price = parseFloat($('#extra-indi-price-' + id).text());
            const title = $('#extra-indi-title-' + id).text();
            const quantity = parseInt(quantityEl.text());
            $('.appended-extra-item-' + section_id + '-' + id).remove();
            $('#checkAll').attr('data-section-id', section_id);

            if ($(this).is(':checked')) {
                $('#single-item-' + section_id + ' .extra-list').append(`<span class="font-xs appended-extra-item-${section_id}-${id}">${quantity} ${title}=${(quantity * price).formatNumberWithCurrSymbol()}<br><input data-price="${price}" class="input-extra-quantity" type="hidden" name="extra_quantity[${id}]" value="${quantity}"></span>`);
                let preSelected = $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra');
                if (preSelected)
                    preSelected = JSON.parse(preSelected);
                else
                    preSelected = [];

                let newSelected = {
                    id: id,
                    quantity: quantity
                };
                preSelected.push(newSelected);
                $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra', JSON.stringify(preSelected));
            } else {
                let preSelected = $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra');
                if (preSelected) {
                    preSelected = JSON.parse(preSelected);
                    const remainExtra = preSelected.filter(extra => extra.id != id);
                    $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra', JSON.stringify(remainExtra));
                }

            }
            calculateTotal();
            calculateTotalTax();
        });

        $('#checkAll').on('change', function (e) {
            const section_id = $(this).attr('data-section-id');

            if ($(this).is(':checked')) {
                $('.select-extra-checkbox').trigger('change');
            } else {
                $('#single-item-' + section_id + ' .extra-list').html('');
                $('#single-item-' + section_id + ' .item-extra').attr('data-pre-selected-extra', JSON.stringify([]));
            }
        });


        function calculateExtraTotal() {
            let total = 0;
            $('.input-extra-quantity').each(function (index, value) {
                const quantity = $(value).val();
                const price = parseFloat($(value).attr('data-price'));
                total += quantity * price;
            });
            return total;
        }

        $('#time').select2();


    </script>
    <script>
        $(document).on('click', '.view-order-btn', function (e) {
            e.preventDefault();


            $('#viewOrder').modal('show');
            const voucherCode = $('#inputVal').val();
            const totalBalance = $(this).attr('data-total-balance');

            $.ajax({
                method: "get",
                url: "{{route('get.order')}}",
                data: {
                    rest_id: '{{$restaurant->id}}',
                },

                success: function (res) {
                    let html = '';
                    if (res.status == 'success') {
                        const totalAmount = parseFloat(res.val.total).formatNumberWithCurrSymbol();
                        $('#orderTotalAmount').text(totalAmount);
                        $.each(res.data, function (index, value) {
                            const orderId = value.order_id;
                            const details_id = value.id;

                            const orderQuantity = value.quantity;
                            $('#saveOrder').attr('data-order-id', orderId);
                            $('#saveOrder').attr('data-details-id', details_id);
                            $('#saveOrder').attr('data-order-quantity', orderQuantity);

                            html += `<div class="row">
                                   <div class="col-sm-6 col-6 text-left">
                                       <h5 >${value.item}</h5>
                                       <h6 id="preTotalAmount" data-total-amount="${value.total}">${parseFloat(value.total).formatNumberWithCurrSymbol()}</h6>
                                   </div>
                                   <div class="col-sm-6 col-6 text-right">
                                       <div class="modify-item">
                                           <span class="d-none row-total">18</span>
                                           <div id="quantityMinus" data-details-id="${value.id}" class="minus-quantity">
                                               <i class="fa fa-minus"></i>
                                           </div>
                                           <div id="item-quantity" class="item-quantity">${value.quantity}</div>
                                           <div id="quantityPlus" data-details-id="${value.id}"  class="plus-quantity" id="plus-quantity-1">
                                               <i class="fa fa-plus"></i>
                                           </div>
                                       </div>
                                   </div>
                               </div>
                            `
                        });
                        $('.order_items').html(html);

                    } else {
                        toastr.error(res.message, 'failed', {timeOut: 5000});
                    }
                }
            })
        });


        $(document).on('click', '#quantityPlus', function (e) {
            e.preventDefault();
            const quantity = $('#item-quantity').text();
            const detailsId = $(this).attr('data-details-id');
            const preQuantity = $('#saveOrder').attr('data-order-quantity');
            const preAmount = $('#preTotalAmount').attr('data-total-amount')
            $('#saveOrder').attr('data-quantity', quantity);
            $('#saveOrder').attr('data-details-id', detailsId);

            const newAmount = preAmount * quantity;
            $('#orderTotalAmount').text(parseFloat(newAmount).formatNumberWithCurrSymbol());
            if (preQuantity < quantity) {
                $('#saveOrder').removeClass('d-none').removeAttr('disable');
            } else {
                $('#saveOrder').addClass('d-none');
            }
        });
        $(document).on('click', '#quantityMinus', function (e) {
            e.preventDefault();
            const quantity = $('#item-quantity').text();
            const detailsId = $(this).attr('data-details-id');
            const preQuantity = $('#saveOrder').attr('data-order-quantity');
            const preAmount = $('#preTotalAmount').attr('data-total-amount')
            $('#saveOrder').attr('data-details-id', detailsId);
            $('#saveOrder').attr('data-quantity', quantity);
            if (quantity > preQuantity) {
                $('#saveOrder').removeClass('d-none').removeAttr('disable');
            } else {
                $('#saveOrder').addClass('d-none');
            }

            const newAmount = quantity * preAmount;

            $('#orderTotalAmount').text(parseFloat(newAmount).formatNumberWithCurrSymbol());
        });


        $(document).on('click', '#saveOrder', function (e) {
            e.preventDefault();

            $('#viewOrder').modal('show');
            const orderId = $(this).attr('data-order-id');
            const details_id = $(this).attr('data-details-id');
            const quantity = $('#item-quantity').text();
            const preQuantity = $(this).attr('data-order-quantity');

            if (quantity <= preQuantity) {
                return true;
            }
            $.ajax({
                method: "post",
                url: "{{route('order.update')}}",
                data: {
                    orderId: orderId, quantity: quantity, details_id: details_id, _token: '{{csrf_token()}}',
                },

                success: function (res) {
                    let html = '';
                    if (res.status == 'success') {
                        toastr.success(res.message, 'success', {timeOut: 5000});
                        $('#viewOrder').modal('hide');
                    } else {
                        toastr.error(res.message, 'failed', {timeOut: 5000});
                    }
                }
            })
        });

        $(document).on('click', '.update-order', function (e) {
            e.preventDefault();
            const data_value = $(this).attr('data-value');
            const restaurant_id = $(this).attr('data-restaurant-id');
            const itemName = $(this).attr('data-item-name');

            $('#itemUpdateConfirm').attr('data-value', data_value);
            $('#itemUpdateConfirm').attr('data-restaurant-id', restaurant_id);

            $('#confirmation').html('Are you sure to add ' + '<b>' + itemName + '</b>' + '   item');
            $('.item-add-title').text('Add new item');
            $('#orderItemUpdate').modal('show');
        });


        $(document).on('click', '#itemUpdateConfirm', function (e) {
            e.preventDefault();
            const data_value = $(this).attr('data-value');
            const restaurant_id = $(this).attr('data-restaurant-id');
            const data = JSON.parse(data_value);
            const item_id = data.id;
            const item_name = data.name;
            const item_price = data.price;


            $.ajax({
                method: "post",
                url: "{{route('add.new.order.item')}}",
                data: {
                    item_id: item_id,
                    restaurant_id: restaurant_id,
                    item_name: item_name,
                    item_price: item_price,
                    quantity: '1',
                    _token: '{{csrf_token()}}',
                },

                success: function (res) {
                    let html = '';
                    if (res.status == 'success') {
                        toastr.success(res.message, 'success', {timeOut: 5000});
                        $('#orderItemUpdate').modal('hide');
                    } else {
                        toastr.error(res.message, 'failed', {timeOut: 5000});
                    }
                }
            })
        });


        $('#deliveryType').on('change', function (e) {
            e.preventDefault();
            const type = $(this).val();
            const auth_user = "{{auth()->user()}}";
            if (type == 'takeaway') {
                $('#table').addClass('d-none');
                $('#payNow').removeClass('d-none');
                $('#delivery').addClass('d-none');
                $('#takeawayTime').removeClass('d-none');
                $('.pay-now-section').removeClass('d-none');
                $('#place-order').removeClass('disabled');
            } else if (type == 'delivery') {
                $('#table').addClass('d-none');
                $('#payNow').addClass('d-none');
                $('#delivery').removeClass('d-none');
                $('#takeawayTime').addClass('d-none');
                $('.pay-now-section').addClass('d-none');
                if(!auth_user){
                    $('#place-order').addClass('disabled');
                    toastr.error('You must login first', 'failed', {timeOut: 5000});
                }else{
                    $('#place-order').removeClass('disabled');
                }
            } else if (type == 'table') {
                $('#table').removeClass('d-none');
                $('#payNow').addClass('d-none');
                $('#takeawayTime').addClass('d-none');
                $('#delivery').addClass('d-none');
                $('.pay-now-section').addClass('d-none');
                $('#paytm').val(' ');
                if(!auth_user){
                    $('#place-order').addClass('disabled');
                    toastr.error('You must login first', 'failed', {timeOut: 5000});
                }else{
                    $('#place-order').removeClass('disabled');
                }
            }
        });
        $('#close_overview').on('click', function (e) {
            $('#viewOrder').modal('hide');
        });
        $('#close_pay_modal').on('click', function (e) {
            $('#confirmPayment').modal('hide');
        });

    </script>
    <script>
        $('#place-order').on('click', function (e) {
            const name = $('#name').val();
            const email = $('#email').val();
            const phone = $('#phone').val();

            if (name == '' && email == '' && phone == '') {
                $('#name').css('border', '1px solid red');
                $('#email').css('border', '1px solid red');
                $('#phone').css('border', '1px solid red');
                $('#name-error').text('This field is required');
                $('#email-error').text('This field is required');
                $('#phone-error').text('This field is required');
            } else {
                $('#name').css('border', '1px solid white');
                $('#email').css('border', '1px solid white');
                $('#phone').css('border', '1px solid white');
                $('#name-error').text(' ');
                $('#email-error').text(' ');
                $('#phone-error').text(' ');
            }
        });
        $(document).on('click', '.pay_now', function (e) {
            e.preventDefault();
            $('#confirmPayment').modal('show');

        });

        $(document).on('change', '#paymentType', function (e) {
            e.preventDefault();
            const type = $(this).val();

            $('.payment_section').hide();
            $('.' + type + "_section").show();

        })
    </script>
    @if(session()->has('order-success'))
        <script !src="">
            swal("Great!!", '{{session()->get('order-success')}}', "success");
        </script>
    @endif
@endsection