{{-- "Ask the customer to pay by M-Pesa". Include on the deal page: @includeIf('deals._mpesa', ['deal' => $deal]) --}}
@can('mpesa.initiate') @if (in_array($deal->status, [\App\Enums\DealStatus::Approved, \App\Enums\DealStatus::Confirmed]) && bccomp($deal->balance_due, '0', 2) > 0)
<section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="mp-h"
         x-data="mpesaRequest({ url: @js(route('mpesa.stk.initiate', $deal)), statusUrl: @js(url('/mpesa/stk')), phone: @js(\App\Support\Phone::display($deal->customer->phone)), amount: @js((int) min(floor((float) $deal->balance_due), max((float) $deal->deposit_required - (float) $deal->paid, 1))) })">
    <h2 id="mp-h" class="text-sm font-semibold">Ask the customer to pay by M-Pesa</h2>
    <form class="mt-3 grid gap-3 sm:grid-cols-4" @submit.prevent="send()">
        <div class="sm:col-span-2"><label for="mp_phone" class="mb-1 block text-xs font-medium">Safaricom number</label><input id="mp_phone" x-model="phone" inputmode="tel" required class="field"></div>
        <div><label for="mp_amount" class="mb-1 block text-xs font-medium">Amount (whole shillings)</label><input id="mp_amount" x-model="amount" type="number" min="1" step="1" max="{{ (int) floor((float) $deal->balance_due) }}" required class="field"></div>
        <div class="flex items-end"><button class="btn-primary w-full" :disabled="busy">Send request</button></div>
    </form>
    <p class="mt-3 text-sm" role="status" aria-live="polite" x-show="message" x-cloak :class="state === 'success' ? 'text-go font-medium' : (state === 'bad' ? 'text-stop' : '')" x-text="message"></p>
    <p class="mt-1 text-xs text-muted">The customer gets a prompt on their phone and enters their M-Pesa PIN. The payment is recorded and a receipt issued automatically.</p>

    <script>
        function mpesaRequest(cfg) {
            return {
                phone: cfg.phone, amount: cfg.amount, busy: false, message: '', state: '', timer: null,
                csrf() { return document.querySelector('meta[name=csrf-token]').content; },
                async send() {
                    this.busy = true; this.message = 'Sending…'; this.state = '';
                    try {
                        const r = await fetch(cfg.url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf() }, body: JSON.stringify({ phone: this.phone, amount: this.amount }) });
                        const d = await r.json();
                        if (!r.ok) { this.message = Object.values(d.errors || { e: [d.message || 'Could not send the request.'] }).flat()[0]; this.state = 'bad'; this.busy = false; return; }
                        this.show(d); if (!d.final) this.poll(d.id, 0);
                    } catch (e) { this.message = 'Could not reach the server.'; this.state = 'bad'; this.busy = false; }
                },
                show(d) { this.message = d.message + (d.receipt ? ' (' + d.receipt + ')' : ''); this.state = d.status === 'success' ? 'success' : (d.final ? 'bad' : ''); if (d.final) this.busy = false; if (d.status === 'success') setTimeout(() => location.reload(), 1500); },
                poll(id, n) {
                    clearTimeout(this.timer);
                    this.timer = setTimeout(async () => {
                        try { const d = await (await fetch(cfg.statusUrl + '/' + id + '/status', { headers: { 'Accept': 'application/json' } })).json(); this.show(d); if (d.final) return; } catch (e) {}
                        if (n < 40) this.poll(id, n + 1); else { this.message = 'Still waiting. You can leave this page: the payment is recorded when it arrives.'; this.busy = false; }
                    }, 3000);
                },
            };
        }
    </script>
</section>
@endif @endcan