@extends('restaurant.pos.layout.master', ['hide_sidebar'=> true])
@section('custom_css')
    <link rel="stylesheet" href="{{ asset('v2/assets/css/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('v3/assets/css/pos-sell.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baguettebox.js@1.12.0/dist/baguetteBox.min.css" />

    <style>
        .classic_input_container {
            display: flex;
            align-items: center;
            background-color: var(--cl-gray-100);
            border: 1px solid #d3cdcd;
            /* margin: -1px 0 0 -1px; */
            height: 100%;
        }
        .classic_input_container .classic_label {
            position: relative;
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 0.25rem 0.4rem;
            width: 6rem;
            font-size: 0.9rem;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .classic_input_container .classic_label::after {
            content: ':';
            padding-left: 0.25rem;
            position: absolute;
            right: 3px;
        }
        .classic_input_container .classic_input {
            display: flex;
            flex-wrap: wrap;
            flex: 1 1 auto;
            background-color: #fff;
            border-left: 1px solid #d3cdcd;
            padding: 0.3rem 0.4rem;
            overflow: hidden;
        }
        .classic_input .form-control {
            margin-bottom: 0;
            padding: 0.25rem 0.5rem;
            font-size: 0.9rem;
        }
        .classic_input .form-select {
            padding: .25rem 2.25rem .25rem .5rem;
            font-size: 0.9rem;
        }

        .wrapper {
            overflow-x: hidden;
        }
        .owl-carousel .owl-stage {
            display: flex;
        }
        .floor-nav {
            margin-top: 0 !important;
        }
        .select2-container {
            flex: 1;
        }
        #main-sales {
            background-color: #F6F8FA;
        }
        #page_container {
            padding: 0 !important;
        }
        
        #party_id + .select2-container--default .select2-selection--single {
            background-color: transparent;
            border: none;
        }
        #party_id + .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #fff;
        }
        #party_id + .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
        }
        .amount-input {
            width: 120px;
            height: 26px;
            font-weight: 600;
            background: transparent;
            border: none;
            text-align: right;
        }

        #cash-calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
        .calc-item {
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 2.5rem;
            line-height: 1.2;
            border: 1px solid #000;
            font-weight: 700;
            font-size: 1.2rem;
        }
        .col-span-2 {
            grid-column: span 2;
        }
        .bg-order {
            background-color: #184d83cf;
        }
        .bg-pro-list {
            background-color: #184d837f;
            position: relative;
        }
        .party_select .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #fff !important;
        }
        .party_select .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
        }
        /* #pending_order_list .data {
            font-size: 0.9rem;
        }
        #pending_order_list .amount {
            font-size: 1.15rem;
        } */
        i::before {
            transition: .3s ease-in-out;
        }
        [aria-expanded="true"] i::before {
            transform: rotate(90deg);
        }
        .carousel-control-next-icon, .carousel-control-prev-icon {
            width: 1.5rem;
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            filter: invert(1);
        }
        .carousel.slide {
            height: 70px;
        }
        .cart-item-title {
            font-weight: 600;
        }
        .product-item .content {
            width: 100%;
            cursor: pointer;
        }
        #extra_charges {
            background: #d6f3d6;
        }
        #products {
            height: calc(100vh - 205px);
        }
        #extra_charges .form-check {
            display: inline-block;
        }
        #extra_charges .form-check-reverse {
            text-align: left;
        }
        .sales-sidebar .body {
            height: calc(100% - 19rem);
            overflow: hidden auto;
        }
        .extra_charge {
            padding: 0.75rem 0 0.5rem 0;
        }
        .btn-order {
            background-color: #184d83;
            color: #fff;
            border: 2px solid transparent;
            transition: 0.35s ease-in;
        }
    </style>
@endsection

@section('content')
    <div id="pos">
        <div id="main-sales" class="row g-0">
            <div class="col-lg-9">
                <div class="row g-0 h-100">
                    <div class="col-lg-3 order-md-0 order-1 ps-lg-2 pe-lg-2 px-3 py-2 bg-order">
                        <form method="GET" id="odr_filter_from">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-2">
                                        <input type="text" class="form-control form-control-sm" placeholder="Order No" name="order_no" id="order_no" NsModelBind="odrFilterObj.order_no"/>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-2">
                                        <input type="text" class="form-control form-control-sm" placeholder="Name/Mobile No" id="customer_info" NsModelBind="odrFilterObj.customer_info"/>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="d-flex align-items-center mb-2">
                                        @include('v2.admin.global.date', [
                                            'name'=> 'date_from',
                                            'id'=> 'date_from',
                                            'cls'=> 'date-picker form-control-sm',
                                            'serial'=> 1,
                                            'value'=> date('d-m-Y'),
                                            'binder'=> "odrFilterObj.date_from"
                                        ])
                                        <strong class="mx-1 text-white fs-6">TO</strong>
                                        @include('v2.admin.global.date', [
                                            'name'=> 'date_to',
                                            'id'=> 'date_to',
                                            'cls'=> 'date-picker form-control-sm',
                                            'serial'=> 2,
                                            'value'=> date('d-m-Y'),
                                            'binder'=> "odrFilterObj.date_to"
                                        ])
                                        <button type="submit" class="btn btn-sm btn-info ms-1">Filter</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-12">
                                <ul class="list-group list-group-flush mb-2 overflow-auto" style="max-height: 72vh;" id="restaurant_order_list"> </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-9 order-md-1 order-0 bg-pro-list">
                        <div class="pe-lg-2 ps-lg-2 px-3">
                            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-between align-items-center py-2 pb-0" style="gap: 0.8rem;">
                                <div class="overflow-hidden" style="flex: 1 1 auto;">
                                    <div id="food-category" class="owl-carousel">
                                        <div class="category-item text-center border border-secondary rounded-3" onclick="filterProduct()">
                                            <img src="{{ asset('restaurant/assets/images/icons/ice-cream-cornet.png') }}" class="img-fluid">
                                            <div class="text-center mt-1 lh-1 fw-semibold" style="font-size: 0.85rem;">All</div>
                                        </div>
                                        @foreach ($categories as $cat)
                                            <div class="category-item text-center border border-secondary rounded-3" onclick="filterProduct(null, {{ $cat->code }})">
                                                <img src="{{ asset($cat->image ? ('storage/files/category/'.$cat->image) : 'restaurant/assets/images/icons/default.png') }}" class="img-fluid">
                                                <div class="text-center mt-1 lh-1 fw-semibold" style="font-size: 0.85rem;">{{ $cat->name_eng }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                    
                                <div class="d-flex">
                                    <input type="text" class="form-control form-control-sm" placeholder="Search Product..." onkeyup="filterProduct(this.value)" style="width: 200px;" />
                                    <a class="btn btn-sm btn-danger" href="{{ route('restaurant.sales.create', ['reset'=> 1]) }}">Reset</a>
                                </div>
                            </div>
                            <hr class="my-2">
                            <div id="products" class="pe-1">
                                <div class="row g-2" id="div_products"></div>
                            </div>
                        </div>

                        <div id="extra_charges" class="w-100 position-absolute bottom-0 pe-lg-2 ps-lg-2 px-3 sticky-bottom" style="z-index: 2;"></div>
                    </div>
                </div>
            </div>