{{-- M-PESA on the invoice page: the prompt on the customer's phone, or paying
     the paybill/till by hand. Nothing here decides that a payment succeeded:
     the page only shows what the server learned from Safaricom. --}}
@php
    use Modules\Gateways\Mpesa\Services\Money;
    $stk = $config->bool('stk_enabled');
    $manual = $config->bool('manual_enabled');
    $till = $config->isTill();
    $kesLabel = Money::format($dueKes);
    $uid = 'mpesa-'.$invoice->id;
    $jsStrings = [
        'sending' => __('mpesa::mpesa.customer.sending'),
        'error' => __('mpesa::mpesa.customer.network_error'),
        'checking' => __('mpesa::mpesa.customer.checking'),
        'still' => __('mpesa::mpesa.customer.still_waiting'),
        'pay' => __('mpesa::mpesa.customer.send_prompt'),
        'continue' => __('mpesa::mpesa.customer.continue'),
        'bad_phone' => __('mpesa::mpesa.customer.bad_phone'),
        'bad_receipt' => __('mpesa::mpesa.customer.bad_receipt'),
    ];
@endphp
<div class="gw-form-box mpesa-box" id="{{ $uid }}"
     data-stk-url="{{ route('client.invoices.mpesa.stk', $invoice) }}"
     data-claim-url="{{ route('client.invoices.mpesa.claim', $invoice) }}"
     data-status-url="{{ $open ? route('client.invoices.mpesa.status', [$invoice, $open]) : '' }}"
     data-token="{{ csrf_token() }}">
    <style>
        .mpesa-box .mp-amount{font-size:22px;font-weight:700;margin:2px 0 4px}
        .mpesa-box .mp-sub{font-size:12.5px;color:var(--muted,#6b7280)}
        .mpesa-box .mp-tabs{display:flex;gap:6px;margin:14px 0 12px;flex-wrap:wrap}
        .mpesa-box .mp-tab{border:1px solid var(--border,#e5e7eb);background:transparent;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;color:inherit}
        .mpesa-box .mp-tab[aria-selected="true"]{border-color:var(--primary,#16a34a);color:var(--primary,#16a34a);font-weight:600}
        .mpesa-box [hidden]{display:none !important}
        .mpesa-box .mp-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border,#e5e7eb);font-size:13.5px}
        .mpesa-box .mp-row b{font-family:ui-monospace,monospace;letter-spacing:.5px}
        .mpesa-box .mp-msg{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:13.5px;background:var(--bg,#f3f4f6)}
        .mpesa-box .mp-msg.ok{background:#ecfdf5;color:#065f46}
        .mpesa-box .mp-msg.err{background:#fef2f2;color:#991b1b}
        .mpesa-box .mp-hist{width:100%;font-size:12.5px;margin-top:14px;border-collapse:collapse}
        .mpesa-box .mp-hist td,.mpesa-box .mp-hist th{padding:5px 4px;border-bottom:1px solid var(--border,#e5e7eb);text-align:left}
        .mpesa-box .mp-block{display:block;width:100%;max-width:100%;box-sizing:border-box;justify-content:center;text-align:center}
        .mpesa-box .mp-actions{display:grid;gap:6px}
        .mpesa-box .mp-env{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#fef3c7;color:#92400e;margin-bottom:8px}
    </style>

    @unless($config->isProduction())
        <span class="mp-env">{{ __('mpesa::mpesa.customer.test_mode') }}</span>
    @endunless

    @if(! $rate)
        <p class="text-sm">{{ __('mpesa::mpesa.customer.no_rate') }}</p>
    @else
        <div class="mp-sub">{{ $config->get('display_name', 'M-PESA') }} — {{ __('mpesa::mpesa.customer.amount_due') }}</div>
        <div class="mp-amount">{{ $kesLabel }}</div>
        @if($sourceCurrency !== 'KES')
            <div class="mp-sub">{{ __('mpesa::mpesa.customer.converted', ['amount' => $sourceCurrency.' '.number_format($dueSource / 100, 2)]) }}</div>
        @endif
        @if($config->get('description'))
            <p class="text-muted text-sm" style="margin-top:8px">{{ $config->get('description') }}</p>
        @endif

        @if($stk && $manual)
        <div class="mp-tabs" role="tablist">
            <button type="button" class="mp-tab" role="tab" aria-selected="true" data-panel="stk">{{ __('mpesa::mpesa.customer.tab_stk') }}</button>
            <button type="button" class="mp-tab" role="tab" aria-selected="false" data-panel="manual">{{ $till ? __('mpesa::mpesa.customer.tab_till') : __('mpesa::mpesa.customer.tab_paybill') }}</button>
        </div>
        @endif

        @if($stk)
        <div class="mp-panel" data-panel="stk" style="{{ $manual ? '' : 'margin-top:12px' }}">
            <form class="mp-stk-form" novalidate>
                <input type="hidden" name="idempotency_key" value="{{ $idempotencyKey }}">
                <label class="text-sm" for="{{ $uid }}-phone" style="display:block;margin-bottom:6px">{{ __('mpesa::mpesa.customer.phone_label') }}</label>
                <input type="tel" id="{{ $uid }}-phone" name="phone" class="form-control" inputmode="tel" autocomplete="tel"
                       value="{{ $phone ? '0'.substr($phone, 3) : '' }}" placeholder="07XX XXX XXX" maxlength="16" required>
                <p class="mp-sub" style="margin:6px 0 10px">{{ __('mpesa::mpesa.customer.phone_hint') }}</p>

                <div class="mp-review" hidden>
                    <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.review_amount') }}</span><b>{{ $kesLabel }}</b></div>
                    <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.review_phone') }}</span><b class="mp-review-phone"></b></div>
                    <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.review_reference') }}</span><b>{{ $reference }}</b></div>
                    <p class="mp-sub" style="margin:8px 0">{{ __('mpesa::mpesa.customer.pin_note') }}</p>
                </div>

                <div class="mp-actions">
                    <button type="submit" class="btn btn-primary mp-block mp-stk-btn" data-step="review">{{ __('mpesa::mpesa.customer.continue') }}</button>
                    <button type="button" class="btn btn-default mp-block mp-edit" hidden>{{ __('mpesa::mpesa.customer.change_number') }}</button>
                </div>
            </form>
            <div class="mp-msg" hidden aria-live="polite"></div>
            <button type="button" class="btn btn-default btn-sm mp-check" style="margin-top:8px" hidden>{{ __('mpesa::mpesa.customer.check_again') }}</button>
        </div>
        @endif

        @if($manual)
        <div class="mp-panel" data-panel="manual" @if($stk) hidden @endif>
            @if($till)
                <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.till_number') }}</span><b>{{ $config->payToNumber() }}</b></div>
                <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.review_amount') }}</span><b>{{ $kesLabel }}</b></div>
                <p class="text-sm" style="margin-top:10px">{{ __('mpesa::mpesa.customer.till_steps') }}</p>
            @else
                <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.paybill_number') }}</span><b>{{ $config->payToNumber() }}</b></div>
                <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.account_number') }}</span><b>{{ $reference }}</b></div>
                <div class="mp-row"><span>{{ __('mpesa::mpesa.customer.review_amount') }}</span><b>{{ $kesLabel }}</b></div>
                <p class="text-sm" style="margin-top:10px">{{ __('mpesa::mpesa.customer.paybill_steps', ['account' => $reference]) }}</p>
            @endif
            @if($config->get('instructions'))
                <p class="text-sm" style="white-space:pre-line">{{ $config->get('instructions') }}</p>
            @endif
            <form class="mp-claim-form" novalidate style="margin-top:12px">
                <label class="text-sm" for="{{ $uid }}-receipt" style="display:block;margin-bottom:6px">{{ __('mpesa::mpesa.customer.receipt_label') }}</label>
                <div style="display:flex;gap:8px;flex-wrap:wrap">
                    <input type="text" id="{{ $uid }}-receipt" name="receipt" class="form-control" maxlength="12" autocomplete="off" spellcheck="false"
                           style="text-transform:uppercase;font-family:ui-monospace,monospace;flex:1;min-width:160px" placeholder="e.g. TJK8XXXXXX" required>
                    <button type="submit" class="btn btn-primary">{{ __('mpesa::mpesa.customer.submit_code') }}</button>
                </div>
                <p class="mp-sub" style="margin-top:6px">{{ __('mpesa::mpesa.customer.receipt_hint') }}</p>
            </form>
            <div class="mp-claim-msg mp-msg" hidden aria-live="polite"></div>
        </div>
        @endif
    @endif

    @if($attempts->isNotEmpty())
    <table class="mp-hist">
        <thead><tr><th>{{ __('mpesa::mpesa.customer.history_date') }}</th><th>{{ __('mpesa::mpesa.customer.history_type') }}</th><th>{{ __('mpesa::mpesa.customer.review_amount') }}</th><th>{{ __('mpesa::mpesa.customer.history_status') }}</th><th>{{ __('mpesa::mpesa.customer.history_receipt') }}</th></tr></thead>
        <tbody>
        @foreach($attempts as $a)
            <tr>
                <td>{{ $a->created_at->format(date_fmt().' H:i') }}</td>
                <td>{{ $a->type === 'stk' ? __('mpesa::mpesa.customer.tab_stk') : __('mpesa::mpesa.customer.history_code') }}</td>
                <td>{{ $a->type === 'stk' ? Money::format(Money::minor($a->amount)) : ($a->transaction ? Money::format(Money::minor($a->transaction->amount)) : '—') }}</td>
                <td>{{ __('mpesa::mpesa.request_status.'.$a->status) }}</td>
                <td style="font-family:ui-monospace,monospace">{{ $a->transaction?->receipt ?? ($a->claimed_receipt ?: '—') }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
    @endif
</div>
<script>
(function () {
    var box = document.getElementById(@json($uid));
    if (!box || box.dataset.bound) { return; }
    box.dataset.bound = '1';

    var token = box.dataset.token;
    var statusUrl = box.dataset.statusUrl;
    var polls = 0, timer = null;
    var t = @json($jsStrings);

    function $(sel) { return box.querySelector(sel); }
    function show(el, text, kind) {
        if (!el) { return; }
        el.hidden = false; el.textContent = text;
        el.className = el.className.replace(/\s?(ok|err)\b/g, '') + (kind ? ' ' + kind : '');
    }
    function send(url, method, body) {
        return fetch(url, {
            method: method,
            headers: {'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'X-Requested-With': 'XMLHttpRequest'},
            credentials: 'same-origin',
            body: body ? JSON.stringify(body) : undefined
        }).then(function (r) { return r.json().catch(function () { return {ok: false, message: t.error}; }); });
    }

    // Tabs
    box.querySelectorAll('.mp-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
            box.querySelectorAll('.mp-tab').forEach(function (x) { x.setAttribute('aria-selected', x === tab ? 'true' : 'false'); });
            box.querySelectorAll('.mp-panel').forEach(function (p) { p.hidden = p.dataset.panel !== tab.dataset.panel; });
        });
    });

    // STK push: review first, then send once.
    var form = $('.mp-stk-form');
    var msg = form ? form.parentNode.querySelector('.mp-msg') : null;
    var check = $('.mp-check');

    function normalise(v) {
        var d = (v || '').replace(/\D+/g, '');
        if (/^0[71]\d{8}$/.test(d)) { d = '254' + d.slice(1); }
        else if (/^[71]\d{8}$/.test(d)) { d = '254' + d; }
        return /^254[71]\d{8}$/.test(d) ? d : null;
    }

    function render(data) {
        var kind = data.paid ? 'ok' : (data.final ? 'err' : '');
        show(msg, data.message, kind);
        if (data.status_url) { statusUrl = data.status_url; }
        if (data.final) {
            stop();
            if (check) { check.hidden = true; }
            if (data.paid && data.applied) { setTimeout(function () { window.location.reload(); }, 2500); }
            if (form && !data.paid) { resetForm(); }
        } else {
            if (form) { form.hidden = true; }
            poll();
        }
    }
    function stop() { if (timer) { clearTimeout(timer); timer = null; } }
    function poll() {
        stop();
        if (!statusUrl) { return; }
        polls++;
        if (polls > 45) { show(msg, t.still); if (check) { check.hidden = false; } return; }
        timer = setTimeout(function () {
            send(statusUrl + (polls % 5 === 0 ? '?refresh=1' : ''), 'GET').then(render).catch(function () { poll(); });
        }, 4000);
    }
    function resetForm() {
        form.hidden = false;
        var btn = $('.mp-stk-btn');
        btn.dataset.step = 'review'; btn.textContent = t.continue; btn.disabled = false;
        $('.mp-review').hidden = true; $('.mp-edit').hidden = true;
        // A fresh key: the next press is a new attempt, deliberately.
        form.idempotency_key.value = (window.crypto && crypto.randomUUID ? crypto.randomUUID().replace(/-/g, '') : String(Date.now()) + Math.random().toString(36).slice(2)) + 'x';
    }

    if (form) {
        $('.mp-edit').addEventListener('click', resetForm);
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var btn = $('.mp-stk-btn');
            var phone = normalise(form.phone.value);
            if (!phone) { show(msg, t.bad_phone, 'err'); return; }
            if (btn.dataset.step === 'review') {
                $('.mp-review-phone').textContent = '0' + phone.slice(3);
                $('.mp-review').hidden = false; $('.mp-edit').hidden = false;
                btn.dataset.step = 'send'; btn.textContent = t.pay;
                if (msg) { msg.hidden = true; }
                return;
            }
            btn.disabled = true; show(msg, t.sending);
            send(box.dataset.stkUrl, 'POST', {phone: form.phone.value, idempotency_key: form.idempotency_key.value})
                .then(function (data) {
                    if (!data.ok) { show(msg, data.message || t.error, 'err'); btn.disabled = false; return; }
                    polls = 0; render(data);
                })
                .catch(function () { show(msg, t.error, 'err'); btn.disabled = false; });
        });
    }
    if (check) {
        check.addEventListener('click', function () {
            check.hidden = true; show(msg, t.checking); polls = 0;
            send(statusUrl + '?refresh=1', 'GET').then(render).catch(function () { show(msg, t.error, 'err'); });
        });
    }
    // An attempt already running when the page opened: pick it up, don't resend.
    if (statusUrl && form) {
        form.hidden = true; show(msg, t.checking);
        send(statusUrl, 'GET').then(render);
    }

    // Manual payment: the code is checked against what Safaricom sent us.
    var claim = $('.mp-claim-form');
    if (claim) {
        var claimMsg = $('.mp-claim-msg');
        claim.addEventListener('submit', function (e) {
            e.preventDefault();
            var code = (claim.receipt.value || '').toUpperCase().replace(/[^A-Z0-9]/g, '');
            if (!/^[A-Z0-9]{10}$/.test(code)) { show(claimMsg, t.bad_receipt, 'err'); return; }
            var b = claim.querySelector('button'); b.disabled = true;
            send(box.dataset.claimUrl, 'POST', {receipt: code}).then(function (data) {
                b.disabled = false;
                show(claimMsg, data.message || t.error, data.ok && data.status === 'matched' ? 'ok' : (data.ok ? '' : 'err'));
                if (data.ok && data.status === 'matched') { setTimeout(function () { window.location.reload(); }, 2500); }
            }).catch(function () { b.disabled = false; show(claimMsg, t.error, 'err'); });
        });
    }
})();
</script>