@php
    $brand = $this->brandName;
    $customer = $this->customer;
    $billing = $this->billing;
    $package = $this->package;
    $due = (float) ($billing->due_amount ?? 0);
@endphp

<div>
    <div class="hs-panel">
        <h1 class="hs-brand">{{ Str::upper($brand) }}</h1>

        {{-- ---------- Find the account ---------- --}}
        @if ($screen === 'find')
            <p class="hs-welcome">Pay your internet bill</p>
            <p class="hs-sub">Enter your account number or the phone number on your account.</p>

            @if ($error)<div class="hs-alert">{{ $error }}</div>@endif

            <form wire:submit="find">
                <label class="hs-label" for="lookup">Account or phone number</label>
                <div class="hs-input">
                    <i class="hs-glyph">&#9743;</i>
                    <input id="lookup" type="text" wire:model="lookup" placeholder="07XX XXX XXX"
                           autocomplete="off" autocapitalize="characters" spellcheck="false">
                </div>
                <button type="submit" class="hs-btn" wire:loading.attr="disabled" wire:target="find">
                    <span wire:loading.remove wire:target="find">Find my account</span>
                    <span wire:loading wire:target="find">Looking...</span>
                </button>
            </form>

        {{-- ---------- Confirm and pay ---------- --}}
        @elseif ($screen === 'confirm' && $customer)
            <p class="hs-welcome">{{ $customer->customer_name ?: 'Your account' }}</p>
            <p class="hs-sub">{{ $customer->customer_unique_id }}</p>

            @if ($error)<div class="hs-alert">{{ $error }}</div>@endif

            <div class="hs-summary">
                <span class="hs-ico"><i class="hs-glyph">&#128246;</i></span>
                <span class="hs-summary-body">
                    <span class="hs-summary-cap">YOUR PLAN</span>
                    <span class="hs-summary-name">{{ $package?->package ?: 'Internet' }}</span>
                    <span class="hs-summary-dur">
                        @if ($due > 0)
                            Outstanding balance
                        @elseif ($billing?->auto_disable_date)
                            Paid up to {{ \Carbon\Carbon::parse($billing->auto_disable_date)->format('j M Y') }}
                        @else
                            Paid up
                        @endif
                    </span>
                </span>
                <span class="hs-summary-amt">
                    <small>KSH</small>
                    <b>{{ number_format($due > 0 ? $due : (float) ($package->price ?? 0)) }}</b>
                </span>
            </div>

            <form wire:submit="payNow">
                <label class="hs-label" for="amount">Amount to pay</label>
                <div class="hs-input">
                    <i class="hs-glyph">&#128179;</i>
                    <input id="amount" type="number" inputmode="numeric" min="1" wire:model="amount">
                </div>

                <label class="hs-label" for="phone">M-Pesa number</label>
                <div class="hs-input">
                    <i class="hs-glyph">&#9743;</i>
                    <input id="phone" type="tel" inputmode="numeric" wire:model="phone"
                           placeholder="07XX XXX XXX" autocomplete="tel">
                </div>

                <button type="submit" class="hs-btn" wire:loading.attr="disabled" wire:target="payNow">
                    <span wire:loading.remove wire:target="payNow">Pay now</span>
                    <span wire:loading wire:target="payNow">Sending request...</span>
                </button>
            </form>

            <p class="hs-hint">
                You'll get a payment prompt on your phone. Enter your M-Pesa PIN to authorise.
                Paying your full balance keeps you connected for another 30 days.
            </p>

            <button type="button" class="hs-btn hs-btn-outline" style="margin-top:14px"
                    wire:click="startOver">Not you? Search again</button>

        {{-- ---------- Waiting for the PIN prompt ---------- --}}
        @elseif ($screen === 'waiting')
            <div class="hs-center" wire:poll.4s="checkPayment">
                <div class="hs-spinner"></div>
                <div class="hs-modal-title" style="margin-bottom:8px">Check your phone</div>
                <p class="hs-sub" style="margin-bottom:0">
                    Enter your M-Pesa PIN to authorise Ksh {{ number_format((float) $amount) }}.
                </p>
                <p class="hs-hint">Do not close this page.</p>
            </div>

        {{-- ---------- Done ---------- --}}
        @elseif ($screen === 'done')
            <div class="hs-center">
                <div class="hs-tick">&#10003;</div>
                <div class="hs-modal-title" style="margin-bottom:8px">Payment received</div>
                <p class="hs-sub">
                    @if ($billing && (float) $billing->due_amount > 0)
                        Thank you. Ksh {{ number_format((float) $billing->due_amount) }} is still outstanding.
                    @elseif ($billing?->auto_disable_date)
                        Thank you. You are paid up to
                        {{ \Carbon\Carbon::parse($billing->auto_disable_date)->format('j M Y') }}.
                    @else
                        Thank you.
                    @endif
                </p>
                {{-- A line cut off for non-payment is switched back on as part
                     of settling, but a router that was unreachable at that
                     moment leaves it to the nightly sweep — so promise a few
                     minutes rather than "immediately". --}}
                <p class="hs-hint">
                    If your connection was suspended it will come back within a few minutes.
                    Restart your router if it does not.
                </p>
            </div>
        @endif

        <p class="hs-foot">
            Powered by
            <a href="{{ rtrim(config('app.url'), '/') }}" target="_blank" rel="noopener">{{ \App\Models\MainSiteData::getValue('site_name') ?: 'Bilipoa' }}</a>
        </p>
    </div>
</div>