@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Record Payment')
@section('page-title', 'Record Payment')

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card card-outline card-primary shadow-sm learner-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-hand-holding-usd mr-1"></i> Payment details</h3>
                <div class="card-tools"><small class="text-muted"><span class="text-danger">*</span> required</small></div>
            </div>
            <form method="POST" action="{{ route('finance.payments.store') }}">
                @csrf
                <div class="card-body">
                    {{-- Step 1: find the learner (live AJAX search) --}}
                    <div class="row">
                        <div class="col-md-12">
                            <label class="fld-label" for="learnerSearch">Find learner <span class="text-danger">*</span> <small class="text-muted font-weight-normal">— admission no / UPI / name</small></label>
                            <div class="position-relative" id="learnerSearchWrap">
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-search"></i></span></div>
                                    <input id="learnerSearch" class="form-control @error('invoice_id') is-invalid @enderror" placeholder="e.g. ZIL/001 or Amina" autocomplete="off"
                                        value="{{ ($preselectedLearner ?? null) ? $preselectedLearner->full_name . ' (' . $preselectedLearner->admission_no . ')' : '' }}">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary" id="learnerClear" title="Clear learner" style="{{ ($preselectedLearner ?? null) ? '' : 'display:none;' }}"><i class="fas fa-times"></i></button>
                                    </div>
                                </div>
                                <div id="learnerResults" class="list-group position-absolute w-100 shadow" style="z-index:50;display:none;max-height:260px;overflow:auto;"></div>
                            </div>
                            <div id="learnerChip" class="mt-2" style="{{ ($preselectedLearner ?? null) ? '' : 'display:none;' }}">
                                @if($preselectedLearner ?? null)
                                    <span class="badge badge-info p-2"><i class="fas fa-user-graduate mr-1"></i> {{ $preselectedLearner->full_name }} · {{ $preselectedLearner->admission_no }}@if($preselectedLearner->schoolClass) · {{ $preselectedLearner->schoolClass->name }}@endif</span>
                                    @if($preselectedLearner->guardian_phone)<button type="button" class="btn btn-xs btn-outline-secondary ml-1" id="useGuardianPhone" data-phone="{{ $preselectedLearner->guardian_phone }}" title="Copy guardian phone to STK fields"><i class="fas fa-phone mr-1"></i>{{ $preselectedLearner->guardian_phone }}</button>@endif
                                @endif
                            </div>
                            @error('invoice_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    {{-- Step 2: pick one of the learner's invoices --}}
                    <div class="row mt-2" id="invoiceBox" style="{{ ($preselectedLearner ?? null) ? '' : 'display:none;' }}">
                        <div class="col-md-12">
                            <label class="fld-label">Select invoice <span class="text-danger">*</span></label>
                            <div id="invoiceList" class="list-group">
                                @if(($preselectedInvoices ?? collect())->count())
                                    @foreach($preselectedInvoices as $i)
                                        <label class="list-group-item py-2 d-flex justify-content-between align-items-center mb-1 inv-pick" style="cursor:pointer;">
                                            <span>
                                                <input type="radio" name="inv_pick" value="{{ $i->id }}" data-balance="{{ $i->balance }}" class="mr-2 inv-radio" @checked((string) ($preselectedInvoiceId ?? '') === (string) $i->id)>
                                                <strong>{{ $i->invoice_no }}</strong>
                                                <small class="text-muted">{{ $i->term?->name ?? '' }} {{ $i->academicYear?->name ?? '' }}</small>
                                                <span class="badge badge-{{ $i->status === 'paid' ? 'success' : ($i->status === 'partial' ? 'warning' : 'danger') }}">{{ ucfirst($i->status) }}</span>
                                                <br><small class="text-muted">Billed {{ number_format($i->total, 0) }} · Paid {{ number_format($i->paid, 0) }}</small>
                                            </span>
                                            <span class="text-right"><strong>Bal {{ number_format($i->balance, 0) }}</strong></span>
                                        </label>
                                    @endforeach
                                @endif
                            </div>
                            <input type="hidden" name="invoice_id" id="invoiceIdField" value="{{ $preselectedInvoiceId ?? '' }}" @if(($preselectedLearner ?? null)) required @endif>
                        </div>
                    </div>
                    <noscript>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label class="fld-label">Invoice <span class="text-danger">*</span></label>
                                <select name="invoice_id" required class="form-control form-control-sm">
                                    @foreach($invoices as $i)<option value="{{ $i->id }}">{{ $i->invoice_no }} — Bal {{ number_format($i->balance, 0) }}</option>@endforeach
                                </select>
                            </div>
                        </div>
                    </noscript>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Amount <span class="text-danger">*</span></label>
                            <input name="amount" type="number" step="1" min="1" required value="{{ old('amount') }}" placeholder="0" class="form-control form-control-sm @error('amount') is-invalid @enderror">
                            @error('amount')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Method <span class="text-danger">*</span></label>
                            <select name="method" class="form-control form-control-sm @error('method') is-invalid @enderror">
                                @foreach(['Cash', 'M-Pesa', 'Co-op', 'Cheque'] as $m)<option @selected(old('method') === $m)>{{ $m }}</option>@endforeach
                            </select>
                            @error('method')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Reference (M-Pesa code / cheque no.)</label>
                            <input name="reference" value="{{ old('reference') }}" placeholder="e.g. QHX7..." class="form-control form-control-sm @error('reference') is-invalid @enderror">
                            @error('reference')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Notes</label>
                            <textarea name="notes" rows="1" class="form-control form-control-sm @error('notes') is-invalid @enderror" placeholder="Optional note">{{ old('notes') }}</textarea>
                            @error('notes')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('finance.invoices') }}" class="btn btn-sm btn-outline-secondary mr-1">Cancel</a>
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-check mr-1"></i> Save Payment</button>
                </div>
            </form>
        </div>
    </div>
    <div class="col-lg-4">
        @if($mpesaReady ?? false)
        <div class="card card-outline card-success shadow-sm learner-card" id="stkCard">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-mobile-alt mr-1"></i> M-Pesa STK Push</h3></div>
            <div class="card-body">
                <label class="fld-label">Parent phone (Safaricom)</label>
                <input id="stkPhone" class="form-control form-control-sm" placeholder="e.g. 0712 345 678" autocomplete="off">
                <label class="fld-label mt-2">Amount (KSh)</label>
                <div class="input-group input-group-sm">
                    <input id="stkAmount" type="number" min="1" step="1" class="form-control" placeholder="e.g. 5000">
                    <div class="input-group-append"><button type="button" class="btn btn-outline-secondary" id="stkUseBalance" title="Copy amount from the form">Balance</button></div>
                </div>
                <small class="text-muted d-block mt-1">Uses the invoice selected in the payment form.</small>
                <div id="stkStatus" class="mt-2"></div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-sm btn-success btn-block" id="stkSend"><i class="fas fa-paper-plane mr-1"></i> Send STK push</button>
            </div>
        </div>
        @elseif((auth()->user()->role ?? '') === 'admin')
        <div class="card shadow-sm learner-card">
            <div class="card-body">
                <p class="small text-muted mb-2"><i class="fas fa-mobile-alt mr-1"></i> Enable M-Pesa STK push by adding Daraja credentials.</p>
                @php $mp = \App\Models\PaymentMethod::where('code', 'mpesa')->first(); @endphp
                @if($mp)<a href="{{ route('payment-methods.edit', $mp) }}" class="btn btn-sm btn-outline-success btn-block">Configure M-Pesa</a>@endif
            </div>
        </div>
        @endif
        @if($tumaReady ?? false)
            @php $coopMethod = \App\Models\PaymentMethod::where('code', 'coop')->first(); @endphp
            <div class="card card-outline card-warning shadow-sm learner-card" id="coopCard">
                <div class="card-header">
                    <h3 class="card-title">
                        @if($coopMethod?->logo)
                            <img src="{{ asset('storage/' . $coopMethod->logo) }}" alt="Co-op" style="height:20px;" class="mr-1">
                        @else
                            <i class="fas fa-university mr-1"></i>
                        @endif
                        Co-op STK Push
                    </h3>
                </div>
                <div class="card-body">
                    <label class="fld-label">Parent phone</label>
                    <input id="coopPhone" class="form-control form-control-sm" placeholder="e.g. 0712 345 678" autocomplete="off">
                    <label class="fld-label mt-2">Amount (KSh)</label>
                    <div class="input-group input-group-sm">
                        <input id="coopAmount" type="number" min="1" step="1" class="form-control" placeholder="e.g. 5000">
                        <div class="input-group-append"><button type="button" class="btn btn-outline-secondary" id="coopUseBalance" title="Copy amount from the form">Balance</button></div>
                    </div>
                    <small class="text-muted d-block mt-1">Uses the invoice selected in the payment form. The invoice updates automatically once paid.</small>
                    <div id="coopStatus" class="mt-2"></div>
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-sm btn-warning btn-block" id="coopSend"><i class="fas fa-paper-plane mr-1"></i> Send Co-op push</button>
                </div>
            </div>
        @elseif((auth()->user()->role ?? '') === 'admin')
            <div class="card shadow-sm learner-card">
                <div class="card-body">
                    <p class="small text-muted mb-2"><i class="fas fa-university mr-1"></i> Enable Co-op STK push by adding Tuma credentials.</p>
                    @php $cp = \App\Models\PaymentMethod::where('code', 'coop')->first(); @endphp
                    @if($cp)<a href="{{ route('payment-methods.edit', $cp) }}" class="btn btn-sm btn-outline-warning btn-block">Configure Co-op Bank</a>@endif
                </div>
            </div>
        @endif
        <div class="card shadow-sm learner-card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-info-circle mr-1"></i> Tip</h3></div>
            <div class="card-body">
                <p class="small text-muted mb-2">Always capture the M-Pesa code or cheque number as the reference so each payment can be traced.</p>
                <div class="d-flex">
                    <a href="{{ route('finance.invoices') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Invoices</a>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
/* Live learner search -> learner invoices -> select invoice for the payment. */
(function () {
    var searchUrl = @json(route('finance.payments.search-learners'));
    var invUrl = @json(route('finance.payments.learner-invoices'));
    var csrf = (document.querySelector('input[name="_token"]') || {}).value || '';
    var box = document.getElementById('learnerSearch');
    var results = document.getElementById('learnerResults');
    var chip = document.getElementById('learnerChip');
    var clearBtn = document.getElementById('learnerClear');
    var invBox = document.getElementById('invoiceBox');
    var invList = document.getElementById('invoiceList');
    var invField = document.getElementById('invoiceIdField');
    var amountInput = document.querySelector('input[name="amount"]');
    if (!box) return;
    var timer = null, currentLearner = null;

    function fmt(n) { return Number(n || 0).toLocaleString('en-KE', { maximumFractionDigits: 0 }); }
    function pill(status) {
        var cls = status === 'paid' ? 'success' : (status === 'partial' ? 'warning' : 'danger');
        var s = document.createElement('span');
        s.className = 'badge badge-' + cls;
        s.textContent = status.charAt(0).toUpperCase() + status.slice(1);
        return s;
    }
    function hideResults() { results.style.display = 'none'; results.innerHTML = ''; }

    function renderResults(items) {
        results.innerHTML = '';
        if (!items.length) {
            var empty = document.createElement('div');
            empty.className = 'list-group-item small text-muted';
            empty.textContent = 'No learners found — try admission no, UPI or name.';
            results.appendChild(empty);
        }
        items.forEach(function (l) {
            var a = document.createElement('button');
            a.type = 'button';
            a.className = 'list-group-item list-group-item-action py-2';
            var top = document.createElement('div');
            var strong = document.createElement('strong');
            strong.textContent = l.name;
            top.appendChild(strong);
            var adm = document.createElement('small');
            adm.className = 'text-muted ml-1';
            adm.textContent = l.admission_no || '';
            top.appendChild(adm);
            a.appendChild(top);
            var sub = document.createElement('small');
            sub.className = 'text-muted';
            sub.textContent = (l.class || '—') + ' · Bal ' + fmt(l.open_balance);
            a.appendChild(sub);
            a.addEventListener('click', function () { selectLearner(l); });
            results.appendChild(a);
        });
        results.style.display = 'block';
    }

    function selectLearner(l) {
        currentLearner = l;
        box.value = l.name + ' (' + (l.admission_no || '') + ')';
        hideResults();
        chip.innerHTML = '';
        var badge = document.createElement('span');
        badge.className = 'badge badge-info p-2';
        badge.textContent = l.name + ' · ' + (l.admission_no || '') + (l.class ? ' · ' + l.class : '');
        chip.appendChild(badge);
        if (l.guardian_phone) {
            var ph = document.createElement('button');
            ph.type = 'button';
            ph.className = 'btn btn-xs btn-outline-secondary ml-1';
            ph.innerHTML = '<i class="fas fa-phone mr-1"></i>';
            ph.appendChild(document.createTextNode(l.guardian_phone));
            ph.title = 'Copy guardian phone to STK fields';
            ph.addEventListener('click', function () {
                ['stkPhone', 'coopPhone'].forEach(function (id) {
                    var el = document.getElementById(id);
                    if (el) el.value = l.guardian_phone;
                });
            });
            chip.appendChild(ph);
        }
        chip.style.display = 'block';
        clearBtn.style.display = '';
        loadInvoices(l.id, null);
    }

    function renderInvoices(items, preselectId) {
        invList.innerHTML = '';
        if (!items.length) {
            var empty = document.createElement('div');
            empty.className = 'list-group-item small text-muted';
            empty.textContent = 'This learner has no invoices yet — generate one from Invoices first.';
            invList.appendChild(empty);
            invField.value = '';
            invBox.style.display = 'block';
            return;
        }
        var chosen = null;
        items.forEach(function (inv) {
            var label = document.createElement('label');
            label.className = 'list-group-item py-2 d-flex justify-content-between align-items-center mb-1';
            label.style.cursor = 'pointer';
            var left = document.createElement('span');
            var radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = 'inv_pick';
            radio.value = inv.id;
            radio.className = 'mr-2 inv-radio';
            radio.setAttribute('data-balance', inv.balance);
            left.appendChild(radio);
            var strong = document.createElement('strong');
            strong.textContent = inv.invoice_no;
            left.appendChild(strong);
            var meta = document.createElement('small');
            meta.className = 'text-muted';
            meta.textContent = ' ' + [inv.term, inv.year].filter(Boolean).join(' ');
            left.appendChild(meta);
            left.appendChild(document.createTextNode(' '));
            left.appendChild(pill(inv.status || 'unpaid'));
            left.appendChild(document.createElement('br'));
            var sub = document.createElement('small');
            sub.className = 'text-muted';
            sub.textContent = 'Billed ' + fmt(inv.total) + ' · Paid ' + fmt(inv.paid);
            left.appendChild(sub);
            label.appendChild(left);
            var right = document.createElement('span');
            right.className = 'text-right';
            var b = document.createElement('strong');
            b.textContent = 'Bal ' + fmt(inv.balance);
            right.appendChild(b);
            label.appendChild(right);
            radio.addEventListener('change', function () { chooseInvoice(inv); });
            invList.appendChild(label);
            if (String(preselectId) === String(inv.id)) chosen = { radio: radio, inv: inv };
            if (!chosen && !preselectId && Number(inv.balance) > 0 && !chosen) chosen = { radio: radio, inv: inv };
        });
        if (!chosen) {
            var first = invList.querySelector('.inv-radio');
            if (first) chosen = { radio: first, inv: items[0] };
        }
        invBox.style.display = 'block';
        invField.required = true;
        if (chosen) { chosen.radio.checked = true; chooseInvoice(chosen.inv); }
    }

    function chooseInvoice(inv) {
        invField.value = inv.id;
        if (amountInput && Number(inv.balance) > 0) amountInput.value = Math.round(Number(inv.balance));
    }

    function loadInvoices(learnerId, preselectId) {
        invList.innerHTML = '<div class="list-group-item small text-muted"><span class="spinner-border spinner-border-sm mr-1"></span> Loading invoices…</div>';
        invBox.style.display = 'block';
        fetch(invUrl + '?learner_id=' + encodeURIComponent(learnerId), { headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (d) { renderInvoices(d.data || [], preselectId); })
            .catch(function () {
                invList.innerHTML = '<div class="list-group-item small text-danger">Could not load invoices. Try again.</div>';
            });
    }

    function clearLearner() {
        currentLearner = null;
        box.value = '';
        chip.style.display = 'none';
        chip.innerHTML = '';
        invBox.style.display = 'none';
        invList.innerHTML = '';
        invField.value = '';
        invField.required = false;
        clearBtn.style.display = 'none';
        box.focus();
    }

    box.addEventListener('input', function () {
        clearTimeout(timer);
        var q = box.value.trim();
        if (currentLearner && q !== currentLearner.name + ' (' + (currentLearner.admission_no || '') + ')') {
            currentLearner = null;
            chip.style.display = 'none'; chip.innerHTML = '';
            invBox.style.display = 'none'; invList.innerHTML = '';
            invField.value = ''; invField.required = false;
            clearBtn.style.display = 'none';
        }
        if (q.length < 2) { hideResults(); return; }
        timer = setTimeout(function () {
            fetch(searchUrl + '?q=' + encodeURIComponent(q), { headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (d) { renderResults(d.data || []); })
                .catch(function () { hideResults(); });
        }, 250);
    });
    box.addEventListener('focus', function () {
        if (results.children.length) results.style.display = 'block';
    });
    document.addEventListener('click', function (e) {
        if (!document.getElementById('learnerSearchWrap').contains(e.target)) hideResults();
    });
    clearBtn.addEventListener('click', clearLearner);
    document.addEventListener('click', function (e) {
        if (e.target && e.target.id === 'useGuardianPhone') {
            ['stkPhone', 'coopPhone'].forEach(function (id) {
                var el = document.getElementById(id);
                if (el) el.value = e.target.getAttribute('data-phone');
            });
        }
    });

    // Server-rendered radios (preselect / validation errors) behave like AJAX ones.
    invList.addEventListener('change', function (e) {
        if (e.target && e.target.classList.contains('inv-radio')) {
            invField.value = e.target.value;
            var bal = Number(e.target.getAttribute('data-balance') || 0);
            if (amountInput && bal > 0) amountInput.value = Math.round(bal);
        }
    });
})();
</script>
<script>
(function () {
    function stkWidget(prefix, sendUrl, statusUrlTpl) {
        var sendBtn = document.getElementById(prefix + 'Send');
        if (!sendBtn) return;
        var csrf = (document.querySelector('input[name="_token"]') || {}).value || '';
        var timer = null, attempts = 0;
        var idleLabel = sendBtn.innerHTML;
        function note(html, cls) {
            var s = document.getElementById(prefix + 'Status');
            s.innerHTML = '<div class="alert alert-' + (cls || 'info') + ' py-2 small mb-0">' + html + '</div>';
        }
        function setBusy(b) {
            sendBtn.disabled = b;
            sendBtn.innerHTML = b
                ? '<span class="spinner-border spinner-border-sm mr-1"></span> Waiting for PIN…'
                : idleLabel;
        }
        document.getElementById(prefix + 'UseBalance').addEventListener('click', function () {
            var main = document.querySelector('input[name="amount"]');
            if (main && main.value) document.getElementById(prefix + 'Amount').value = main.value;
        });
        function poll(checkout, label) {
            attempts++;
            fetch(statusUrlTpl.replace('__C__', checkout), { headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (d.status === 'success') {
                        clearInterval(timer); setBusy(false, label);
                        note('<i class="fas fa-check-circle mr-1"></i> Payment confirmed — invoice updated.' + (d.receipt ? ' Receipt <strong>' + d.receipt + '</strong>.' : '') + (d.receipt_url ? ' <a href="' + d.receipt_url + '">Open receipt</a>' : ''), 'success');
                    } else if (d.status === 'cancelled' || d.status === 'failed') {
                        clearInterval(timer); setBusy(false, label);
                        note('<i class="fas fa-times-circle mr-1"></i> ' + (d.message || 'Payment did not complete.'), 'danger');
                    } else if (attempts >= 30) {
                        clearInterval(timer); setBusy(false, label);
                        note('Still pending — the parent may still be entering the PIN. Refresh to check again.', 'warning');
                    }
                })
                .catch(function () { /* keep polling */ });
        }
        sendBtn.addEventListener('click', function () {
            var invoice = document.querySelector('[name="invoice_id"]');
            var payload = {
                invoice_id: invoice ? invoice.value : null,
                amount: document.getElementById(prefix + 'Amount').value,
                phone: document.getElementById(prefix + 'Phone').value,
                _token: csrf
            };
            if (!payload.phone || !payload.amount) { note('Enter the parent phone number and amount first.', 'warning'); return; }
            setBusy(true); attempts = 0;
            note('Sending prompt to ' + payload.phone + '…');
            fetch(sendUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (!res.ok || !res.d.checkout_request_id) {
                    setBusy(false, 'Send');
                    note('<i class="fas fa-times-circle mr-1"></i> ' + ((res.d && (res.d.message || res.d.errors)) || 'Could not send. Check setup.'), 'danger');
                    return;
                }
                note('<i class="fas fa-mobile-alt mr-1"></i> ' + (res.d.message || 'Prompt sent — waiting for PIN…'));
                timer = setInterval(function () { poll(res.d.checkout_request_id, 'Send'); }, 3000);
            })
            .catch(function () { setBusy(false, 'Send'); note('Network error sending push.', 'danger'); });
        });
    }
    stkWidget('coop', @json(route('coop.stk')), @json(route('coop.status', ['checkout' => '__C__'])));
})();
</script>
<script>
(function () {
    var sendBtn = document.getElementById('stkSend');
    if (!sendBtn) return;
    var stkUrl = @json(route('mpesa.stk'));
    var csrf = (document.querySelector('input[name="_token"]') || {}).value || '';
    var timer = null, attempts = 0;

    function note(html, cls) {
        var s = document.getElementById('stkStatus');
        s.innerHTML = '<div class="alert alert-' + (cls || 'info') + ' py-2 small mb-0">' + html + '</div>';
    }
    function setBusy(b) {
        sendBtn.disabled = b;
        sendBtn.innerHTML = b
            ? '<span class="spinner-border spinner-border-sm mr-1"></span> Waiting for PIN…'
            : '<i class="fas fa-paper-plane mr-1"></i> Send STK push';
    }
    document.getElementById('stkUseBalance').addEventListener('click', function () {
        var main = document.querySelector('input[name="amount"]');
        if (main && main.value) document.getElementById('stkAmount').value = main.value;
    });
    function poll(checkout) {
        attempts++;
        fetch(@json(route('mpesa.status', ['checkout' => '__C__'])).replace('__C__', checkout), { headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.status === 'success') {
                    clearInterval(timer); setBusy(false);
                    note('<i class="fas fa-check-circle mr-1"></i> Payment confirmed.' + (d.receipt ? ' Receipt <strong>' + d.receipt + '</strong>.' : '') + (d.receipt_url ? ' <a href="' + d.receipt_url + '">Open receipt</a>' : ''), 'success');
                } else if (d.status === 'cancelled' || d.status === 'failed') {
                    clearInterval(timer); setBusy(false);
                    note('<i class="fas fa-times-circle mr-1"></i> ' + (d.message || 'Payment did not complete.'), 'danger');
                } else if (attempts >= 30) {
                    clearInterval(timer); setBusy(false);
                    note('Still pending — the parent may still be entering the PIN. Refresh to check again.', 'warning');
                }
            })
            .catch(function () { /* keep polling */ });
    }
    sendBtn.addEventListener('click', function () {
        var invoice = document.querySelector('[name="invoice_id"]');
        var payload = {
            invoice_id: invoice ? invoice.value : null,
            amount: document.getElementById('stkAmount').value,
            phone: document.getElementById('stkPhone').value,
            _token: csrf
        };
        if (!payload.phone || !payload.amount) { note('Enter the parent phone number and amount first.', 'warning'); return; }
        setBusy(true); attempts = 0;
        note('Sending prompt to ' + payload.phone + '…');
        fetch(stkUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
        .then(function (res) {
            if (!res.ok || !res.d.checkout_request_id) {
                setBusy(false);
                note('<i class="fas fa-times-circle mr-1"></i> ' + ((res.d && (res.d.message || res.d.errors)) || 'Could not send. Check M-Pesa setup.'), 'danger');
                return;
            }
            note('<i class="fas fa-mobile-alt mr-1"></i> ' + (res.d.message || 'Prompt sent — waiting for PIN…'));
            timer = setInterval(function () { poll(res.d.checkout_request_id); }, 3000);
        })
        .catch(function () { setBusy(false); note('Network error sending STK push.', 'danger'); });
    });
})();
</script>
@endpush
@endsection