@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;">Agent Issuance</h1>
        <div>
            <a href="{{ url('/Purchase/orders') }}" class="btn btn-default">
                <i class="fa fa-list"></i> All Issuance 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">
        @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 p-3">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-cubes"></i> Select Products to Issue</h3>
                    </div>
                    <div class="box-body">
                        <div class="row mb-3">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="searchProduct" placeholder="🔍 Search product...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="dropdown">
                                    <button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                                        <i class="fa fa-filter"></i> Category <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu p-2" style="max-height: 200px; overflow-y: auto; min-width: 200px;">
                                        @foreach ($categories as $category)
                                            <li>
                                                <label class="pl-2 font-weight-normal">
                                                    <input type="checkbox" class="category-filter" value="{{ $category->id }}"> {{ $category->name }}
                                                </label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </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> Issue
                                                                </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> Issue
                                                                </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>
            </div>

            <!-- Right Panel: Issuance Details -->
            <div class="col-md-4">
                <div class="box box-success p-3">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-truck"></i> Issuance Details</h3>
                    </div>
                    <div class="box-body">
                        <form id="issuanceForm" action="{{ url('/sales/agent-issuance/post') }}" method="POST">
                            @csrf

                            <div class="form-group">
                                <label>Issuance No</label>
                                <input type="text" class="form-control" name="issuance_no" value="{{ $issuance_no }}" readonly>
                            </div>

                            <div class="form-group">
                                <label>Issue Date</label>
                                <input type="date" class="form-control" name="issue_date" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" readonly>
                            </div>

                            <div class="form-group">
                                <label>Agent <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select name="agent_id" class="form-control" id="agent_select" required {{ !$admin->is_superadmin ? 'readonly style="pointer-events:none;background-color:#eee;"' : '' }}>
                                        @if($admin->is_superadmin)
                                            <option value="">-- Select Agent --</option>
                                        @endif
                                        @foreach ($agents as $agent)
                                            <option value="{{ $agent->id }}"
                                                {{ (isset($defaultAgent) && $defaultAgent->id == $agent->id) ? 'selected' : '' }}>
                                                {{ $agent->name }} ({{ $agent->phone_number ?? $agent->uniqueclient_id }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @if($admin->is_superadmin)
                                        <span class="input-group-btn">
                                            <a data-toggle="modal" data-target="#agent-add-modal" href="#" class="btn btn-default" title="Add Agent">
                                                <i class="fa fa-user-plus"></i>
                                            </a>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Notes (optional)</label>
                                <textarea name="notes" class="form-control" rows="2" placeholder="Any special instructions..."></textarea>
                            </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>No products added</em></td>
                                    </tr>
                                </tbody>
                            </table>

                            <table class="table table-bordered">
                                <tr>
                                    <th>Total Items</th>
                                    <td id="total_items_display">0</td>
                                </tr>
                                <tr>
                                    <th>Total Value</th>
                                    <td id="total_display"><strong>KES 0.00</strong></td>
                                </tr>
                            </table>

                            <button type="button" id="submitIssuanceBtn" class="btn btn-success btn-block btn-lg">
                                <i class="fa fa-check"></i> Issue Products to Agent
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Agent Add Modal -->
<div class="modal fade" id="agent-add-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="post" action="{{ url('/agent/new') }}" id="agentAddForm">
                @csrf
                <div class="modal-header bg-success" style="color:#fff;">
                    <h4 class="modal-title">Add New Agent</h4>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Select Admin to Link *</label>
                        <select name="admin_id" class="form-control" required>
                            <option value="">-- Select an Admin --</option>
                            @foreach($unassignedAdmins as $unassignedAdmin)
                                <option value="{{ $unassignedAdmin->id }}">{{ $unassignedAdmin->name }} ({{ $unassignedAdmin->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Location (Optional)</label>
                        <input type="text" name="location" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Additional Info (Optional)</label>
                        <textarea name="add_info" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save Agent</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Confirm Issuance Modal -->
<div class="modal fade" id="confirmIssuanceModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success" style="color:#fff;">
                <h4 class="modal-title"><i class="fa fa-check-circle"></i> Confirm Issuance</h4>
            </div>
            <div class="modal-body">
                <p>You are about to issue the following products to <strong id="confirmAgentName">the selected agent</strong>:</p>
                <table class="table table-bordered table-condensed">
                    <thead>
                        <tr><th>Product</th><th>Qty</th><th>Value</th></tr>
                    </thead>
                    <tbody id="confirmCartTable"></tbody>
                    <tfoot>
                        <tr><th colspan="2">Total</th><td id="confirmTotal">KES 0.00</td></tr>
                    </tfoot>
                </table>
                <div class="alert alert-warning">
                    <i class="fa fa-exclamation-triangle"></i> Stock will be deducted upon confirmation.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="confirmIssuanceBtn">
                    <i class="fa fa-truck"></i> Confirm Issuance
                </button>
            </div>
        </div>
    </div>
</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:#00a65a; 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>
@endsection

@section('script')
<script>
    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 total = 0;

        if (cart.length === 0) {
            $('#product_table').html('<tr id="emptyCartRow"><td colspan="4" class="text-center text-muted"><em>No products added</em></td></tr>');
        } else {
            cart.forEach(item => {
                total += item.qty * item.price;
                const key    = getCartKey(item);
                const label  = item.name + (item.variant_name ? ' <small class="text-muted">('+item.variant_name+')</small>' : '');
                const atMax  = item.stock && item.qty >= item.stock;
                tbody += `
                    <tr>
                        <td style="font-size:12px;">${label}</td>
                        <td>
                            <div class="input-group" style="width: 92px;">
                                <span class="input-group-btn"><button class="btn btn-xs btn-default qty-minus" data-key="${key}" type="button">&minus;</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-trash"></i></button></td>
                    </tr>`;
            });
            $('#product_table').html(tbody);
        }

        $('#total_items_display').text(cart.reduce((s, i) => s + i.qty, 0));
        $('#total_display').html('<strong>KES ' + total.toFixed(2) + '</strong>');
    }

    function filterAndSearch() {
        const term = $('#searchProduct').val().toLowerCase();
        const cats = $('.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(term) && (cats.length === 0 || cats.includes(cat)));
        });
    }

    $(document).ready(function () {

        updateCartView();

        // Full Screen
        $('#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();
    });

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

        // Search and filter
        $('#searchProduct').on('keyup', filterAndSearch);
        $('.category-filter').on('change', filterAndSearch);

        // Submit issuance
        $('#submitIssuanceBtn').on('click', function () {
            if (cart.length === 0) {
                alert('Please add at least one product to issue.');
                return;
            }
            const agentId = $('#agent_select').val();
            const agentText = $('#agent_select option:selected').text();
            if (!agentId) {
                alert('Please select an agent.');
                return;
            }

            // Populate confirm modal
            let tbody = '', total = 0;
            cart.forEach(item => {
                total += item.qty * item.price;
                tbody += `<tr><td>${item.name}${item.variant_name ? ' ('+item.variant_name+')' : ''}</td><td>${item.qty}</td><td>KES ${(item.qty * item.price).toFixed(2)}</td></tr>`;
            });
            $('#confirmCartTable').html(tbody);
            $('#confirmTotal').text('KES ' + total.toFixed(2));
            $('#confirmAgentName').text(agentText);
            $('#confirmIssuanceModal').modal('show');
        });

        // Confirm and submit
        $('#confirmIssuanceBtn').on('click', function () {
            // Remove old hidden fields
            $('#issuanceForm').find('input[name^="items"], input[name^="formData"]').remove();

            cart.forEach((item, index) => {
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][product_id]`, value: item.id }));
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][product_name]`, value: item.name }));
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][product_price]`, value: item.price }));
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][quantity]`, value: item.qty }));
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][subtotal]`, value: (item.qty * item.price).toFixed(2) }));
                $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][deduct]`, value: item.deduct || 1 }));
                if (item.variant_id) {
                    $('#issuanceForm').append($('<input>', { type: 'hidden', name: `formData[item_${index+1}][variant_id]`, value: item.variant_id }));
                }
            });

            $('#confirmIssuanceModal').modal('hide');
            $('#issuanceForm').submit();
        });

        // ── Add agent via AJAX ────────────────────────────────────────────────────
        $('#agentAddForm').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) {
                    if(res.success || res.status === 'success') {
                        alert('Agent successfully mapped!');
                        $('#agent-add-modal').modal('hide');
                        $('#agentAddForm')[0].reset();
                        // Optional: reload the page to refresh the agent list or dynamically append
                        location.reload(); 
                    } else {
                        alert('Could not add agent: ' + (res.message || 'Unknown error'));
                    }
                },
                error: function (xhr) {
                    alert('Could not add agent: ' + (xhr.responseJSON?.message || xhr.statusText));
                }
            });
        });
    });
</script>
@endsection