@extends('User.layout')

@section('title', 'Secure Checkout')

@section('content')

@php
    $amount = max(0, (float) request('amount', 100));
    $goldRate = max(0, (float) request('gold_rate', 7000));

    $grams = $goldRate > 0 ? $amount / $goldRate : 0;
    $gst = $amount * 0.03;
    $total = $amount + $gst;
@endphp

<section class="payment-section">
    <div class="container">

        {{-- HEADER --}}
        <div class="payment-header">
            <a href="javascript:history.back()" class="back-link" aria-label="Go back">
                <i class="bi bi-arrow-left"></i>
            </a>

            <div>
                <h2>Secure Checkout</h2>
                <p>Complete your gold purchase securely</p>
            </div>
        </div>

        <div class="row g-4 align-items-start">

            {{-- PAYMENT FORM --}}
            <div class="col-lg-7">
                <div class="payment-card">

                    <div class="section-title">
                        <div class="title-icon">
                            <i class="bi bi-qr-code"></i>
                        </div>
                        <div>
                            <h4>QR Code Payment</h4>
                            <p>Scan the QR code and complete your payment</p>
                        </div>
                    </div>

                    <form id="paymentForm" enctype="multipart/form-data">

                        {{-- QR CODE --}}
                        <div class="qr-payment-box">
                            <div class="qr-code-wrapper">
                                <img
                                    src="{{ asset('assets/img/qr.png') }}"
                                    alt="Payment QR Code"
                                    class="payment-qr"
                                >
                            </div>

                            <h5>Scan &amp; Pay</h5>
                            <p>
                                Scan this QR code using any UPI app and pay the
                                total amount shown below.
                            </p>

                            <div class="qr-amount">
                                <span>Amount to Pay</span>
                                <strong>₹{{ number_format($total, 2) }}</strong>
                            </div>
                        </div>

                        {{-- PAYMENT INSTRUCTIONS --}}
                        <!-- <div class="payment-instructions">
                            <div class="instruction-icon">
                                <i class="bi bi-info-circle-fill"></i>
                            </div>

                            <div>
                                <strong>Payment Instructions</strong>
                                <ol>
                                    <li>Scan the QR code using your UPI app.</li>
                                    <li>Pay the exact amount displayed above.</li>
                                    <li>Take a screenshot of the payment receipt.</li>
                                    <li>Upload the receipt and submit the form.</li>
                                </ol>
                            </div>
                        </div> -->

                        {{-- RECEIPT UPLOAD --}}
                        <!-- <div class="receipt-section">
                            <label for="paymentReceipt" class="receipt-label">
                                Upload Payment Receipt <span>*</span>
                            </label>

                            <p class="receipt-help">
                                Upload your payment screenshot or receipt.
                                JPG, PNG, or WEBP files are accepted.
                            </p>

                            <label
                                for="paymentReceipt"
                                class="receipt-upload"
                                id="receiptUpload"
                            >
                                <div class="upload-icon">
                                    <i class="bi bi-cloud-arrow-up"></i>
                                </div>

                                <strong>Choose payment receipt</strong>
                                <small>Click here to browse your files</small>

                                <span class="upload-browse">
                                    <i class="bi bi-folder2-open"></i>
                                    Browse Files
                                </span>
                            </label>

                            <input
                                type="file"
                                id="paymentReceipt"
                                name="payment_receipt"
                                accept="image/png,image/jpeg,image/webp"
                                required
                                hidden
                            >

                            <div class="receipt-preview d-none" id="receiptPreview">
                                <img
                                    src=""
                                    alt="Receipt preview"
                                    id="receiptImage"
                                >

                                <div class="receipt-file-info">
                                    <strong id="receiptFileName"></strong>
                                    <small id="receiptFileSize"></small>
                                </div>

                                <button
                                    type="button"
                                    class="remove-receipt"
                                    id="removeReceipt"
                                    aria-label="Remove receipt"
                                >
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>

                            <div class="receipt-error d-none" id="receiptError"></div>
                        </div> -->

                        {{-- SECURITY NOTE --}}
                        <!-- <div class="secure-note">
                            <i class="bi bi-shield-lock-fill"></i>
                            <span>
                                Please ensure that the uploaded receipt matches
                                the payment amount.
                            </span>
                        </div> -->

                        {{-- SUBMIT BUTTON --}}
                        <!-- <button type="submit" class="pay-button" id="submitButton">
                            <span class="submit-button-content" id="submitButtonContent">
                                <i class="bi bi-check-circle"></i>
                                Submit Payment
                            </span>

                            <span class="submit-spinner d-none" id="submitSpinner">
                                <span class="spinner-circle"></span>
                                Processing...
                            </span>

                            <i class="bi bi-arrow-right pay-arrow" id="payArrow"></i>
                        </button> -->

                        <!-- <p class="payment-footer-note">
                            Submit your receipt after completing the payment.
                        </p> -->
                    </form>
                </div>
            </div>

            {{-- ORDER SUMMARY --}}
            <div class="col-lg-5">
                <div class="order-card">

                    <div class="order-heading">
                        <div class="order-heading-icon">
                            <i class="bi bi-bag-check"></i>
                        </div>

                        <div>
                            <h4>Order Summary</h4>
                            <p>Your gold purchase details</p>
                        </div>
                    </div>

                    <div class="gold-preview">
                        <div class="gold-preview-icon">
                            <i class="bi bi-coin"></i>
                        </div>

                        <div class="gold-preview-content">
                            <span>Gold Purchase</span>
                            <strong>{{ number_format($grams, 6) }} g</strong>
                            <small>Estimated gold quantity</small>
                        </div>

                        <span class="gold-tag">GOLD</span>
                    </div>

                    <div class="order-divider"></div>

                    <div class="order-line">
                        <span>Purchase Amount</span>
                        <strong>₹{{ number_format($amount, 2) }}</strong>
                    </div>

                    <div class="order-line">
                        <span>GST (3%)</span>
                        <strong>₹{{ number_format($gst, 2) }}</strong>
                    </div>

                    <div class="order-divider"></div>

                    <div class="order-total">
                        <div>
                            <span>Total Amount</span>
                            <small>Inclusive of applicable charges</small>
                        </div>

                        <strong>₹{{ number_format($total, 2) }}</strong>
                    </div>

                    <div class="rate-info">
                        <i class="bi bi-info-circle"></i>
                        <span>
                            Gold rate: ₹{{ number_format($goldRate, 2) }}/g
                        </span>
                    </div>

                    <div class="order-security">
                        <i class="bi bi-shield-check"></i>
                        <div>
                            <strong>Safe &amp; Secure</strong>
                            <small>Your transaction details are protected</small>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- SUBMIT ANIMATION --}}
<div class="submit-animation-overlay d-none" id="submitAnimation">
    <div class="submit-animation-card">
        <div class="spin-animation">
            <div class="spin-ring"></div>
            <div class="spin-coin">
                <i class="bi bi-coin"></i>
            </div>
        </div>

        <h3>Submitting Receipt</h3>
        <p>Please wait while we process your request...</p>

        <div class="loading-progress">
            <span></span>
        </div>
    </div>
</div>

{{-- SUCCESS MODAL --}}
<div
    class="payment-success-modal"
    id="paymentSuccessModal"
    aria-hidden="true"
>
    <div class="success-backdrop"></div>

    <div
        class="success-content"
        role="dialog"
        aria-modal="true"
        aria-labelledby="successTitle"
    >
        <button
            type="button"
            class="success-close"
            id="closeSuccessModal"
            aria-label="Close"
        >&times;</button>

        <div class="success-badge">
            <i class="bi bi-check-lg"></i>
        </div>

        <span class="success-eyebrow">RECEIPT SUBMITTED</span>
        <h2 id="successTitle">Congratulations!</h2>

        <p class="success-message">
            Your payment receipt has been submitted successfully.
        </p>

        <div class="success-pot-area">
            <div class="success-falling-coins" id="successFallingCoins"></div>

            <img
                src="{{ asset('assets/img/pot.png') }}"
                alt="Gold savings pot"
                class="success-pot-image"
            >

            <div class="success-pot-glow"></div>
        </div>

        <div class="success-amount">
            <i class="bi bi-coin"></i>
            <span>₹{{ number_format($total, 2) }}</span>
        </div>

        <div class="success-gold">
            <i class="bi bi-stars"></i>
            {{ number_format($grams, 6) }} g gold
        </div>

        <button
            type="button"
            class="success-collect-btn"
            id="successContinue"
        >
            <i class="bi bi-check-lg"></i>
            Continue
        </button>

        <small class="demo-note">
            Front-end demo: no payment or receipt was saved.
        </small>
    </div>
</div>

<style>
/* =========================================
   ROOT COLORS / PAYMENT PAGE
========================================= */

.payment-section {
    --pay-primary: var(--primary, #123c2a);
    --pay-dark: var(--primary-dark, #0b291d);
    --pay-green: var(--primary-light, #24563d);
    --pay-gold: var(--gold, #d4af37);
    --pay-gold-light: var(--gold-light, #f0d78c);
    --pay-gold-dark: var(--gold-dark, #a67c22);
    --pay-cream: var(--cream, #fff8e7);
    --pay-white: var(--cream-light, #fffcf5);
    --pay-border: var(--border, #d8c69b);

    min-height: 75vh;
    padding: 45px 0 70px;
    background: var(--pay-cream);
    color: var(--pay-primary);
    font-family: "DM Sans", sans-serif;
}

.payment-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid var(--pay-border);
    border-radius: 12px;
    background: var(--pay-white);
    color: var(--pay-primary);
    font-size: 18px;
    text-decoration: none;
    transition: .2s ease;
}

.back-link:hover {
    background: var(--pay-primary);
    color: var(--pay-white);
}

.payment-header h2 {
    margin: 0 0 4px;
    color: var(--pay-primary);
    font-family: "Playfair Display", serif;
    font-size: 27px;
    font-weight: 700;
}

.payment-header p {
    margin: 0;
    color: #788078;
    font-size: 13px;
}

.payment-card,
.order-card {
    padding: 27px;
    border: 1px solid var(--pay-border);
    border-radius: 20px;
    background: var(--pay-white);
    box-shadow: 0 12px 35px rgba(18, 60, 42, .07);
}

.section-title,
.order-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}

.title-icon,
.order-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: rgba(212, 175, 55, .15);
    color: var(--pay-gold-dark);
    font-size: 21px;
}

.section-title h4,
.order-heading h4 {
    margin: 0 0 4px;
    color: var(--pay-primary);
    font-size: 17px;
    font-weight: 800;
}

.section-title p,
.order-heading p {
    margin: 0;
    color: #818980;
    font-size: 12px;
}

/* =========================================
   QR PAYMENT
========================================= */

.qr-payment-box {
    padding: 22px 18px;
    border: 1px solid #e9dfc4;
    border-radius: 16px;
    background: #fffdf8;
    text-align: center;
}

.qr-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 210px;
    max-width: 100%;
    margin: 0 auto 15px;
    padding: 10px;
    border: 1px solid #eee5d0;
    border-radius: 12px;
    background: #fff;
}

.payment-qr {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-payment-box h5 {
    margin: 0 0 6px;
    color: var(--pay-primary);
    font-size: 16px;
    font-weight: 800;
}

.qr-payment-box > p {
    max-width: 360px;
    margin: 0 auto;
    color: #788078;
    font-size: 12px;
    line-height: 1.6;
}

.qr-amount {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 18px auto 0;
    padding: 12px;
    border: 1px dashed rgba(166, 124, 34, .45);
    border-radius: 10px;
    background: #fff8e3;
}

.qr-amount span {
    color: #777d70;
    font-size: 11px;
}

.qr-amount strong {
    color: var(--pay-primary);
    font-size: 24px;
    font-weight: 900;
}

/* =========================================
   PAYMENT INSTRUCTIONS
========================================= */

.payment-instructions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #e9dfc4;
    border-radius: 12px;
    background: #fffaf0;
}

.instruction-icon {
    color: var(--pay-gold-dark);
    font-size: 17px;
}

.payment-instructions strong {
    display: block;
    margin-bottom: 5px;
    color: var(--pay-primary);
    font-size: 12px;
}

.payment-instructions ol {
    margin: 0;
    padding-left: 17px;
    color: #727c73;
    font-size: 11px;
    line-height: 1.8;
}

/* =========================================
   RECEIPT UPLOAD
========================================= */

.receipt-section {
    margin-top: 22px;
}

.receipt-label {
    display: block;
    margin-bottom: 5px;
    color: var(--pay-primary);
    font-size: 13px;
    font-weight: 800;
}

.receipt-label span {
    color: #c0392b;
}

.receipt-help {
    margin: 0 0 12px;
    color: #818980;
    font-size: 11px;
    line-height: 1.5;
}

.receipt-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 165px;
    padding: 18px;
    border: 1.5px dashed #cdbb8e;
    border-radius: 13px;
    background: #fffdf8;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
}

.receipt-upload:hover,
.receipt-upload.drag-over {
    border-color: var(--pay-gold-dark);
    background: #fff8e3;
}

.upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(212, 175, 55, .15);
    color: var(--pay-gold-dark);
    font-size: 23px;
}

.receipt-upload strong {
    color: var(--pay-primary);
    font-size: 12px;
}

.receipt-upload small {
    margin-top: 3px;
    color: #818980;
    font-size: 10px;
}

.upload-browse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
    border: 1px solid var(--pay-border);
    border-radius: 8px;
    background: #fff;
    color: var(--pay-primary);
    font-size: 10px;
    font-weight: 700;
}

.receipt-preview {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #d9e8d9;
    border-radius: 11px;
    background: #f6fbf5;
}

.receipt-preview img {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
}

.receipt-file-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.receipt-file-info strong {
    overflow: hidden;
    color: var(--pay-primary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-file-info small {
    color: #818980;
    font-size: 10px;
}

.remove-receipt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border: 1px solid #f0cccc;
    border-radius: 8px;
    background: #fff;
    color: #c0392b;
    cursor: pointer;
}

.receipt-error {
    margin-top: 8px;
    color: #c0392b;
    font-size: 11px;
}

/* =========================================
   SECURITY AND SUBMIT BUTTON
========================================= */

.secure-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 20px 0;
    color: #728077;
    font-size: 11px;
    line-height: 1.5;
}

.secure-note i {
    color: var(--pay-green);
    font-size: 16px;
}

.pay-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 53px;
    padding: 13px 20px;
    border: 1px solid var(--pay-primary);
    border-radius: 12px;
    background: var(--pay-primary);
    color: var(--pay-white);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.pay-button:hover:not(:disabled) {
    border-color: var(--pay-gold);
    background: var(--pay-gold);
    color: var(--pay-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(166, 124, 34, .2);
}

.pay-button:disabled {
    cursor: not-allowed;
    opacity: .8;
}

.submit-button-content,
.submit-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.submit-spinner {
    color: #fff;
}

.spinner-circle {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: buttonSpin .7s linear infinite;
}

.pay-arrow {
    position: absolute;
    right: 19px;
    font-size: 17px;
}

.payment-footer-note {
    margin: 10px 0 0;
    color: #858c83;
    font-size: 10px;
    text-align: center;
}

/* =========================================
   ORDER SUMMARY
========================================= */

.order-heading {
    margin-bottom: 22px;
}

.gold-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 13px;
    background: var(--pay-dark);
    color: var(--pay-white);
}

.gold-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: rgba(212, 175, 55, .16);
    color: var(--pay-gold);
    font-size: 21px;
}

.gold-preview-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gold-preview-content span {
    color: #e4e8df;
    font-size: 11px;
}

.gold-preview-content strong {
    color: var(--pay-gold-light);
    font-size: 20px;
    font-weight: 800;
}

.gold-preview-content small {
    color: #c4d0c6;
    font-size: 10px;
}

.gold-tag {
    align-self: flex-start;
    padding: 4px 7px;
    border: 1px solid rgba(240, 215, 140, .4);
    border-radius: 5px;
    color: var(--pay-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.order-divider {
    height: 1px;
    margin: 20px 0;
    background: #e9e2d1;
}

.order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    color: #727c73;
    font-size: 12px;
}

.order-line strong {
    color: var(--pay-primary);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-total div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-total span {
    color: var(--pay-primary);
    font-size: 14px;
    font-weight: 800;
}

.order-total small {
    color: #858c83;
    font-size: 10px;
}

.order-total strong {
    color: var(--pay-gold-dark);
    font-size: 23px;
    font-weight: 800;
    text-align: right;
}

.rate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #f7f2e4;
    color: #69766e;
    font-size: 10px;
}

.rate-info i {
    color: var(--pay-gold-dark);
    font-size: 14px;
}

.order-security {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e9e2d1;
}

.order-security > i {
    color: var(--pay-green);
    font-size: 23px;
}

.order-security div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-security strong {
    color: var(--pay-primary);
    font-size: 11px;
}

.order-security small {
    color: #818980;
    font-size: 10px;
}

/* =========================================
   SUBMIT ANIMATION OVERLAY
========================================= */

.submit-animation-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 20, 12, .84);
    backdrop-filter: blur(7px);
}

.submit-animation-card {
    width: min(100%, 350px);
    padding: 30px 24px;
    border: 1px solid rgba(240, 215, 140, .45);
    border-radius: 22px;
    background: linear-gradient(145deg, #0b291d, #123c2a);
    color: #fffcf5;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    animation: cardPop .35s ease both;
}

.spin-animation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    margin: 0 auto 18px;
}

.spin-ring {
    position: absolute;
    inset: 0;
    border: 4px solid rgba(240, 215, 140, .2);
    border-top-color: #f0d78c;
    border-right-color: #d4af37;
    border-radius: 50%;
    animation: buttonSpin .8s linear infinite;
}

.spin-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid #fff0ad;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff4b8, #d4af37 60%, #a67c22);
    color: #67470a;
    font-size: 25px;
    animation: coinPulse .8s ease-in-out infinite alternate;
}

.submit-animation-card h3 {
    margin: 0 0 7px;
    color: #fff4c9;
    font-family: "Playfair Display", serif;
    font-size: 23px;
}

.submit-animation-card p {
    margin: 0;
    color: rgba(255, 252, 245, .72);
    font-size: 12px;
}

.loading-progress {
    height: 5px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, .15);
}

.loading-progress span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d4af37, #fff0ad);
    animation: progressMove 1.1s ease-in-out infinite;
}

/* =========================================
   SUCCESS MODAL
========================================= */

.payment-success-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.payment-success-modal.show {
    display: flex;
    animation: successFadeIn .35s ease both;
}

.success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 20, 12, .88);
    backdrop-filter: blur(8px);
}

.success-content {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    max-height: 92vh;
    overflow-y: auto;
    padding: 30px 25px 22px;
    border: 1px solid rgba(240, 215, 140, .6);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(36, 86, 61, .95), transparent 65%),
        linear-gradient(145deg, #0b291d, #123c2a 55%, #071d14);
    color: #fffcf5;
    text-align: center;
    box-shadow:
        0 0 0 5px rgba(212, 175, 55, .08),
        0 25px 80px rgba(0, 0, 0, .55),
        inset 0 0 35px rgba(212, 175, 55, .08);
    animation: successPop .55s cubic-bezier(.18, .89, .32, 1.28) both;
}

.success-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(240, 215, 140, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fffcf5;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.success-close:hover {
    background: rgba(212, 175, 55, .2);
    color: #f0d78c;
}

.success-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border: 2px solid #f9e4a0;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff1b8, #d4af37 55%, #9c7019);
    color: #49320a;
    box-shadow: 0 0 25px rgba(240, 215, 140, .35);
    animation: successBadgeBounce 1.2s ease-in-out infinite alternate;
}

.success-badge i {
    font-size: 32px;
}

.success-eyebrow {
    display: block;
    color: #f0d78c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.success-content h2 {
    margin: 5px 0;
    color: #fff4c9;
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 7vw, 40px);
    font-weight: 800;
}

.success-message {
    margin: 0;
    color: rgba(255, 252, 245, .75);
    font-size: 13px;
}

.success-pot-area {
    position: relative;
    width: 100%;
    height: 220px;
    margin: 8px auto 0;
    overflow: hidden;
}

/* Pot image */
.success-pot-image {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 50%;
    width: 190px;
    height: 190px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}

.success-pot-glow {
    position: absolute;
    z-index: 1;
    bottom: 12px;
    left: 50%;
    width: 180px;
    height: 50px;
    border-radius: 50%;
    background: rgba(240, 215, 140, .3);
    filter: blur(22px);
    transform: translateX(-50%);
}

/*
 * Coins are restricted to the center area above the pot.
 * Adjust top if your pot image has a different opening position.
 */
.success-falling-coins {
    position: absolute;
    z-index: 4;
    top: 24px;
    left: 50%;
    width: 140px;
    height: 48px;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
}

.success-falling-coin {
    position: absolute;
    top: -28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 2px solid #fff0ad;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        #fff4b8 0%,
        #e7bd45 38%,
        #a87517 72%,
        #f8dc78 100%
    );
    color: #6d4a0b;
    font-size: 13px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .3),
        inset 0 1px 3px rgba(255, 255, 255, .8);
    animation: successCoinFall 750ms ease-in forwards;
}

.success-falling-coin::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(126, 82, 7, .55);
    border-radius: 50%;
}

.success-amount {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -3px auto 10px;
    color: #ffe79a;
}

.success-amount i {
    color: #f3cb50;
    font-size: 28px;
}

.success-amount span {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.success-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
    color: #f0d78c;
    font-size: 12px;
    font-weight: 700;
}

.success-collect-btn {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid #fff0b1;
    border-radius: 50px;
    background: linear-gradient(135deg, #f9e5a0, #d4af37 55%, #a67c22);
    color: #17331e;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(212, 175, 55, .25);
    transition: transform .2s, filter .2s;
}

.success-collect-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #17331e;
}

.demo-note {
    display: block;
    margin-top: 12px;
    color: rgba(255, 252, 245, .55);
    font-size: 9px;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes buttonSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes coinPulse {
    from {
        transform: scale(.92) rotateY(0);
    }
    to {
        transform: scale(1.08) rotateY(180deg);
    }
}

@keyframes progressMove {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(260%);
    }
}

@keyframes cardPop {
    from {
        opacity: 0;
        transform: scale(.92) translateY(15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes successFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes successPop {
    from {
        opacity: 0;
        transform: scale(.75) translateY(25px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes successBadgeBounce {
    from {
        transform: translateY(0) rotate(-5deg);
    }
    to {
        transform: translateY(-5px) rotate(5deg);
    }
}

@keyframes successCoinFall {
    0% {
        opacity: 0;
        transform: translateY(0) rotateY(0deg) scale(.65);
    }
    15% {
        opacity: 1;
    }
    75% {
        opacity: 1;
        transform: translateY(45px) rotateY(540deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(65px) rotateY(720deg) scale(.4);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {
    .payment-section {
        padding: 35px 0 55px;
    }

    .payment-card,
    .order-card {
        padding: 23px;
    }
}

@media (max-width: 575.98px) {
    .payment-section {
        padding: 25px 0 45px;
    }

    .payment-header {
        gap: 11px;
        margin-bottom: 22px;
    }

    .payment-header h2 {
        font-size: 22px;
    }

    .payment-header p {
        font-size: 11px;
    }

    .back-link {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .payment-card,
    .order-card {
        padding: 19px 16px;
        border-radius: 16px;
    }

    .section-title,
    .order-heading {
        gap: 10px;
        margin-bottom: 19px;
    }

    .title-icon,
    .order-heading-icon {
        width: 41px;
        height: 41px;
        flex-basis: 41px;
        font-size: 19px;
    }

    .section-title h4,
    .order-heading h4 {
        font-size: 15px;
    }

    .qr-code-wrapper {
        width: 190px;
        height: 190px;
    }

    .order-total strong {
        font-size: 21px;
    }

    .success-content {
        padding: 26px 18px 20px;
        border-radius: 23px;
    }

    .success-pot-area {
        height: 190px;
    }

    .success-pot-image {
        width: 165px;
        height: 165px;
    }

    .success-falling-coins {
        top: 22px;
        width: 125px;
        height: 42px;
    }

    .success-badge {
        width: 52px;
        height: 52px;
    }

    .success-badge i {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('paymentForm');
    const fileInput = document.getElementById('paymentReceipt');
    const uploadBox = document.getElementById('receiptUpload');
    const previewBox = document.getElementById('receiptPreview');
    const previewImage = document.getElementById('receiptImage');
    const fileName = document.getElementById('receiptFileName');
    const fileSize = document.getElementById('receiptFileSize');
    const removeButton = document.getElementById('removeReceipt');
    const receiptError = document.getElementById('receiptError');

    const submitButton = document.getElementById('submitButton');
    const submitContent = document.getElementById('submitButtonContent');
    const submitSpinner = document.getElementById('submitSpinner');
    const payArrow = document.getElementById('payArrow');
    const animationOverlay = document.getElementById('submitAnimation');

    const successModal = document.getElementById('paymentSuccessModal');
    const closeSuccessButton = document.getElementById('closeSuccessModal');
    const continueButton = document.getElementById('successContinue');
    const coinContainer = document.getElementById('successFallingCoins');

    let previewUrl = null;
    let coinTimer = null;

    function showReceiptError(message) {
        receiptError.textContent = message;
        receiptError.classList.remove('d-none');
    }

    function clearReceiptError() {
        receiptError.textContent = '';
        receiptError.classList.add('d-none');
    }

    function formatFileSize(bytes) {
        if (bytes < 1024 * 1024) {
            return (bytes / 1024).toFixed(1) + ' KB';
        }

        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
    }

    function displayReceipt(file) {
        clearReceiptError();

        if (!file) {
            return;
        }

        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/webp'
        ];

        if (!allowedTypes.includes(file.type)) {
            fileInput.value = '';
            showReceiptError('Please upload a JPG, PNG, or WEBP image.');
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            fileInput.value = '';
            showReceiptError('The receipt image must be smaller than 5 MB.');
            return;
        }

        if (previewUrl) {
            URL.revokeObjectURL(previewUrl);
        }

        previewUrl = URL.createObjectURL(file);
        previewImage.src = previewUrl;
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);

        previewBox.classList.remove('d-none');
        uploadBox.classList.add('d-none');
    }

    fileInput.addEventListener('change', function () {
        displayReceipt(this.files[0]);
    });

    removeButton.addEventListener('click', function () {
        fileInput.value = '';

        if (previewUrl) {
            URL.revokeObjectURL(previewUrl);
            previewUrl = null;
        }

        previewImage.src = '';
        previewBox.classList.add('d-none');
        uploadBox.classList.remove('d-none');
        clearReceiptError();
    });

    uploadBox.addEventListener('dragover', function (event) {
        event.preventDefault();
        uploadBox.classList.add('drag-over');
    });

    uploadBox.addEventListener('dragleave', function () {
        uploadBox.classList.remove('drag-over');
    });

    uploadBox.addEventListener('drop', function (event) {
        event.preventDefault();
        uploadBox.classList.remove('drag-over');

        const files = event.dataTransfer.files;

        if (!files.length) {
            return;
        }

        fileInput.files = files;
        displayReceipt(files[0]);
    });

    function setSubmitting(isSubmitting) {
        submitButton.disabled = isSubmitting;
        submitContent.classList.toggle('d-none', isSubmitting);
        submitSpinner.classList.toggle('d-none', !isSubmitting);
        payArrow.classList.toggle('d-none', isSubmitting);
    }

    function showSuccessModal() {
        successModal.classList.add('show');
        successModal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';

        let coinsCreated = 0;
        const totalCoins = 12;

        function dropCoin() {
            if (coinsCreated >= totalCoins) {
                return;
            }

            const coin = document.createElement('span');
            coin.className = 'success-falling-coin';

            const icon = document.createElement('i');
            icon.className = 'bi bi-coin';
            coin.appendChild(icon);

            // Keep coins inside the centered area above the jar opening.
            coin.style.left = (35 + Math.random() * 30) + '%';

            coinContainer.appendChild(coin);
            coinsCreated++;

            coin.addEventListener('animationend', function () {
                coin.remove();
            }, { once: true });
        }

        dropCoin();

        coinTimer = window.setInterval(function () {
            if (coinsCreated >= totalCoins) {
                window.clearInterval(coinTimer);
                coinTimer = null;
                return;
            }

            dropCoin();
        }, 350);
    }

    function closeSuccessModal() {
        successModal.classList.remove('show');
        successModal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';

        if (coinTimer) {
            window.clearInterval(coinTimer);
            coinTimer = null;
        }

        coinContainer.innerHTML = '';
    }

    form.addEventListener('submit', function (event) {
        event.preventDefault();
        clearReceiptError();

        if (!fileInput.files.length) {
            showReceiptError('Please upload your payment receipt before submitting.');
            uploadBox.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
            return;
        }

        const file = fileInput.files[0];
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/webp'
        ];

        if (!allowedTypes.includes(file.type)) {
            showReceiptError('Please upload a JPG, PNG, or WEBP image.');
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            showReceiptError('The receipt image must be smaller than 5 MB.');
            return;
        }

        setSubmitting(true);
        animationOverlay.classList.remove('d-none');

        // Front-end demo only. No data is sent to a server.
        window.setTimeout(function () {
            animationOverlay.classList.add('d-none');
            setSubmitting(false);
            showSuccessModal();
        }, 2200);
    });

    closeSuccessButton.addEventListener('click', closeSuccessModal);
    continueButton.addEventListener('click', closeSuccessModal);

    successModal.addEventListener('click', function (event) {
        if (event.target.classList.contains('success-backdrop')) {
            closeSuccessModal();
        }
    });

    document.addEventListener('keydown', function (event) {
        if (
            event.key === 'Escape' &&
            successModal.classList.contains('show')
        ) {
            closeSuccessModal();
        }
    });
});
</script>

@endsection