@extends('layout.app')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color:#115548;">
                            <i class="fas fa-box-open mr-2"></i>Product Installment Management
                        </h3>
                        <div class="card-tools">
                            <a href="{{ route('product-installment.payments', request()->only('manager_id', 'pop_id')) }}" class="btn btn-sm btn-info">
                                <i class="fa fa-list"></i> All Payments
                            </a>
                            <a href="{{ route('product-installment.export', request()->query()) }}" class="btn btn-sm btn-success">
                                <i class="fa fa-file-excel"></i> Excel
                            </a>
                            @can('product-installment-history')
                                <a href="{{ route('manager-finance-log.index', ['type' => 'ProductInstallment']) }}"
                                    class="btn btn-sm btn-secondary">
                                    <i class="fas fa-list-alt"></i> Edit &amp; Delete Log
                                </a>
                            @endcan
                            @can('product-installment-create')
                                <a href="{{ route('product-installment.create') }}" class="btn btn-sm btn-primary">
                                    <i class="fa fa-plus-circle"></i> Add Product
                                </a>
                            @endcan
                        </div>
                    </div>

                    <div class="card-body py-2">

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <h6 class="mb-2"><i class="fas fa-exclamation-triangle mr-1"></i>The product installment was not saved:</h6>
                                <ul class="mb-0 pl-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="GET" action="{{ route('product-installment.index') }}" class="mb-2" id="filterForm">
                            <div class="form-row align-items-end">
                                <div class="col-md-3">
                                    <label class="mb-0 small text-muted">Manager</label>
                                    <select name="manager_id" id="filterManager" class="form-control select2">
                                        <option value="">— All Managers —</option>
                                        @foreach ($managers as $manager)
                                            <option value="{{ $manager->id }}"
                                                {{ request('manager_id') == $manager->id ? 'selected' : '' }}>
                                                {{ $manager->name_with_type }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="mb-0 small text-muted">POP</label>
                                    <select name="pop_id" id="filterPop" class="form-control select2">
                                        <option value="">— All POPs —</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="mb-0 small text-muted">Status</label>
                                    <select name="status" class="form-control select2">
                                        <option value="">— All Status —</option>
                                        <option value="pending"  {{ request('status') == 'pending'  ? 'selected' : '' }}>Pending</option>
                                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="modification" {{ request('status') == 'modification' ? 'selected' : '' }}>Modification</option>
                                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="mb-0 small text-muted">Product Name</label>
                                    <input type="text" name="product_name" class="form-control"
                                           value="{{ request('product_name') }}" placeholder="Search product">
                                </div>
                                <div class="col-md-3 mb-1 text-right">
                                    <button type="submit" class="btn btn-sm btn-primary">
                                        <i class="fa fa-filter"></i> Filter
                                    </button>
                                    @if (request('manager_id') || request('pop_id') || request('status') || request('product_name'))
                                        <a href="{{ route('product-installment.index') }}" class="btn btn-sm btn-secondary">Clear</a>
                                    @endif
                                </div>
                            </div>
                        </form>

                        <div class="table-responsive finance-table-wrap">
                            <table id="dataTable" class="table table-bordered table-striped table-hover table-sm">
                                @php
                                    $grandTotal     = (float) $installments->sum('total_amount');
                                    $grandSpeed     = (float) $installments->sum('speed_money');
                                    $grandPerInstall = (float) $installments->sum('one_installment_amount');
                                    $grandPaid      = (float) $installments->sum('payments_sum_amount');
                                    $grandPaidShown = $grandSpeed + $grandPaid; // paid incl. upfront speed money
                                    $grandRemaining = max(0, $grandTotal - $grandPaidShown);
                                    // Quantity given per product across the listed (filtered) installments.
                                    $grandProducts  = $installments->pluck('items')->flatten()
                                        ->groupBy(fn ($line) => trim($line->product_name))
                                        ->map(fn ($lines) => $lines->sum('quantity'))
                                        ->sortKeys();
                                @endphp
                                <thead class="thead-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Manager</th>
                                        <th>POP</th>
                                        <th>Product</th>
                                        <th>Status</th>
                                        <th class="text-center">Installments</th>
                                        <th class="text-right">Total (৳)</th>
                                        <th class="text-right">Speed Money</th>
                                        <th class="text-right">Per Install (৳)</th>
                                        <th class="text-right">Paid (৳)</th>
                                        <th class="text-right">Remaining (৳)</th>
                                        <th>Action</th>
                                    </tr>
                                    {{-- The Total row lives in <thead>, above the rows: DataTables never sorts
                                         or paginates a header row, and it pins under the sticky header. --}}
                                    <tr class="total-row" style="font-weight:bold;background:#f4f6f9;">
                                        <td colspan="3" class="text-right">Total</td>
                                        <td>
                                            {{-- Folds to one line while the table is scrolled (the row is sticky, so a
                                                 long list would cover the rows); opens again at the top or on click. --}}
                                            @if ($grandProducts->isNotEmpty())
                                                <a href="#" class="product-total-toggle text-nowrap text-dark" title="Show / hide products">
                                                    <i class="fas fa-caret-down"></i>
                                                    {{ $grandProducts->count() }} products · {{ $grandProducts->sum() }} qty
                                                </a>
                                                <div class="product-total-list">
                                                    @foreach ($grandProducts as $productName => $quantity)
                                                        <div class="text-nowrap">{{ $loop->iteration }}. {{ $productName }} = {{ $quantity }}</div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </td>
                                        <td colspan="2"></td>
                                        <td class="text-right">{{ number_format($grandTotal, 2) }}</td>
                                        <td class="text-right text-warning">{{ number_format($grandSpeed, 2) }}</td>
                                        <td class="text-right">{{ number_format($grandPerInstall, 2) }}</td>
                                        <td class="text-right text-success">{{ number_format($grandPaidShown, 2) }}</td>
                                        <td class="text-right text-danger">{{ number_format($grandRemaining, 2) }}</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($installments as $item)
                                        @php
                                            $totalPaid = (float) ($item->payments_sum_amount ?? 0);
                                            // Speed money is an upfront payment, so include it in the shown Paid amount.
                                            $paidShown = (float) $item->speed_money + $totalPaid;
                                            $remaining = max(0, (float) $item->total_amount - $paidShown);
                                        @endphp
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>
                                                {{ $item->manager->name_with_type ?? '—' }}
                                                <br><small class="text-muted"><i class="fa fa-user"></i> Added by:
                                                    {{ $item->createdBy->name ?? '—' }}</small>
                                            </td>
                                            <td>{{ $item->pop->popname ?? '—' }}</td>
                                            <td>
                                                {{-- Just what was given: one numbered "Product = Qty" line per product. --}}
                                                @forelse ($item->items as $line)
                                                    <div class="text-nowrap">{{ $loop->iteration }}. {{ $line->product_name }} = {{ $line->quantity }}</div>
                                                @empty
                                                    {{-- Entries from before product lines existed only carry a name. --}}
                                                    {{ $item->product_name }}
                                                @endforelse
                                                @if ($item->requisition_id)
                                                    <small class="text-muted"><i class="fas fa-file-alt"></i> Requisition ID: {{ $item->requisition_id }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                @include('partials.approval-status', ['item' => $item])
                                                @if ($item->status === 'approved')
                                                    @if ($totalPaid > 0 && $remaining <= 0)
                                                        <span class="badge badge-primary">Fully Paid</span>
                                                    @endif
                                                @endif
                                                @include('partials.approval-comment', ['item' => $item])
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-dark">{{ $item->installment_count }} times</span>
                                                @if ($item->start_month)
                                                    <br><small class="text-muted">From {{ $item->start_month->format('M Y') }}</small>
                                                @endif
                                            </td>
                                            <td class="text-right">{{ number_format($item->total_amount, 2) }}</td>
                                            <td class="text-right">
                                                @if ($item->speed_money > 0)
                                                    <span class="text-warning font-weight-bold">{{ number_format($item->speed_money, 2) }}</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-right">{{ number_format($item->one_installment_amount, 2) }}</td>
                                            <td class="text-right">
                                                @if ($paidShown > 0)
                                                    <strong class="text-success">{{ number_format($paidShown, 2) }}</strong>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-right">
                                                @if ($remaining > 0)
                                                    <strong class="text-danger">{{ number_format($remaining, 2) }}</strong>
                                                @else
                                                    <span class="badge badge-success">Paid</span>
                                                @endif
                                            </td>
                                            <td style="white-space:nowrap">
                                                {{-- An approved installment stays editable/deletable, but only for a
                                                     user who also holds the *-approved permission. --}}
                                                @php
                                                    $isApproved = $item->status === 'approved';
                                                    $canEditRow = auth()->user()->can('product-installment-edit') && (!$isApproved || auth()->user()->can('product-installment-edit-approved'));
                                                    $canDeleteRow = auth()->user()->can('product-installment-delete') && (!$isApproved || auth()->user()->can('product-installment-delete-approved'));
                                                @endphp
                                                @if ($canEditRow)
                                                    <a href="{{ route('product-installment.edit', $item->id) }}"
                                                       class="btn btn-sm btn-primary">
                                                        <i class="fas fa-edit"></i> Edit
                                                    </a>
                                                @endif
                                                @can('product-installment-approve')
                                                    @include('partials.approval-decision-buttons', [
                                                        'item'  => $item,
                                                        'url'   => route('product-installment.approve', $item->id),
                                                        'label' => 'product installment',
                                                    ])
                                                @endcan
                                                @if ($canDeleteRow)
                                                    <form action="{{ route('product-installment.destroy', $item->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this product installment?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                @endif
                                                @if ($item->status === 'approved')
                                                    <button type="button" class="btn btn-sm btn-primary schedule-btn"
                                                        data-id="{{ $item->id }}">
                                                        <i class="fas fa-calendar-alt"></i> Schedule
                                                    </button>
                                                    @can('product-installment-payment')
                                                        @if ($remaining > 0)
                                                            <button type="button" class="btn btn-sm btn-warning pay-btn"
                                                                data-id="{{ $item->id }}"
                                                                data-product="{{ $item->product_name }}"
                                                                data-amount="{{ number_format($item->total_amount, 2) }}"
                                                                data-remaining="{{ number_format($remaining, 2) }}"
                                                                data-pay-type="{{ $item->manager->reseller_type ?? '' }}"
                                                                data-reseller-id="{{ $item->manager_id }}"
                                                                data-reseller-name="{{ $item->manager->name_with_type ?? '' }}">
                                                                <i class="fas fa-money-bill-wave"></i> Pay
                                                            </button>
                                                        @endif
                                                        @if ($totalPaid > 0)
                                                            <button type="button" class="btn btn-sm btn-info pay-history-btn"
                                                                data-id="{{ $item->id }}" data-product="{{ $item->product_name }}">
                                                                <i class="fas fa-history"></i> Pay Log
                                                            </button>
                                                        @endif
                                                    @endcan
                                                @endif
                                                @can('product-installment-history')
                                                    <a href="{{ route('editLog-history', ['id' => $item->id, 'type' => 'ProductInstallment']) }}"
                                                        class="btn btn-sm btn-secondary">
                                                        <i class="fas fa-list-alt"></i> History
                                                    </a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pay Modal --}}
        @can('product-installment-payment')
        <div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background:#f39c12;color:#fff;">
                        <h5 class="modal-title">
                            <i class="fas fa-money-bill-wave mr-2"></i>Make Payment — <span id="payProductName"></span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" style="color:#fff;"><span>&times;</span></button>
                    </div>
                    <form method="POST" action="" id="payForm">
                        @csrf
                        <input type="hidden" name="pay_type"    id="payTypeHidden">
                        <input type="hidden" name="reseller_id" id="payResellerIdHidden">
                        <div class="modal-body">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Total Amount</span>
                                            <span class="info-box-number" id="payTotalAmount" style="font-size:16px">—</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Remaining</span>
                                            <span class="info-box-number text-danger" id="payRemainingAmount" style="font-size:16px">—</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Payment Type</span>
                                            <span class="info-box-number" id="payTypeBadge" style="font-size:14px">—</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="payNoResellerAlert" class="alert alert-danger" style="display:none">
                                <i class="fas fa-exclamation-circle mr-1"></i> No manager linked. Payment cannot be processed.
                            </div>

                            <div id="payResellerInfo" style="display:none">
                                <div class="form-group">
                                    <label>Manager</label>
                                    <div class="form-control bg-light" id="payResellerName" style="pointer-events:none"></div>
                                </div>

                                <div id="balanceInfo" class="alert alert-info py-2" style="display:none"></div>

                                <div id="payFields" style="display:none">
                                    <div class="form-group">
                                        <label>Payment Amount (৳) <span class="text-danger">*</span></label>
                                        <input type="number" name="amount" id="payAmount"
                                               class="form-control" placeholder="Enter amount" min="0.01" step="0.01">
                                    </div>
                                    <div class="form-group">
                                        <label>Note</label>
                                        <textarea name="note" class="form-control" rows="2" placeholder="Optional note..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-warning" id="paySubmitBtn" style="display:none">
                                <i class="fas fa-money-bill-wave mr-1"></i> Confirm Payment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Payment History Modal --}}
        <div class="modal fade" id="payHistoryModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title"><i class="fas fa-history mr-2"></i>Payment History</h5>
                        <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="payHistoryContent">
                            <div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        @endcan

        {{-- Installment Schedule Modal --}}
        <div class="modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background:#115548;color:#fff;">
                        <h5 class="modal-title"><i class="fas fa-calendar-alt mr-2"></i>Installment Schedule</h5>
                        <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="scheduleContent">
                            <div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@section('ajax')
<script>
$(function () {

    // ── Total row: product quantity list ──────────────────────────────────
    // Open at the top of the table, folded once it scrolls; a click flips it either way
    // until the table is scrolled back to the top.
    var $productTotalList = $('.product-total-list');
    var productTotalPinned = null; // null = follow the scroll, true / false = user's choice

    function setProductTotalOpen(open) {
        $productTotalList.toggle(open);
        $('.product-total-toggle i').toggleClass('fa-caret-down', open).toggleClass('fa-caret-right', ! open);
    }

    $(document).on('click', '.product-total-toggle', function (e) {
        e.preventDefault();
        productTotalPinned = ! $productTotalList.is(':visible');
        setProductTotalOpen(productTotalPinned);
    });

    $('.finance-table-wrap').on('scroll', function () {
        var atTop = this.scrollTop < 5;
        if (atTop) {
            productTotalPinned = null;
        }
        setProductTotalOpen(productTotalPinned === null ? atTop : productTotalPinned);
    });

    var getResellPopListUrl   = "{{ route('getResellPopList') }}";
    var currentPopId          = "{{ request('pop_id') }}";
    var commissionCheckUrl    = "{{ route('product-installment.commission-check') }}";
    var payFormUrlTemplate    = "{{ route('product-installment.pay', ['id' => '__ID__']) }}";
    var payHistoryUrlTemplate = "{{ route('product-installment.payment-history', ['id' => '__ID__']) }}";
    var paymentDeleteUrlTemplate = "{{ route('product-installment.payment-delete', ['payment' => '__ID__']) }}";
    var scheduleUrlTemplate   = "{{ route('product-installment.schedule', ['id' => '__ID__']) }}";
    var csrfToken             = "{{ csrf_token() }}";

    // ── Installment Schedule ──────────────────────────────────────────────
    $(document).on('click', '.schedule-btn', function () {
        var id = $(this).data('id');
        $('#scheduleContent').html('<div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>');
        $('#scheduleModal').modal('show');

        $.get(scheduleUrlTemplate.replace('__ID__', id))
            .done(function (res) {
                var html = '<div class="row mb-2 px-2">'
                    + '<div class="col-md-4"><strong>Product:</strong> ' + res.product + '</div>'
                    + '<div class="col-md-4"><strong>Manager:</strong> ' + (res.manager || '-') + '</div>'
                    + '<div class="col-md-4"><strong>Total:</strong> ৳' + res.total + '</div>'
                    + '</div>'
                    + '<div class="row mb-3 px-2">'
                    + '<div class="col-md-4"><strong>Speed Money:</strong> ৳' + res.speed + '</div>'
                    + '<div class="col-md-4"><strong>Installment Total:</strong> ৳' + res.base + ' <small class="text-muted">(Total − Speed)</small></div>'
                    + '<div class="col-md-4"><strong>Total Paid:</strong> <span class="text-success">৳' + res.total_paid + '</span></div>'
                    + '</div>'
                    + '<div class="row mb-3 px-2">'
                    + '<div class="col-md-4"><strong>Installments:</strong> ' + res.count + '</div>'
                    + '<div class="col-md-4"><strong>Per Installment:</strong> ৳' + res.per + '</div>'
                    + '<div class="col-md-4"><strong>Start Month:</strong> ' + (res.start || '-') + '</div>'
                    + '</div>';

                html += '<div class="table-responsive"><table class="table table-bordered table-sm">'
                    + '<thead class="thead-dark"><tr>'
                    + '<th>#</th><th>Month</th><th class="text-right">Amount (৳)</th><th class="text-right">Paid (৳)</th><th>Status</th>'
                    + '</tr></thead><tbody>';

                if (!res.schedule.length) {
                    html += '<tr><td colspan="5" class="text-center text-muted">No schedule generated.</td></tr>';
                } else {
                    $.each(res.schedule, function (i, s) {
                        var badge = s.status === 'Paid' ? 'badge-success'
                                  : (s.status === 'Partial' ? 'badge-warning'
                                  : (s.status === 'Overdue' ? 'badge-danger' : 'badge-secondary'));
                        html += '<tr>'
                            + '<td>' + s.no + '</td>'
                            + '<td>' + s.month + '</td>'
                            + '<td class="text-right">৳' + s.amount + '</td>'
                            + '<td class="text-right">৳' + s.paid + '</td>'
                            + '<td><span class="badge ' + badge + '">' + s.status + '</span></td>'
                            + '</tr>';
                    });
                }
                html += '</tbody></table></div>';
                $('#scheduleContent').html(html);
            })
            .fail(function () {
                $('#scheduleContent').html('<div class="alert alert-danger m-3">Failed to load schedule.</div>');
            });
    });

    // ── Filter: reseller-wise POP cascade ─────────────────────────────────
    function loadFilterPops(resellerId, selectedPopId) {
        var $pop = $('#filterPop');
        $pop.html('<option value="">— All POPs —</option>');
        if (!resellerId) { $pop.trigger('change.select2'); return; }
        $.get(getResellPopListUrl, { id: resellerId }, function (result) {
            $pop.append(result);
            if (selectedPopId) { $pop.val(selectedPopId); }
            $pop.trigger('change.select2');
        });
    }
    $('#filterManager').on('change', function () {
        loadFilterPops($(this).val(), null);
    });
    if ($('#filterManager').val()) {
        loadFilterPops($('#filterManager').val(), currentPopId);
    }

    // ── Pay Modal ─────────────────────────────────────────────────────────
    function resetPayModal() {
        $('#payAmount').val('');
        $('textarea[name="note"]').val('');
        $('#payNoResellerAlert,#payResellerInfo,#balanceInfo,#payFields').hide();
        $('#paySubmitBtn').hide();
        $('#payProductName').text('');
        $('#payTypeBadge').text('—');
        $('#payResellerName').text('');
        $('#payTypeHidden,#payResellerIdHidden').val('');
    }

    function fetchPayInfo(type, resellerId) {
        $.get(commissionCheckUrl, {
            reseller_id: resellerId,
            pay_type:    type,
        }).done(function (res) {
            $('#balanceInfo').html('Manager Balance: <strong>৳' + parseFloat(res.balance).toFixed(2) + '</strong>').show();
            $('#payFields').show();
            $('#paySubmitBtn').show();
        }).fail(function () { alert('Failed to fetch data. Please try again.'); });
    }

    $(document).on('click', '.pay-btn', function () {
        var id           = $(this).data('id');
        var product      = $(this).data('product');
        var amount       = $(this).data('amount');
        var remaining    = $(this).data('remaining');
        var type         = $(this).data('pay-type');
        var resellerId   = $(this).data('reseller-id');
        var resellerName = $(this).data('reseller-name');

        resetPayModal();
        $('#payProductName').text(product);
        $('#payForm').attr('action', payFormUrlTemplate.replace('__ID__', id));
        $('#payTotalAmount').text('৳' + amount);
        $('#payRemainingAmount').text('৳' + remaining);
        $('#payAmount').attr('max', String(remaining).replace(/,/g, ''));

        if (!type || !resellerId) {
            $('#payNoResellerAlert').show();
            $('#payModal').modal('show');
            return;
        }

        var payType = type === 'own' ? 'own' : 'other';
        $('#payTypeHidden').val(payType);
        $('#payResellerIdHidden').val(resellerId);

        var badgeClass = payType === 'own' ? 'badge-primary' : 'badge-secondary';
        $('#payTypeBadge').html('<span class="badge ' + badgeClass + ' px-2">' + (payType === 'own' ? 'Own' : 'Other') + '</span>');
        $('#payResellerName').text(resellerName);
        $('#payResellerInfo').show();

        if (payType === 'own') {
            // Own managers can pay freely — no commission check.
            $('#payFields').show();
            $('#paySubmitBtn').show();
        } else {
            fetchPayInfo('other', resellerId);
        }

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

    $('#payForm').on('submit', function () {
        var $btn = $('#paySubmitBtn');
        if ($btn.prop('disabled')) return false;

        var amount    = parseFloat($('#payAmount').val());
        var remaining = parseFloat(String($('#payAmount').attr('max')).replace(/,/g, ''));
        if (isNaN(amount) || amount <= 0) {
            alert('Please enter a valid payment amount.');
            return false;
        }
        if (amount > remaining) {
            alert('Payment amount cannot exceed the remaining due (৳' + remaining.toFixed(2) + ').');
            return false;
        }

        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Processing...');
    });
    $('#payModal').on('hidden.bs.modal', function () {
        $('#paySubmitBtn').prop('disabled', false).html('<i class="fas fa-money-bill-wave mr-1"></i> Confirm Payment');
        resetPayModal();
    });

    // ── Payment History ───────────────────────────────────────────────────
    $(document).on('click', '.pay-history-btn', function () {
        var id = $(this).data('id');
        $('#payHistoryContent').html('<div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>');
        $('#payHistoryModal').modal('show');

        $.get(payHistoryUrlTemplate.replace('__ID__', id))
            .done(function (res) {
                var i = res.installment;
                var html = '<div class="row mb-3 px-3 pt-3">'
                    + '<div class="col-md-3"><strong>Product:</strong> ' + i.product + '</div>'
                    + '<div class="col-md-3"><strong>Manager:</strong> ' + i.manager + '</div>'
                    + '<div class="col-md-3"><strong>Total:</strong> ৳' + i.total + '</div>'
                    + '<div class="col-md-3"><strong>Remaining:</strong> <span class="text-danger">৳' + res.remaining + '</span></div>'
                    + '</div>'
                    + '<div class="row px-3 pb-2">'
                    + '<div class="col-md-3"><strong>Installments:</strong> ' + i.installments + ' times</div>'
                    + '<div class="col-md-3"><strong>Per Install:</strong> ৳' + i.per_install + '</div>'
                    + '</div>';

                var colCount = res.can_delete ? 8 : 7;

                html += '<div class="table-responsive px-3"><table class="table table-bordered table-sm">'
                    + '<thead class="bg-info text-white"><tr>'
                    + '<th>#</th><th>Type</th><th>Manager</th><th>Amount (৳)</th>'
                    + '<th>Note</th><th>Paid By</th><th>Date</th>'
                    + (res.can_delete ? '<th>Action</th>' : '')
                    + '</tr></thead><tbody>';

                if (!res.payments.length) {
                    html += '<tr><td colspan="' + colCount + '" class="text-center text-muted">No payments recorded.</td></tr>';
                } else {
                    $.each(res.payments, function (idx, p) {
                        var actionCell = '';
                        if (res.can_delete) {
                            var delUrl = paymentDeleteUrlTemplate.replace('__ID__', p.id);
                            actionCell = '<td>'
                                + '<form method="POST" action="' + delUrl + '" class="d-inline" '
                                + 'onsubmit="return confirm(\'Delete this payment?\')">'
                                + '<input type="hidden" name="_token" value="' + csrfToken + '">'
                                + '<input type="hidden" name="_method" value="DELETE">'
                                + '<button type="submit" class="btn btn-xs btn-danger"><i class="fas fa-trash"></i></button>'
                                + '</form></td>';
                        }
                        html += '<tr>'
                            + '<td>' + (idx + 1) + '</td>'
                            + '<td><span class="badge badge-' + (p.pay_type === 'Own' ? 'primary' : 'secondary') + '">' + p.pay_type + '</span></td>'
                            + '<td>' + p.reseller + '</td>'
                            + '<td><strong>৳' + p.amount + '</strong></td>'
                            + '<td>' + p.note + '</td>'
                            + '<td>' + p.created_by + '</td>'
                            + '<td>' + p.date + '</td>'
                            + actionCell
                            + '</tr>';
                    });
                }

                html += '</tbody></table></div>';
                html += '<div class="text-right px-3 pb-2"><strong>Total Paid: <span class="text-success">৳' + res.total_paid + '</span></strong></div>';
                $('#payHistoryContent').html(html);
            })
            .fail(function () {
                $('#payHistoryContent').html('<div class="alert alert-danger m-3">Failed to load payment history.</div>');
            });
    });

});
</script>
@endsection

@include('partials.finance-sticky-table')
@include('partials.approve-comment-modal')