@extends('layouts.standalone', ['title' => 'JazzCash Payment'])

@push('head')
    <style>
        :root {
            --payment-bg: #f7f8fb;
            --payment-card: #ffffff;
            --payment-border: #d9dde5;
            --payment-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
            --payment-primary: #0d6b37;
            --payment-primary-dark: #07592d;
            --payment-text: #425466;
            --payment-heading: #0f6c44;
            --payment-accent: #22b8e8;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(34, 184, 232, 0.12), transparent 28%),
                linear-gradient(180deg, #ffffff 0%, var(--payment-bg) 100%);
            color: var(--payment-text);
        }

        .payment-shell {
            width: min(1220px, calc(100% - 32px));
            margin: 42px auto;
        }

        .payment-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
            gap: 28px;
            align-items: start;
        }

        .payment-card {
            background: var(--payment-card);
            border: 1px solid var(--payment-border);
            border-radius: 16px;
            box-shadow: var(--payment-shadow);
        }

        .payment-brand {
            width: 196px;
            margin: 0 0 24px 36px;
            padding: 12px 18px;
        }

        .payment-brand-mark {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .payment-brand-icon {
            position: relative;
            width: 48px;
            height: 48px;
        }

        .payment-brand-icon::before,
        .payment-brand-icon::after {
            content: "";
            position: absolute;
            top: 4px;
            width: 26px;
            height: 40px;
            border-radius: 999px 999px 999px 999px / 18px 18px 22px 22px;
        }

        .payment-brand-icon::before {
            left: 2px;
            background: linear-gradient(180deg, #ffd33d 0%, #ffb703 100%);
            transform: rotate(10deg);
        }

        .payment-brand-icon::after {
            right: 2px;
            background: linear-gradient(180deg, #ff4d5a 0%, #e31b54 100%);
            transform: rotate(-10deg);
        }

        .payment-brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.05;
        }

        .payment-brand-title {
            font-size: 1.55rem;
            font-weight: 800;
            color: #1f2937;
        }

        .payment-brand-subtitle {
            font-size: 0.88rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }

        .payment-cta-card {
            padding: 32px;
            min-height: 230px;
        }

        .payment-topup-form {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.2s ease;
            margin-bottom: 0;
        }

        .payment-topup-form.is-visible {
            max-height: 120px;
            opacity: 1;
            margin-bottom: 18px;
        }

        .payment-topup-label {
            font-size: 0.92rem;
            font-weight: 600;
            color: #5d6b7c;
            margin-bottom: 8px;
        }

        .payment-topup-input {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            min-height: 52px;
            padding: 0 16px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .payment-topup-input:focus {
            border-color: rgba(13, 107, 55, 0.5);
            box-shadow: 0 0 0 4px rgba(13, 107, 55, 0.1);
        }

        .payment-button {
            width: 100%;
            min-height: 50px;
            border: 0;
            border-radius: 11px;
            background: linear-gradient(180deg, var(--payment-primary) 0%, var(--payment-primary-dark) 100%);
            color: #fff;
            font-size: 1.08rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            box-shadow: 0 14px 28px rgba(13, 107, 55, 0.18);
        }

        .payment-button:hover {
            filter: brightness(1.03);
        }

        .payment-info-card {
            padding: 20px 18px 28px;
            min-height: 310px;
        }

        .payment-section-title,
        .payment-instruction-title {
            text-align: center;
            font-size: clamp(2rem, 2vw, 2.4rem);
            line-height: 1.15;
            letter-spacing: 0.03em;
            color: var(--payment-heading);
            font-weight: 700;
            margin-bottom: 28px;
        }

        .payment-info-list {
            display: grid;
            gap: 18px;
        }

        .payment-info-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #d6dbe3;
            font-size: 1.05rem;
        }

        .payment-info-value {
            color: var(--payment-accent);
            font-weight: 500;
        }

        .payment-instructions-card {
            margin-top: 28px;
            padding: 28px 36px 34px;
        }

        .payment-instruction-copy {
            max-width: 560px;
            margin-left: auto;
            direction: rtl;
            text-align: right;
            font-size: 1.06rem;
            line-height: 2;
            color: #4b5563;
        }

        .payment-instruction-copy ol {
            margin: 12px 0 0;
            padding: 0 18px 0 0;
        }

        @media (max-width: 991.98px) {
            .payment-grid {
                grid-template-columns: 1fr;
            }

            .payment-brand {
                margin-left: 0;
            }
        }

        @media (max-width: 575.98px) {
            .payment-shell {
                width: min(100% - 24px, 1220px);
                margin: 24px auto;
            }

            .payment-cta-card,
            .payment-info-card,
            .payment-instructions-card {
                padding-left: 18px;
                padding-right: 18px;
            }

            .payment-section-title,
            .payment-instruction-title {
                font-size: 1.75rem;
            }

            .payment-info-row {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
@endpush

@section('content')
    <div class="payment-shell">
        <div class="payment-brand payment-card">
            <div class="payment-brand-mark" aria-label="JazzCash">
                <div class="payment-brand-icon" aria-hidden="true"></div>
                <div class="payment-brand-text">
                    <span class="payment-brand-title">JazzCash</span>
                    <span class="payment-brand-subtitle">Wallet</span>
                </div>
            </div>
        </div>

        <div class="payment-grid">
            <section class="payment-card payment-cta-card">
                <div class="payment-topup-form" id="paymentTopupForm">
                    <label for="payerNumber" class="payment-topup-label">Enter Number</label>
                    <input
                        id="payerNumber"
                        type="text"
                        inputmode="numeric"
                        class="payment-topup-input"
                        placeholder="03xx xxxx xxx">
                </div>

                <button type="button" class="payment-button" id="paymentTriggerButton">Make Payment PKR {{ $amount }}</button>
            </section>

            <section class="payment-card payment-info-card">
                <h1 class="payment-section-title">Payment Information</h1>

                <div class="payment-info-list">
                    <div class="payment-info-row">
                        <span>Order Date</span>
                        <span class="payment-info-value">{{ $orderDate }}</span>
                    </div>
                    <div class="payment-info-row">
                        <span>Order ID</span>
                        <span class="payment-info-value">{{ $orderId }}</span>
                    </div>
                    <div class="payment-info-row">
                        <span>Total Order Amount</span>
                        <span class="payment-info-value">{{ $amount }} PKR</span>
                    </div>
                </div>
            </section>
        </div>

        <section class="payment-card payment-instructions-card">
            <h2 class="payment-instruction-title">Instructions</h2>

            <div class="payment-instruction-copy">
                Zaroori Ahkamaat
                <br>
                Tasdeeq yafta wallet account darj karna zaroori hai. Is ke liye neechay di gayi hidayaat par amal karein.
                <ol>
                    <li>Transaction ka notification hasil karein.</li>
                    <li>Apni JazzCash app kholein aur sign in karein.</li>
                    <li>App mein Payment Requests ya My Approvals section check karein.</li>
                    <li>Transaction ki request accept karein.</li>
                </ol>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const paymentButton = document.getElementById('paymentTriggerButton');
            const topupForm = document.getElementById('paymentTopupForm');
            const payerNumber = document.getElementById('payerNumber');

            if (!paymentButton || !topupForm || !payerNumber) {
                return;
            }

            paymentButton.addEventListener('click', function () {
                const isVisible = topupForm.classList.toggle('is-visible');

                if (isVisible) {
                    window.setTimeout(function () {
                        payerNumber.focus();
                    }, 120);
                }
            });
        });
    </script>
@endpush