@extends('layouts.index')

@section('content')
    <div class="content-wrapper">
        <!-- Content Header -->
        <section class="content-header m-3" style="display: flex; justify-content: space-between; align-items: center;">
            <h1 style="margin: 0;"><i class="fa fa-shopping-cart"></i> Shop</h1>
            <div>
                <a href="{{ url('/Purchase/orders?mine=1') }}" class="btn btn-default">
                    <i class="fa fa-list"></i> Orders
                </a>
                <button id="fullscreenBtn" class="btn btn-default ml-2">
                    <i class="fa fa-expand"></i> Full Screen
                </button>
            </div>
        </section>

        <!-- Main content -->
        <section class="content" id="requestContent">
            <div class="row">
                <!-- Left Panel: Products -->
                <div class="col-md-8">
                    <div class="box box-primary p-3">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="searchProduct"
                                        placeholder="🔍 Search product...">
                                </div>
                            </div>
                        </div>

                        {{-- ═══════════════════════════════════════
                             WATER PRODUCTS SECTION
                        ══════════════════════════════════════════ --}}
                        @if ($packaged_products->count() > 0 || $refill_products->count() > 0)
                            <div class="box-header with-border" style="padding: 8px 12px 0 12px;">
                                <ul class="nav nav-tabs" id="waterTabs" style="border-bottom:none;">
                                    @if($packaged_products->count() > 0)
                                    <li class="active"><a href="#tab-packaged" data-toggle="tab">📦 Packaged</a></li>
                                    @endif
                                    @if($refill_products->count() > 0)
                                    <li {{ $packaged_products->count() == 0 ? 'class=active' : '' }}>
                                        <a href="#tab-refill" data-toggle="tab">💧 Refill</a>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                            <div class="box-body" style="padding:10px;">
                                <div class="tab-content">

                                    {{-- ── TAB 1: Packaged Water ────────────────────── --}}
                                    @if($packaged_products->count() > 0)
                                    <div class="tab-pane active" id="tab-packaged">
                                        <div class="row">
                                            @foreach ($packaged_products as $product)
                                                @php
                                                    $hasVariants = $product->variants->count() > 0;
                                                    if ($hasVariants) {
                                                        $variants = $product->variants->where('variant_status', '!=', 'inactive');
                                                        $isDual   = $variants->whereIn('selling_unit', ['bottle','pack'])->count() > 0;
                                                        $anyStock = $variants->sum('variant_quantity') > 0;
                                                        $minPrice = $variants->min('variant_price');
                                                    } else {
                                                        $variants = collect([]);
                                                        $isDual   = false;
                                                        $anyStock = $product->product_quantity > 0;
                                                        $minPrice = $product->product_price;
                                                    }
                                                @endphp
                                                <div class="col-xs-6 col-sm-4 col-md-3 mb-2 product-card"
                                                     data-category-id="{{ $product->category_id }}"
                                                     data-name="{{ strtolower($product->product_name) }}">
                                                    
                                                    <div class="panel panel-default text-center {{ $hasVariants ? 'water-packaged-tile has-variants' : 'product-tile simple-product' }} {{ !$anyStock ? 'oos' : '' }}"
                                                         data-id="{{ $product->id }}"
                                                         data-product-id="{{ $product->id }}"
                                                         data-name="{{ $product->product_name }}"
                                                         data-product-name="{{ $product->product_name }}"
                                                         @if($hasVariants)
                                                             data-variants="{{ json_encode($variants->values()) }}"
                                                             data-dual="{{ $isDual ? 'true' : 'false' }}"
                                                         @else
                                                             data-price="{{ $product->product_price }}"
                                                             data-stock="{{ $product->product_quantity }}"
                                                         @endif
                                                         style="border-radius:8px; padding:6px; min-height:150px;
                                                                cursor:{{ $anyStock ? 'pointer' : 'not-allowed' }};
                                                                opacity:{{ $anyStock ? '1' : '0.5' }};
                                                                transition: box-shadow 0.18s;">
                                                        <div class="panel-body" style="padding:4px;">
                                                            <div style="font-size:26px;">📦</div>
                                                            <strong style="font-size:11px; display:block; min-height:28px;">
                                                                {{ $product->product_name }}
                                                            </strong>
                                                            <small class="text-success" style="font-weight:600;">KES {{ number_format($minPrice, 2) }}</small><br>
                                                            
                                                            @if($hasVariants)
                                                                @if($isDual)
                                                                    <small class="text-primary">Bottle / Pack</small><br>
                                                                @endif
                                                                @if($anyStock)
                                                                    <span class="label label-info" style="font-size:10px; margin-top:2px;">
                                                                        <i class="fa fa-tags"></i> Choose Size
                                                                    </span>
                                                                @else
                                                                    <span class="label label-warning" style="font-size:10px; margin-top:2px;">No Stock</span>
                                                                @endif
                                                            @else
                                                                <small class="{{ $product->product_quantity > 0 && $product->product_quantity <= 5 ? 'text-warning' : 'text-muted' }}" style="display:block; margin-top:2px; margin-bottom:2px;">
                                                                    Stock: {{ $product->product_quantity }}
                                                                </small>
                                                                @if($anyStock)
                                                                    <span class="label label-primary" style="font-size:11px; margin-top:2px; display:inline-block;">
                                                                        <i class="fa fa-plus-circle"></i> Add to Cart
                                                                    </span>
                                                                @else
                                                                    <span class="label label-warning" style="font-size:10px; margin-top:2px; display:inline-block;">Out of stock</span>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @endif

                                    {{-- ── TAB 2: Refill Water ─────────────────────── --}}
                                    @if($refill_products->count() > 0)
                                    <div class="tab-pane {{ $packaged_products->count() == 0 ? 'active' : '' }}" id="tab-refill">
                                        <div class="row">
                                            @foreach ($refill_products as $refill)
                                                <div class="col-xs-6 col-sm-4 col-md-4 mb-2">
                                                    <button type="button"
                                                            class="btn btn-block water-refill-btn"
                                                            data-refill-id="{{ $refill->id }}"
                                                            data-refill-name="{{ $refill->name }}"
                                                            data-refill-price="{{ $refill->price }}"
                                                            style="padding:14px 8px; border-radius:8px;
                                                                   background:#e8f4fd; border:1px solid #3c8dbc;
                                                                   font-size:13px; line-height:1.4;">
                                                        <i class="fa fa-tint text-primary" style="font-size:18px;"></i><br>
                                                        <strong>{{ $refill->name }}</strong><br>
                                                        <span class="text-success" style="font-weight:bold;">KES {{ number_format($refill->price, 2) }}</span>
                                                    </button>
                                                </div>
                                            @endforeach
                                        </div>
                                        <p class="text-muted" style="font-size:11px; margin-top:8px;">
                                            <i class="fa fa-info-circle"></i> Refills have no stock limit – they are served from the main tank.
                                        </p>
                                    </div>
                                    @endif

                                </div>{{-- tab-content --}}
                            </div>
                        </div>
                        @endif
                    </div>{{-- box box-primary --}}


                <!-- Right Panel: Cart -->
                <div class="col-md-4">
                    <div class="box box-success p-3">
                        <form id="shopForm" action="/Purchase/orders/new/post" method="POST">
                            @csrf

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Order No</label>
                                        <input type="text" class="form-control" name="request_no" value="{{ $invoice }}" readonly>
                                        <input type="hidden" name="customer_id" id="customer_id" value="{{ $defaultCustomer->id ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Order Date</label>
                                        <input type="date" class="form-control" name="order_date"
                                            value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-10">
                                    <div class="form-group">
                                        <label>Customer</label>
                                        <input type="text" class="form-control" id="searchCustomer"
                                            placeholder="Search Customers" value="{{ $defaultCustomer->name ?? '' }}">
                                        <ul id="customerResults" class="list-group mt-2" style="display:none;"></ul>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>&nbsp;</label><br>
                                    <a data-toggle="modal" data-target="#customer-add-modal" href="#"
                                        class="btn app-color" title="Add Customer">
                                        <i class="fa fa-user-plus"></i>
                                    </a>
                                </div>
                            </div>

                            <!-- Cart Table -->
                            <table class="table table-bordered table-condensed" id="cartTable">
                                <thead class="bg-primary" style="color:#fff;">
                                    <tr>
                                        <th>Product</th>
                                        <th>Qty</th>
                                        <th>Subtotal</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="product_table">
                                    <tr id="emptyCartRow">
                                        <td colspan="4" class="text-center text-muted"><em>Cart is empty</em></td>
                                    </tr>
                                </tbody>
                            </table>

                            <table class="table table-bordered">
                                <tr>
                                    <th>Subtotal</th>
                                    <td id="subtotal">KES 0.00</td>
                                </tr>
                                <tr>
                                    <th>Discount (%)</th>
                                    <td><input type="number" id="discountPercent" class="form-control input-sm" value="0" min="0" max="100"></td>
                                </tr>
                                <tr>
                                    <th>Total</th>
                                    <td id="total"><strong>KES 0.00</strong></td>
                                </tr>
                            </table>

                            <button type="button" id="submitOrderBtn" class="btn btn-success btn-block btn-lg">
                                <i class="fa fa-check-circle"></i> Pay
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

<!-- Pick Variant Modal -->
<div class="modal fade" id="pickVariantModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="max-width: 400px;">
        <div class="modal-content">
            <div class="modal-header" style="background:#3c8dbc; color:#fff;">
                <button type="button" class="close" data-dismiss="modal" style="color:#fff;opacity:1;"><span>&times;</span></button>
                <h4 class="modal-title" id="pickVariantTitle">Choose Size</h4>
            </div>
            <div class="modal-body" style="padding: 10px;">
                <div id="variantOptionsList"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- POS Checkout Modal -->
<div class="modal fade" id="cartConfirmationModal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success" style="color:#fff;">
                <h4 class="modal-title"><i class="fa fa-shopping-cart"></i> POS Checkout</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- Left: Order Summary -->
                    <div class="col-md-6">
                        <table class="table table-bordered table-condensed text-sm">
                            <thead class="bg-gray"><tr><th>Product</th><th>Qty</th><th>Subtotal</th></tr></thead>
                            <tbody id="confirmationCartTable"></tbody>
                            <tfoot>
                                <tr><th colspan="2">Subtotal</th><td id="confirmationSubtotal">KES 0.00</td></tr>
                                <tr><th colspan="2">Discount</th><td id="confirmationDiscount">0%</td></tr>
                                <tr class="bg-success" style="color:#fff;"><th colspan="2">Total Amount</th><td id="confirmationTotal" style="font-size:16px; font-weight:bold;">KES 0.00</td></tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- Right: Payment Actions -->
                    <div class="col-md-6 bg-light text-center" style="padding: 20px; border-left: 1px solid #ddd;">
                        <h3 style="margin-top:0;">Amount Due</h3>
                        <h1 class="text-success" style="font-weight:bold; margin-bottom:20px;" id="amountDueDisplay">KES 0.00</h1>

                        <div class="form-group text-left">
                            <label>Payment Method</label>
                            <select class="form-control input-lg" id="paymentMethod" name="payment_method">
                                <option value="cash">Cash</option>
                                <option value="mpesa">M-Pesa STK Push</option>
                                <option value="mpesa_manual">M-Pesa Manual (Paybill)</option>
                                <option value="pay_later">Pay Later</option>
                            </select>
                        </div>

                        <!-- Cash Options -->
                        <div id="cashPaymentSection" class="text-left payment-section">
                            <div class="form-group">
                                <label>Amount Tendered (KES)</label>
                                <input type="number" id="amountTendered" class="form-control input-lg font-weight-bold" min="0" step="0.01" placeholder="Enter Cash Given...">
                            </div>
                            <div class="form-group">
                                <label>Change Due</label>
                                <input type="text" id="changeDue" class="form-control input-lg text-danger font-weight-bold" readonly value="KES 0.00">
                            </div>
                        </div>

                        <!-- M-Pesa STK Push -->
                        <div id="mpesaPaymentSection" class="text-left payment-section" style="display: none;">
                            <div class="form-group">
                                <label>M-Pesa Phone Number</label>
                                <input type="text" id="mpesaPhoneNumber" class="form-control input-lg" placeholder="e.g. 0712345678 or 254712345678">
                                <small class="text-muted">An STK push prompt will appear on this phone.</small>
                            </div>
                        </div>

                        <!-- M-Pesa Manual Paybill -->
                        <div id="mpesaManualSection" class="text-left payment-section" style="display: none;">
                            <div class="alert alert-info">
                                <strong>Instructions:</strong>
                                <br>1. Go to M-Pesa -> Lipa na M-Pesa -> Paybill
                                <br>2. Enter Paybill: <strong>{{ config('mpesa.paybill_number', '5477496') }}</strong>
                                <br>3. Enter Account: <strong><span class="auto-acc-display">{{ $shopAccountNumber ?? '' }}</span></strong>
                                <br>4. Enter Amount: <strong id="mpesaManualAmountDisplay"></strong>
                            </div>
                            <p class="text-muted text-sm"><i class="fa fa-info-circle"></i> Once the customer pays, complete the sale. The system will automatically reconcile the payment when received.</p>
                        </div>

                        <!-- Pay Later -->
                        <div id="payLaterSection" class="text-left payment-section" style="display: none;">
                            <p class="text-warning"><i class="fa fa-info-circle"></i> Order will be saved as unpaid. The customer must pay within 24 hours.</p>
                        </div>

                        <div id="checkoutStatus" class="alert mt-3" style="display: none;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal" id="cancelCheckoutBtn">Cancel</button>
                <button type="button" class="btn btn-success btn-lg" id="confirmSubmitBtn">
                    <i class="fa fa-check"></i> Complete Sale
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Customer Add Modal -->
<div class="modal fade" id="customer-add-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="customerForm" method="post" action="{{ route('client.store') }}">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Add New Customer</h4>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group"><label>Full Name *</label><input type="text" name="name" class="form-control" required></div>
                    <div class="form-group"><label>Phone *</label><input type="text" name="phone" class="form-control" required></div>
                    <div class="form-group"><label>Email</label><input type="email" name="email" class="form-control"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save Customer</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
let cart = [];

function getCartKey(item) {
    if (item.refill_product_id) return 'refill-' + item.refill_product_id;
    const base = item.id + (item.variant_id ? '-' + item.variant_id : '');
    return item.deduct > 1 ? base + '-pack' : base;
}

function updateCartView() {
    let tbody = '';
    let subtotal = 0;

    if (cart.length === 0) {
        $('#product_table').html('<tr><td colspan="4" class="text-center text-muted"><em>Cart is empty</em></td></tr>');
    } else {
        cart.forEach(item => {
            subtotal += item.qty * item.price;
            const key = getCartKey(item);
            const label = item.name + (item.variant_name ? ' <span class="text-muted" style="font-size:11px;">(' + item.variant_name + ')</span>' : '');
            const atMax = item.qty >= item.stock;
            tbody += `
                <tr>
                    <td style="font-size:12px;">${label}</td>
                    <td>
                        <div class="input-group" style="width:90px;">
                            <span class="input-group-btn">
                                <button class="btn btn-xs btn-default qty-minus" data-key="${key}" type="button">−</button>
                            </span>
                            <input type="text" class="form-control input-xs text-center" value="${item.qty}" readonly style="height:24px; padding:0;">
                            <span class="input-group-btn">
                                <button class="btn btn-xs btn-default qty-plus" data-key="${key}" type="button" ${atMax ? 'disabled title="Max stock"' : ''}>+</button>
                            </span>
                        </div>
                        ${atMax ? '<small class="text-warning" style="font-size:10px;">Max: '+item.stock+'</small>' : ''}
                    </td>
                    <td style="font-size:12px;">KES ${(item.qty * item.price).toFixed(2)}</td>
                    <td><button class="btn btn-xs btn-danger remove-item" data-key="${key}" type="button"><i class="fa fa-times"></i></button></td>
                </tr>`;
        });
        $('#product_table').html(tbody);
    }

    $('#subtotal').text('KES ' + subtotal.toFixed(2));
    const discount = parseFloat($('#discountPercent').val()) || 0;
    const total = subtotal * (1 - discount / 100);
    $('#total').html('<strong>KES ' + total.toFixed(2) + '</strong>');
}

function filterAndSearch() {
    const query = $('#searchProduct').val().toLowerCase();
    const checkedCats = $('.category-filter:checked').map(function() { return $(this).val(); }).get();
    $('.product-card').each(function() {
        const name = $(this).data('name') || '';
        const cat  = String($(this).data('category-id'));
        $(this).toggle(name.includes(query) && (checkedCats.length === 0 || checkedCats.includes(cat)));
    });
}

$(document).ready(function () {

    updateCartView();

    // Fullscreen
    $('#fullscreenBtn').on('click', function () {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen && document.documentElement.requestFullscreen();
            $(this).html('<i class="fa fa-compress"></i> Exit Full Screen');
        } else {
            document.exitFullscreen && document.exitFullscreen();
            $(this).html('<i class="fa fa-expand"></i> Full Screen');
        }
    });

    // ── Product card click ──────────────────────────────────────────────────
    $(document).on('click', '.product-tile:not(.oos)', function () {
        const $tile = $(this), id = $tile.data('id'), name = $tile.data('name');

        if ($tile.hasClass('has-variants')) {
            const variants = $tile.data('variants');
            $('#pickVariantTitle').text(name + ' — Choose Size');
            let html = '<div class="list-group">';
            variants.forEach(v => {
                const qty = parseInt(v.variant_quantity) || 0, inStock = qty > 0;
                const price = parseFloat(v.variant_price).toFixed(2);
                const stockLbl = inStock
                    ? `<small class="${qty <= 5 ? 'text-warning' : 'text-muted'}">Stock: ${qty}</small>`
                    : `<small class="text-danger"><strong>Out of stock</strong></small>`;
                if (inStock) {
                    html += `<button type="button" class="list-group-item list-group-item-action add-variant-to-cart"
                        data-id="${id}" data-name="${name}" data-vid="${v.id}" data-vname="${v.variant_name}"
                        data-vprice="${v.variant_price}" data-vstock="${qty}" style="padding:10px 15px;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name}</strong><br>${stockLbl}</div>
                            <span class="text-primary" style="font-size:15px; font-weight:bold;">KES ${price}</span>
                        </div>
                    </button>`;
                } else {
                    html += `<div class="list-group-item" style="opacity:0.5; padding:10px 15px; cursor:not-allowed;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name}</strong><br>${stockLbl}</div>
                            <span class="text-muted" style="font-size:15px;">KES ${price}</span>
                        </div>
                    </div>`;
                }
            });
            html += '</div>';
            $('#variantOptionsList').html(html);
            $('#pickVariantModal').modal('show');
        } else {
            const price = parseFloat($tile.data('price')), stock = parseInt($tile.data('stock')) || 9999;
            const key = String(id), index = cart.findIndex(p => getCartKey(p) === key);
            if (index !== -1) {
                if (cart[index].qty < stock) { cart[index].qty++; }
                else { alert('Maximum stock (' + stock + ') already in cart.'); }
            } else {
                cart.push({ id, name, variant_id: null, variant_name: null, price, qty: 1, stock });
            }
            updateCartView();
        }
    });

    $(document).on('click', '.add-variant-to-cart', function () {
        const id     = $(this).data('id'),   name   = $(this).data('name');
        const vid    = $(this).data('vid'),   vname  = $(this).data('vname');
        const vprice = parseFloat($(this).data('vprice'));
        const vstock = parseInt($(this).data('vstock')) || 999;
        const deduct = parseInt($(this).data('deduct')) || 1;  // bottles to deduct per sale
        const key    = id + '-' + vid + (deduct > 1 ? '-pack' : '');
        const index  = cart.findIndex(p => getCartKey(p) === key);
        if (index !== -1) {
            if (cart[index].qty < vstock) { cart[index].qty++; }
            else { alert('Max stock (' + vstock + ') already in cart.'); }
        } else {
            cart.push({ id, name, variant_id: vid, variant_name: vname,
                        price: vprice, qty: 1, stock: vstock, deduct });
        }
        $('#pickVariantModal').modal('hide');
        updateCartView();
    });

    // ── Cart qty controls ───────────────────────────────────────────────────
    $(document).on('click', '.qty-plus', function () {
        const key = $(this).data('key').toString(), index = cart.findIndex(p => getCartKey(p) === key);
        if (index !== -1 && cart[index].qty < cart[index].stock) { cart[index].qty++; updateCartView(); }
    });
    $(document).on('click', '.qty-minus', function () {
        const key = $(this).data('key').toString(), index = cart.findIndex(p => getCartKey(p) === key);
        if (index !== -1) { if (cart[index].qty > 1) { cart[index].qty--; } else { cart.splice(index, 1); } updateCartView(); }
    });
    $(document).on('click', '.remove-item', function () {
        const key = $(this).data('key').toString(), index = cart.findIndex(p => getCartKey(p) === key);
        if (index !== -1) { cart.splice(index, 1); updateCartView(); }
    });

    // ── Water packaged tiles — smart dual-unit picker ───────────────────────
    $(document).on('click', '.water-packaged-tile:not(.oos)', function () {
        const $tile   = $(this);
        const id      = $tile.data('product-id');
        const name    = $tile.data('product-name');
        const variants = $tile.data('variants');

        $('#pickVariantTitle').text(name + ' — Choose');
        let html = '<div class="list-group">';

        variants.forEach(v => {
            const qty     = parseInt(v.variant_quantity) || 0;
            const selUnit = v.selling_unit || 'unit';
            const hasPack = selUnit === 'pack' && v.pack_size > 1 && v.pack_price;

            if (hasPack) {
                // ── This IS the stock pool (tracked in bottles). ──────────────
                // Show TWO options: single bottle & full pack.
                const bottlePrice = parseFloat(v.variant_price);
                const packPrice   = parseFloat(v.pack_price);
                const packSize    = parseInt(v.pack_size);
                const bottlesLeft = qty; // qty = bottles available
                const packsLeft   = Math.floor(qty / packSize);

                // Single bottle option
                if (bottlesLeft > 0) {
                    const stockClr = bottlesLeft <= 5 ? 'text-warning' : 'text-muted';
                    html += `<button type="button" class="list-group-item list-group-item-action add-variant-to-cart"
                        data-id="${id}" data-name="${name}"
                        data-vid="${v.id}" data-vname="${v.variant_name} — Single Bottle"
                        data-vprice="${bottlePrice.toFixed(2)}" data-vstock="${bottlesLeft}"
                        data-deduct="1"
                        style="padding:10px 15px;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div>
                                <strong>${v.variant_name} — Single Bottle</strong><br>
                                <small class="${stockClr}">Stock: ${bottlesLeft} bottle(s)</small>
                            </div>
                            <span class="text-primary" style="font-size:15px; font-weight:bold;">KES ${bottlePrice.toFixed(2)}</span>
                        </div>
                    </button>`;
                } else {
                    html += `<div class="list-group-item" style="opacity:0.5; padding:10px 15px; cursor:not-allowed;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name} — Single Bottle</strong><br>
                                <small class="text-danger"><strong>Out of stock</strong></small></div>
                            <span class="text-muted" style="font-size:15px;">KES ${bottlePrice.toFixed(2)}</span>
                        </div>
                    </div>`;
                }

                // Full pack option
                if (packsLeft > 0) {
                    const stockClr = packsLeft <= 3 ? 'text-warning' : 'text-muted';
                    html += `<button type="button" class="list-group-item list-group-item-action add-variant-to-cart"
                        data-id="${id}" data-name="${name}"
                        data-vid="${v.id}" data-vname="${v.variant_name} — Pack of ${packSize}"
                        data-vprice="${packPrice.toFixed(2)}" data-vstock="${packsLeft}"
                        data-deduct="${packSize}"
                        style="padding:10px 15px; border-top: 1px dashed #ccc;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div>
                                <strong>${v.variant_name} — Pack of ${packSize}</strong><br>
                                <small class="${stockClr}">Packs available: ${packsLeft}</small>
                            </div>
                            <span class="text-primary" style="font-size:15px; font-weight:bold;">KES ${packPrice.toFixed(2)}</span>
                        </div>
                    </button>`;
                } else {
                    html += `<div class="list-group-item" style="opacity:0.5; padding:10px 15px; cursor:not-allowed; border-top:1px dashed #ccc;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name} — Pack of ${packSize}</strong><br>
                                <small class="text-danger"><strong>No full packs available</strong></small></div>
                            <span class="text-muted" style="font-size:15px;">KES ${packPrice.toFixed(2)}</span>
                        </div>
                    </div>`;
                }

            } else if (selUnit !== 'bottle' || qty > 0) {
                // ── Plain unit/bottle variant — show normally ─────────────────
                const price    = parseFloat(v.variant_price);
                const inStock  = qty > 0;
                const stockClr = qty <= 5 ? 'text-warning' : 'text-muted';
                const stockDisplay = inStock
                    ? `<small class="${stockClr}">Stock: ${qty}</small>`
                    : `<small class="text-danger"><strong>Out of stock</strong></small>`;
                if (inStock) {
                    html += `<button type="button" class="list-group-item list-group-item-action add-variant-to-cart"
                        data-id="${id}" data-name="${name}"
                        data-vid="${v.id}" data-vname="${v.variant_name}"
                        data-vprice="${price.toFixed(2)}" data-vstock="${qty}"
                        data-deduct="1"
                        style="padding:10px 15px;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name}</strong><br>${stockDisplay}</div>
                            <span class="text-primary" style="font-size:15px; font-weight:bold;">KES ${price.toFixed(2)}</span>
                        </div>
                    </button>`;
                } else {
                    html += `<div class="list-group-item" style="opacity:0.5; padding:10px 15px; cursor:not-allowed;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <div><strong>${v.variant_name}</strong><br>${stockDisplay}</div>
                            <span class="text-muted" style="font-size:15px;">KES ${price.toFixed(2)}</span>
                        </div>
                    </div>`;
                }
            }
            // Skip selling_unit='bottle' rows with 0 stock
            // (they are stale rows; the pack variant handles all stock)
        });

        html += '</div>';
        $('#variantOptionsList').html(html);
        $('#pickVariantModal').modal('show');
    });

    // ── Refill water buttons — no stock check, unlimited ────────────────────
    $(document).on('click', '.water-refill-btn', function () {
        const rid   = $(this).data('refill-id');
        const rname = $(this).data('refill-name');
        const rprice= parseFloat($(this).data('refill-price'));
        const key   = 'refill-' + rid;
        const index = cart.findIndex(p => getCartKey(p) === key);
        if (index !== -1) {
            cart[index].qty++;
        } else {
            cart.push({ id: null, name: rname, variant_id: null, variant_name: null,
                        refill_product_id: rid, price: rprice, qty: 1, stock: 99999 });
        }
        updateCartView();
    });

    $('#discountPercent').on('input', updateCartView);
    $('#searchProduct').on('keyup', filterAndSearch);
    $(document).on('change', '.category-filter', filterAndSearch);

    // ── Customer search ─────────────────────────────────────────────────────
    $('#searchCustomer').on('keyup', function () {
        const q = $(this).val();
        if (q.length >= 2) {
            $.ajax({
                url: '{{ route("client.search") }}',
                method: 'GET',
                data: { search: q },
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                success: function (res) {
                    let html = res.length
                        ? res.map(c => `<li class="list-group-item list-group-item-action customer-pick" data-id="${c.id}" data-name="${c.name}" style="cursor:pointer;">${c.name} &middot; <small>${c.phone ?? ''}</small></li>`).join('')
                        : '<li class="list-group-item text-muted">No customer found</li>';
                    $('#customerResults').html(html).show();
                }
            });
        } else {
            $('#customerResults').hide();
            if (q.length === 0) {
                @if(isset($defaultCustomer))
                    $('#customer_id').val('{{ $defaultCustomer->id }}');
                    $('#searchCustomer').val('{{ $defaultCustomer->name }}');
                @else
                    $('#customer_id').val('');
                @endif
            }
        }
    });

    $(document).on('click', '.customer-pick', function () {
        $('#searchCustomer').val($(this).data('name'));
        $('#customer_id').val($(this).data('id'));
        $('#customerResults').hide();
    });

    $(document).on('click', function (e) {
        if (!$(e.target).closest('#searchCustomer, #customerResults').length) { $('#customerResults').hide(); }
    });

    // ── Submit order — open POS checkout modal ──────────────────────────────
    $('#submitOrderBtn').on('click', function () {
        if (cart.length === 0) { alert('Please add at least one product.'); return; }
        if (!$('#customer_id').val()) { alert('Please select a customer.'); return; }

        let tbody = '', subtotal = 0;
        cart.forEach(item => {
            subtotal += item.qty * item.price;
            const label = item.name + (item.variant_name ? ' (' + item.variant_name + ')' : '');
            tbody += `<tr><td>${label}</td><td>${item.qty}</td><td>KES ${(item.qty * item.price).toFixed(2)}</td></tr>`;
        });
        const discount = parseFloat($('#discountPercent').val()) || 0;
        const total = subtotal * (1 - discount / 100);

        $('#confirmationCartTable').html(tbody);
        $('#confirmationSubtotal').text('KES ' + subtotal.toFixed(2));
        $('#confirmationDiscount').text(discount + '%');
        $('#confirmationTotal').text('KES ' + total.toFixed(2));
        $('#amountDueDisplay').text('KES ' + total.toFixed(2));
        $('#amountTendered').val('');
        $('#changeDue').val('KES 0.00');
        $('#checkoutStatus').hide().removeClass('alert-success alert-danger alert-info').text('');

        $('#confirmSubmitBtn').prop('disabled', false).html('<i class="fa fa-check"></i> Complete Sale');
        $('#cancelCheckoutBtn').prop('disabled', false);

        $('#cartConfirmationModal').modal('show');
    });

    // ── Payment method toggle ───────────────────────────────────────────────
    $('#paymentMethod').on('change', function() {
        $('.payment-section').hide();
        const val = $(this).val();
        if (val === 'cash') $('#cashPaymentSection').show();
        else if (val === 'mpesa') $('#mpesaPaymentSection').show();
        else if (val === 'mpesa_manual') {
            $('#mpesaManualSection').show();
            // Pre-fill account & amount when switching to manual paybill
            let s = 0;
            cart.forEach(item => s += item.qty * item.price);
            const d = parseFloat($('#discountPercent').val()) || 0;
            const t = s * (1 - d / 100);
            $('#mpesaManualAmountDisplay').text('KES ' + t.toFixed(2));
        }
        else if (val === 'pay_later') $('#payLaterSection').show();
        $('#checkoutStatus').hide();
    });

    // ── Cash change calculation ─────────────────────────────────────────────
    $('#amountTendered').on('input', function() {
        let subtotal = 0;
        cart.forEach(item => subtotal += item.qty * item.price);
        const discount = parseFloat($('#discountPercent').val()) || 0;
        const totalAmount = subtotal * (1 - discount / 100);
        const tendered = parseFloat($(this).val()) || 0;
        const change = tendered - totalAmount;
        if (change >= 0) {
            $('#changeDue').val('KES ' + change.toFixed(2)).removeClass('text-danger').addClass('text-success');
        } else {
            $('#changeDue').val('KES 0.00').removeClass('text-success').addClass('text-danger');
        }
    });

    // ── POS Checkout Submit ─────────────────────────────────────────────────
    $('#confirmSubmitBtn').on('click', function () {
        let subtotal = 0;
        cart.forEach(item => subtotal += item.qty * item.price);
        const discount = parseFloat($('#discountPercent').val()) || 0;
        const totalAmount = subtotal * (1 - discount / 100);
        const paymentMethod = $('#paymentMethod').val();

        if (paymentMethod === 'cash') {
            const tendered = parseFloat($('#amountTendered').val()) || 0;
            if (tendered < totalAmount) { alert('Amount tendered is less than the total amount due.'); return; }
        }

        let mpesaPhone = '';
        if (paymentMethod === 'mpesa') {
            mpesaPhone = $('#mpesaPhoneNumber').val().trim();
            if (!mpesaPhone) { alert('Please enter M-Pesa phone number.'); return; }
        }

        $('#confirmSubmitBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
        $('#cancelCheckoutBtn').prop('disabled', true);
        $('#checkoutStatus').show().removeClass('alert-danger alert-success').addClass('alert-info').text('Saving order...');

        // Build hidden fields
        $('#shopForm').find('[name^="formData"], [name="discount"], [name="total_amount"], [name="payment_method"], [name="mpesa_phone"], [name="ajax_checkout"]').remove();
        cart.forEach((item, i) => {
            const n = `formData[item_${i+1}]`;
            $('#shopForm').append($('<input>', { type:'hidden', name: n+'[product_id]',      value: item.id ?? '' }));
            $('#shopForm').append($('<input>', { type:'hidden', name: n+'[product_price]',   value: item.price }));
            $('#shopForm').append($('<input>', { type:'hidden', name: n+'[quantity]',         value: item.qty }));
            $('#shopForm').append($('<input>', { type:'hidden', name: n+'[subtotal]',         value: (item.qty*item.price).toFixed(2) }));
            $('#shopForm').append($('<input>', { type:'hidden', name: n+'[deduct_per_unit]', value: item.deduct ?? 1 }));
            if (item.variant_id) {
                $('#shopForm').append($('<input>', { type:'hidden', name: n+'[variant_id]', value: item.variant_id }));
            }
            if (item.refill_product_id) {
                $('#shopForm').append($('<input>', { type:'hidden', name: n+'[refill_product_id]', value: item.refill_product_id }));
            }
        });
        $('#shopForm').append($('<input>', { type:'hidden', name:'discount',       value: discount }));
        $('#shopForm').append($('<input>', { type:'hidden', name:'total_amount',   value: totalAmount.toFixed(2) }));
        $('#shopForm').append($('<input>', { type:'hidden', name:'payment_method', value: paymentMethod }));
        $('#shopForm').append($('<input>', { type:'hidden', name:'mpesa_phone',    value: mpesaPhone }));
        $('#shopForm').append($('<input>', { type:'hidden', name:'ajax_checkout',  value: "1" }));

        $.ajax({
            url: $('#shopForm').attr('action'),
            method: 'POST',
            data: $('#shopForm').serialize(),
            success: function(res) {
                if (res.status === 'success' || res.success) {
                    if (paymentMethod === 'mpesa' && res.invoice) {
                        initiateMpesaPayment(res.invoice.invoiceNo, totalAmount.toFixed(0), mpesaPhone, res.invoice.meter_number);
                    } else if (paymentMethod === 'mpesa_manual' && res.invoice) {
                        $('.auto-acc-display').text(res.invoice.meter_number);
                        $('#mpesaManualAmountDisplay').text('KES ' + totalAmount.toFixed(2));
                        handleCheckoutSuccess(res.message || 'Sale initialized. Awaiting manual M-Pesa payment.');
                    } else {
                        handleCheckoutSuccess(res.message || 'Sale completed successfully!');
                    }
                } else {
                    handleCheckoutError(res.message || 'Error processing sale.');
                }
            },
            error: function(xhr) {
                handleCheckoutError('Server error: ' + (xhr.responseJSON?.message || xhr.statusText));
            }
        });
    });

    function initiateMpesaPayment(invoiceNo, amount, phone, meterNumber) {
        $('#checkoutStatus').text('Initiating M-Pesa STK Push...');
        $.ajax({
            url: '/mpesa/c2b/initiate',
            method: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                phone: phone,
                amount: amount,
                reference: invoiceNo
            },
            success: function(response) {
                if (response.success && response.CheckoutRequestID) {
                    $('#checkoutStatus').text('M-Pesa Prompt sent! Waiting for customer to enter PIN...');
                    pollMpesaStatus(response.CheckoutRequestID, meterNumber);
                } else {
                    handleCheckoutError(response.message || 'Failed to initiate M-Pesa STK.');
                }
            },
            error: function(xhr) {
                handleCheckoutError('M-Pesa STK Error: ' + (xhr.responseJSON?.message || xhr.statusText));
            }
        });
    }

    function pollMpesaStatus(checkoutRequestId, requestId) {
        let attempts = 0;
        const maxAttempts = 24;
        const pollInterval = setInterval(function() {
            attempts++;
            if (attempts > maxAttempts) {
                clearInterval(pollInterval);
                handleCheckoutError('M-Pesa payment timed out. The order has been saved and can be paid later.');
                return;
            }
            $.ajax({
                url: '/checkStatus/' + checkoutRequestId,
                method: 'GET',
                success: function(data) {
                    if (data.status === 'completed') {
                        clearInterval(pollInterval);
                        $.get('/checkpayment/' + requestId, function(pData) {
                            handleCheckoutSuccess('M-Pesa Payment Successful! Receipt Number: ' + (data.mpesa_receipt_number || ''));
                        });
                    } else if (data.status === 'failed') {
                        clearInterval(pollInterval);
                        handleCheckoutError('M-Pesa Payment Failed: ' + (data.error_message || 'Customer canceled or insufficient funds.'));
                    }
                }
            });
        }, 5000);
    }

    function handleCheckoutSuccess(msg) {
        $('#checkoutStatus').removeClass('alert-info alert-danger').addClass('alert-success').text(msg);
        $('#confirmSubmitBtn').hide();
        $('#cancelCheckoutBtn').prop('disabled', false).text('Close');
        cart = [];
        updateCartView();
        
        setTimeout(() => {
            window.location.reload();
        }, 2000);
    }

    function handleCheckoutError(msg) {
        $('#checkoutStatus').removeClass('alert-info alert-success').addClass('alert-danger').text(msg);
        $('#confirmSubmitBtn').prop('disabled', false).html('<i class="fa fa-refresh"></i> Retry Payment');
        $('#cancelCheckoutBtn').prop('disabled', false);
    }

    // ── Add customer via AJAX ───────────────────────────────────────────────
    $('#customerForm').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr('action'), method: 'POST', data: $(this).serialize(),
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            success: function (res) {
                const c = res.customer || res;
                if (c && c.id) {
                    $('#customer-add-modal').modal('hide');
                    $('#searchCustomer').val(c.name);
                    $('#customer_id').val(c.id);
                    $('#customerForm')[0].reset();
                }
            },
            error: function (xhr) {
                alert('Could not add customer: ' + (xhr.responseJSON?.message || xhr.statusText));
            }
        });
    });
});
</script>

<style>
    .customer-pick:hover { background-color: #f5f5f5; cursor: pointer; }
    #customerResults {
        position: absolute; z-index: 1000; max-height: 200px; overflow-y: auto;
        border: 1px solid #ccc; border-radius: 4px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
</style>
@endsection