@extends('layouts.app')
@section('title', 'Pay invoice')
@section('section', 'Checkout')

@php
    $cur = config('payments.currency');
    $dp  = \App\Payments\Support\Currency::decimals($cur);
    $fmt = fn ($n) => number_format((float) $n, $dp);
    $due = (float) $sale->due_amount;
    $isPaid = $due <= 0;
    $anyGateway = ($configured['myfatoorah'] ?? false) || ($configured['tap'] ?? false);
@endphp

@section('content')
    <a class="back" href="{{ url('/') }}">← Back</a>

    <div class="page-head">
        <p class="eyebrow">Checkout</p>
        <h1>{{ $isPaid ? 'Invoice settled' : 'Pay invoice' }}</h1>
    </div>

    <div class="receipt">
        <div class="rec-top">
            <div>
                <div class="rec-invoice">{{ $sale->invoice_no }}</div>
                <div class="rec-cust">{{ optional($sale->contact)->name ?? 'Walk-in customer' }} · {{ \Illuminate\Support\Carbon::parse($sale->sale_date)->format('d M Y') }}</div>
            </div>
            @if ($isPaid)
                <span class="pill pill-ok"><span class="dot"></span>Paid</span>
            @else
                <span class="pill pill-off"><span class="dot"></span>{{ $sale->paid_amount > 0 ? 'Partly paid' : 'Unpaid' }}</span>
            @endif
        </div>

        <hr class="tear">

        <div class="rec-rows">
            <div class="rec-row"><span class="k">Subtotal</span><span class="v">{{ $fmt($sale->subtotal) }}</span></div>
            @if ((float) $sale->discount_amount > 0)
                <div class="rec-row"><span class="k">Discount</span><span class="v">−{{ $fmt($sale->discount_amount) }}</span></div>
            @endif
            <div class="rec-row"><span class="k">Tax</span><span class="v">{{ $fmt($sale->tax_amount) }}</span></div>
            <div class="rec-row"><span class="k">Total</span><span class="v">{{ $fmt($sale->total) }}</span></div>
            @if ((float) $sale->paid_amount > 0)
                <div class="rec-row"><span class="k">Paid</span><span class="v">−{{ $fmt($sale->paid_amount) }}</span></div>
            @endif
        </div>

        <div class="due">
            <p class="due-label">{{ $isPaid ? 'Amount paid' : 'Amount due' }}</p>
            <div class="due-amount"><span class="cur">{{ $cur }}</span>{{ $fmt($isPaid ? $sale->total : $due) }}</div>
            <div class="due-rule"></div>
        </div>
    </div>

    @if ($isPaid)
        <div class="panel">
            <p class="settled" style="margin-top:0"><span class="pill pill-ok"><span class="dot"></span>Settled</span>
                Nothing left to pay on this invoice.</p>
        </div>
    @elseif (! $anyGateway)
        <div class="panel">
            <p class="gw-name" style="font-size:16px">No payment method connected</p>
            <p class="gw-note">Add your MyFatoorah or Tap keys to start collecting payments.</p>
            <div class="actions">
                <a class="btn btn-primary" href="{{ route('settings.gateways') }}">Connect a gateway</a>
            </div>
        </div>
    @else
        <form class="panel" method="POST" action="{{ route('checkout.pay') }}">
            @csrf
            <input type="hidden" name="sale_id" value="{{ $sale->id }}">
            <p class="label" style="font-size:14px;margin-bottom:12px">Choose how to pay</p>

            <div class="choices">
                <label class="choice {{ ($configured['myfatoorah'] ?? false) ? '' : 'is-disabled' }}">
                    <input type="radio" name="gateway" value="myfatoorah"
                        {{ ($configured['myfatoorah'] ?? false) ? '' : 'disabled' }}
                        @checked(($configured['myfatoorah'] ?? false))>
                    <span class="tick" aria-hidden="true"></span>
                    <span>
                        <span class="choice-name">MyFatoorah</span>
                        <span class="choice-meta">KNET · mada · Apple Pay · Visa · Mastercard</span>
                    </span>
                </label>

                <label class="choice {{ ($configured['tap'] ?? false) ? '' : 'is-disabled' }}">
                    <input type="radio" name="gateway" value="tap"
                        {{ ($configured['tap'] ?? false) ? '' : 'disabled' }}
                        @checked(($configured['tap'] ?? false) && ! ($configured['myfatoorah'] ?? false))>
                    <span class="tick" aria-hidden="true"></span>
                    <span>
                        <span class="choice-name">Tap</span>
                        <span class="choice-meta">KNET · mada · Benefit · Apple Pay · Cards</span>
                    </span>
                </label>
            </div>

            <div class="actions" style="margin-top:18px">
                <button class="btn btn-primary btn-lg" type="submit">Pay {{ $cur }} {{ $fmt($due) }}</button>
            </div>

            <p class="safe-note">
                <span>🔒</span>
                <span>You'll continue to the provider's secure page to complete payment.
                Card details are never entered here.</span>
            </p>
        </form>
    @endif
@endsection