@extends('layouts.app')

@section('title', 'Payment successful')

@section('content')
    <style>
        .ty-wrap { max-width: 40rem; margin: 0 auto; }
        .ty-hero {
            text-align: center;
            padding: 0 0 1.5rem 0;
            margin-bottom: 1.25rem;
            border-bottom: 1px solid var(--wr-border, #dee2e6);
        }
        .ty-badge {
            width: 4.5rem;
            height: 4.5rem;
            margin: 0 auto 1.15rem;
            border-radius: 50%;
            background: var(--wr-maroon, #a71e22);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ty-badge svg { width: 2.25rem; height: 2.25rem; color: #fff; }
        .ty-hero h2 {
            margin: 0 0 .5rem 0;
            font-family: var(--wr-serif, Georgia, serif);
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--wr-ink, #252525);
            line-height: 1.25;
        }
        .ty-hero .ty-lead {
            margin: 0 auto;
            max-width: 28rem;
            font-size: .9375rem;
            color: var(--wr-muted, #6c757d);
            line-height: 1.6;
        }
        .ty-panel {
            background: #fff;
            border: 1px solid var(--wr-border, #dee2e6);
            border-radius: 4px;
            padding: 1.25rem 1.35rem 1.35rem;
            margin-bottom: 1rem;
        }
        .ty-panel h3 {
            margin: 0 0 1rem 0;
            padding-bottom: .65rem;
            border-bottom: 1px solid var(--wr-border, #dee2e6);
            font-family: var(--wr-serif, Georgia, serif);
            font-size: 1.0625rem;
            font-weight: 700;
            color: var(--wr-ink, #252525);
        }
        .ty-dl { margin: 0; display: grid; gap: 0; }
        .ty-dl > div {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: .75rem 1rem;
            align-items: baseline;
            padding: .65rem 0;
            border-bottom: 1px solid #f1f3f5;
            font-size: .875rem;
        }
        .ty-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
        .ty-dl dt { margin: 0; color: var(--wr-muted, #6c757d); font-weight: 500; }
        .ty-dl dd { margin: 0; font-weight: 600; color: var(--wr-ink, #252525); text-align: right; word-break: break-word; max-width: 18rem; }
        .ty-dl dd.ty-mono { font-family: ui-monospace, monospace; font-size: .8125rem; }
        .ty-amount {
            font-size: 1.25rem !important;
            font-weight: 700 !important;
            color: var(--wr-maroon, #a71e22) !important;
        }
        .ty-muted-banner {
            text-align: center;
            padding: 1.25rem;
            background: #f8f9fa;
            border-radius: 4px;
            border: 1px dashed #ced4da;
            color: var(--wr-muted, #6c757d);
            font-size: .875rem;
            margin-bottom: 1rem;
        }
        .ty-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
        .ty-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            background: var(--wr-maroon, #a71e22);
            color: #fff !important;
            border: 0;
            padding: .85rem 1.5rem;
            border-radius: 4px;
            font-size: .875rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            text-decoration: none !important;
            transition: background .15s ease;
        }
        .ty-btn-primary:hover {
            background: var(--wr-maroon-hover, #8a181b);
            text-decoration: none !important;
            color: #fff !important;
        }
        .ty-note {
            margin: 1rem 0 0;
            font-size: .8125rem;
            color: var(--wr-muted, #6c757d);
            line-height: 1.55;
            text-align: center;
        }
    </style>

    @php
        $newPaymentUrl = route('payments.create', [], false);
    @endphp

    <div class="ty-wrap">
        <div class="ty-hero">
            <div class="ty-badge" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 6L9 17l-5-5"/>
                </svg>
            </div>
            <h2>Thank you</h2>
            <p class="ty-lead">
                @if(is_array($receipt) && ($receipt['status'] ?? '') === 'pending')
                    Your payment has been recorded in the database (pending card processing).
                @else
                    Your payment was processed successfully.
                    @if($transId !== '')
                        Please save your confirmation details below for your records.
                    @endif
                @endif
            </p>
        </div>

        @if(is_array($receipt) && $receipt !== [])
            <div class="ty-panel">
                <h3>Payment confirmation</h3>
                <dl class="ty-dl">
                    @if(! empty($receipt['client_name']))
                        <div>
                            <dt>Client</dt>
                            <dd>{{ $receipt['client_name'] }}</dd>
                        </div>
                    @endif
                    @if(! empty($receipt['invoice_number']))
                        <div>
                            <dt>Invoice number</dt>
                            <dd class="ty-mono">{{ $receipt['invoice_number'] }}</dd>
                        </div>
                    @endif
                    @if(! empty($receipt['record_id']))
                        <div>
                            <dt>Record ID</dt>
                            <dd class="ty-mono">{{ $receipt['record_id'] }}</dd>
                        </div>
                    @endif
                    @if(! empty($receipt['status']))
                        <div>
                            <dt>Status</dt>
                            <dd>{{ ($receipt['status'] ?? '') === 'pending' ? 'Pending (saved to database)' : ucfirst((string) $receipt['status']) }}</dd>
                        </div>
                    @endif
                    <div>
                        <dt>Amount</dt>
                        <dd class="ty-amount">${{ number_format((float) ($receipt['amount'] ?? 0), 2) }} USD</dd>
                    </div>
                    @if(! empty($receipt['paid_at']))
                        <div>
                            <dt>Date &amp; time</dt>
                            <dd>{{ $receipt['paid_at'] }}</dd>
                        </div>
                    @endif
                    @if($transId !== '')
                        <div>
                            <dt>Confirmation number</dt>
                            <dd class="ty-mono">{{ $transId }}</dd>
                        </div>
                    @endif
                    @if(! empty($receipt['auth_code']))
                        <div>
                            <dt>Authorization code</dt>
                            <dd class="ty-mono">{{ $receipt['auth_code'] }}</dd>
                        </div>
                    @endif
                </dl>
            </div>

            @if(is_array($receipt) && ($receipt['status'] ?? '') === 'pending')
            <p class="ty-note">This payment is stored in the local <strong>payments</strong> table. Add Authorize.Net sandbox keys in <code>.env</code> to charge cards and sync to Westrock via savePostedPayment.</p>
            @else
            <p class="ty-note">You may print this page for your records. Questions about your order? Call <strong>{{ config('app.phone', '973-937-8762') }}</strong>.</p>
            @endif
        @else
            <div class="ty-muted-banner">
                Your payment was received. Contact us if you need a copy of your receipt.
            </div>
            @if($transId !== '')
                <div class="ty-panel">
                    <h3>Confirmation</h3>
                    <dl class="ty-dl">
                        <div>
                            <dt>Confirmation number</dt>
                            <dd class="ty-mono">{{ $transId }}</dd>
                        </div>
                    </dl>
                </div>
            @endif
        @endif

        <div class="ty-actions">
            <a class="ty-btn-primary" href="{{ $newPaymentUrl }}">Make another payment</a>
        </div>
    </div>
@endsection