@extends('layouts.app_w_nav')
@push('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/pos.css') }}">
    <style>
        /* Keep the text field height fixed even when clear/spinner toggles */
        .modern-typeahead .input-group {
            position: relative;
        }

        .modern-typeahead .form-control#product_search {
            padding-right: 2.25rem;
            /* reserve room for the clear/spinner overlay */
        }

        /* Put clear button & spinner on top of the input (no layout shift) */
        #clear_product_search,
        #product_loading_spinner {
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            height: 24px;
            width: 24px;
            border: 0;
            background: transparent;
            display: none;
            /* hidden by default */
            padding: 0;
            /* no extra padding */
            z-index: 2;
            /* above the input */
        }

        /* Show states controlled by your JS */
        #clear_product_search.show {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

        #product_loading_spinner.spinner-on {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

        /* Suggestion dropdown: overlay, no padding, no extra margins */
        .modern-typeahead .smart-suggest {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1050;
            width: 100%;
            max-height: 280px;
            overflow-y: auto;
            margin-top: 2px;
            padding: 0;
            /* << remove inner padding */
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
        }

        /* Compact items (no fat rows) */
        .smart-suggest .suggest-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: .9rem;
            line-height: 1.4;
            padding: 4px 8px;
            /* tight padding */
        }

        .smart-suggest .suggest-item:hover,
        .smart-suggest .suggest-item.active {
            background: #f3f6ff;
        }

        /* Text-only (no thumbnails) */
        .suggest-name {
            font-weight: 500;
        }

        .suggest-meta {
            font-size: .8rem;
            color: #6b7280;
        }

        .suggest-price {
            font-weight: 600;
        }

        /* Empty state still readable, but compact */
        .suggest-empty,
        .suggest-hint {
            padding: 6px 8px;
            color: #6b7280;
            font-size: .85rem;
        }

        /* Remove default .dropdown-menu spacing if any leaks through */
        .modern-typeahead .dropdown-menu.smart-suggest {
            margin: 0;
            inset: auto auto auto 0;
            /* ensure it's anchored below input */
        }

        .smart-suggest .suggest-item {
            display: grid;
            grid-template-columns: 1fr auto;
            /* left = info, right = price */
            gap: 4px 12px;
            padding: 6px 10px;
            align-items: center;
            cursor: pointer;
        }

        .smart-suggest .suggest-item:hover,
        .smart-suggest .suggest-item.active {
            background: #f3f6ff;
        }

        .suggest-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
            /* prevents flex text overflow */
        }

        .suggest-name {
            font-weight: 600;
            font-size: .92rem;
            line-height: 1.2;
            white-space: normal;
        }

        .suggest-meta {
            font-size: .8rem;
            color: #6b7280;
        }

        .suggest-price {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            /* price never wraps */
        }

        #posTopToolbar {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: .5rem;
            padding: .5rem 1rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        #posTopToolbar .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }

        #posTopToolbar .form-check-input {
            cursor: pointer;
            width: 2.2rem;
            height: 1.2rem;
            margin-top: 0;
            margin-right: .35rem;
        }

        #posTopToolbar .form-check-label {
            font-size: .9rem;
            font-weight: 500;
            color: #495057;
        }

        #posTopToolbar .badge {
            font-size: .95rem;
            font-weight: 600;
            background-color: #fff;
            color: #212529;
            border: 1px solid #dee2e6;
            padding: .35rem .75rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        #posTopToolbar .bi-clock {
            color: #0d6efd;
        }

        /* Toolbar polish */
        #posTopToolbar {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: .5rem;
            padding: .5rem 1rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        #posTopToolbar .form-check {
            margin-bottom: 0;
        }

        #posTopToolbar .form-check-input {
            cursor: pointer;
            width: 2.3rem;
            height: 1.2rem;
            margin-top: 0;
            margin-right: .4rem;
        }

        #posTopToolbar .form-check-label {
            font-size: .92rem;
            font-weight: 500;
            color: #495057;
        }

        #posTopToolbar .badge {
            font-size: .95rem;
            font-weight: 600;
            background: #fff;
            color: #212529;
            border: 1px solid #dee2e6;
            padding: .35rem .75rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        #posTopToolbar .bi-clock {
            color: #0d6efd;
        }

        /* Modal: small, crisp */
        #saleOffModal .modal-content {
            border-radius: .75rem;
        }

        #saleOffModal .modal-title {
            font-weight: 700;
        }

        #saleOffModal .modal-body {
            font-size: .95rem;
        }
    </style>
@endpush
@section('content')
    @php
        $getDefaultCustomer = getDefaultCustomer();
    @endphp
    <form action="{{ route('pos.store') }}" method="post" id="ajax_form_data_sale" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="hold_id" id="hold_id">
        <input type="hidden" name="sale_return_id" id="sale_return_id">
        <div class="pos_main">
            <div class="row">
                <!-- Sidebar -->
                <div class="col-md-7 pos-sidebar">
                    {{-- ===== POS Controls + Clock + Refresh ===== --}}
                    <!-- TOOLBAR (same row) -->
                    <div id="posTopToolbar" class="d-flex flex-wrap align-items-center gap-3 mb-2">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="sale_mode_switch">
                            <label class="form-check-label" for="sale_mode_switch"><strong>Sale Mode</strong></label>
                        </div>

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="auto_input_switch">
                            <label class="form-check-label" for="auto_input_switch">Auto-Input</label>
                        </div>

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="auto_print_switch">
                            <label class="form-check-label" for="auto_print_switch">Auto-Print</label>
                        </div>

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="sound_switch">
                            <label class="form-check-label" for="sound_switch">Sound</label>
                        </div>

                        <span class="badge rounded-pill text-bg-light border ms-auto">
                            <i class="bi bi-clock"></i>
                            <span id="pos_clock">--:--:--</span>
                        </span>
                    </div>

                    <!-- SALE MODE OFF MODAL -->
                    <div class="modal fade" id="saleOffModal" tabindex="-1" aria-labelledby="saleOffLabel"
                        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                        <div class="modal-dialog modal-sm modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header border-0">
                                    <h6 class="modal-title" id="saleOffLabel">Sale Mode is OFF</h6>
                                </div>
                                <div class="modal-body">
                                    Sales are temporarily disabled. Turn <strong>Sale Mode</strong> ON to continue.
                                </div>
                                <div class="modal-footer border-0 pt-0">
                                    <button type="button" id="enableSaleBtn" class="btn btn-primary w-100">Turn Sale Mode
                                        ON</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- BEEP (scanner) -->
                    <audio id="scan_beep" preload="auto">
                        <source src="{{ asset('assets/audio/beep.mp3') }}" type="audio/mpeg">
                    </audio>



                    {{-- Sound asset (replace the file path with your sound if you have one) --}}
                    <audio id="scan_beep" preload="auto">
                        <source src="{{ asset('assets/sounds/vip.mp3') }}" type="audio/mpeg">
                        <source src="{{ asset('assets/sounds/vip.ogg') }}" type="audio/ogg">
                    </audio>


                    <div class="row g-0 custom-gap">
                        <div class="col-md-3 mb-1">
                            <div class="form-group">
                                <label for="productTitle" class="mb-2">Invoice No</label>
                                <input type="text" class="form-control custom-form" placeholder="Order No"
                                    name="invoice_no" value="{{ invoiceNo('sale') }}" disabled>
                            </div>
                        </div>
                        <div class="col-md-2 mb-1">
                            <div class="form-group">
                                <label for="productTitle" class="mb-2">Date</label>
                                <input type="datetime-local" class="form-control custom-form" placeholder="Date"
                                    name="sale_date" value="{{ date('Y-m-d\TH:i') }}" name="sale_date">
                            </div>
                        </div>
                        @if (usertype() == 'admin')
                            <div class="col-md-2 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">Location</label>
                                    <select id="company_branch_id" name="company_branch_id"
                                        class="form-control custom-form">
                                        <option value="">Select</option>
                                        @foreach (branches() as $company_branch)
                                            <option value="{{ $company_branch->id }}">
                                                {{ $company_branch->branch_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @else
                            <input type="hidden" id="company_branch_id" name="company_branch_id"
                                value="{{ branch_id() }}">
                        @endif

                        <div class="col-md-3 mb-1">
                            <div class="form-group">
                                <label for="productTitle" class="mb-2">Customer</label>
                                <select class="form-select form-control custom-form selectpicker" name="customer_id"
                                    aria-label="Default select example" data-live-search="true">
                                    <option value="">Select or Search</option>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}"
                                            {{ $getDefaultCustomer->id == $customer->id ? 'selected' : '' }}>
                                            {{ $customer->company }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 mb-1">
                            <label for="productTitle" class="mb-2">Available Qty</label>
                            <div class="form-group">
                                <input type="text" class="form-control custom-form" id="avaiable_stock" disabled
                                    style="background-color:#FFFF80 !important;font-wight:700px;">
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2 mt-2 g-0 custom-gap" style="border-top:1px #ccc solid;padding-top:15px;">
                        <div class="col-md-6">
                            <div class="form-group position-relative modern-typeahead">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                                    <input type="search" class="form-control custom-form" id="product_search"
                                        placeholder="Search by name / code / scan barcode" autocomplete="off"
                                        aria-autocomplete="list" aria-expanded="false" aria-owns="product_suggestions"
                                        aria-activedescendant="">
                                    <button type="button" class="btn btn-outline-secondary d-none"
                                        id="clear_product_search" tabindex="-1">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                    <span class="input-group-text d-none" id="product_loading_spinner">
                                        <span class="spinner-border spinner-border-sm" role="status"
                                            aria-hidden="true"></span>
                                    </span>
                                </div>
                                <div id="product_suggestions" class="dropdown-menu show shadow-lg smart-suggest d-none"
                                    role="listbox"></div>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="number" class="form-control custom-form" id="unit_price"
                                    placeholder="Unit Price" step="any">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="number" class="form-control custom-form" step="any" id="qty"
                                    placeholder="Quantity">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-primary add-row" style="width:100%;">Add</button>
                        </div>
                    </div>

                    <div class="col-sm-12"
                        style="height: 60vh; overflow-y: auto; border: 1px solid #ddd; padding:0px;margin-bottom:60px;">
                        <table class="table" style="width:100%;" id="purchase_table">
                            <thead>
                                <tr>
                                    <th class="text-center">Sl</th>
                                    <th class="text-center">Code</th>
                                    <th class="text-center">Description</th>
                                    <th></th>
                                    <th class="text-center" colspan="2">Qty</th>
                                    <th class="text-center">Price</th>
                                    <th class="text-center">Amount</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="data">
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- Main Content -->
                <div class="col-md-5">
                    @include('pos.product')
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="footer-section">
                        <div class="totals mt-3">
                            <div class="row  g-0 custom-gap">
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <label for="" style="font-size:20px">Amount</label>
                                        <input type="number" placeholder="Amount"
                                            class="form-control custom-form footer-input totalAmount" value="0.00"
                                            id="subTotal" step="any" disabled>
                                        <input type="hidden" class="form-control totalAmount" name="amount">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group">
                                        <label for="" style="font-size:20px">Discount</label>
                                        <input type="number"
                                            class="form-control text-right discount gross_discount_amount"
                                            id="gross_discount_amount" step="any" disabled>

                                        <input type="hidden" name="gross_discount_amount" class="gross_discount_amount">
                                    </div>

                                    <div class="discount-box">
                                        <div class="discount-close-btn"><span class="dis-close-chat">&times;</span></div>
                                        <div class="discount-body">
                                            <div class="form-group">
                                                <select name="gross_discount_type" id="gross_discount_type"
                                                    class="form-control custom-form discount">
                                                    <option value="normal">Normal</option>
                                                    <option value="parcantage">%</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <input type="number" placeholder="Amount"
                                                    class="form-control custom-form discount gross_discount_value"
                                                    name="gross_discount_value" value="0.00" step="any">
                                            </div>

                                            <div class="form-group">
                                                <input type="number"
                                                    class="form-control text-right discount gross_discount_amount"
                                                    step="any" disabled>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <label for="" style="font-size:20px">Vat</label>
                                        <input type="number" placeholder="Vat"
                                            class="form-control custom-form footer-input totalVat" id="taxVat"
                                            value="0.00" step="any" disabled>
                                        <input type="hidden" name="total_vat" class="form-control totalVat">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <label for="" style="font-size:20px">Payable Amount</label>
                                        <input type="number" placeholder="Payable"
                                            class="form-control custom-form footer-input totalNetTotal" id="payableAmount"
                                            value="0.00" step="any" disabled>
                                        <input type="hidden" class="form-control totalNetTotal" name="nettotal">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <label for="" style="font-size:20px">Recieved</label>
                                        <input type="number" placeholder="Recieved"
                                            class="form-control custom-form footer-input paidamount" name="paid_amount"
                                            value="0.00" step="any">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <label for="" style="font-size:20px">Change</label>
                                        <input type="number" class="form-control custom-form footer-input changeamount"
                                            value="0.00" step="any" disabled>
                                        <input type="hidden" class="form-control changeamount" name="change_amount">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <button class="btn account_btn footer-input"
                                            style="width:100%;background-color:#fff !important;color:#1f1d1d;height:65px;">Payment</button>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group footer-group" style="">
                                        <button class="btn footer-input"
                                            style="width:100%;background-color:#fff !important;color:#1f1d1d;height:65px;"
                                            type="submit">Save</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="action-buttons mt-1">
                            <div class="d-flex">
                                <a href="{{ route('sale') }}" class="btn btn-primary"><i
                                        class="bi bi- bi-arrow-left"></i>Back</a>
                                {{-- <a type="button" href="{{ route('pos.close_register') }}"
                                    class="btn btn-warning btn_modal" 
                                    style="text-decoration:line;"><b>{{ Auth::user()->name }}</b><span
                                        class="gaps">|</span><span><b>Amount
                                            Collection:</b>{{ numberformat($total_collection) }}</span></a> --}}
                                <button class="btn btn-primary open-discount link">Discount</button>
                                <button class="btn btn-primary link" id="print_btn">Invoice</button>
                                <button class="btn btn-primary link" id="cancel_btn">Cancel</button>
                                <button class="btn btn-primary link" id="hold_btn">Hold</button>
                                <button id="viewHeldSales" class="btn btn-primary link">View Held Sales</button>
                                <button class="btn btn-primary return_save link">Return Save</button>
                                {{--   <button class="btn btn-primary" type="submit">Sale Save</button> --}}
                                <a type="button" href="{{ route('pos.close_register') }}"
                                    class="btn btn-primary btn_modal link"
                                    style="text-decoration:line;padding-top:8px;">Close</a>

                                <div class="chat-box">
                                    <div class="close_btn"><span class="close-chat">&times;</span></div>
                                    <div class="chat-body">
                                        @include('pos.payment_section')
                                    </div>
                                </div>

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

    <div class="invoice-box">
        <div class="invoice-close-btn"><span class="inv-close-chat">&times;</span></div>
        <div class="invoice-body">
            <div class="form-group"></div>
            <label for="productTitle" class="mb-2">Invoice Number</label>
            <select class="form-select form-control custom-form selectpicker" id="invoice"
                aria-label="Default select example" data-live-search="true">
                <option value="">Select or Search</option>
                @foreach ($invoices as $invoice)
                    <option value="{{ $invoice->id }}">{{ $invoice->invoice_no }}</option>
                @endforeach
            </select>
            <div class="d-flex custom-gap">
                <button id="printinv" class="btn btn-primary mt-2" style="width:49%;">Print</button>
                <button id="return-sale" class="btn btn-primary mt-2" style="width:49%;">Return</button>
            </div>
        </div>
    </div>

    <div class="hold-box">
        <div class="hold-close-btn"><span class="hold-close-chat">&times;</span></div>
        <div class="hold-body">
            <div id="holdsale"></div>
        </div>
    </div>

@endsection

@push('script')
    @include('pos.script')
@endpush