@extends('restaurant.layouts.master_order')
@section('home')
    <div class="card" style="height: 95vh">
        <div class="card-body">
            <style>
                .btn {
                    min-width: 100px
                }

            </style>
            @include('restaurant.modal.ModalBill')
            @include('restaurant.modal.ModalBillList')
            @include('restaurant.modal.ModalRunningOrder')
            @include('restaurant.order.modal.reservation_modal')
            @include('restaurant.modal.ModalPayment')

            @include('restaurant.shared.VatSettings')
            @inject('OrderTrait', 'App\Http\Controllers\Restaurant\Order\OrderController')
            @inject('SettingsTrait', 'App\Http\Controllers\Restaurant\Order\OrderController')

            <input type="hidden" id="order_id" value="0" />
            <input type="hidden" id="res_bill_id" value="0" />
            <input type="hidden" id="ht_reservation_id" value="0" />

            <div class="row mb-2">
                <div class="col-7">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-12">
                            {{-- <div class="row"> --}}
                            {{-- <div class=""> --}}
                            {{-- <div class="row">
                                        <div class="col-12"> --}}
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="cat-product-search">
                                    <div class="form-group" id="divItemSearch">
                                        <select placeholder="Search Item"
                                            class="form-control res_order_item reset_input"></select>
                                    </div>
                                </div>
                                {{-- <nav> --}}
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
                                        role="tab" aria-controls="nav-home" aria-selected="true">Products</a>
                                    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                                        role="tab" aria-controls="nav-profile" aria-selected="false">Packages</a>
                                </div>
                                {{-- </nav> --}}
                                <div class="tab-content" id="nav-tabContent">
                                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                                        aria-labelledby="nav-home-tab">
                                        {{-- <div class="col-12" style="margin: 15px"> --}}
                                        <div class="owl-carousel owl-theme" id="owl-carousel-cat">
                                            <div class="row">
                                                @foreach ($categories as $val)
                                                    <div class="col-12">
                                                        <div class="item">
                                                            <button onclick="handleCategoryItems({{ $val->id }})"
                                                                class="btn btn-info">
                                                                <i class='bx bxs-drink'></i> {{ $val->name }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        {{-- </div> --}}
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="nav nav-pills left-menu-vertical" role="tablist"
                                                    aria-orientation="vertical">
                                                    @foreach ($menus as $key => $val)
                                                        <span style="min-width: 80px;max-width: 80px"
                                                            class="nav-link p-1 active mb-2" id="menu-1-tab"
                                                            data-toggle="pill" href="#tab-content-menu-1" role="tab"
                                                            aria-controls="v-pills-home" aria-selected="true"><i
                                                                class='bx bxs-pizza'></i> {{ $val->name }}</span>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="col-9" id="divProducts">
                                                <div class="row">
                                                    {!! \App\Restaurant\ResCommon::getSessionItems() !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="tab-pane fade" id="nav-profile" role="tabpanel"
                                        aria-labelledby="nav-profile-tab">
                                        <div class="row">
                                            @foreach ($packages as $p)
                                                <div class="col-6">
                                                    <div style="cursor:pointer"
                                                        onclick="handleCartPackage('{{ $p->id }}','{{ $p->name }}','{{ $p->package_price }}')"
                                                        class="cat-product-single">
                                                        <img src="{{ asset($p->photo) }}" alt="..." class="img-thumbnail"
                                                            style="width: 100%">
                                                        <div class="cat-product-price-cart">
                                                            <div class="cat-product-title">
                                                                {{ $p->name }}
                                                            </div>
                                                            <div class="cat-product-price-cart-btn">
                                                                <div class="cat-product-price">
                                                                    {{ $p->package_price }}
                                                                </div>

                                                                <div class="clearfix"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- </div>
                                    </div> --}}
                            {{-- </div> --}}
                            {{-- </div> --}}
                        </div>
                        <div class="col-lg-4 col-md-5 col-12"></div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="row">
                        <div class="col-12">
                            <div class="p-2" style="border: 1px solid">
                                <div class="row">
                                    <div class="col-6">
                                        <h6>Order Type</h6>
                                        <input id="order_type_value" type="hidden" value="0" />
                                        <input id="order_type_id" class="reset_input" type="hidden" value="0" />
                                        <select onchange="getCartItems()" class="form-control reset_input" id="orderTypes">
                                            <option data-charge="0" value="0">Select Order Type</option>
                                            @foreach ($orderTypes as $val)
                                                <option data-charge="{{ $val->price }}" value="{{ $val->id }}">
                                                    {{ $val->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <input id="shipping_cost_update" type="hidden" value="0" />
                                        <input id="shipping_cost_id" class="reset_input" type="hidden" value="0" />
                                        <h6>Shipping Method</h6>
                                        <select onchange="getCartItems()" class="form-control reset_input"
                                            id="shippingMethods">
                                            <option data-shipcost="0" value="0">Select Shipping Method</option>
                                            @foreach ($shipping_method as $val)
                                                <option data-shipcost="{{ $val->price }}" value="{{ $val->id }}">
                                                    {{ $val->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input reset_input"
                                                onclick="setCustomerType()" @if ($currentRow != null && $currentRow->customer_id != null) checked @endif
                                                id="customer_type">
                                            <label class="custom-control-label" for="customer_type">Credit Customer</label>
                                        </div>
                                    </div>
                                    <div class="col-6" id="cash_customer_input">
                                        <h6>Customer Name</h6>
                                        <input class="form-control reset_input" placeholder="Customer Name"
                                            value="{{ $currentRow != null ? $currentRow->customer_name : null }}"
                                            id="cus_name" />
                                    </div>
                                    <div class="col-6 d-none" id="credit_customer_input">
                                        <h6>Customer Name</h6>
                                        <select class="form-control select2_all reset_input" id="credit_customer">
                                            <option value="0">Select Customer</option>
                                            @foreach ($parties as $party)
                                                <option @if ($currentRow != null && $currentRow->customer_id == $party->id) selected @endif
                                                    value="{{ $party->id }}">{{ $party->name_eng }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-6">
                                        <h6>Table</h6>
                                        <div style="max-height: 40px;overflow: auto" id="divTableIds">
                                            <select name="table_ids[]"   style="" id="table_ids" class="form-control select_2" multiple>
                                                <option value=" " disabled>Select Table</option>
                                                @foreach ($tables as $val)
                                                    <option value="{{ $val->id }}">{{ $val->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    @if ($SettingsTrait->isFrontDeskExist())
                                        <div class="col-6">
                                            <h6>Room/Bed</h6>
                                            <div style="max-height: 40px;overflow: auto">
                                                <select class="form-control select2_all reset_input" id="check_in_id">
                                                    <option value="0">Select Room</option>
                                                    @foreach ($SettingsTrait->getCheckInRoomBeds() as $val)
                                                        <option value="{{ $val['id'] }}">{{ $val['title'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-6">
                                        <h6>Waiter</h6>
                                        <select class="form-control select2_all reset_input" id="waiter_id"
                                            onchange="getCartItems()">
                                            <option data-comission="0" value="0">Select Waiter</option>
                                            @foreach ($waiterList as $val)
                                                <option data-comission="{{ $waiter_commisions->price }}"
                                                    @if ($currentRow != null && $currentRow->waiter_id == $val->id) selected @endif
                                                    value="{{ $val->id }}">{{ $val->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-12">
                            <div class="tableFixHead">
                                <table class="table table-order-list table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">#Sl</th>
                                            <th class="text-center">Item</th>
                                            <th class="text-center">Qty</th>
                                            <th class="text-center">Rate</th>
                                            <th class="text-center">Vat</th>
                                            <th class="text-center">Total</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="resCartTbody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-1">
                    <div class="row">
                        <button type="button" onclick="reservation()" class="btn btn-primary btn-sm mb-2"
                            data-toggle="modal">
                            Reservation
                        </button>
                        <button onclick="modalRunningOrder(this)" type='button' class='btn btn-danger btn-sm mb-2'>
                            Running <span class='badge bg-primary'>
                                                            </span>
                        </button>
                        <button type='button' class='btn btn-warning btn-sm mb-2'>
                            Kitchen <span class='badge bg-primary'>1</span>
                        </button>
                        <button onclick="modalBillList(this)" type='button' class='btn btn-sm btn-success mb-2'>
                            Bill List <span class='badge bg-primary'>1</span>
                        </button>
                        <a href="{{ route('restaurant.order.index') }}" class="btn btn-sm btn-info mb-2">Order List</a>
                        {{-- <a href="{{route("restaurant.bill.list")}}" class="btn btn-sm btn-success mb-2">Bill List</a> --}}
                        <a href="{{ route('restaurant.cash_list.index') }}" class="btn btn-sm btn-primary mb-2">Cash
                            Rcev.</a>
                        <a href="{{ route('restaurant.bank_list.index') }}" class="btn btn-sm btn-warning mb-2">Bank
                            Rcev.</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-4">
                    <label>Reservation No</label>
                    <input id="resv_booking_no" type="text" />
                </div>
                <div class="col-8">
                    <div class="d-flex justify-content-end" style="width: 100%">
                        <button id="reset_btn"
                            class="btn btn-sm btn-secondary mr-3 d-flex align-items-center justify-content-cetner">Refresh
                            <i class="fas fa-redo-alt pl-2" style="font-size: 1rem"></i></button>
                        <button onclick="handleOrder(this)" class="btn mr-3 btn-sm btn-primary">Order</button>
                        <button class="btn mr-3 btn-sm btn-info" id="btnBill" onclick="btnHandleModal(this)">Bill</button>
                        <button class="btn mr-3 btn-sm btn-danger">Cancel</button>
                        <a href="{{ url(\App\Providers\RouteRestaurantProvider::Home) }}" class="btn-danger mr-3 btn-sm"
                            size="sm" block>
                            Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        var pVatTaxes = @json($product_vat_tax);
        console.log("vat",pVatTaxes);
        let orderInfo = @json($orderInfo);
        // let rid = {{ @$rid ? @$rid : null }};
        let rid =  @json($rid);

        $(document).ready(function() {

            $('#owl-carousel-cat').owlCarousel({
                margin: 10,
                autoWidth: true,
                animateOut: true,
                items: 4,
                dots: false,
                nav: true
            });

            $(".select2_all").select2();

            $("#table_ids").select2({
                dropdownParent: $("#divTableIds"),
            });

            $("#orderTypes").select2();

            setTimeout(function() {
                $('.res_order_item').select2("open");
            }, 100);

            if (orderInfo.length > 0) {
                setTimeout(function() {
                    handleOrderEdit(rid, orderInfo);
                }, 1000);
            }
        });

        // SET CUSTOMER TYPE INPUT SWITCH
        function setCustomerType() {
            if ($('#customer_type').is(':checked')) {
                $('#credit_customer_input').addClass('d-block').removeClass('d-none');
                $('#cus_name').val('').trigger('change');
                $('#cash_customer_input').addClass('d-none').removeClass('d-block');
            } else {
                $('#cash_customer_input').addClass('d-block').removeClass('d-none');
            }
        }

        function UpdateCustomerNameInput(customerName = '', customerId = '0') {
            const customerType = $('#customer_type');
            const customerNameInput = $('#cus_name');
            const customerIdInput = $('#credit_customer');

            // DISABLE (TypeCheckIn and Cash) IF CUSTOMER IS CREDIT
            if (customerName != '' && customerId > 0) {
                customerType.prop('checked', true);
                setCustomerType();
                customerIdInput.val(customerId).trigger('change');
                // CHECKS IN BILL MODAL PAYMENT TYPE ACCORDING TO CUSTOMER TYPE
                checkCustomerType();
            } else {
                customerType.prop('checked', false);
                setCustomerType();
                customerNameInput.val(customerName).trigger('change');
                // CHECKS IN BILL MODAL PAYMENT TYPE ACCORDING TO CUSTOMER TYPE
                checkCustomerType();
            }
        }

        setTimeout(() => {
            setCustomerType();
        }, 0)

        // RESET ALL INPUTS
        $('#reset_btn').on('click', () => {
            $('select.reset_input').val('0');
            $('input.reset_input').val('');
            location.href = "{{ route('restaurant.order.new') }}";
        })

        function modalBillList() {
            $("#modal_bill_list").modal("show");
            var alertData = {
                title: "Loading...",
                aoc: false,
                showLoading: true
            };
            sweetAlertCustom(alertData);
            get();
        }

        function get() {
            var method = "GET";
            var url = li + "/bill/bill_list_api";
            ajaxCustom(function(res) {
                var alertData = {
                    title: "Success",
                    toast: true,
                    timer: 1000
                };
                sweetAlertCustom(alertData);
                $("#tbody_bill_list").html(res.html);
                getPaginate(res.list, 'pagination');
            }, method, url, {});
        }

        function getData(url) {
            var method = "GET";
            var url = url;
            ajaxCustom(function(res) {
                getPaginate(res.list, 'pagination');
                var alertData = {
                    title: "Success",
                    toast: true,
                    timer: 1000
                };
                sweetAlertCustom(alertData);
                $("#tbody_bill_list").html(res.html);
            }, method, url, {});
        }

            // PAGINATION
        const getPaginate = (data, destination) => {
            let dynamicPagination = '';
            if (typeof data !== 'undefined') {
                // NOTE: FOR PAGINATION ...
                $.each(data.links, function(index, item) {
                    dynamicPagination += `
                    <li class="page-item ${item.active ==true ? `active`:``} ${item.url == null?`disabled`:''}">
                        <a class="page-link" href="#" onclick="getData('${item.url}')">${item.label} <span class="sr-only">(current)</span></a>
                    </li>`;
                });
                pagination = `
                    <nav aria-label="...">
                        <ul class="pagination">
                            ${dynamicPagination}
                        </ul>
                    </nav>
                 `;
                $('#' + destination).html(pagination);
            }
        }
    </script>
    <script src="{{ asset('/') }}restaurant/custom/js/cart.js"></script>
    <script src="{{ asset('/') }}restaurant/custom/js/order.js"></script>
    <script src="{{ asset('/') }}restaurant/custom/js/bill.js"></script>
    {{-- <script src="{{ asset('/') }}restaurant/custom/js/bill_new.js"></script> --}}
@endsection