@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;">Monthly Installment</h3>
                        <div class="card-tools">
                            @can('monthly-installment-history')
                                <a href="{{ route('manager-finance-log.index', ['type' => 'MonthlyInstallment']) }}"
                                    class="btn btn-sm btn-secondary mr-1">
                                    <i class="fas fa-list-alt"></i> Edit &amp; Delete Log
                                </a>
                            @endcan
                            @can('monthly-installment-create')
                                <button data-toggle="modal" data-target="#addInstallmentModal" class="btn btn-sm btn-primary">
                                    <i class="fa fa-plus-circle"></i> Add Installment
                                </button>
                            @endcan
                        </div>
                    </div>
                    <div class="card-body py-2">

                        <form method="GET" action="{{ route('monthly-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-3">
                                    <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-3 mb-1 ml-auto 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'))
                                        <a href="{{ route('monthly-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">
                                @php
                                    // "Billed" grows on its own: amount × months elapsed since the start month.
                                    $grandPerMonth  = (float) $installments->sum('amount');
                                    $grandAmount    = (float) $installments->sum('total_billable');
                                    $grandPaid      = (float) $installments->sum('payments_sum_amount');
                                    // Sum each installment's own clamped remaining so an overpaid one can't cancel real dues on others.
                                    $grandRemaining = (float) $installments->sum('remaining_due');
                                @endphp
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Manager</th>
                                        <th>POP</th>
                                        <th>Start Month</th>
                                        <th>Status</th>
                                        <th class="text-right">Per Month (৳)</th>
                                        <th class="text-right">Billed Till Now (৳)</th>
                                        <th class="text-right">Paid (৳)</th>
                                        <th class="text-right">Due (৳)</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="5" class="text-right">Total</td>
                                        <td class="text-right">{{ number_format($grandPerMonth, 2) }}</td>
                                        <td class="text-right">{{ number_format($grandAmount, 2) }}</td>
                                        <td class="text-right text-success">{{ number_format($grandPaid, 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);
                                            $billable  = $item->total_billable;
                                            $remaining = $item->remaining_due;
                                        @endphp
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->manager->name_with_type ?? '—' }}</td>
                                            <td>{{ $item->pop->popname ?? '—' }}</td>
                                            <td>
                                                {{ $item->installment_month ? $item->installment_month->format('M Y') : '—' }}
                                                @if ($item->end_month)
                                                    <br><small class="{{ $item->is_stopped ? 'text-danger' : 'text-muted' }}">
                                                        <i class="fa fa-stop-circle"></i>
                                                        {{ $item->is_stopped ? 'Stopped after' : 'Ends' }}
                                                        {{ $item->end_month->format('M Y') }}
                                                    </small>
                                                @else
                                                    <br><small class="text-success"><i class="fa fa-sync-alt"></i> Recurring</small>
                                                @endif
                                                @if ($item->description)
                                                    <br><small class="text-muted">{{ $item->description }}</small>
                                                @endif
                                                <br><small class="text-muted"><i class="fa fa-user"></i> Added by:
                                                    {{ $item->createdBy->name ?? '—' }}</small>
                                            </td>
                                            <td>
                                                @include('partials.approval-status', ['item' => $item])
                                                @if ($item->status === 'approved')
                                                    {{-- Never "Fully Paid": next month brings another instalment. --}}
                                                    @if ($billable > 0 && $remaining <= 0)
                                                        <span class="badge badge-primary">Up to date</span>
                                                    @endif
                                                @endif
                                                @include('partials.approval-comment', ['item' => $item])
                                            </td>
                                            <td class="text-right">{{ number_format($item->amount, 2) }}</td>
                                            <td class="text-right">
                                                @if ($billable > 0)
                                                    {{ number_format($billable, 2) }}
                                                    <br><small class="text-muted">{{ $item->elapsed_periods }} ×
                                                        (till {{ $item->current_period_label }})</small>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-right">
                                                @if ($totalPaid > 0)
                                                    <strong class="text-success">{{ number_format($totalPaid, 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>
                                                @elseif ($billable > 0)
                                                    <span class="badge badge-success">Paid</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td style="white-space:nowrap">
                                                {{-- Edit stays available after approval: it is how an ongoing
                                                     installment gets its End Month set to stop the monthly billing.
                                                     Touching an approved record needs the extra *-approved permission. --}}
                                                @php
                                                    $isApproved = $item->status === 'approved';
                                                    $canEditRow = auth()->user()->can('monthly-installment-edit') && (!$isApproved || auth()->user()->can('monthly-installment-edit-approved'));
                                                    $canDeleteRow = auth()->user()->can('monthly-installment-delete') && (!$isApproved || auth()->user()->can('monthly-installment-delete-approved'));
                                                @endphp
                                                @if ($canEditRow)
                                                    <button type="button" class="btn btn-sm btn-primary edit-btn"
                                                        data-id="{{ $item->id }}"
                                                        data-manager-id="{{ $item->manager_id }}"
                                                        data-pop-id="{{ $item->pop_id }}"
                                                        data-month="{{ $item->installment_month ? $item->installment_month->format('Y-m') : '' }}"
                                                        data-end-month="{{ $item->end_month ? $item->end_month->format('Y-m') : '' }}"
                                                        data-amount="{{ $item->amount }}"
                                                        data-description="{{ $item->description }}">Edit</button>
                                                @endif
                                                @can('monthly-installment-approve')
                                                    @include('partials.approval-decision-buttons', [
                                                        'item'  => $item,
                                                        'url'   => route('monthly-installment.approve', $item->id),
                                                        'label' => 'installment',
                                                    ])
                                                @endcan
                                                @if ($canDeleteRow)
                                                    <form action="{{ route('monthly-installment.destroy', $item->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this installment?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                @endif
                                                @if ($item->status === 'approved')
                                                    @can('monthly-installment-payment')
                                                        @if ($remaining > 0)
                                                            <button type="button" class="btn btn-sm btn-warning pay-btn"
                                                                data-id="{{ $item->id }}"
                                                                data-amount="{{ number_format($billable, 2) }}"
                                                                data-period="{{ $item->elapsed_periods }} month(s) — till {{ $item->current_period_label }}"
                                                                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 }}">
                                                                <i class="fas fa-history"></i> Pay Log
                                                            </button>
                                                        @endif
                                                    @endcan
                                                @endif
                                                @can('monthly-installment-history')
                                                    <a href="{{ route('editLog-history', ['id' => $item->id, 'type' => 'MonthlyInstallment']) }}"
                                                        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>

        {{-- Add Installment Modal --}}
        @can('monthly-installment-create')
        <div class="modal fade" id="addInstallmentModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Monthly Installment</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <form method="POST" action="{{ route('monthly-installment.store') }}" id="addInstallmentForm">
                        @csrf
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Manager <span class="text-danger">*</span></label>
                                <select name="manager_id" id="addManager" class="form-control select2" required>
                                    <option value="">-- Select Manager --</option>
                                    @foreach ($managers as $manager)
                                        <option value="{{ $manager->id }}">{{ $manager->name_with_type }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>POP <span class="text-danger">*</span></label>
                                <select name="pop_id" id="addPop" class="form-control select2" required>
                                    <option value="">— Select Manager first —</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Start Month <span class="text-danger">*</span></label>
                                <input type="month" name="installment_month" class="form-control" required value="{{ date('Y-m') }}">
                            </div>
                            <div class="form-group">
                                <label>End Month</label>
                                <input type="month" name="end_month" class="form-control">
                                <small class="form-text text-muted">
                                    Last month to bill. Leave empty to keep billing every month indefinitely.
                                </small>
                            </div>
                            <div class="form-group">
                                <label>Amount per Month (৳) <span class="text-danger">*</span></label>
                                <input type="number" name="amount" class="form-control" placeholder="Enter amount" min="0.01" step="0.01" required>
                                <small class="form-text text-muted">
                                    This amount is charged every month from the start month, so it has to be paid each month.
                                </small>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" class="form-control" rows="3" placeholder="Optional note..."></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="addInstallmentSubmitBtn">Add Installment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endcan

        {{-- Edit Installment Modal --}}
        @can('monthly-installment-edit')
        <div class="modal fade" id="editInstallmentModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Monthly Installment</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <form method="POST" action="" id="editInstallmentForm">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Manager <span class="text-danger">*</span></label>
                                <select name="manager_id" id="editManager" class="form-control select2" required>
                                    <option value="">-- Select Manager --</option>
                                    @foreach ($managers as $manager)
                                        <option value="{{ $manager->id }}">{{ $manager->name_with_type }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label>POP <span class="text-danger">*</span></label>
                                <select name="pop_id" id="editPop" class="form-control select2" required>
                                    <option value="">— Select Manager first —</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Start Month <span class="text-danger">*</span></label>
                                <input type="month" name="installment_month" id="editMonth" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>End Month</label>
                                <input type="month" name="end_month" id="editEndMonth" class="form-control">
                                <small class="form-text text-muted">
                                    Last month to bill — set this to stop the monthly charge. Months already billed
                                    stay due. Leave empty to keep billing every month indefinitely.
                                </small>
                            </div>
                            <div class="form-group">
                                <label>Amount per Month (৳) <span class="text-danger">*</span></label>
                                <input type="number" name="amount" id="editAmount" class="form-control" placeholder="Enter amount" min="0.01" step="0.01" required>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" id="editDescription" class="form-control" rows="3" placeholder="Optional note..."></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="editInstallmentSubmitBtn">Update Installment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endcan

        @can('monthly-installment-payment')
        {{-- Pay Modal --}}
        <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</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">Billed Till Now</span>
                                            <span class="info-box-number" id="payInstallmentAmount" style="font-size:16px">—</span>
                                            <small class="text-muted" id="payPeriodInfo"></small>
                                        </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

    </div>
</section>
@endsection

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

    var resellerPopUrl           = "{{ route('reseller-pop') }}";
    var currentPopId             = "{{ request('pop_id') }}";
    var commissionCheckUrl       = "{{ route('monthly-installment.commission-check') }}";
    var payFormUrlTemplate       = "{{ route('monthly-installment.pay', ['id' => '__ID__']) }}";
    var payHistoryUrlTemplate    = "{{ route('monthly-installment.payment-history', ['id' => '__ID__']) }}";
    var paymentDeleteUrlTemplate = "{{ route('monthly-installment.payment-delete', ['payment' => '__ID__']) }}";
    var csrfToken                = "{{ csrf_token() }}";

    // ── POP cascade helper ────────────────────────────────────────────────
    function loadPops($select, resellerId, selectedPopId, emptyLabel) {
        $select.empty().append('<option value="">' + emptyLabel + '</option>');
        if (!resellerId) { $select.trigger('change.select2'); return; }
        $.get(resellerPopUrl, { reseller: resellerId }, function (data) {
            $.each(data.popes, function (i, pop) {
                var sel = (selectedPopId && pop.id == selectedPopId) ? 'selected' : '';
                $select.append('<option value="' + pop.id + '" ' + sel + '>' + pop.popname + '</option>');
            });
            $select.trigger('change.select2');
        });
    }

    // ── Filter: reseller-wise POP cascade ─────────────────────────────────
    $('#filterManager').on('change', function () {
        loadPops($('#filterPop'), $(this).val(), null, '— All POPs —');
    });
    if ($('#filterManager').val()) {
        loadPops($('#filterPop'), $('#filterManager').val(), currentPopId, '— All POPs —');
    }

    // ── Add modal: reseller-wise POP cascade ──────────────────────────────
    $('#addManager').on('change', function () {
        loadPops($('#addPop'), $(this).val(), null, '— Select POP —');
    });

    $('#addInstallmentForm').on('submit', function () {
        var $btn = $('#addInstallmentSubmitBtn');
        if ($btn.prop('disabled')) return false;
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Submitting...');
    });
    $('#addInstallmentModal').on('hidden.bs.modal', function () {
        $('#addInstallmentSubmitBtn').prop('disabled', false).html('Add Installment');
    });

    // ── Edit modal: reseller-wise POP cascade + populate ──────────────────
    var editFormUrlTemplate = "{{ route('monthly-installment.update', ['id' => '__ID__']) }}";

    $('#editManager').on('change', function () {
        loadPops($('#editPop'), $(this).val(), null, '— Select POP —');
    });

    $(document).on('click', '.edit-btn', function () {
        var $b = $(this);
        $('#editInstallmentForm').attr('action', editFormUrlTemplate.replace('__ID__', $b.data('id')));
        $('#editManager').val(String($b.data('manager-id'))).trigger('change.select2');
        $('#editMonth').val($b.data('month'));
        $('#editEndMonth').val($b.data('end-month') || '');
        $('#editAmount').val($b.data('amount'));
        $('#editDescription').val($b.data('description') || '');
        loadPops($('#editPop'), $b.data('manager-id'), $b.data('pop-id'), '— Select POP —');
        $('#editInstallmentModal').modal('show');
    });

    $('#editInstallmentForm').on('submit', function () {
        var $btn = $('#editInstallmentSubmitBtn');
        if ($btn.prop('disabled')) return false;
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Updating...');
    });
    $('#editInstallmentModal').on('hidden.bs.modal', function () {
        $('#editInstallmentSubmitBtn').prop('disabled', false).html('Update Installment');
    });

    // ── Pay button ────────────────────────────────────────────────────────
    $(document).on('click', '.pay-btn', function () {
        var id           = $(this).data('id');
        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();

        $('#payForm').attr('action', payFormUrlTemplate.replace('__ID__', id));
        $('#payInstallmentAmount').text('৳' + amount);
        $('#payPeriodInfo').text($(this).data('period') || '');
        $('#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');
    });

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

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

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

        var amount    = parseFloat($('#payAmount').val());
        var remaining = parseFloat($('#payAmount').attr('max'));
        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 html = '<div class="row mb-3 px-3 pt-3">'
                    + '<div class="col-md-3"><strong>Manager:</strong> ' + res.installment.manager + '</div>'
                    + '<div class="col-md-3"><strong>Month:</strong> ' + res.installment.month + '</div>'
                    + '<div class="col-md-3"><strong>Total:</strong> ৳' + res.installment.amount + '</div>'
                    + '<div class="col-md-3"><strong>Remaining:</strong> <span class="text-danger">৳' + res.remaining + '</span></div>'
                    + '</div>';

                var colCount = res.can_delete ? 8 : 7;

                html += '<div class="table-responsive"><table class="table table-bordered table-sm">'
                    + '<thead class="bg-info text-white"><tr>'
                    + '<th>#</th><th>Type</th><th>Reseller</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 (i, 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>' + (i + 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">Failed to load payment history.</div>');
            });
    });

});
</script>
@endsection

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