@extends('layouts.app')

@section('content')

@php
    $posPermissionPrefix = $saleMode === 'wholesale' ? 'wholesale' : 'retail_pos';
    $canSaveSale = auth()->user()->hasPermission($posPermissionPrefix.'.save');
    $canSaveAndPrint = auth()->user()->hasPermission($posPermissionPrefix.'.save_print');
    $canCreditSale = auth()->user()->hasPermission($posPermissionPrefix.'.credit_sale');
    $canQuotation = auth()->user()->hasPermission($posPermissionPrefix.'.quotation');
    $canMpesaStk = auth()->user()->hasPermission($posPermissionPrefix.'.mpesa_stk');
    $canSuspendBill = auth()->user()->hasPermission($posPermissionPrefix.'.suspend_bill');
    $canUnsuspendBill = auth()->user()->hasPermission($posPermissionPrefix.'.unsuspend_bill');
    $canAddCustomer = auth()->user()->hasPermission($posPermissionPrefix.'.add_customer');
@endphp

<style>

body{
    overflow:auto;
    background:#f4f6f9;
}

.pos-page{
    min-height:calc(100vh - 40px);
    display:grid;
    grid-template-rows:auto 1fr;
    gap:10px;
}

.pos-header{
    background:#fff;
    border-radius:12px;
    padding:10px 15px;
    box-shadow:0 3px 10px rgba(0,0,0,0.06);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.pos-header-left{
    display:flex;
    gap:25px;
    align-items:center;
    font-size:15px;
    font-weight:700;
}

.pos-title{
    color:#E84C0D;
    font-size:24px;
    font-weight:900;
}

.pos-header span{
    color:#1E4FA8;
    font-weight:900;
}

.header-actions{
    display:flex;
    gap:10px;
    align-items:center;
}

.logout-btn{
    background:#E84C0D;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 14px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.pos-main{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:10px;
    min-height:0;
    height:100%;
}

.sales-area{
    background:#fff;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.sales-toolbar{
    padding:10px;
    border-bottom:1px solid #eee;
    display:flex;
    gap:8px;
    align-items:center;
}

.sales-toolbar input,
.sales-toolbar select{
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:16px;
}

.search-input{
    flex:1;
    font-size:18px !important;
    font-weight:700;
}

.top-btn{
    padding:10px 14px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
}

.btn-blue{
    background:#1E4FA8;
    color:#fff;
}

.btn-orange{
    background:#E84C0D;
    color:#fff;
}

.btn-green{
    background:#35a852;
    color:#fff;
}

.cart-wrap{
    flex:1;
    overflow-y:auto;
}

.cart-table{
    width:100%;
    border-collapse:collapse;
}

.cart-table th{
    background:#f5f7fb;
    padding:12px;
    font-size:16px;
    text-align:left;
    position:sticky;
    top:0;
    z-index:2;
}

.cart-table td{
    padding:14px 12px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    font-size:18px;
}

.product-name{
    font-weight:900;
    font-size:18px;
}

.product-code{
    color:#777;
    font-size:13px;
    margin-top:3px;
}

.qty-control{
    display:flex;
    align-items:center;
    gap:5px;
}

.qty-control button{
    width:32px;
    height:32px;
    border:none;
    border-radius:6px;
    background:#1E4FA8;
    color:#fff;
    cursor:pointer;
    font-size:18px;
    font-weight:900;
}

.qty-control input{
    width:60px;
    padding:6px;
    text-align:center;
    border:1px solid #ddd;
    border-radius:5px;
    font-size:18px;
    font-weight:700;
}

.discount-input{
    width:70px;
    padding:6px;
    border:1px solid #ddd;
    border-radius:5px;
    font-size:18px;
    font-weight:700;
    text-align:center;
}

.remove-btn{
    background:#fff3ee;
    color:#E84C0D;
    border:1px solid #ffd7c6;
    border-radius:6px;
    padding:8px 10px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
}

.payment-sidebar{
    background:#fff;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    min-height:0;
    max-height:calc(100vh - 112px);
    overflow-y:auto;
}

.posted-badge{
    background:#f1f5f9;
    border:1px solid #d8e1ec;
    border-radius:6px;
    color:#475569;
    display:inline-block;
    font-size:13px;
    font-weight:900;
    padding:7px 9px;
}

.edit-sale-banner{
    background:#fff7ed;
    border-bottom:1px solid #fed7aa;
    color:#9a3412;
    font-size:15px;
    font-weight:900;
    padding:8px 12px;
}

.payment-sidebar input,
.payment-sidebar select{
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    margin-bottom:0;
    font-size:16px;
}

.customer-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
}

.add-customer-btn{
    background:#1E4FA8;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px;
    font-weight:700;
    cursor:pointer;
    font-size:14px;
}

.total-box{
    background:#f8fafc;
    border-radius:10px;
    padding:10px;
    margin-bottom:0;
    flex-shrink:0;
}

.total-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
    font-size:15px;
    font-weight:700;
}

.grand-total{
    font-size:30px;
    color:#e84c0d !important;
    font-weight:900;
    text-align:center;
    margin-top:4px;
    line-height:1.05;
}

#grandTotal{
    color:#e84c0d !important;
}

.payment-methods{
    flex:0 0 auto;
    min-height:96px;
    overflow:visible;
    margin-top:0;
    padding-right:0;
}

.payment-method{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
    border:1px solid #d8e1ec;
    border-radius:8px;
    background:#fff;
    padding:8px;
}

.payment-method label{
    font-size:15px;
    font-weight:900;
}

.shortcut-hint{
    font-size:11px;
    font-weight:800;
    color:#64748b;
    white-space:nowrap;
}

.payment-method input{
    border:1px solid #b9c6d6 !important;
    border-radius:6px !important;
    box-sizing:border-box;
    margin-bottom:0;
    font-size:20px;
    font-weight:900;
    text-align:right;
}

.payment-input-stack{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.payment-reference{
    font-size:15px !important;
    font-weight:800 !important;
    text-align:left !important;
}

.sale-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    flex-shrink:0;
}

.pos-extra-actions{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.sale-btn{
    background:#35a852;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    margin-top:0;
}

.sale-btn.print{
    background:#1E4FA8;
}

.sale-btn .shortcut-hint{
    color:inherit;
    font-size:11px;
}

.sale-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.pos-toast{
    position:fixed;
    top:18px;
    right:18px;
    z-index:10000;
    background:#35a852;
    color:#fff;
    border-radius:8px;
    padding:12px 16px;
    font-size:15px;
    font-weight:800;
    box-shadow:0 8px 24px rgba(0,0,0,0.16);
    display:none;
}

.stock-warning{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:100000;
    display:none;
    width:calc(100vw - 40px);
    max-width:620px;
    background:#E84C0D;
    color:#fff;
    border:4px solid #0c0c0c;
    border-radius:12px;
    box-shadow:0 18px 45px rgba(12,12,12,.35);
    padding:26px 30px;
    text-align:center;
    font-size:26px;
    font-weight:900;
    line-height:1.25;
}

.stock-warning.is-visible{
    display:block;
}

.shift-banner{
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:8px;
    color:#9a3412;
    font-weight:900;
    padding:8px 10px;
}

.shift-modal{
    align-items:center;
    background:rgba(15,23,42,.55);
    display:none;
    inset:0;
    justify-content:center;
    position:fixed;
    z-index:10001;
}

.shift-modal.is-visible{ display:flex; }

.shift-dialog{
    background:#fff;
    border-radius:10px;
    max-width:420px;
    padding:18px;
    width:min(92vw, 420px);
}

.shift-dialog h3{
    color:#1E4FA8;
    margin:0 0 14px;
}

.shift-dialog .form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
}

.shift-dialog label{
    color:#334155;
    font-size:13px;
    font-weight:900;
}

.shift-dialog input{
    border:1px solid #d8e1ec;
    border-radius:8px;
    box-sizing:border-box;
    font-size:16px;
    min-height:42px;
    padding:10px 12px;
    width:100%;
}

.shift-dialog input:focus{
    border-color:#1E4FA8;
    box-shadow:0 0 0 3px rgba(0,74,173,.12);
    outline:none;
}

.suspended-modal{
    align-items:center;
    background:rgba(15,23,42,.55);
    display:none;
    inset:0;
    justify-content:center;
    position:fixed;
    z-index:10002;
}

.suspended-modal.is-visible{ display:flex; }

.customer-modal{
    align-items:center;
    background:rgba(15,23,42,.55);
    display:none;
    inset:0;
    justify-content:center;
    position:fixed;
    z-index:10003;
}

.customer-modal.is-visible{ display:flex; }

.customer-dialog{
    background:#fff;
    border-radius:10px;
    max-width:460px;
    padding:18px;
    width:min(92vw, 460px);
}

.customer-dialog h3{
    color:#1E4FA8;
    margin:0 0 14px;
}

.customer-dialog .form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:10px;
}

.customer-dialog label{
    color:#334155;
    font-size:13px;
    font-weight:900;
}

.customer-dialog input{
    border:1px solid #d8e1ec;
    border-radius:8px;
    box-sizing:border-box;
    font-size:16px;
    min-height:42px;
    padding:10px 12px;
    width:100%;
}

.suspended-dialog{
    background:#fff;
    border-radius:10px;
    max-height:82vh;
    max-width:980px;
    overflow:auto;
    padding:18px;
    width:min(94vw, 980px);
}

.suspended-head{
    align-items:center;
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
}

.suspended-head h3{
    color:#1E4FA8;
    margin:0;
}

.suspended-table{
    border-collapse:collapse;
    width:100%;
}

.suspended-table th,
.suspended-table td{
    border-bottom:1px solid #e5e7eb;
    padding:10px 8px;
    text-align:left;
}

.suspended-table th{
    background:#1E4FA8;
    color:#fff;
    font-weight:900;
}

.suspended-actions{
    display:flex;
    gap:6px;
}

.payment-sidebar > .total-box:last-child{
    margin-top:0;
    margin-bottom:0;
}

@media(max-width:1000px){

    body{
        overflow:auto;
    }

    .pos-page{
        height:auto;
    }

    .pos-main{
        grid-template-columns:1fr;
    }
}

</style>

<div class="pos-page">
    <div id="posToast" class="pos-toast"></div>
    <div id="stockWarning" class="stock-warning"></div>

    <div class="pos-header">

        <div class="pos-header-left">

            <div class="pos-title">
                {{ $pageTitle }}
            </div>

            <div>
                User:
                <span>{{ auth()->user()->name }}</span>
            </div>

            <div>
                Branch:
                <span>{{ auth()->user()->branch->name ?? 'No Branch Assigned' }}</span>
            </div>

        </div>

        <div class="header-actions">

            @if($canMpesaModem && !$editSale)
                <button type="button" class="top-btn btn-green" id="openMpesaTransactionsButton">
                    MPESA <span id="mpesaAvailableCount"></span>
                </button>
            @endif

            @if($canSuspendBill)
                <button type="button" class="top-btn btn-blue" id="suspendSaleButton">
                    Suspend
                </button>
            @endif

            @if($canUnsuspendBill)
                <button type="button" class="top-btn btn-green" id="openSuspendedBillsButton">
                    Suspended Bills
                </button>
            @endif

            @if($shiftManagementEnabled)
                @if($activeShift)
                    @permission('shifts.close')
                    <button type="button" class="top-btn btn-orange" id="openCloseShiftModal">
                        Close Shift
                    </button>
                    @endpermission
                    @permission('shifts.reports')
                    <a href="{{ url('/shifts/'.$activeShift->id.'/report') }}" class="top-btn btn-blue" style="text-decoration:none;">
                        Shift Report
                    </a>
                    @endpermission
                @else
                    @permission('shifts.open')
                    <button type="button" class="top-btn btn-green" id="openStartShiftModal">
                        Open Shift
                    </button>
                    @endpermission
                @endif
            @endif

            <form method="POST" action="{{ url('/logout') }}">
                @csrf

                <button class="logout-btn">
                    Logout
                </button>
            </form>

        </div>

    </div>

    <div class="pos-main">

        <div class="sales-area">

            @if($shiftManagementEnabled && !$activeShift)
                <div class="shift-banner">
                    Open your shift before selling.
                </div>
            @endif

            @if($editSale)
                <div class="edit-sale-banner">
                    Editing invoice {{ $editSale->invoice_no }}. Posted items are locked; add new items then save.
                </div>
            @endif

            <div class="sales-toolbar">

                <input
                    type="text"
                    id="productSearch"
                    class="search-input"
                    placeholder="Search barcode or product name"
                    autocomplete="off"
                >

                <input
                    type="number"
                    id="defaultQty"
                    value="1"
                    min="1"
                    style="width:80px;"
                >

                <input
                    type="number"
                    id="defaultDiscount"
                    value="0"
                    min="0"
                    style="width:80px;"
                >

            </div>

            <div class="cart-wrap">

                <table class="cart-table">

                    <thead>

                        <tr>
                            <th>#</th>
                            <th>Item Name</th>
                            <th>Qty <span class="shortcut-hint">(F1)</span></th>
                            <th>S.Price</th>
                            <th>Disc</th>
                            <th>Sub Total</th>
                            <th>Action</th>
                        </tr>

                    </thead>

                    <tbody id="cartBody">

                        <tr id="emptyCartRow">

                            <td
                                colspan="7"
                                style="text-align:center;color:#777;padding:25px;"
                            >
                                Search or scan product to add items to sale.
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <div class="payment-sidebar">

            <div class="customer-row">

                <select id="customerId">
                    @forelse($customers as $customer)
                        <option
                            value="{{ $customer->id }}"
                            data-name="{{ $customer->name }}"
                            data-phone="{{ $customer->phone }}"
                            {{ $defaultCustomer && $defaultCustomer->id === $customer->id ? 'selected' : '' }}
                        >{{ $customer->name }}</option>
                    @empty
                        <option value="" data-name="" data-phone="">No customer added</option>
                    @endforelse
                </select>

                @if($canAddCustomer)
                    <button
                        type="button"
                        id="openCustomerModal"
                        class="add-customer-btn"
                    >
                        Add Customer
                    </button>
                @endif

            </div>

            <input
                type="text"
                id="customerPhone"
                placeholder="Customer phone number"
            >

            <div class="total-box">

                <div class="total-row">
                    <span>Total Qty</span>
                    <strong id="totalQty">0</strong>
                </div>

                <div class="total-row">
                    <span>Discount</span>
                    <strong id="totalDiscount">{{ $currencyCode }} 0.00</strong>
                </div>

                <div class="grand-total" id="grandTotal">
                    {{ $currencyCode }} 0.00
                </div>

            </div>

            <div class="payment-methods">

                @php($mpesaShortcutShown = false)
                @foreach($paymentMethods as $method)
                    @php($methodName = strtolower(trim($method->name)))
                    @continue($methodName === 'credit')
                    @php($requiresReference = !in_array($methodName, ['cash', 'credit']))
                    @php($isCredit = $methodName === 'credit')
                    @php($paymentShortcut = $methodName === 'cash' ? 'F2' : null)
                    @if(!$paymentShortcut && str_contains($methodName, 'mpesa') && !$mpesaShortcutShown)
                        @php($paymentShortcut = 'F3')
                        @php($mpesaShortcutShown = true)
                    @endif

                    <div class="payment-method">

                        <label for="paymentInput{{ $method->id }}">
                            {{ strtoupper($method->name) }}
                            @if($paymentShortcut)
                                <span class="shortcut-hint">({{ $paymentShortcut }})</span>
                            @endif
                        </label>

                        <div class="payment-input-stack">
                            @if($isCredit)
                                <label style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;">
                                    <input
                                        type="checkbox"
                                        class="payment-credit-checkbox"
                                        data-payment-method-id="{{ $method->id }}"
                                        onchange="calculatePayments()"
                                    >
                                    Pending bill
                                </label>
                            @else
                                <input
                                    id="paymentInput{{ $method->id }}"
                                    type="number"
                                    class="payment-input"
                                    data-payment-method-id="{{ $method->id }}"
                                    data-payment-method-name="{{ strtolower($method->name) }}"
                                    value=""
                                    step="0.01"
                                    onfocus="preparePaymentInput(this)"
                                    oninput="calculatePayments()"
                                >
                            @endif

                            @if($requiresReference)
                                <input
                                    type="text"
                                    class="payment-reference"
                                    data-payment-reference-for="{{ $method->id }}"
                                    placeholder="Transaction code"
                                >
                            @endif
                        </div>

                    </div>

                @endforeach

            </div>

            <div class="pos-extra-actions">
                @if($canMpesaStk)
                    <button class="sale-btn print" type="button" onclick="sendStkPush()">Send STK Push</button>
                @endif
                @if($canCreditSale)
                    <button class="sale-btn print" type="button" onclick="saveCreditSale()">Credit Sale</button>
                @endif
                @if($canQuotation)
                    <button class="sale-btn" type="button" onclick="saveQuotation()">Quotation</button>
                @endif
            </div>

            <div class="sale-actions">
                @if($canSaveSale)
                    <button class="sale-btn" type="button" onclick="saveSale(false)">Save <span class="shortcut-hint">(F4)</span></button>
                @endif

                @if($canSaveAndPrint)
                    <button class="sale-btn print" type="button" onclick="saveSale(true)">Save & Print <span class="shortcut-hint">(F5)</span></button>
                @endif
            </div>

            <div class="total-box">

                <div class="total-row">
                    <span>Paid</span>
                    <strong id="paidAmount">{{ $currencyCode }} 0.00</strong>
                </div>

                <div class="total-row">
                    <span>Change</span>
                    <strong
                        id="changeAmount"
                        style="color:#35a852;font-size:24px;"
                    >
                        {{ $currencyCode }} 0.00
                    </strong>
                </div>

            </div>

        </div>

    </div>

</div>

@if($canMpesaModem && !$editSale)
<div class="suspended-modal" id="mpesaTransactionsModal">
    <div class="suspended-dialog">
        <div class="suspended-head">
            <div>
                <h3>Incoming M-Pesa Payments</h3>
                <small style="color:#64748b;font-weight:700;">New payments appear automatically.</small>
            </div>
            <button type="button" class="top-btn btn-orange" id="closeMpesaTransactionsButton">X</button>
        </div>
        <table class="suspended-table">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Customer</th>
                    <th>Phone</th>
                    <th>Amount</th>
                    <th>Time</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="mpesaTransactionsBody">
                <tr><td colspan="6" style="text-align:center;color:#64748b;font-weight:800;">Waiting for M-Pesa payments...</td></tr>
            </tbody>
        </table>
    </div>
</div>
@endif

<div class="customer-modal" id="customerModal">
    <div class="customer-dialog">
        <h3>Add Customer</h3>
        <form id="quickCustomerForm">
            <div class="form-group">
                <label>Customer Name</label>
                <input type="text" name="name" id="quickCustomerName" required>
            </div>
            <div class="form-group">
                <label>Phone</label>
                <input type="text" name="phone" id="quickCustomerPhone">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" id="quickCustomerEmail">
            </div>
            <div class="form-group">
                <label>Address</label>
                <input type="text" name="address" id="quickCustomerAddress">
            </div>
            <div class="form-group">
                <label>Customer PIN</label>
                <input type="text" name="tax_pin" id="quickCustomerTaxPin">
            </div>
            <div class="sale-actions">
                <button class="sale-btn" type="submit">Save</button>
                <button class="sale-btn print" type="button" id="closeCustomerModal">Cancel</button>
            </div>
        </form>
    </div>
</div>

<div class="suspended-modal" id="suspendedBillsModal">
    <div class="suspended-dialog">
        <div class="suspended-head">
            <h3>Suspended Bills</h3>
            <button type="button" class="top-btn btn-orange" id="closeSuspendedBillsButton">X</button>
        </div>
        <table class="suspended-table">
            <thead>
                <tr>
                    <th>Hold No.</th>
                    <th>Customer</th>
                    <th>Items</th>
                    <th>Total</th>
                    <th>Time</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="suspendedBillsBody">
                <tr><td colspan="6" style="text-align:center;color:#64748b;font-weight:800;">No suspended bills.</td></tr>
            </tbody>
        </table>
    </div>
</div>

@if($shiftManagementEnabled)
    <div class="shift-modal" id="startShiftModal">
        <div class="shift-dialog">
            <h3>Open Shift</h3>
            <form method="POST" action="{{ url('/shifts') }}">
                @csrf
                <div class="form-group">
                    <label>Opening Cash</label>
                    <input type="number" name="opening_cash" min="0" step="0.01" value="0">
                </div>
                <div class="form-group">
                    <label>Note</label>
                    <input type="text" name="opening_note" placeholder="Optional">
                </div>
                <div class="sale-actions">
                    <button class="sale-btn" type="submit">Open Shift</button>
                    <button class="sale-btn print" type="button" data-close-shift-modal>Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <div class="shift-modal" id="closeShiftModal">
        <div class="shift-dialog">
            <h3>Close Shift</h3>
            <form method="POST" action="{{ url('/shifts/close') }}">
                @csrf
                <div class="form-group">
                    <label>Counted Cash</label>
                    <input type="number" name="closing_cash" min="0" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>Note</label>
                    <input type="text" name="closing_note" placeholder="Optional">
                </div>
                <div class="sale-actions">
                    <button class="sale-btn" type="submit">Close Shift</button>
                    <button class="sale-btn print" type="button" data-close-shift-modal>Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endif

<script>

const products = {!! $products->toJson() !!};
const defaultCustomer = @json($defaultCustomer);
const currencyCode = @json($currencyCode);
const exchangeRate = parseFloat(@json($exchangeRate)) || 1;
const priceField = @json($priceField);
const saleMode = @json($saleMode);
const allowOverselling = @json($allowOverselling) === 'yes';
const duplicateProductBehavior = @json($duplicateProductBehavior);
const showTaxSummary = @json($showTaxSummary);
const showBranchDetails = @json($showBranchDetails);
const showCustomerDetails = @json($showCustomerDetails);
const showCustomerPin = @json($showCustomerPin);
const showCashierName = @json($showCashierName);
const showDiscount = @json($showDiscount);
const businessTaxPin = @json($businessTaxPin);
const receiptFooter = @json($receiptFooter);
const shiftManagementEnabled = @json($shiftManagementEnabled);
const hasActiveShift = @json((bool) $activeShift);
const canSaveSale = @json($canSaveSale);
const canSaveAndPrint = @json($canSaveAndPrint);
const canCreditSale = @json($canCreditSale);
const canMpesaStk = @json($canMpesaStk);
const canMpesaModem = @json($canMpesaModem);
let availableMpesaTransactions = [];

document.getElementById('openStartShiftModal')?.addEventListener('click', () => {
    document.getElementById('startShiftModal')?.classList.add('is-visible');
});

document.getElementById('openCloseShiftModal')?.addEventListener('click', () => {
    document.getElementById('closeShiftModal')?.classList.add('is-visible');
});

document.querySelectorAll('[data-close-shift-modal]').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.shift-modal').forEach(modal => modal.classList.remove('is-visible'));
    });
});
const editSale = @json($editSalePayload);
const isEditMode = Boolean(editSale);
const suspendedStorageKey = `jevapos_suspended_${saleMode}_{{ auth()->id() }}`;

let cart = editSale?.items ? editSale.items : [];

const productSearch = document.getElementById('productSearch');
const cartBody = document.getElementById('cartBody');
const stockWarning = document.getElementById('stockWarning');

const searchBox = document.getElementById('productSearch');

const suggestionBox = document.createElement('div');

suggestionBox.style.position = 'absolute';
suggestionBox.style.background = '#fff';
suggestionBox.style.border = '1px solid #ddd';
suggestionBox.style.borderRadius = '8px';
suggestionBox.style.width = '450px';
suggestionBox.style.maxHeight = '300px';
suggestionBox.style.overflowY = 'auto';
suggestionBox.style.zIndex = '9999';
suggestionBox.style.display = 'none';
suggestionBox.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';

document.body.appendChild(suggestionBox);

document.getElementById('suspendSaleButton')?.addEventListener('click', suspendCurrentSale);
document.getElementById('openSuspendedBillsButton')?.addEventListener('click', openSuspendedBills);
document.getElementById('closeSuspendedBillsButton')?.addEventListener('click', closeSuspendedBills);
document.getElementById('openCustomerModal')?.addEventListener('click', openCustomerModal);
document.getElementById('closeCustomerModal')?.addEventListener('click', closeCustomerModal);
document.getElementById('quickCustomerForm')?.addEventListener('submit', saveQuickCustomer);
document.getElementById('openMpesaTransactionsButton')?.addEventListener('click', () => {
    document.getElementById('mpesaTransactionsModal')?.classList.add('is-visible');
    refreshMpesaTransactions();
});
document.getElementById('closeMpesaTransactionsButton')?.addEventListener('click', () => {
    document.getElementById('mpesaTransactionsModal')?.classList.remove('is-visible');
});
document.getElementById('customerModal')?.addEventListener('click', event => {
    if(event.target.id === 'customerModal'){
        closeCustomerModal();
    }
});
document.getElementById('suspendedBillsModal')?.addEventListener('click', event => {
    if(event.target.id === 'suspendedBillsModal'){
        closeSuspendedBills();
    }
});

searchBox.addEventListener('input', function () {

    let query = this.value.toLowerCase().trim();

    suggestionBox.innerHTML = '';

    if(query.length < 1){

        suggestionBox.style.display = 'none';

        return;
    }

    let matches = products.filter(product =>

        (product.name &&
            product.name.toLowerCase().includes(query))

        ||

        (product.barcode &&
            product.barcode.toLowerCase().includes(query))

    );

    if(matches.length === 0){

        suggestionBox.style.display = 'none';

        return;
    }

    let rect = searchBox.getBoundingClientRect();

    suggestionBox.style.left = rect.left + 'px';
    suggestionBox.style.top = (rect.bottom + window.scrollY) + 'px';

    matches.forEach(product => {

        let item = document.createElement('div');

        item.style.padding = '12px';
        item.style.cursor = 'pointer';
        item.style.borderBottom = '1px solid #eee';
        item.style.fontSize = '16px';

        item.innerHTML = `
            <strong>${product.name}</strong><br>
            <small>
                S.Price: ${money(convertAmount(product[priceField]))}
                | Stock: ${Number(product.stock_quantity || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </small>
        `;

        item.addEventListener('mouseenter', function () {
            this.style.background = '#f5f7fb';
        });

        item.addEventListener('mouseleave', function () {
            this.style.background = '#fff';
        });

        item.addEventListener('click', function () {

            addToCart(product);

            searchBox.value = '';

            suggestionBox.style.display = 'none';

            searchBox.focus();
        });

        suggestionBox.appendChild(item);
    });

    suggestionBox.style.display = 'block';
});
document.getElementById('mpesaTransactionsModal')?.addEventListener('click', event => {
    if(event.target.id === 'mpesaTransactionsModal'){
        event.currentTarget.classList.remove('is-visible');
    }
});

async function refreshMpesaTransactions(){
    if(!canMpesaModem || document.hidden){
        return;
    }

    try {
        const response = await fetch(`{{ url('/mpesa/transactions/available') }}?sale_mode=${encodeURIComponent(saleMode)}`, {
            headers: { 'Accept': 'application/json' }
        });

        if(!response.ok){
            return;
        }

        const data = await response.json();
        availableMpesaTransactions = data.transactions || [];
        renderMpesaTransactions();
    } catch (error) {
    }
}

function renderMpesaTransactions(){
    const body = document.getElementById('mpesaTransactionsBody');
    const count = document.getElementById('mpesaAvailableCount');

    if(count){
        count.textContent = availableMpesaTransactions.length ? `(${availableMpesaTransactions.length})` : '';
    }

    if(!body){
        return;
    }

    if(!availableMpesaTransactions.length){
        body.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#64748b;font-weight:800;">No unclaimed M-Pesa payments.</td></tr>';
        return;
    }

    body.innerHTML = availableMpesaTransactions.map(transaction => `
        <tr>
            <td><strong>${escapeHtml(transaction.transaction_code)}</strong></td>
            <td>${escapeHtml(transaction.customer_name)}</td>
            <td>${escapeHtml(transaction.phone)}</td>
            <td><strong>${money(transaction.amount)}</strong></td>
            <td>${escapeHtml(transaction.received_at)}</td>
            <td><button type="button" class="top-btn btn-green" onclick="claimMpesaTransaction(${Number(transaction.id)})">Claim</button></td>
        </tr>
    `).join('');
}

function claimMpesaTransaction(transactionId){
    const transaction = availableMpesaTransactions.find(item => Number(item.id) === Number(transactionId));

    if(!transaction){
        refreshMpesaTransactions();
        return;
    }

    if(!cart.length){
        alert('Add the customer items before claiming the M-Pesa payment.');
        document.getElementById('mpesaTransactionsModal')?.classList.remove('is-visible');
        productSearch.focus();
        return;
    }

    const total = saleTotal(cart);
    if(Math.abs(Number(transaction.amount) - total) > 0.01){
        alert(`Payment ${transaction.transaction_code} is ${money(transaction.amount)} but the sale total is ${money(total)}.`);
        return;
    }

    document.querySelectorAll('.payment-input').forEach(input => input.value = '');
    calculatePayments();
    saveSale(false, false, false, transaction.id);
}

if(canMpesaModem){
    refreshMpesaTransactions();
    window.setInterval(refreshMpesaTransactions, 1000);
}

function addScannedBarcode(value){
    const barcode = String(value || '').trim().toLowerCase();

    if(!barcode){
        return false;
    }

    const product = products.find(item => String(item.barcode || '').trim().toLowerCase() === barcode);

    if(!product){
        return false;
    }

    addToCart(product);
    searchBox.value = '';
    suggestionBox.style.display = 'none';
    searchBox.focus();
    return true;
}

searchBox.addEventListener('keydown', function(event){
    if(event.key !== 'Enter'){
        return;
    }

    event.preventDefault();

    if(!addScannedBarcode(this.value)){
        showStockWarning(`No product was found for barcode ${this.value.trim()}.`);
        this.select();
    }
});

searchBox.addEventListener('change', function(){
    addScannedBarcode(this.value);
});

document.addEventListener('click', function(e){

    if(
        !searchBox.contains(e.target) &&
        !suggestionBox.contains(e.target)
    ){
        suggestionBox.style.display = 'none';
    }
});

function addToCart(product){

    let qty = parseFloat(document.getElementById('defaultQty').value) || 1;
    const existingQty = cart
        .filter(item => item.id === product.id && !item.existing)
        .reduce((sum, item) => sum + Number(item.qty || 0), 0);

    if(!canUseStock(product, existingQty + qty)){
        return;
    }

    let existing = duplicateProductBehavior === 'increase_quantity'
        ? cart.find(item => item.id === product.id && !item.existing)
        : null;

    if(existing){

        existing.qty += qty;
        cart.splice(cart.indexOf(existing), 1);
        cart.unshift(existing);

    }else{

        cart.unshift({

            id: product.id,
            name: product.name,
            barcode: product.barcode,
            stock_quantity: Number(product.stock_quantity || 0),
            track_stock: product.track_stock === true || Number(product.track_stock) === 1,
            price: convertAmount(product[priceField] || 0),
            qty: qty,
            discount: parseFloat(document.getElementById('defaultDiscount').value) || 0

        });
    }

    renderCart();
}

function renderCart(){

    cartBody.innerHTML = '';

    if(cart.length === 0){

        cartBody.innerHTML = `
            <tr id="emptyCartRow">
                <td colspan="7" style="text-align:center;color:#777;padding:25px;">
                    Search or scan product to add items to sale.
                </td>
            </tr>
        `;

        updateTotals();

        return;
    }

    cart.forEach((item, index) => {

        let lineTotal = (item.price * item.qty) - item.discount;
        let locked = Boolean(item.existing);

        cartBody.innerHTML += `

            <tr>

                <td>${index + 1}</td>

                <td>

                    <div class="product-name">
                        ${item.name}
                    </div>

                    <div class="product-code">
                        Code: ${item.barcode ?? ''}
                    </div>

                </td>

                <td>

                    <div class="qty-control">

                        <button
                            type="button"
                            onclick="changeQty(${index}, -1)"
                            ${locked ? 'disabled' : ''}
                        >
                            -
                        </button>

                        <input
                            class="cart-qty-input"
                            type="number"
                            value="${item.qty}"
                            oninput="setQty(${index}, this.value)"
                            onchange="setQty(${index}, this.value)"
                            ${locked ? 'disabled' : ''}
                        >

                        <button
                            type="button"
                            onclick="changeQty(${index}, 1)"
                            ${locked ? 'disabled' : ''}
                        >
                            +
                        </button>

                    </div>

                </td>

                <td>
                    ${money(item.price)}
                </td>

                <td>

                    <input
                        class="discount-input"
                        value="${item.discount}"
                        onchange="setDiscount(${index}, this.value)"
                        ${locked ? 'disabled' : ''}
                    >

                </td>

                <td>
                    ${money(lineTotal)}
                </td>

                <td>

                    ${locked
                        ? '<span class="posted-badge">Posted</span>'
                        : `<button class="remove-btn" type="button" onclick="removeItem(${index})">Remove</button>`
                    }

                </td>

            </tr>
        `;
    });

    updateTotals();
}

function changeQty(index, change){
    if(cart[index].existing){
        return;
    }

    const nextQty = Number(cart[index].qty || 0) + change;

    if(!canUseStock(cart[index], nextQty)){
        return;
    }

    cart[index].qty = nextQty;

    if(cart[index].qty < 1){

        cart[index].qty = 1;
    }

    renderCart();
}

function setQty(index, value){
    if(cart[index].existing){
        return;
    }

    const nextQty = parseFloat(value) || 1;

    if(!canUseStock(cart[index], nextQty)){
        renderCart();
        return;
    }

    cart[index].qty = nextQty;

    renderCart();
}

function canUseStock(item, requestedQty){
    if(allowOverselling || !item.track_stock){
        return true;
    }

    const stock = Number(item.stock_quantity || 0);
    const qty = Number(requestedQty || 0);

    if(stock < 1 || qty > stock){
        showStockWarning(`${item.name} has only ${stock.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} in stock. You cannot sell ${qty.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}.`);
        return false;
    }

    return true;
}

function showStockWarning(message){
    stockWarning.innerText = message;
    stockWarning.classList.add('is-visible');
    beepStockWarning();

    clearTimeout(showStockWarning.timer);
    showStockWarning.timer = setTimeout(() => {
        stockWarning.classList.remove('is-visible');
    }, 3200);
}

function beepStockWarning(){
    try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        const context = new AudioContext();
        const oscillator = context.createOscillator();
        const gain = context.createGain();
        oscillator.type = 'square';
        oscillator.frequency.value = 880;
        gain.gain.value = 0.12;
        oscillator.connect(gain);
        gain.connect(context.destination);
        oscillator.start();
        oscillator.stop(context.currentTime + 0.18);
    } catch (error) {
    }
}

function setDiscount(index, value){
    if(cart[index].existing){
        return;
    }

    cart[index].discount = parseFloat(value) || 0;

    renderCart();
}

function removeItem(index){
    if(cart[index].existing){
        return;
    }

    cart.splice(index, 1);

    renderCart();
}

function readSuspendedBills(){
    try {
        return JSON.parse(localStorage.getItem(suspendedStorageKey) || '[]');
    } catch (error) {
        return [];
    }
}

function writeSuspendedBills(bills){
    localStorage.setItem(suspendedStorageKey, JSON.stringify(bills));
}

function suspendCurrentSale(){
    if(isEditMode){
        alert('Finish editing this invoice before suspending another bill.');
        return;
    }

    if(!cart.length){
        alert('Add items before suspending a bill.');
        productSearch.focus();
        return;
    }

    const customerId = document.getElementById('customerId')?.value || '';
    const customerSelect = document.getElementById('customerId');
    const suspendedBill = {
        id: Date.now().toString(),
        hold_no: 'S' + new Date().toISOString().replace(/\D/g, '').slice(2, 14),
        customer_id: customerId,
        customer_name: selectedCustomerName() || '-',
        customer_phone: document.getElementById('customerPhone')?.value || '',
        customer_label: customerSelect?.selectedOptions?.[0]?.textContent?.trim() || '-',
        items: cart.map(item => ({...item})),
        total: saleTotal(cart),
        created_at: new Date().toISOString()
    };

    const bills = readSuspendedBills();
    bills.unshift(suspendedBill);
    writeSuspendedBills(bills);

    resetSale();
    showToast('Bill suspended successful');
}

function openSuspendedBills(){
    renderSuspendedBills();
    document.getElementById('suspendedBillsModal')?.classList.add('is-visible');
}

function closeSuspendedBills(){
    document.getElementById('suspendedBillsModal')?.classList.remove('is-visible');
}

function renderSuspendedBills(){
    const body = document.getElementById('suspendedBillsBody');
    const bills = readSuspendedBills();

    if(!bills.length){
        body.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#64748b;font-weight:800;">No suspended bills.</td></tr>';
        return;
    }

    body.innerHTML = bills.map(bill => `
        <tr>
            <td><strong>${escapeHtml(bill.hold_no)}</strong></td>
            <td>${escapeHtml(bill.customer_label || bill.customer_name || '-')}</td>
            <td>${Number((bill.items || []).reduce((sum, item) => sum + (parseFloat(item.qty) || 0), 0)).toLocaleString()}</td>
            <td><strong>${money(bill.total)}</strong></td>
            <td>${new Date(bill.created_at).toLocaleString()}</td>
            <td>
                <div class="suspended-actions">
                    <button type="button" class="top-btn btn-green" onclick="unsuspendBill('${bill.id}')">Unsuspend</button>
                    <button type="button" class="top-btn btn-orange" onclick="deleteSuspendedBill('${bill.id}')">Delete</button>
                </div>
            </td>
        </tr>
    `).join('');
}

function unsuspendBill(id){
    const bills = readSuspendedBills();
    const bill = bills.find(item => item.id === id);

    if(!bill){
        renderSuspendedBills();
        return;
    }

    if(cart.length && !confirm('Replace the current cart with this suspended bill?')){
        return;
    }

    cart = (bill.items || []).map(item => ({...item}));

    const customerId = document.getElementById('customerId');
    if(customerId && bill.customer_id){
        customerId.value = String(bill.customer_id);
    }
    document.getElementById('customerPhone').value = bill.customer_phone || '';
    syncCustomerFields();

    writeSuspendedBills(bills.filter(item => item.id !== id));
    renderCart();
    closeSuspendedBills();
    showToast('Bill unsuspended successful');
}

function deleteSuspendedBill(id){
    if(!confirm('Delete this suspended bill?')){
        return;
    }

    writeSuspendedBills(readSuspendedBills().filter(item => item.id !== id));
    renderSuspendedBills();
}

function openCustomerModal(){
    document.getElementById('quickCustomerForm')?.reset();
    document.getElementById('customerModal')?.classList.add('is-visible');
    setTimeout(() => document.getElementById('quickCustomerName')?.focus(), 50);
}

function closeCustomerModal(){
    document.getElementById('customerModal')?.classList.remove('is-visible');
}

function saveQuickCustomer(event){
    event.preventDefault();

    const form = event.target;
    const submitButton = form.querySelector('button[type="submit"]');
    submitButton.disabled = true;

    fetch('{{ url('/customers') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            name: document.getElementById('quickCustomerName').value,
            phone: document.getElementById('quickCustomerPhone').value,
            email: document.getElementById('quickCustomerEmail').value,
            address: document.getElementById('quickCustomerAddress').value,
            tax_pin: document.getElementById('quickCustomerTaxPin').value,
            is_active: true
        })
    })
        .then(async response => {
            const data = await response.json();

            if(!response.ok){
                throw new Error(data.message || 'Could not add customer.');
            }

            const customer = data.customer;
            const customerSelect = document.getElementById('customerId');
            const option = document.createElement('option');
            option.value = customer.id;
            option.textContent = customer.name;
            option.dataset.name = customer.name || '';
            option.dataset.phone = customer.phone || '';
            customerSelect.appendChild(option);
            customerSelect.value = String(customer.id);
            syncCustomerFields();
            closeCustomerModal();
            showToast('Customer added successful');
        })
        .catch(error => {
            alert(error.message || 'Could not add customer.');
        })
        .finally(() => {
            submitButton.disabled = false;
        });
}

function updateTotals(){

    let totalQty = cart.reduce((sum, item) => sum + item.qty, 0);

    let totalDiscount = cart.reduce((sum, item) => sum + item.discount, 0);

    let grandTotal = cart.reduce((sum, item) => {

        return sum + ((item.price * item.qty) - item.discount);

    }, 0);

    document.getElementById('totalQty').innerText = totalQty;

    document.getElementById('totalDiscount').innerText = money(totalDiscount);

    document.getElementById('grandTotal').innerText = money(grandTotal);

    calculatePayments();
}

function calculatePayments(){

    let totalPaid = 0;

    document.querySelectorAll('.payment-input')
        .forEach(input => {

            totalPaid += parseFloat(input.value) || 0;

        });

    let payableItems = isEditMode ? cart.filter(item => !item.existing) : cart;
    let grandTotal = saleTotal(payableItems);

    let balance = grandTotal - totalPaid;

    let change = 0;

    if(balance < 0){

        change = Math.abs(balance);

        balance = 0;
    }

    document.getElementById('paidAmount')
        .innerText = money(totalPaid);

    document.getElementById('changeAmount')
        .innerText = money(change);
}

function convertAmount(value){
    return (parseFloat(value) || 0) * exchangeRate;
}

function collectPayments(){

    let payments = [];
    let creditSale = document.querySelector('.payment-credit-checkbox:checked') !== null;

    document.querySelectorAll('.payment-input')
        .forEach(input => {

            let amount = parseFloat(input.value) || 0;

            if(amount > 0){
                let referenceInput = document.querySelector(
                    `[data-payment-reference-for="${input.dataset.paymentMethodId}"]`
                );

                payments.push({
                    payment_method_id: input.dataset.paymentMethodId,
                    amount: amount,
                    reference_no: referenceInput ? referenceInput.value.trim() : ''
                });
            }
        });

    return {
        payments,
        creditSale
    };
}

function setSaleButtonsDisabled(disabled){

    document.querySelectorAll('.sale-btn')
        .forEach(button => {
            button.disabled = disabled;
        });
}

function selectedCustomerId(){
    return document.getElementById('customerId')?.value || '';
}

function validateActualCustomer(actionName){
    if(!selectedCustomerId() || selectedCustomerId() === '1'){
        alert(`Add or select the actual customer before ${actionName}. Walk in customer cannot be used.`);
        document.getElementById('openCustomerModal')?.focus();
        return false;
    }

    return true;
}

function resetSale(){

    cart = [];

    renderCart();

    const customerId = document.getElementById('customerId');
    if(defaultCustomer && customerId){
        customerId.value = String(defaultCustomer.id);
    }
    document.getElementById('customerPhone').value = '';
    syncCustomerFields();

    document.querySelectorAll('.payment-input')
        .forEach(input => {
            input.value = '';
        });
    document.querySelectorAll('.payment-credit-checkbox')
        .forEach(input => {
            input.checked = false;
        });

    calculatePayments();
    productSearch.focus();
}

function syncProductStock(stockLevels){
    if(!stockLevels || typeof stockLevels !== 'object'){
        return;
    }

    Object.entries(stockLevels).forEach(([productId, quantity]) => {
        const product = products.find(item => Number(item.id) === Number(productId));
        if(product){
            product.stock_quantity = Number(quantity || 0);
        }
    });
}

function saleTotal(items){
    return items.reduce((sum, item) => sum + ((item.price * item.qty) - item.discount), 0);
}

function showToast(message){

    let toast = document.getElementById('posToast');

    toast.innerText = message;
    toast.style.display = 'block';

    setTimeout(() => {
        toast.style.display = 'none';
    }, 1000);
}

function saveCreditSale(){
    if(!canCreditSale){
        alert('You do not have permission to post credit sales.');
        return;
    }

    if(!validateActualCustomer('saving a credit sale')){
        return;
    }

    saveSale(true, true);
}

function saveQuotation(){
    if(cart.length === 0){
        alert('Add at least one item before saving quotation.');
        productSearch.focus();
        return;
    }

    setSaleButtonsDisabled(true);

    fetch(@json($quotationUrl), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            customer_id: selectedCustomerId(),
            customer_name: selectedCustomerName(),
            customer_phone: document.getElementById('customerPhone').value,
            sale_mode: saleMode,
            items: cart.map(item => ({
                id: item.id,
                qty: item.qty,
                discount: item.discount
            }))
        })
    })
        .then(async response => {
            let data = await response.json();

            if(!response.ok){
                throw new Error(data.message || 'Could not save quotation.');
            }

            resetSale();
            showToast('Quotation added successful');
        })
        .catch(error => {
            alert(error.message || 'Could not save quotation.');
        })
        .finally(() => {
            setSaleButtonsDisabled(false);
        });
}

function sendStkPush(){
    if(!canMpesaStk){
        alert('You do not have permission to send M-Pesa STK Push.');
        return;
    }

    if(!document.getElementById('customerPhone').value.trim()){
        const phone = prompt('Enter customer M-Pesa phone number');

        if(!phone){
            return;
        }

        document.getElementById('customerPhone').value = phone;
    }

    saveSale(false, false, true);
}

function saveSale(printReceipt, forceCreditSale = false, mpesaStk = false, mpesaTransactionId = null){

    if(!forceCreditSale && !mpesaStk && !mpesaTransactionId && ((printReceipt && !canSaveAndPrint) || (!printReceipt && !canSaveSale))){
        alert('You do not have permission to use this sale action.');
        return;
    }

    if(shiftManagementEnabled && !hasActiveShift){
        alert('Open your shift before selling.');
        return;
    }

    let saleItems = cart.filter(item => !item.existing);

    if((isEditMode ? saleItems : cart).length === 0){
        alert('Add at least one item before saving the sale.');
        productSearch.focus();
        return;
    }

    let grandTotal = saleTotal(cart);
    let amountDue = isEditMode ? saleTotal(saleItems) : grandTotal;

    const paymentData = collectPayments();

    let totalPaid = paymentData.payments
        .reduce((sum, payment) => sum + payment.amount, 0);

    if(totalPaid < amountDue && !paymentData.creditSale && !forceCreditSale && !mpesaStk && !mpesaTransactionId){
        alert(isEditMode ? 'Full payment is required for the added items.' : 'Full payment is required before saving this sale.');
        return;
    }

    let receiptWindow = null;

    if(printReceipt){
        receiptWindow = window.open('', 'JEVAPOSReceipt', 'width=380,height=650');

        if(!receiptWindow){
            alert('Allow popups to print the receipt.');
            return;
        }

        receiptWindow.document.write('Preparing receipt...');
    }

    setSaleButtonsDisabled(true);

    fetch(@json($saleUrl), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            customer_id: document.getElementById('customerId')?.value || '',
            customer_name: selectedCustomerName(),
            customer_phone: document.getElementById('customerPhone').value,
            sale_mode: saleMode,
            items: (isEditMode ? saleItems : cart).map(item => ({
                id: item.id,
                qty: item.qty,
                discount: item.discount
            })),
            payments: forceCreditSale ? [] : paymentData.payments,
            credit_sale: paymentData.creditSale || forceCreditSale,
            mpesa_stk: mpesaStk,
            mpesa_transaction_id: mpesaTransactionId,
            print_receipt: printReceipt
        })
    })
        .then(async response => {

            let data = await response.json();

            syncProductStock(data.stock_levels);

            if(!response.ok){
                throw new Error(data.message || 'Could not save sale.');
            }

            if(printReceipt){
                printSaleReceipt(data.sale, receiptWindow);
            }

            resetSale();

            if(mpesaTransactionId){
                document.getElementById('mpesaTransactionsModal')?.classList.remove('is-visible');
                refreshMpesaTransactions();
            }

            showToast(mpesaStk ? 'STK Push sent successful' : (mpesaTransactionId ? 'M-Pesa payment claimed successful' : (isEditMode ? 'Sale updated successful' : 'Sale added successful')));

            if(isEditMode){
                window.location.href = '{{ url('/sales') }}';
            }
        })
        .catch(error => {
            if(receiptWindow){
                receiptWindow.close();
            }

            alert(error.message || 'Could not save sale.');
        })
        .finally(() => {
            setSaleButtonsDisabled(false);
        });
}

function focusPaymentByName(name){
    const input = Array.from(document.querySelectorAll('.payment-input'))
        .find(input => (input.dataset.paymentMethodName || '').includes(name));

    if(input){
        input.focus();
        preparePaymentInput(input);
    }
}

function preparePaymentInput(input){
    if(!input){
        return;
    }

    if(input.value.trim() === ''){
        const payableItems = isEditMode ? cart.filter(item => !item.existing) : cart;
        const amountDue = saleTotal(payableItems);
        const paidByOtherMethods = Array.from(document.querySelectorAll('.payment-input'))
            .filter(otherInput => otherInput !== input)
            .reduce((sum, otherInput) => sum + (parseFloat(otherInput.value) || 0), 0);

        input.value = Math.max(amountDue - paidByOtherMethods, 0).toFixed(2);
        calculatePayments();
    }

    requestAnimationFrame(() => input.select());
}

document.addEventListener('keydown', event => {
    if(['F1', 'F2', 'F3', 'F4', 'F5'].includes(event.key)){
        event.preventDefault();
    }

    if(event.key === 'F1'){
        const qtyInput = document.querySelector('.cart-qty-input:not(:disabled)') || document.getElementById('defaultQty');
        qtyInput.focus();
        qtyInput.select();
    }

    if(event.key === 'F2'){
        focusPaymentByName('cash');
    }

    if(event.key === 'F3'){
        focusPaymentByName('mpesa');
    }

    if(event.key === 'F4' && canSaveSale){
        saveSale(false);
    }

    if(event.key === 'F5' && canSaveAndPrint){
        saveSale(true);
    }
});

function money(value){
    return currencyCode + ' ' + (parseFloat(value) || 0).toFixed(2);
}

function escapeHtml(value){
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function formatReceiptDate(value){
    const date = new Date(value);
    if(Number.isNaN(date.getTime())){
        return String(value || '');
    }

    const parts = Object.fromEntries(new Intl.DateTimeFormat('en-GB', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hourCycle: 'h23'
    }).formatToParts(date).map(item => [item.type, item.value]));

    return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}`;
}

function printSaleReceipt(sale, receiptWindow){

    let branch = sale.branch || {};
    let cashier = sale.user || {};
    let customer = sale.customer || {};
    let receiptScale = (parseFloat('{{ $receiptSize }}') || 100) / 100;
    let receiptLayoutWidth = (72 / receiptScale).toFixed(2);

    let itemRows = (sale.items || []).map(item => `
        <tr>
            <td>
                <strong>${escapeHtml(item.product_name)}</strong><br>
                <small>${escapeHtml(item.barcode || '')}</small>
            </td>
            <td class="num">${money(item.quantity)}</td>
            <td class="num">${money(item.unit_price)}</td>
            <td class="num">${money(item.line_total)}</td>
        </tr>
    `).join('');

    let paymentRows = (sale.payments || []).map(payment => {
        const methodName = payment.payment_method?.name || 'Payment';
        const isMpesa = /m-?pesa/i.test(methodName);
        return `
        <tr>
            <td>${escapeHtml(methodName)}</td>
            <td class="num">${money(payment.amount)}</td>
        </tr>
        ${payment.reference_no ? `<tr><td colspan="2">${isMpesa ? 'M-Pesa Transaction Code' : 'Transaction Code'}: ${escapeHtml(payment.reference_no)}</td></tr>` : ''}
    `}).join('');

    let branchDetails = showBranchDetails ? `
        <p>${escapeHtml(branch.address || '')}</p>
        <p>${escapeHtml(branch.phone || '')}</p>
        <p>${escapeHtml(branch.email || '')}</p>
    ` : '';
    let businessPinLine = businessTaxPin ? `<p><strong>PIN:</strong> ${escapeHtml(businessTaxPin)}</p>` : '';
    let customerDetails = showCustomerDetails ? `
        <p><strong>Customer:</strong> ${escapeHtml(customer.name || sale.customer_name || '-')}</p>
        ${showCustomerPin && customer.tax_pin ? `<p><strong>Customer PIN:</strong> ${escapeHtml(customer.tax_pin)}</p>` : ''}
    ` : '';
    let discountRow = showDiscount ? `<tr><td>Discount</td><td class="num">${money(sale.discount_amount)}</td></tr>` : '';

    let taxRows = showTaxSummary ? `
        <tr>
            <td>VAT / Tax</td>
            <td class="num">${money(sale.tax_amount)}</td>
        </tr>
    ` : '';

    receiptWindow.document.open();
    receiptWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Receipt ${escapeHtml(sale.invoice_no)}</title>
            <style>
                @page {
                    size: 72mm 210mm;
                    margin: 0;
                }
                * { box-sizing: border-box; }
                html {
                    margin: 0;
                    padding: 0;
                    width: 72mm;
                }
                body {
                    width: 72mm;
                    margin: 0;
                    padding: 0;
                    font-family: Arial, sans-serif;
                    color: #111;
                    font-size: 12px;
                    overflow: hidden;
                }
                .receipt {
                    width: ${receiptLayoutWidth}mm;
                    padding: 1mm;
                    transform: scale(${receiptScale});
                    transform-origin: top left;
                }
                .center { text-align: center; }
                h1 {
                    margin: 0 0 4px;
                    font-size: 18px;
                    text-transform: uppercase;
                }
                p { margin: 2px 0; }
                .line {
                    border-top: 1px dashed #111;
                    margin: 10px 0;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                th, td {
                    padding: 4px 0;
                    vertical-align: top;
                }
                th {
                    border-bottom: 1px solid #111;
                    text-align: left;
                }
                .num { text-align: right; }
                .totals td {
                    padding: 3px 0;
                }
                .grand {
                    font-size: 15px;
                    font-weight: 800;
                }
                @media print {
                    html,
                    body {
                        width: 72mm;
                        margin: 0;
                    }

                    .receipt {
                        width: ${receiptLayoutWidth}mm;
                    }
                }
            </style>
        </head>
        <body>
        <div class="receipt">
            <div class="center">
                <h1>${escapeHtml(branch.name || 'JEVAPOS')}</h1>
                ${branchDetails}
                ${businessPinLine}
            </div>

            <div class="line"></div>

            <p><strong>Receipt:</strong> ${escapeHtml(sale.invoice_no)}</p>
            <p><strong>Date:</strong> ${escapeHtml(formatReceiptDate(sale.sale_date))}</p>
            ${showCashierName ? `<p><strong>Cashier:</strong> ${escapeHtml(cashier.name || '')}</p>` : ''}
            ${customerDetails}

            <div class="line"></div>

            <table>
                <thead>
                    <tr>
                        <th>Item</th>
                        <th class="num">Qty</th>
                        <th class="num">Price</th>
                        <th class="num">Total</th>
                    </tr>
                </thead>
                <tbody>${itemRows}</tbody>
            </table>

            <div class="line"></div>

            <table class="totals">
                <tr>
                    <td>${showTaxSummary ? 'Taxable Amount' : 'Subtotal'}</td>
                    <td class="num">${money(sale.subtotal)}</td>
                </tr>
                ${discountRow}
                ${taxRows}
                <tr class="grand">
                    <td>Total</td>
                    <td class="num">${money(sale.total_amount)}</td>
                </tr>
                <tr>
                    <td>Paid</td>
                    <td class="num">${money(sale.paid_amount)}</td>
                </tr>
                <tr>
                    <td>Tendered</td>
                    <td class="num">${money(sale.tendered_amount)}</td>
                </tr>
                <tr>
                    <td>Change</td>
                    <td class="num">${money(sale.change_amount)}</td>
                </tr>
            </table>

            ${paymentRows ? `
                <div class="line"></div>
                <table>
                    <tbody>${paymentRows}</tbody>
                </table>
            ` : ''}

            <div class="line"></div>

            <p class="center">${escapeHtml(receiptFooter || 'Thank you.')}</p>
        </div>

            <script>
                window.onload = function () {
                    window.print();
                    window.onafterprint = function () { window.close(); };
                };
            <\/script>
        </body>
        </html>
    `);
    receiptWindow.document.close();
}

function selectedCustomerName(){
    const selected = document.getElementById('customerId')?.selectedOptions?.[0];
    if(!selected || !selected.value){
        return '';
    }

    return selected?.dataset?.name || selected?.textContent?.trim() || '';
}

function syncCustomerFields(){
    const selected = document.getElementById('customerId')?.selectedOptions?.[0];
    const phone = selected?.dataset?.phone || '';
    const phoneInput = document.getElementById('customerPhone');

    if(phoneInput && (!selected || !selected.value || phone)){
        phoneInput.value = phone;
    }
}

document.getElementById('customerId')?.addEventListener('change', syncCustomerFields);

if(isEditMode){
    if(editSale.customer_id && document.getElementById('customerId')){
        document.getElementById('customerId').value = String(editSale.customer_id);
    }
    document.getElementById('customerPhone').value = editSale.customer_phone || '';
}

syncCustomerFields();
renderCart();
productSearch.focus();

</script>

@endsection