@extends('layouts.app')

@section('title', __('sale.pos_sale'))

@section('content')
    <section class="content no-print">
        <input type="hidden" id="amount_rounding_method" value="{{ $pos_settings['amount_rounding_method'] ?? '' }}">
        <input type="hidden" id="pos_show_product_images" value="{{ !isset($pos_settings['show_product_image_on_product_suggestion']) || !empty($pos_settings['show_product_image_on_product_suggestion']) ? 1 : 0 }}">
        <input type="hidden" id="pos_show_product_stock" value="{{ !isset($pos_settings['show_stock_on_product_suggestion']) || !empty($pos_settings['show_stock_on_product_suggestion']) ? 1 : 0 }}">
        <input type="hidden" id="pos_show_search_dropdown_price" value="{{ !isset($pos_settings['show_price_on_pos_search_dropdown']) || !empty($pos_settings['show_price_on_pos_search_dropdown']) ? 1 : 0 }}">
        <input type="hidden" id="pos_show_search_dropdown_quantity" value="{{ !isset($pos_settings['show_quantity_on_pos_search_dropdown']) || !empty($pos_settings['show_quantity_on_pos_search_dropdown']) ? 1 : 0 }}">
        <input type="hidden" id="pos_show_search_dropdown_image" value="{{ !isset($pos_settings['show_image_on_pos_search_dropdown']) || !empty($pos_settings['show_image_on_pos_search_dropdown']) ? 1 : 0 }}">
        <input type="hidden" id="pos_show_search_dropdown_sku" value="{{ !isset($pos_settings['show_sku_on_pos_search_dropdown']) || !empty($pos_settings['show_sku_on_pos_search_dropdown']) ? 1 : 0 }}">
        <input type="hidden" id="pos_search_dropdown_font_size" value="{{ $pos_settings['search_dropdown_font_size'] ?? 20 }}">
        <input type="hidden" id="pos_search_dropdown_font_weight" value="{{ $pos_settings['search_dropdown_font_weight'] ?? '700' }}">
        <input type="hidden" id="pos_search_dropdown_sku_font_size" value="{{ $pos_settings['search_dropdown_sku_font_size'] ?? 12 }}">
        <input type="hidden" id="pos_search_dropdown_meta_font_size" value="{{ $pos_settings['search_dropdown_meta_font_size'] ?? 12 }}">
        <input type="hidden" id="pos_search_dropdown_item_spacing" value="{{ $pos_settings['search_dropdown_item_spacing'] ?? 4 }}">
        <input type="hidden" id="pos_block_unit_price_below_selling_price" value="{{ !empty($pos_settings['block_unit_price_below_selling_price']) ? 1 : 0 }}">
        <input type="hidden" id="pos_can_sell_below_cost" value="{{ auth()->user()->can('superadmin') || auth()->user()->can('sell_below_cost') ? 1 : 0 }}">
        <input type="hidden" id="pos_unit_price_floor_error_msg" value="{{ __('lang_v1.unit_price_below_selling_price_error_msg', ['price' => '__price__']) }}">
        @include('sale_pos.partials.customer_display_config')
        @include('sale_pos.partials.scanner_config')
        @if (!empty($pos_settings['allow_overselling']))
            <input type="hidden" id="is_overselling_allowed">
        @endif
        @if (session('business.enable_rp') == 1)
            <input type="hidden" id="reward_point_enabled">
        @endif
        @php
            $is_discount_enabled = $pos_settings['disable_discount'] != 1 ? true : false;
            $is_rp_enabled = session('business.enable_rp') == 1 ? true : false;
        @endphp
        {!! Form::open([
            'url' => action([\App\Http\Controllers\SellPosController::class, 'store']),
            'method' => 'post',
            'id' => 'add_pos_sell_form',
            'data-ui-module' => 'pos',
        ]) !!}
        <div class="row mb-12">
            <div class="col-md-12 tw-pt-0 tw-mb-14">
                <div class="row tw-flex lg:tw-flex-row md:tw-flex-col sm:tw-flex-col tw-flex-col tw-items-start md:tw-gap-4 pos-main-layout">
                    {{-- <div class="@if (empty($pos_settings['hide_product_suggestion'])) col-md-7 @else col-md-10 col-md-offset-1 @endif no-padding pr-12"> --}}
                    <div class="tw-px-3 tw-w-full lg:tw-px-0 lg:tw-pr-0 @if(empty($pos_settings['hide_product_suggestion'])) pos-cart-column @else lg:tw-w-[100%] @endif">

                        <div class="tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-rounded-2xl tw-bg-white tw-mb-2 md:tw-mb-8 tw-p-2 pos-cart-panel">

                            {{-- <div class="box box-solid mb-12 @if (!isMobile()) mb-40 @endif"> --}}
                                <div class="box-body pb-0 pos-cart-body">
                                    {!! Form::hidden('location_id', $default_location->id ?? null, [
                                        'id' => 'location_id',
                                        'data-receipt_printer_type' => !empty($default_location->receipt_printer_type)
                                            ? $default_location->receipt_printer_type
                                            : 'browser',
                                        'data-default_payment_accounts' => $default_location->default_payment_accounts ?? '',
                                    ]) !!}
                                    <!-- sub_type -->
                                    {!! Form::hidden('sub_type', isset($sub_type) ? $sub_type : null) !!}
                                    <input type="hidden" id="item_addition_method"
                                        value="{{ $business_details->item_addition_method }}">
                                    @include('sale_pos.partials.pos_form')

                                 <!--   @include('sale_pos.partials.pos_form_totals')-->

                                    @include('sale_pos.partials.payment_modal')

                                    @if (empty($pos_settings['disable_suspend']))
                                        @include('sale_pos.partials.suspend_note_modal')
                                    @endif

                                    @if (empty($pos_settings['disable_recurring_invoice']))
                                        @include('sale_pos.partials.recurring_invoice_modal')
                                    @endif
                                </div>
                            {{-- </div> --}}
                        </div>
                        @include('sale_pos.partials.pos_form_actions')
                        @include('sale_pos.partials.online_orders_queue')
                    </div>
                    @if (empty($pos_settings['hide_product_suggestion']) && !isMobile())
                        <div class="md:tw-no-padding tw-w-full tw-px-5 pos-products-column">
                            @include('sale_pos.partials.pos_sidebar')
                        </div>
                    @endif
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </section>

    <!-- This will be printed -->
    <section class="invoice print_section" id="receipt_section">
    </section>
    @include('sale_pos.partials.pos_offline_receipt_meta')
    <div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        @include('contact.create', ['quick_add' => true])
    </div>
    <div class="modal fade pay_contact_due_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>
    @if (empty($pos_settings['hide_product_suggestion']) && isMobile())
        @include('sale_pos.partials.mobile_product_suggestions')
    @endif
    <!-- /.content -->
    <div class="modal fade register_details_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade close_register_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <!-- quick product modal -->
    <div class="modal fade quick_add_product_modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle"></div>

    <div class="modal fade" id="expense_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>

    @include('sale_pos.partials.configure_search_modal')

    @include('sale_pos.partials.recent_transactions_modal')

    @include('sale_pos.partials.weighing_scale_modal')
    @if (Module::has('Exchange') && \App\System::getProperty('Exchange_version'))
        @includeIf('exchange::pos.exchange_modal')
    @endif

@stop
@section('css')
    <style type="text/css">
        .pos-empty-cart {
            border: 1px dashed #d1d5db;
            border-radius: 12px;
            padding: 20px 16px;
            text-align: center;
            color: #6b7280;
            margin-top: 10px;
            margin-bottom: 8px;
            background: #f9fafb;
        }
        .pos-empty-cart .pos-empty-cart-icon {
            font-size: 24px;
            color: #9ca3af;
            margin-bottom: 8px;
        }
        .pos-empty-cart .pos-empty-cart-title {
            font-weight: 700;
            font-size: 16px;
            color: #374151;
            margin-bottom: 4px;
        }
        .pos-empty-cart .pos-empty-cart-hint {
            font-size: 12px;
        }
        .pos-cart-body .pos_product_div.is-empty {
            height: 328px !important;
            max-height: 328px !important;
            min-height: 328px !important;
            flex: 0 0 auto !important;
            overflow-y: hidden !important;
        }
        .pos-cart-column .pos-cart-panel.is-empty {
            height: 328px !important;
            max-height: 328px !important;
        }
        .pos-cart-body .pos_product_div.is-empty #pos_empty_cart_state {
         
            height: auto;
            display: block;
        }
        #product_list_body .product_list,
        #featured_products_box .product_list {
            display: flex;
            padding-left: 5px;
            padding-right: 5px;
            margin-bottom: 10px;
            align-self: flex-start;
        }
        #product_list_body,
        #featured_products_box {
            align-content: flex-start;
            align-items: flex-start;
        }
        #product_list_body .product_box,
        #featured_products_box .product_box {
            width: 100%;
            min-height: 0;
            height: auto;
            border: 1px solid #dbe3ee;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 3px;
            transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
        }
        #product_list_body .product_box:hover,
        #featured_products_box .product_box:hover {
            transform: translateY(-1px);
            border-color: #93c5fd;
            box-shadow: 0 8px 16px rgba(59, 130, 246, 0.16);
        }
        body.pos-low-power-mode #product_list_body .product_box,
        body.pos-low-power-mode #featured_products_box .product_box,
        body.pos-low-power-mode .pos-side-category-btn {
            transition: none !important;
            box-shadow: none !important;
        }
        body.pos-low-power-mode #product_list_body .product_box:hover,
        body.pos-low-power-mode #featured_products_box .product_box:hover {
            transform: none !important;
            box-shadow: none !important;
        }
        body.pos-low-power-mode #product_list_body .product_box .image-container,
        body.pos-low-power-mode #featured_products_box .product_box .image-container {
            display: none !important;
            background-image: none !important;
        }
        #product_list_body .product_box .image-container,
        #featured_products_box .product_box .image-container {
            height: 44px;
            margin: 0 auto;
            width: 100%;
            border-radius: 10px;
            background-color: #f1f5f9;
        }
        #product_list_body .product_box .text_div,
        #featured_products_box .product_box .text_div {
            margin-top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            min-height: 0;
            justify-content: flex-start;
        }
        .product_box .pos-card-name {
            color: #111827 !important;
            font-weight: 800;
            font-size: 22px;
            line-height: 1.25;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 0;
            max-height: none;
        }
        .product_box .pos-card-sku {
            display: inline-block;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.1;
        }
        .product_box .pos-card-badges {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 0;
            width: 100%;
        }
        .product_box .pos-card-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 6px;
            line-height: 1.1;
        }
        .product_box .pos-card-badge--multi {
            color: #4338ca;
            background: #eef2ff;
        }
        .pos-card-price {
            font-weight: 800;
            font-size: 15px;
            color: #0f172a;
            margin-top: 0;
            margin-bottom: 0;
            letter-spacing: .1px;
        }
        .product_box .pos-card-stock {
            display: inline-block;
            margin-top: 0;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            line-height: 1.2;
        }
        .product_box .pos-card-stock--normal {
            color: #065f46;
            background: #ecfdf5;
        }
        .product_box .pos-card-stock--low {
            color: #b45309;
            background: #fffbeb;
        }
        .product_box .pos-card-stock--out {
            color: #b91c1c;
            background: #fef2f2;
        }
        .product_box .pos-card-stock--oversell {
            color: #1d4ed8;
            background: #eff6ff;
        }
        .product_box.pos-stock-low {
            border-color: #fca5a5;
            box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25) inset;
        }
        .pos-product-tab {
            border: 1px solid #d1d5db;
            background: #ffffff;
            color: #374151;
        }
        .pos-product-tab.is-active {
            background: linear-gradient(to right, #4f46e5, #3b82f6);
            color: #ffffff;
            border-color: transparent;
        }
        .pos-products-side-layout {
            display: flex;
            align-items: stretch;
            gap: 8px;
            width: 100%;
            min-width: 0;
            height: 100%;
            padding-left: 6px;
            box-sizing: border-box;
            overflow: visible;
        }
        .pos-products-side-layout .pos-products-grid-panel {
            flex: 1 1 auto;
            width: auto;
            max-width: none;
            min-width: 0;
            height: 100%;
        }
        .pos-products-side-layout .pos-category-side-panel {
            flex: 0 0 clamp(86px, 8%, 130px);
            width: clamp(86px, 8%, 130px);
            max-width: clamp(86px, 8%, 130px);
            min-width: 86px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            height: 100%;
            max-height: none;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px 2px 0;
            scroll-padding-top: 6px;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            box-sizing: border-box;
            scrollbar-gutter: stable;
        }
        .pos-side-category-btn {
            width: 100%;
            min-height: 52px;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            background: #ffffff;
            color: #374151;
            font-weight: 700;
            font-size: 11px;
            line-height: 1.2;
            padding: 8px 6px;
            text-align: center;
            white-space: normal;
            word-break: break-word;
            transition: all .15s ease;
        }
        .pos-side-category-btn:hover {
            border-color: #93c5fd;
            background: #f8fbff;
            color: #1d4ed8;
        }
        .pos-side-category-btn.is-active {
            background: linear-gradient(to bottom, #3b82f6, #2563eb);
            border-color: #1d4ed8;
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.26);
        }
        .pos-side-category-btn.pos-side-category-btn--colored {
            background: var(--cat-bg);
            border-color: var(--cat-border);
            color: var(--cat-text);
        }
        .pos-side-category-btn.pos-side-category-btn--colored:hover {
            background: var(--cat-bg);
            border-color: var(--cat-border);
            color: var(--cat-text);
            filter: brightness(0.95);
        }
        .pos-side-category-btn.pos-side-category-btn--colored.is-active {
            background: var(--cat-bg);
            border-color: var(--cat-border);
            color: var(--cat-text);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset, 0 4px 10px rgba(15, 23, 42, 0.25);
        }
        .pos-side-category-btn.pos-side-sub-category {
            background: #f8fafc;
            font-weight: 600;
        }
        .pos-side-category-btn.pos-side-sub-category.pos-side-category-btn--colored {
            background: var(--cat-bg);
        }
        .pos-payment-figure {
            font-size: 24px;
            line-height: 1.1;
        }
        .pos-payment-change {
            color: #0f766e;
            font-weight: 800;
        }
        @include('sale_pos.partials.pos_toolbar_styles')
        #pos_table th.ui-pos-col-action,
        #pos_table td.ui-pos-col-action {
            width: 10% !important;
            min-width: 10% !important;
            max-width: 10% !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        #pos_table td.ui-pos-col-action .pos_remove_row {
            font-size: 14px !important;
            line-height: 1;
        }
        #pos_table td.ui-pos-col-qty,
        #pos_table td.ui-pos-col-subtotal {
            background: #f8fbff;
        }
        #pos_table td.ui-pos-col-qty .input-group {
            width: 100%;
        }
        #pos_table td.ui-pos-col-qty input.pos_quantity {
            text-align: center;
            font-weight: 700;
            color: #0f172a;
            border-color: #93c5fd;
            background: #ffffff;
        }
        #pos_table td.ui-pos-col-subtotal input.pos_line_total {
            text-align: center;
            font-weight: 700;
            color: #0f172a;
            border-color: #93c5fd;
            background: #ffffff;
        }
        @media (min-width: 768px) {
            .pos-main-layout {
                display: flex !important;
                flex-wrap: nowrap;
                align-items: flex-start;
                column-gap: 0 !important;
                row-gap: 0 !important;
            }
            .pos-cart-column,
            .pos-products-column {
                min-width: 0 !important;
                box-sizing: border-box;
            }
            .pos-cart-column {
                flex: 0 0 40% !important;
                width: 40% !important;
                max-width: 40% !important;
            }
            .pos-products-column {
                flex: 0 0 60% !important;
                width: 60% !important;
                max-width: 60% !important;
                padding-left: 8px !important;
                padding-right: 0 !important;
                overflow: hidden;
            }
        }
        @media (max-width: 767px) {
            .pos-main-layout {
                display: block !important;
            }
            .pos-cart-column,
            .pos-products-column {
                flex: 0 0 100% !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            .pos-products-side-layout {
                display: block;
            }
            .pos-products-side-layout .pos-products-grid-panel {
                width: 100%;
                max-width: 100%;
                flex: 0 0 100%;
            }
            .pos-products-side-layout .pos-category-side-panel {
                width: 100%;
                max-width: 100%;
                flex: 0 0 100%;
                min-width: 0;
                max-height: none;
                display: flex;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                margin-bottom: 8px;
                padding-bottom: 2px;
            }
            .pos-side-category-btn {
                min-width: 96px;
                width: auto;
                min-height: 40px;
                font-size: 12px;
                white-space: nowrap;
            }
        }
        .pos-cart-column {
            display: flex;
            flex-direction: column;
        }
        .pos-cart-column .pos-form-actions-row {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 3px;
            padding-bottom: 0;
            position: relative;
            z-index: 30;
            overflow: visible !important;
        }
        .pos-cart-column .pos-form-actions {
            position: static !important;
            bottom: auto !important;
            width: 100% !important;
            margin-top: 6px;
            padding: 0;
            overflow: visible !important;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
            z-index: 31;
        }
        .pos-cart-column .pos-form-actions .pos-actions-wrap {
            width: 100%;
            gap: 6px;
            padding: 2px 8px;
            overflow: visible;
            align-items: center;
        }
        .pos-cart-column .pos-form-actions .pos-actions-grid {
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            overflow: visible;
        }
        .pos-cart-column .pos-form-actions .pos-actions-grid button {
            min-height: 34px;
            white-space: nowrap;
            border-radius: 10px;
            padding: 0 8px !important;
        }
        .pos-cart-column .pos-form-actions .pos-actions-grid button.tw-text-gray-700 {
            flex-direction: row !important;
            gap: 4px !important;
            padding: 0 8px !important;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #1f2937;
        }
        .pos-cart-column .pos-form-actions .pos-actions-grid button.tw-text-gray-700 i {
            font-size: 13px;
        }
        .pos-cart-column .pos-form-actions #pos-finalize,
        .pos-cart-column .pos-form-actions .pos-express-finalize[data-pay_method="cash"],
        .pos-cart-column .pos-form-actions #pos-cancel,
        .pos-cart-column .pos-form-actions #pos-delete {
            min-width: 84px;
            min-height: 34px;
            border-radius: 10px;
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
        .pos-cart-column .pos-form-actions .pos-total {
            margin: 0 !important;
            padding: 0 4px;
            white-space: nowrap;
        }
        .pos-cart-column .pos-form-actions .pos-total .number {
            font-size: 22px !important;
            line-height: 1;
        }
        .pos-cart-column .pos-form-actions #pos-cash-checkout-btn {
            width: auto !important;
            min-width: 84px !important;
        }
        .pos-cart-column .pos-form-actions #pos-edit-discount-btn {
            min-width: 84px;
            min-height: 34px;
            border-radius: 10px;
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
        .pos-cart-column .pos-form-actions .pos-actions-grid .pos-action-in-more {
            display: none !important;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions {
            position: relative;
            z-index: 40;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-toggle {
            min-height: 38px;
            padding: 0 12px !important;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #1f2937;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu {
            position: absolute !important;
            float: none !important;
            min-width: 200px;
            max-width: min(260px, 88vw);
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 6px 0;
            margin: 0 !important;
            background: #ffffff !important;
            list-style: none;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
            transform: none !important;
            top: auto !important;
            bottom: calc(100% + 8px) !important;
            left: auto !important;
            right: 0 !important;
            max-height: 50vh;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 5000;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions.open .pos-more-actions-menu {
            display: block;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a {
            display: block;
            margin: 3px 6px;
            padding: 8px 12px;
            border-radius: 8px;
            border-inline-start: 4px solid transparent;
            font-weight: 700;
            font-size: 12px;
            color: #1f2937;
            transition: all .15s ease;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a:hover {
            transform: translateX(-1px);
            color: inherit;
            filter: brightness(0.98);
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-draft {
            color: #1d4ed8;
            background: #eff6ff;
            border-inline-start-color: #2563eb;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-quotation {
            color: #b45309;
            background: #fffbeb;
            border-inline-start-color: #f59e0b;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-suspend,
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-quick-suspend {
            color: #b91c1c;
            background: #fef2f2;
            border-inline-start-color: #ef4444;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-credit {
            color: #4338ca;
            background: #eef2ff;
            border-inline-start-color: #6366f1;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-discount {
            color: #0c4a6e;
            background: #e0f2fe;
            border-inline-start-color: #0284c7;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-shipping {
            color: #115e59;
            background: #ecfeff;
            border-inline-start-color: #0d9488;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-cash {
            color: #166534;
            background: #f0fdf4;
            border-inline-start-color: #22c55e;
        }
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-cancel,
        .pos-cart-column .pos-form-actions .pos-more-actions .pos-more-actions-menu > li > a.pos-more-action-delete {
            color: #991b1b;
            background: #fee2e2;
            border-inline-start-color: #dc2626;
        }
        @media (min-width: 1024px) {
            .pos-cart-column .pos-form-actions .pos-actions-wrap {
                flex-wrap: nowrap !important;
            }
            .pos-cart-column .pos-form-actions .pos-actions-grid {
                flex-wrap: nowrap !important;
            }
            body,
            .wrapper,
            .content-wrapper {
                overflow: hidden !important;
            }
            .content.no-print {
                min-height: calc(100vh - 60px);
                overflow: hidden;
            }
            #add_pos_sell_form {
                min-height: calc(100vh - 92px);
                display: flex;
                flex-direction: column;
            }
            #add_pos_sell_form > .row.mb-12 {
                margin-bottom: 0 !important;
                flex: 1 1 auto;
                display: flex;
            }
            #add_pos_sell_form > .row.mb-12 > .col-md-12 {
                display: flex;
                flex-direction: column;
            }
            .pos-main-layout {
                flex: 1 1 auto;
                align-items: stretch !important;
            }
            .pos-cart-column {
                min-height: 0;
            }
            .pos-cart-panel {
                display: flex;
                flex-direction: column;
                min-height: 0;
                margin-bottom: 0 !important;
            }
          
            .pos-cart-body {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
            }
            .pos-cart-body .pos_product_div {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
            }
            .pos-cart-body .pos_product_div #pos_table {
                margin-bottom: 0;
            }
            .pos-cart-body .pos_form_totals {
                border-top: 1px solid #e5e7eb;
                padding-top: 8px;
                margin-top: 8px;
                margin-bottom: 0 !important;
            }
        }
        .manager-locked-input {
            background: #fff7ed !important;
            border-color: #fdba74 !important;
        }
    </style>
    <!-- include module css -->
    @if (!empty($pos_module_data))
        @foreach ($pos_module_data as $key => $value)
            @if (!empty($value['module_css_path']))
                @includeIf($value['module_css_path'])
            @endif
        @endforeach
    @endif
@stop
@section('javascript')
    @php
        $pos_js_v = $asset_v . '-' . @filemtime(public_path('js/pos.js'));
        $pos_payment_method_change_js_v = $asset_v . '-' . @filemtime(public_path('js/pos_payment_method_change.js'));
        $printer_js_v = $asset_v . '-' . @filemtime(public_path('js/printer.js'));
    @endphp
    @include('sale_pos.partials.pos_operations_assets')
    @include('sale_pos.partials.pos_http_assets')
    @include('sale_pos.partials.pos_state_assets')
    @include('sale_pos.partials.pos_service_worker_assets')
    @include('sale_pos.partials.pos_offline_preparation_assets')
    @include('sale_pos.partials.pos_offline_maintenance_assets')
    @include('sale_pos.partials.pos_offline_db_assets')
    @include('sale_pos.partials.pos_offline_catalog_assets')
    @include('sale_pos.partials.pos_offline_catalog_sync_assets')
    @include('sale_pos.partials.pos_offline_row_templates_assets')
    @include('sale_pos.partials.pos_readiness_assets')
    @include('sale_pos.partials.pos_offline_conflicts_assets')
    @include('sale_pos.partials.pos_offline_queue_assets')
    @include('sale_pos.partials.pos_offline_queue_actions_assets')
    @include('sale_pos.partials.pos_offline_queue_sync_assets')
    @include('sale_pos.partials.pos_offline_center_assets')
    @include('sale_pos.partials.pos_offline_events_assets')
    @include('sale_pos.partials.pos_network_health_assets')
    @include('sale_pos.partials.pos_ui_header_actions_assets')
    @include('sale_pos.partials.pos_events_assets')
    @include('sale_pos.partials.pos_cart_layout_assets')
    @include('sale_pos.partials.pos_cart_totals_assets')
    @include('sale_pos.partials.pos_sale_workflow_assets')
    @include('sale_pos.partials.pos_sale_context_assets')
    @include('sale_pos.partials.pos_product_row_assets')
    @include('sale_pos.partials.pos_products_render_assets')
    @include('sale_pos.partials.pos_products_browser_assets')
    @include('sale_pos.partials.pos_search_index_assets')
    @include('sale_pos.partials.pos_products_search_assets')
    @include('sale_pos.partials.pos_scanner_assets')
    @include('sale_pos.partials.pos_customer_display_assets')
    @include('sale_pos.partials.pos_draft_autosave_assets')
    @include('sale_pos.partials.pos_boot_assets')
    <script src="{{ asset('js/pos.js?v=' . $pos_js_v) }}"></script>
    <script src="{{ asset('js/pos_payment_method_change.js?v=' . $pos_payment_method_change_js_v) }}"></script>
    @include('sale_pos.partials.pos_diagnostics_assets')
    <script src="{{ asset('js/printer.js?v=' . $printer_js_v) }}"></script>
    <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/opening_stock.js?v=' . $asset_v) }}"></script>
    @include('sale_pos.partials.keyboard_shortcuts')

    <!-- Call restaurant module if defined -->
    @if (in_array('tables', $enabled_modules) ||
            in_array('modifiers', $enabled_modules) ||
            in_array('service_staff', $enabled_modules))
        <script src="{{ asset('js/restaurant.js?v=' . $asset_v) }}"></script>
    @endif

    @if (Module::has('Exchange') && \App\System::getProperty('Exchange_version'))
        @includeIf('exchange::pos.exchange_routes')
        @php
            $pos_exchange_js_candidates = [
                ['path' => public_path('modules/exchange/js/pos-exchange.js'), 'asset' => asset('modules/exchange/js/pos-exchange.js')],
                ['path' => public_path('js/pos-exchange.js'), 'asset' => asset('js/pos-exchange.js')],
            ];
            $pos_exchange_js_url = null;
            foreach ($pos_exchange_js_candidates as $candidate) {
                if (file_exists($candidate['path'])) {
                    $pos_exchange_js_url = $candidate['asset'] . '?v=' . @filemtime($candidate['path']);
                    break;
                }
            }
        @endphp
        @if (!empty($pos_exchange_js_url))
            <script src="{{ $pos_exchange_js_url }}"></script>
        @endif
    @endif

    <!-- include module js -->
    @if (!empty($pos_module_data))
        @foreach ($pos_module_data as $key => $value)
            @if (!empty($value['module_js_path']))
                @includeIf($value['module_js_path'], ['view_data' => $value['view_data']])
            @endif
        @endforeach
    @endif
@endsection