@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" ></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" type="hidden" value="0" />
                                        <select onchange="getCartItems()" class="form-control" id="orderTypes">
                                            <option data-charge="0" value="0"></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" type="hidden" value="0" />
                                        <h6>Shipping Method</h6>
                                        <select
                                            onchange="getCartItems()"
                                            class="form-control" id="shippingMethods">
                                            <option data-shipcost="0" value="0"></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-6">
                                        <h6>Customer Name</h6>
                                        <input class="form-control" id="cus_name" />
                                    </div>
                                    <div class="col-6">
                                        <h6>Waiter</h6>
                                        <select class="form-control select2_all" id="waiter_id">
                                            <option data-shipcost="0" value="0"></option>
                                            @foreach($waiterList as $val)
                                                <option value="{{$val->id}}">{{$val->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <h6>Table</h6>
                                        <div style="max-height: 40px;overflow: auto" id="divTableIds">
                                            <select class="form-control" id="table_ids" name="table_ids[]" multiple="multiple">
                                                <option value="0"></option>
                                                @foreach($tables as $val)
                                                    <option value="{{$val->id}}">{{$val->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    @if($OrderTrait->isFrontDeskExist())
                                        <div class="col-6" >
                                            <h6>Room/Bed</h6>
                                            <div style="max-height: 40px;overflow: auto">
                                                <select class="form-control select2_all" id="check_in_id">
                                                    <option value="0"></option>
                                                    @foreach($SettingsTrait->getCheckInRoomBeds() as $val)
                                                        <option
                                                            value="{{$val['id']}}">{{$val['title']}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    {{-- <div class="col-6" >
                                        <h6>Check In</h6>
                                        <div style="max-height: 40px;overflow: auto">
                                            <select class="form-control" id="check_in_id">
                                                <option value="0"></option>
                                                 @foreach($checkInDetails as $val)
                                                    <option value="{{$val->id}}">{{$val->getCheckInInfo->checkin_code}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </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">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 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",vatTaxes);
        let orderInfo = @json($orderInfo);
        let rid = {{ @$rid ? $rid : null }}
        $(document).ready(function() {
            // console.log(orderInfo);
            //$(".nav .category-owl-carousel").owlCarousel();
            $('#owl-carousel-cat').owlCarousel({
                margin:10,
                autoWidth:true,
                animateOut:true,
                items:4,
                dots: false,
                nav: true
            });

            //$("#check_in_id").select2();
            //$("#waiter_id").select2();
            $(".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);
            }
        });
        function modalBillList(){
            $("#modal_bill_list").modal("show");
            var alertData={title:"Loading...",aoc:false,showLoading:true};
            sweetAlert(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};
                sweetAlert(alertData);
                $("#tbody_bill_list").html(res.html);
            },method,url,{});
        } 
    </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>

@endsection