@extends('layouts.index')

@section('content')
<div class="content-wrapper">
    <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> Agent 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>

    <section class="content" id="agentShopContent">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible m-3">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ session('success') }}
            </div>
        @endif

        <div class="row">
            <!-- Left Panel: Products -->
            <div class="col-md-8">
                <div class="box box-primary">
                    <div class="box-header with-border" style="padding: 10px 15px;">
                        <div class="row">
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="searchProduct" placeholder="🔍 Search product by name...">
                            </div>
                            <div class="col-md-4">
                                <div class="dropdown">
                                    <button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                                        <i class="fa fa-filter"></i> Filter Category <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu p-2" style="max-height: 250px; overflow-y: auto; min-width: 220px;">
                                        @foreach ($categories as $category)
                                            <li>
                                                <label class="pl-2" style="font-weight: normal; cursor:pointer;">
                                                    <input type="checkbox" class="category-filter" value="{{ $category->id }}"> {{ $category->name }}
                                                </label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- ═══════════════════════════════════════
                         WATER PRODUCTS SECTION
                    ══════════════════════════════════════════ --}}
                    @if ($packaged_products->count() > 0 || $refill_products->count() > 0 || $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
                                @if($products->count() > 0)
                                <li {{ $packaged_products->count() == 0 && $refill_products->count() == 0 ? 'class="active"' : '' }}>
                                    <a href="#tab-other" data-toggle="tab">🛍️ Other</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

                                {{-- ── TAB 3: Other Products ───────────────────── --}}
                                @if($products->count() > 0)
                                <div class="tab-pane {{ $packaged_products->count() == 0 && $refill_products->count() == 0 ? 'active' : '' }}" id="tab-other">
                                    <div class="row">
                                        @foreach ($products as $product)
                                            @php
                                                $hasVariants = $product->variants->count() > 0;
                                                if ($hasVariants) {
                                                    $variants = $product->variants->where('variant_status', '!=', 'inactive');
                                                    $anyStock = $variants->sum('variant_quantity') > 0;
                                                    $minPrice = $variants->min('variant_price');
                                                } else {
                                                    $variants = collect([]);
                                                    $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 ? 'product-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()) }}"
                                                     @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($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

                            </div>{{-- tab-content --}}
                        </div>
                    @else
                        <div class="box-body">
                            <div class="alert alert-info" style="margin: 15px;">
                                No products available in your inventory.
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Right Panel: Order Cart -->
            <div class="col-md-4">
                <div class="box box-success">
                    <div class="box-header with-border bg-success" style="color:#fff;">
                        <h3 class="box-title"><i class="fa fa-shopping-cart"></i> Sale Order</h3>
                    </div>
                    <div class="box-body">
                        <form id="agentShopForm" action="{{ url('/sales/agent-shop/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>
                                    </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="form-group">
                                <label>Agent</label>
                                <input type="hidden" name="agent_id" id="agent_select" value="{{ $defaultAgent->id }}" data-number="{{ $defaultAgent->client_id }}">
                                <input type="text" class="form-control" value="{{ $defaultAgent->name }}" readonly style="background-color:#eee;">
                            </div>

                            <div class="form-group" style="position:relative;">
                                <label>Customer <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="searchCustomer"
                                    placeholder="Type to search customer..." value="{{ $defaultCustomer->name ?? '' }}">
                                <input type="hidden" name="customer_id" id="customer_id" value="{{ $defaultCustomer->id ?? '' }}">
                                <ul id="customerResults" class="list-group"
                                    style="display:none; position:absolute; z-index:1000; width:100%; max-height:180px; overflow-y:auto; box-shadow: 0 4px 8px rgba(0,0,0,0.15);"></ul>
                                <a data-toggle="modal" data-target="#customer-add-modal" href="#" class="btn btn-xs btn-link">
                                    <i class="fa fa-user-plus"></i> Add new customer
                                </a>
                            </div>

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

                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Subtotal</th>
                                    <td id="subtotal">KES 0.00</td>
                                </tr>
                                <tr>
                                    <th>Discount (%)</th>
                                    <td><input type="number" id="discountPercent" name="discount_pct" class="form-control input-sm" value="0" min="0" max="100"></td>
                                </tr>
                                <tr class="bg-success" style="color:#fff;">
                                    <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> Place Order
                            </button>
                        </form>
                    </div>
                </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>

<!-- Cart Confirm Modal & POS Checkout -->
<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 Options -->
                        <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 context will appear on this phone.</small>
                            </div>
                        </div>

                        <!-- M-Pesa Manual Options -->
                        <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"></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 Options -->
                        <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>
// Cart: each item = { id, name, variant_id|null, variant_name|null, price, qty, stock }
let cart = [];

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

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 reached"' : ''}>+</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'));
        const matchName = name.includes(query);
        const matchCat  = checkedCats.length === 0 || checkedCats.includes(cat);
        $(this).toggle(matchName && matchCat);
    });
}

$(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');
        }
    });

    // ── Variant selected from modal ─────────────────────────────────────────
    $(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;
        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();
    });

    // ── 🛍️ Other Products (Normal behavior) ─────────────────────────────────
    $(document).on('click', '.product-tile:not(.oos)', function () {
        const $tile = $(this);
        const id    = $tile.data('product-id') || $tile.data('id');
        const name  = $tile.data('product-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;
                const inStock = qty > 0;
                const price   = parseFloat(v.variant_price).toFixed(2);
                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}" 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><small class="text-muted">Stock: ${qty}</small></div>
                            <span class="text-primary" style="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><small class="text-danger">Out of stock</small></div>
                            <span class="text-muted">KES ${price}</span>
                        </div>
                    </div>`;
                }
            });
            html += '</div>';
            $('#variantOptionsList').html(html);
            $('#pickVariantModal').modal('show');
        } else {
            // Simple product
            const price = parseFloat($tile.data('price'));
            const stock = parseInt($tile.data('stock')) || 9999;
            const key   = String(id);
            const 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, deduct: 1 });
            }
            updateCartView();
        }
    });

    // ── 📦 Packaged Water (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 Size');
        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) {
                const bottlePrice = parseFloat(v.variant_price);
                const packPrice   = parseFloat(v.pack_price);
                const packSize    = parseInt(v.pack_size);
                const packsLeft   = Math.floor(qty / packSize);

                // Single bottle
                if (qty > 0) {
                    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}" 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} — Single Bottle</strong><br><small class="text-muted">Stock: ${qty} bottle(s)</small></div>
                            <span class="text-primary" style="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;"><small class="text-danger">Out of stock</small></div>`;
                }

                // Full pack
                if (packsLeft > 0) {
                    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}" 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="text-muted">Packs available: ${packsLeft}</small></div>
                            <span class="text-primary" style="font-weight:bold;">KES ${packPrice.toFixed(2)}</span>
                        </div>
                    </button>`;
                } else {
                    html += `<div class="list-group-item" style="opacity:0.5; padding:10px 15px; border-top:1px dashed #ccc; cursor:not-allowed;"><small class="text-danger">No full packs</small></div>`;
                }
            } else if (selUnit !== 'bottle' || qty > 0) {
                // Regular variant
                const price = parseFloat(v.variant_price);
                if (qty > 0) {
                    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}" 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><small class="text-muted">Stock: ${qty}</small></div>
                            <span class="text-primary" style="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;"><small class="text-danger">Out of stock</small></div>`;
                }
            }
        });
        html += '</div>';
        $('#variantOptionsList').html(html);
        $('#pickVariantModal').modal('show');
    });

    // ── 💧 Refill Water ─────────────────────────────────────────────────────
    $(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, deduct: 1 }); }
        updateCartView();
    });

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

    // ── Filters ───────────────────────────────────────────────────────────────
    $('#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) {
                // Restore default customer if search is cleared
                @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 ──────────────────────────────────────────────────────────
    $('#submitOrderBtn').on('click', function () {
        if (cart.length === 0) { alert('Please add at least one product.'); return; }
        // Agent is automatically set from the logged-in user's profile
        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('');
        
        // Default select customer phone if available
        // Note: You can optionally grab the phone from the add customer flow or customer details if stored
        
        // Reset buttons and modal state
        $('#confirmSubmitBtn').prop('disabled', false).html('<i class="fa fa-check"></i> Complete Sale');
        $('#cancelCheckoutBtn').prop('disabled', false);
        
        $('#cartConfirmationModal').modal('show');
    });

    // Payment method toggle logic
    $('#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();
            // Get the agent's unique number from the hidden input
            const agentAcc = $('#agent_select').data('number');
            $('.auto-acc-display').text(agentAcc || 'Account Number');
            // Pre-fill amount
            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();
    });

    // Calculate change dynamically for Cash
    $('#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 Logic
    $('#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...');

        $('#agentShopForm').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}]`;
            $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[product_id]',    value: item.id ?? '' }));
            $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[product_price]', value: item.price }));
            $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[quantity]',      value: item.qty }));
            $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[subtotal]',      value: (item.qty*item.price).toFixed(2) }));
            $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[deduct]',        value: item.deduct || 1 }));
            if (item.variant_id) {
                $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[variant_id]', value: item.variant_id }));
            }
            if (item.refill_product_id) {
                $('#agentShopForm').append($('<input>', { type:'hidden', name: n+'[refill_product_id]', value: item.refill_product_id }));
            }
        });
        $('#agentShopForm').append($('<input>', { type:'hidden', name:'discount',       value: discount }));
        $('#agentShopForm').append($('<input>', { type:'hidden', name:'total_amount',   value: totalAmount.toFixed(2) }));
        $('#agentShopForm').append($('<input>', { type:'hidden', name:'payment_method', value: paymentMethod }));
        $('#agentShopForm').append($('<input>', { type:'hidden', name:'mpesa_phone',    value: mpesaPhone }));
        $('#agentShopForm').append($('<input>', { type:'hidden', name:'ajax_checkout',  value: "1" }));

        // Perform AJAX submit
        $.ajax({
            url: $('#agentShopForm').attr('action'),
            method: 'POST',
            data: $('#agentShopForm').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) {
                        // Display the generated account/invoice number correctly for manual paybill
                        $('.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, agentRequestId) {
        let attempts = 0;
        const maxAttempts = 24; // Check every 5 seconds for 2 mins
        
        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);
                        
                        // Secondary check to ensure invoice is marked paid
                        $.get('/checkpayment/' + agentRequestId, 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. Order is saved as unpaid.'));
                    }
                }
            });
        }, 5000);
    }

    function handleCheckoutSuccess(msg) {
        $('#checkoutStatus').removeClass('alert-info alert-danger').addClass('alert-success').text(msg);
        $('#confirmSubmitBtn').hide();
        $('#cancelCheckoutBtn').prop('disabled', false).text('Close');
        
        // Clear cart
        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>
@endsection