@php
    // Whose network this is. On a tenant subdomain these are the seller's own
    // details; on bilipoa.com itself they fall back to the platform's.
    $siteName = $this->brandName;
    $supportPhone = $this->supportPhone;
    $whatsapp = preg_replace('/\D/', '', $supportPhone);
    $theme = $this->theme;

    // The platform's own name, not the seller's. Every hotspot running on
    // Bilipoa is a shop window for it, so the credit is fixed rather than a
    // field a tenant can blank out.
    $platform = \App\Models\MainSiteData::getValue('site_name') ?: 'Bilipoa';
    $platformUrl = rtrim(config('app.url'), '/');
@endphp

<div>
    {{-- ============================ HOME ============================ --}}
    <div class="hs-panel">
        <h1 class="hs-brand">{{ Str::upper($siteName) }}</h1>
        <p class="hs-welcome">
            {{ $theme->get('welcome') ?: 'Welcome to '.Str::upper($siteName) }}
        </p>
        <p class="hs-sub">{{ $theme->get('tagline') }}</p>

        @if ($theme->get('show_help'))
            <div class="hs-help">
                <strong>{{ $theme->get('help_label') }}</strong>
                <a href="tel:{{ $whatsapp }}">{{ $supportPhone }}</a>
            </div>
        @endif

        <button type="button" class="hs-btn" wire:click="open('methods')">
            <i class="hs-glyph">&#9919;</i> Access network
        </button>

        @if ($this->trial && $theme->get('show_trial'))
            {{-- Once a device has had its trial the card stays, but says so.
                 Removing it entirely makes a returning customer wonder where it
                 went; a button that always refuses is worse still. --}}
            <div class="hs-trial {{ $this->trialUsed ? 'is-spent' : '' }}">
                <div class="hs-trial-body">
                    <div class="hs-trial-title">
                        <i class="hs-glyph">&#10022;</i>
                        {{ $this->trial->package }}
                        <span class="hs-chip">TRIAL</span>
                    </div>
                    <div class="hs-trial-note">
                        {{ $this->trialUsed ? 'Already used on this device' : 'Try the network on us' }}
                    </div>
                </div>

                @if ($this->trialUsed)
                    <span class="hs-trial-spent">Used</span>
                @else
                    <button type="button" class="hs-btn hs-btn-sm" wire:click="startTrial"
                            wire:loading.attr="disabled" wire:target="startTrial">
                        <span wire:loading.remove wire:target="startTrial">Start trial</span>
                        <span wire:loading wire:target="startTrial">Starting...</span>
                    </button>
                @endif
            </div>
        @endif

        <div class="hs-rule">Available plans</div>

        @forelse ($this->plans as $plan)
            <div class="hs-plan">
                <div class="hs-plan-body">
                    <div class="hs-plan-name">{{ $plan->package }}</div>
                    <div class="hs-plan-price">
                        <b>Ksh {{ (int) $plan->price }}</b> for {{ $plan->description ?: $plan->speed }}
                    </div>
                </div>
                <button type="button" class="hs-btn hs-btn-outline" wire:click="buy({{ $plan->id }})">Buy</button>
            </div>
        @empty
            <p class="hs-sub">No packages are available on this network yet.</p>
        @endforelse

        {{-- Only when a plan actually sells more than one device, and only when
             the operator offers the sign-in method it depends on. A customer on
             their second phone sees the plan list and no reason to think they
             have already paid for this. --}}
        @if ($this->multiDevice > 1 && $theme->get('show_account'))
            <button type="button" class="hs-multi" wire:click="open('account')">
                <b>Already bought a {{ $this->multiDevice }}-device plan?</b>
                <span>Sign in with the same username and password to put this device online too.</span>
            </button>
        @endif

        {{-- A TV has no browser to show this page in, so it needs its own path:
             the operator binds the device by MAC instead. --}}
        @if ($theme->get('show_tv'))
        <button type="button" class="hs-tile hs-method" style="margin-top:14px"
                wire:click="open('tv')">
            <span class="hs-ico"><i class="hs-glyph">&#9635;</i></span>
            <span class="hs-method-body">
                <span class="hs-method-title">Set up a TV or streaming device</span>
            </span>
            <span class="hs-caret">&rsaquo;</span>
        </button>
        @endif

        <p class="hs-foot">
            Powered by
            <a href="{{ $platformUrl }}" target="_blank" rel="noopener">{{ $platform }}</a>
        </p>
    </div>

    {{-- ============================ MODALS ============================ --}}
    @if ($screen)
        <div class="hs-scrim" wire:key="screen-{{ $screen }}">
            <div class="hs-modal">

                {{-- ---------- Choose how to get back on ---------- --}}
                @if ($screen === 'methods')
                    <div class="hs-modal-head">
                        <div class="hs-modal-title">How would you like to reconnect?</div>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>

                    @if ($theme->get('show_vouchers'))
                    <button type="button" class="hs-tile hs-method" wire:click="open('voucher')">
                        <span class="hs-ico"><i class="hs-glyph">&#127903;</i></span>
                        <span class="hs-method-body">
                            <span class="hs-method-title">Voucher</span>
                            <span class="hs-method-note">Use a prepaid code from a printed receipt or SMS.</span>
                        </span>
                        <span class="hs-caret">&rsaquo;</span>
                    </button>

                    @endif

                    @if ($theme->get('show_mpesa_code'))
                    <button type="button" class="hs-tile hs-method" wire:click="open('mpesa-code')">
                        <span class="hs-ico"><i class="hs-glyph">&#128179;</i></span>
                        <span class="hs-method-body">
                            <span class="hs-method-title">Reconnect with M-Pesa code</span>
                            <span class="hs-method-note">Reconnect using a transaction code from a recent payment.</span>
                        </span>
                        <span class="hs-caret">&rsaquo;</span>
                    </button>

                    @endif

                    @if ($theme->get('show_account'))
                    <button type="button" class="hs-tile hs-method" wire:click="open('account')">
                        <span class="hs-ico"><i class="hs-glyph">&#128273;</i></span>
                        <span class="hs-method-body">
                            <span class="hs-method-title">Username &amp; password</span>
                            <span class="hs-method-note">Sign in with your existing username and password.</span>
                        </span>
                        <span class="hs-caret">&rsaquo;</span>
                    </button>
                    @endif
                @endif

                {{-- ---------- Voucher ---------- --}}
                @if ($screen === 'voucher')
                    <div class="hs-modal-head">
                        <button type="button" class="hs-back" wire:click="open('methods')">
                            <span>&lsaquo;</span> Change method
                        </button>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>
                    <div class="hs-modal-title" style="margin-bottom:16px">Redeem voucher</div>

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

                    <form wire:submit="redeemVoucher">
                        <label class="hs-label" for="voucher">Voucher code</label>
                        <div class="hs-input">
                            <i class="hs-glyph">&#127903;</i>
                            <input id="voucher" type="text" wire:model="voucherCode" placeholder="ABCD-1234"
                                   autocomplete="off" autocapitalize="characters" spellcheck="false">
                        </div>
                        <button type="submit" class="hs-btn" wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="redeemVoucher">Redeem voucher</span>
                            <span wire:loading wire:target="redeemVoucher">Checking...</span>
                        </button>
                    </form>

                    <p class="hs-hint">Vouchers are prepaid codes printed on receipts or sent via SMS by your operator.</p>
                @endif

                {{-- ---------- Reconnect with an M-Pesa receipt ---------- --}}
                @if ($screen === 'mpesa-code')
                    <div class="hs-modal-head">
                        <button type="button" class="hs-back" wire:click="open('methods')">
                            <span>&lsaquo;</span> Change method
                        </button>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>
                    <div class="hs-modal-title" style="margin-bottom:16px">Reconnect with M-Pesa code</div>

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

                    <form wire:submit="reconnectWithCode">
                        <label class="hs-label" for="mcode">M-Pesa code</label>
                        <div class="hs-input">
                            <i class="hs-glyph">&#128179;</i>
                            <input id="mcode" type="text" wire:model="mpesaCode" placeholder="QGH5J2K9XY"
                                   autocomplete="off" autocapitalize="characters" spellcheck="false">
                        </div>
                        <button type="submit" class="hs-btn" wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="reconnectWithCode">Reconnect</span>
                            <span wire:loading wire:target="reconnectWithCode">Checking...</span>
                        </button>
                    </form>

                    <p class="hs-hint">Use a transaction code from a recent payment to reconnect without paying again.</p>
                @endif

                {{-- ---------- Existing account ---------- --}}
                @if ($screen === 'account')
                    <div class="hs-modal-head">
                        <button type="button" class="hs-back" wire:click="open('methods')">
                            <span>&lsaquo;</span> Change method
                        </button>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>
                    <div class="hs-modal-title" style="margin-bottom:16px">Use your account</div>

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

                    <form wire:submit="useAccount">
                        <label class="hs-label" for="acct">Username</label>
                        <div class="hs-input">
                            <i class="hs-glyph">&#128273;</i>
                            <input id="acct" type="text" wire:model="accountUser" placeholder="Enter your username"
                                   autocomplete="username" autocapitalize="none" spellcheck="false">
                        </div>

                        <label class="hs-label" for="acctpw">Password</label>
                        <div class="hs-input">
                            <i class="hs-glyph">&#128273;</i>
                            <input id="acctpw" type="password" wire:model="accountPass" placeholder="Enter your password"
                                   autocomplete="current-password">
                        </div>

                        <button type="submit" class="hs-btn">Log in</button>
                    </form>

                    <p class="hs-hint">Use the username and password your operator provided when your account was created.</p>
                @endif

                {{-- ---------- Pay for a package ---------- --}}
                @if ($screen === 'pay')
                    <div class="hs-modal-head">
                        <div class="hs-modal-title">Complete payment</div>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>

                    @if ($this->selected)
                        <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">SELECTED PACKAGE</span>
                                <span class="hs-summary-name">{{ $this->selected->package }}</span>
                                <span class="hs-summary-dur">{{ $this->selected->description }}</span>
                            </span>
                            <span class="hs-summary-amt">
                                <small>KSH</small>
                                <b>{{ (int) $this->selected->price }}</b>
                            </span>
                        </div>
                    @endif

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

                    <form wire:submit="payNow">
                        <label class="hs-label" for="phone">Phone 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">
                            <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 Mobile Money PIN to authorise and connect.</p>
                @endif

                {{-- ---------- Waiting for the PIN prompt ---------- --}}
                @if ($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
                            {{ $this->selected ? 'Ksh '.(int) $this->selected->price : 'the payment' }}.
                            We'll connect you the moment it goes through.
                        </p>
                        <p class="hs-hint">Do not close this page.</p>
                    </div>
                @endif

                {{-- ---------- TV / streaming device ---------- --}}
                @if ($screen === 'tv')
                    <div class="hs-modal-head">
                        <div class="hs-modal-title">Set up a TV or streaming device</div>
                        <button type="button" class="hs-x" wire:click="close" aria-label="Close">&times;</button>
                    </div>
                    <p class="hs-hint" style="margin-top:0">
                        A TV, console or streaming stick has no browser to show this page in, so it has to be
                        registered by hand. Call or WhatsApp <b>{{ $supportPhone }}</b> with the device's
                        Wi-Fi MAC address and we'll bind it to your package.
                    </p>
                    <p class="hs-hint">
                        On most TVs the MAC is under <b>Settings &rsaquo; Network &rsaquo; Status</b>.
                    </p>
                    <a class="hs-btn" href="tel:{{ $whatsapp }}" style="margin-top:16px">Call support</a>
                @endif

                {{-- ---------- Success: hand the router its credentials ---------- --}}
                @if ($screen === 'done' && $grant)
                    <div class="hs-center">
                        <div class="hs-tick">&#10003;</div>
                        <div class="hs-modal-title" style="margin-bottom:8px">You're all set</div>
                        <p class="hs-sub">Connecting you to the network...</p>
                    </div>

                    {{-- The router, not this app, performs the actual login.

                         This is a top-level navigation rather than a form POST
                         on purpose: this page is HTTPS and the router's login
                         endpoint is plain HTTP, and Chrome puts a "the
                         information you're about to submit is not secure"
                         interstitial in front of mixed-content form posts. A
                         navigation carries no such warning. The credential in
                         the URL is a random one-off bound to this session and
                         this device, travelling one hop to the gateway. --}}
                    <a class="hs-btn" id="hs-handoff" href="{{ $this->handoffUrl }}">Continue</a>

                    <script>
                        // A brief pause so the tick is actually seen; the router
                        // redirect that follows is instant.
                        setTimeout(function () {
                            window.location.replace(document.getElementById('hs-handoff').href);
                        }, 900);
                    </script>
                @endif

            </div>
        </div>
    @endif
</div>