@extends('User.layout')

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

@section('content')

@php
    $orderId = $orderId ?? 'ORD-' . strtoupper(uniqid());
    $amount = $amount ?? 300;
    $goldRate = $goldRate ?? 7000;
    $grams = $grams ?? ($amount / $goldRate);
@endphp

<section class="checkout-section">
    <div class="container">
        <div class="checkout-heading">
            <span class="checkout-label">SECURE CHECKOUT</span>
            <h2>Complete Your <span>Purchase</span></h2>
            <p>Review your gold order and provide your delivery details.</p>
        </div>

        <form action="#" method="POST" id="checkoutForm">
            @csrf

            <div class="row g-4">
                <!-- DELIVERY ADDRESS -->
                <div class="col-lg-7">
                    <div class="checkout-panel">
                        <div class="panel-heading">
                            <div class="panel-icon">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <div>
                                <h4>Delivery Address</h4>
                                <p>Where should we deliver your order?</p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Full Name *</label>
                                <input type="text" name="name"
                                    class="form-control checkout-input"
                                    placeholder="Enter your full name"
                                    value="{{ auth()->user()->name ?? '' }}"
                                    required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Mobile Number *</label>
                                <input type="tel" name="phone"
                                    class="form-control checkout-input"
                                    placeholder="Enter mobile number"
                                    value="{{ auth()->user()->phone ?? '' }}"
                                    maxlength="10" pattern="[0-9]{10}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Email Address</label>
                                <input type="email" name="email"
                                    class="form-control checkout-input"
                                    placeholder="Enter email address"
                                    value="{{ auth()->user()->email ?? '' }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Door / Flat No. *</label>
                                <input type="text" name="door_number"
                                    class="form-control checkout-input"
                                    placeholder="e.g. 12A" required>
                            </div>

                            <div class="col-md-8">
                                <label class="form-label">Street / Area *</label>
                                <input type="text" name="street"
                                    class="form-control checkout-input"
                                    placeholder="Street name or area" required>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Address Line 2</label>
                                <input type="text" name="address_line_2"
                                    class="form-control checkout-input"
                                    placeholder="Landmark, apartment, etc.">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">City *</label>
                                <input type="text" name="city"
                                    class="form-control checkout-input"
                                    placeholder="Enter city" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">District *</label>
                                <input type="text" name="district"
                                    class="form-control checkout-input"
                                    placeholder="Enter district" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">State *</label>
                                <input type="text" name="state"
                                    class="form-control checkout-input"
                                    placeholder="Enter state" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">PIN Code *</label>
                                <input type="text" name="pincode"
                                    class="form-control checkout-input"
                                    placeholder="6-digit PIN code"
                                    maxlength="6" pattern="[0-9]{6}" required>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Delivery Instructions</label>
                                <textarea name="instructions"
                                    class="form-control checkout-input"
                                    rows="3"
                                    placeholder="Any special instructions for delivery"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ORDER SUMMARY -->
                <div class="col-lg-5">
                    <div class="checkout-panel order-panel">
                        <div class="panel-heading">
                            <div class="panel-icon">
                                <i class="bi bi-receipt"></i>
                            </div>
                            <div>
                                <h4>Order Summary</h4>
                                <p>Check your purchase details</p>
                            </div>
                        </div>

                        <div class="order-id-box">
                            <div>
                                <span>Order ID</span>
                                <strong id="orderId">{{ $orderId }}</strong>
                            </div>
                            <i class="bi bi-copy copy-order-id"
                               role="button" title="Copy order ID"
                               onclick="copyOrderId()"></i>
                        </div>

                        <div class="gold-product">
                            <div class="gold-product-icon">
                                <i class="bi bi-coin"></i>
                            </div>
                            <div class="gold-product-info">
                                <h5>Digital Gold</h5>
                                <span>Gold purchase</span>
                            </div>
                            <span class="product-badge">Gold</span>
                        </div>

                        <div class="order-detail-list">
                            <div class="order-detail">
                                <span>Gold Rate</span>
                                <strong>₹{{ number_format($goldRate, 2) }} / gram</strong>
                            </div>

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

                            <div class="order-detail">
                                <span>Gold Quantity</span>
                                <strong>{{ number_format($grams, 4) }} g</strong>
                            </div>

                            <div class="order-detail">
                                <span>Delivery Charges</span>
                                <strong class="free-delivery">FREE</strong>
                            </div>
                        </div>

                        <div class="order-total">
                            <div>
                                <span>Total Amount</span>
                                <small>Including applicable charges</small>
                            </div>
                            <strong>₹{{ number_format($amount, 2) }}</strong>
                        </div>

                        <div class="payment-heading">
                            <i class="bi bi-wallet2"></i>
                            Payment Method
                        </div>

                        <label class="payment-option">
                            <input type="radio" name="payment_method"
                                value="online" checked>
                            <span class="payment-radio"></span>
                            <span class="payment-text">
                                <strong>Online Payment</strong>
                                <small>Pay securely online</small>
                            </span>
                            <i class="bi bi-credit-card payment-icon"></i>
                        </label>

                        <div class="checkout-security">
                            <i class="bi bi-shield-check"></i>
                            <span>Your order details are securely handled.</span>
                        </div>

                        <button type="submit" class="place-order-btn" id="placeOrderBtn">
                            Place Order
                            <i class="bi bi-arrow-right"></i>
                        </button>

                        <p class="terms-note">
                            By placing your order, you agree to the applicable
                            purchase terms and conditions.
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

<!-- COIN ANIMATION MODAL -->
<div class="modal fade coin-modal" id="coinModal"
     tabindex="-1" aria-labelledby="coinModalLabel"
     aria-hidden="true" data-bs-backdrop="static"
     data-bs-keyboard="false">

    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content coin-modal-content">
            <div class="modal-body text-center">
                <div class="coin-modal-label">GOLD PURCHASE</div>

                <h3 id="coinModalLabel">Your order is being prepared!</h3>
                <p class="coin-modal-subtitle">
                    Watch your gold coin enter the pot.
                </p>

                <div class="coin-scene" id="coinScene">
                    <div class="coin-glow"></div>

                    <!-- Coin image -->
                    <img src="{{ asset('assets/img/one.png') }}"
                         class="toss-coin"
                         id="tossCoin"
                         alt="Gold coin">

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

                    <div class="coin-spark coin-spark-one">✦</div>
                    <div class="coin-spark coin-spark-two">✧</div>
                    <div class="coin-spark coin-spark-three">✦</div>
                </div>

                <div class="coin-success" id="coinSuccess">
                    <div class="success-icon">
                        <i class="bi bi-check-lg"></i>
                    </div>

                    <h4>Congratulations!</h4>
                    <p>Your demo animation is complete.</p>

                    <div class="success-order-box">
                        <span>Order ID</span>
                        <strong id="successOrderId">{{ $orderId }}</strong>
                    </div>

                    <div class="success-details">
                        <div>
                            <span>Amount</span>
                            <strong>₹{{ number_format($amount, 2) }}</strong>
                        </div>
                        <div>
                            <span>Gold Quantity</span>
                            <strong>{{ number_format($grams, 4) }} g</strong>
                        </div>
                    </div>

                    <button type="button" class="success-close-btn"
                            data-bs-dismiss="modal">
                        Continue
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </div>

                <div class="coin-loading" id="coinLoading">
                    <span class="loading-dot"></span>
                    <span>Preparing your order...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.checkout-section {
    --checkout-green: var(--primary, #123c2a);
    --checkout-dark: var(--primary-dark, #0b291d);
    --checkout-gold: var(--gold, #d4af37);
    --checkout-gold-light: var(--gold-light, #f0d78c);
    --checkout-cream: var(--cream, #fff8e7);
    --checkout-border: var(--border, #d8c69b);

    padding: 55px 0 80px;
    background: var(--checkout-cream);
    font-family: 'DM Sans', sans-serif;
    color: var(--checkout-dark);
}

.checkout-heading {
    text-align: center;
    margin-bottom: 38px;
}

.checkout-label {
    display: inline-block;
    padding: 7px 17px;
    border-radius: 30px;
    background: var(--checkout-green);
    color: var(--checkout-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.checkout-heading h2 {
    margin: 14px 0 8px;
    color: var(--checkout-green);
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
}

.checkout-heading h2 span {
    color: var(--gold-dark, #a67c22);
}

.checkout-heading p {
    margin: 0;
    color: #778078;
    font-size: 13px;
}

.checkout-panel {
    height: 100%;
    padding: 30px;
    background: var(--cream-light, #fffcf5);
    border: 1px solid var(--checkout-border);
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(18, 60, 42, .07);
}

.panel-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
}

.panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    color: var(--checkout-gold-light);
    background: var(--checkout-green);
    border-radius: 13px;
    font-size: 22px;
}

.panel-heading h4 {
    margin: 0 0 4px;
    color: var(--checkout-green);
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 700;
}

.panel-heading p {
    margin: 0;
    color: #879087;
    font-size: 11px;
}

.checkout-section .form-label {
    margin-bottom: 7px;
    color: var(--checkout-dark);
    font-size: 12px;
    font-weight: 700;
}

.checkout-input {
    min-height: 46px;
    padding: 11px 13px;
    color: var(--checkout-dark);
    background: #fff;
    border: 1px solid #dfd8c5;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: none;
}

.checkout-input::placeholder {
    color: #a4aaa3;
    font-size: 12px;
}

.checkout-input:focus {
    border-color: var(--checkout-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .13);
}

textarea.checkout-input {
    min-height: 85px;
    resize: vertical;
}

.order-panel {
    height: auto;
}

.order-id-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 22px;
    background: #f4efdf;
    border: 1px dashed var(--checkout-gold);
    border-radius: 12px;
}

.order-id-box div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-id-box span {
    color: #81887f;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-id-box strong {
    color: var(--checkout-green);
    font-size: 14px;
    letter-spacing: .5px;
    overflow-wrap: anywhere;
}

.copy-order-id {
    color: var(--checkout-green);
    font-size: 19px;
    cursor: pointer;
}

.gold-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e1ce;
}

.gold-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: #8d6918;
    background: linear-gradient(135deg, #fff0b5, #d4af37);
    border-radius: 14px;
    font-size: 24px;
}

.gold-product-info {
    flex: 1;
}

.gold-product-info h5 {
    margin: 0 0 4px;
    color: var(--checkout-green);
    font-size: 14px;
    font-weight: 800;
}

.gold-product-info span {
    color: #858d84;
    font-size: 11px;
}

.product-badge {
    padding: 5px 10px;
    color: #896817;
    background: #f8edc9;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
}

.order-detail-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 0;
}

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

.order-detail span {
    color: #7d877e;
}

.order-detail strong {
    color: var(--checkout-dark);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.order-detail .free-delivery {
    color: #27804c;
}

.order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px;
    background: var(--checkout-green);
    border-radius: 13px;
    color: var(--checkout-cream);
}

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

.order-total span {
    font-size: 13px;
    font-weight: 700;
}

.order-total small {
    color: rgba(255, 248, 231, .65);
    font-size: 9px;
}

.order-total strong {
    color: var(--checkout-gold-light);
    font-size: 22px;
    font-weight: 800;
    white-space: nowrap;
}

.payment-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px;
    color: var(--checkout-green);
    font-size: 13px;
    font-weight: 800;
}

.payment-heading i {
    color: var(--gold-dark, #a67c22);
    font-size: 19px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--checkout-gold);
    border-radius: 12px;
    background: #fffdf6;
    cursor: pointer;
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-radio {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border: 2px solid #b7b7a8;
    border-radius: 50%;
    position: relative;
}

.payment-option input:checked + .payment-radio {
    border-color: var(--checkout-green);
}

.payment-option input:checked + .payment-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--checkout-green);
    border-radius: 50%;
}

.payment-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.payment-text strong {
    color: var(--checkout-green);
    font-size: 12px;
}

.payment-text small {
    color: #858d84;
    font-size: 10px;
}

.payment-icon {
    color: var(--gold-dark, #a67c22);
    font-size: 22px;
}

.checkout-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 17px 0;
    color: #748176;
    font-size: 10px;
}

.checkout-security i {
    color: #368458;
    font-size: 16px;
}

.place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 49px;
    color: var(--checkout-cream);
    background: var(--checkout-green);
    border: 1px solid var(--checkout-green);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    transition: .25s ease;
    cursor: pointer;
}

.place-order-btn:hover {
    color: var(--checkout-dark);
    background: var(--checkout-gold);
    border-color: var(--checkout-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(166, 124, 34, .2);
}

.place-order-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.place-order-btn i {
    font-size: 17px;
}

.terms-note {
    margin: 12px 0 0;
    color: #92998f;
    font-size: 9px;
    line-height: 1.6;
    text-align: center;
}

/* =========================================
   COIN ANIMATION MODAL
========================================= */

.coin-modal .modal-dialog {
    max-width: 430px;
    margin: 1rem auto;
    padding: 0 12px;
}

.coin-modal-content {
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, .65);
    border-radius: 25px;
    background:
        radial-gradient(circle at 50% 35%, rgba(212,175,55,.12), transparent 40%),
        linear-gradient(160deg, #fffcf5, #fff8e7);
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
}

.coin-modal .modal-body {
    padding: 30px 25px 28px;
}

.coin-modal-label {
    display: inline-block;
    padding: 6px 15px;
    color: #f0d78c;
    background: #123c2a;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.coin-modal h3 {
    margin: 15px 0 5px;
    color: #123c2a;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 700;
}

.coin-modal-subtitle {
    margin: 0;
    color: #7d877e;
    font-size: 12px;
}

.coin-scene {
    position: relative;
    height: 245px;
    margin: 5px auto 0;
    overflow: hidden;
}

/* Soft glow behind the pot */
.coin-glow {
    position: absolute;
    left: 50%;
    bottom: 23px;
    width: 190px;
    height: 120px;
    background: rgba(212,175,55,.18);
    border-radius: 50%;
    filter: blur(28px);
    transform: translateX(-50%);
}

/*
 * Coin stays behind the pot.
 * It is visible above the pot, then disappears
 * behind the rim as it falls into the opening.
 */
.toss-coin {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 34px;
    height: 34px;
    object-fit: contain;
    opacity: 0;
    transform: translateX(-50%);
    transform-origin: center;
}

/* Pot sits in front of the falling coin */
.coin-pot {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 5px;
    width: 170px;
    height: 150px;
    object-fit: contain;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Start coin animation */
.coin-scene.animate .toss-coin {
    animation: coinFall 1.65s cubic-bezier(.45,.05,.7,.35) forwards;
}

@keyframes coinFall {
    0% {
        top: 0;
        opacity: 0;
        transform: translateX(-50%) rotate(0deg) scale(.8);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 25px;
        opacity: 1;
        transform: translateX(-50%) rotate(180deg) scale(1.1);
    }

    45% {
        top: 55px;
        opacity: 1;
        transform: translateX(-50%) rotate(360deg) scale(1);
    }

    65% {
        top: 82px;
        opacity: 1;
        transform: translateX(-50%) rotate(540deg) scale(.9);
    }

    82% {
        top: 105px;
        opacity: .7;
        transform: translateX(-50%) rotate(720deg) scale(.65);
    }

    100% {
        top: 120px;
        opacity: 0;
        transform: translateX(-50%) rotate(900deg) scale(.2);
    }
}

.coin-spark {
    position: absolute;
    z-index: 3;
    color: #d4af37;
    opacity: 0;
    pointer-events: none;
}

.coin-spark-one {
    top: 60px;
    left: 18%;
    font-size: 22px;
}

.coin-spark-two {
    top: 95px;
    right: 18%;
    font-size: 27px;
}

.coin-spark-three {
    bottom: 65px;
    left: 25%;
    font-size: 15px;
}

.coin-scene.animate .coin-spark {
    animation: sparkGlow .8s ease-in-out 1s 2 alternate;
}

@keyframes sparkGlow {
    from {
        opacity: 0;
        transform: scale(.5) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1.2) rotate(40deg);
    }
}

/* Loading text */
.coin-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    color: #647469;
    font-size: 11px;
    font-weight: 600;
}

.loading-dot {
    width: 7px;
    height: 7px;
    background: #d4af37;
    border-radius: 50%;
    animation: loadingPulse .7s infinite alternate;
}

@keyframes loadingPulse {
    from {
        opacity: .3;
        transform: scale(.7);
    }
    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Success message */
.coin-success {
    display: none;
    animation: successAppear .5s ease both;
}

.coin-success.show {
    display: block;
}

@keyframes successAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin: 0 auto 10px;
    color: #fff8e7;
    background: #27804c;
    border-radius: 50%;
    font-size: 25px;
    box-shadow: 0 5px 15px rgba(39,128,76,.2);
}

.coin-success h4 {
    margin: 0 0 5px;
    color: #123c2a;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 700;
}

.coin-success > p {
    margin-bottom: 16px;
    color: #738075;
    font-size: 12px;
}

.success-order-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px;
    background: #f4efdf;
    border: 1px dashed #d4af37;
    border-radius: 10px;
}

.success-order-box span,
.success-details span {
    color: #828a80;
    font-size: 10px;
}

.success-order-box strong {
    color: #123c2a;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.success-details {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 14px 0 18px;
}

.success-details div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.success-details strong {
    color: #123c2a;
    font-size: 14px;
}

.success-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 45px;
    color: #fff8e7;
    background: #123c2a;
    border: 1px solid #123c2a;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    transition: .2s ease;
    cursor: pointer;
}

.success-close-btn:hover {
    color: #0b291d;
    background: #d4af37;
    border-color: #d4af37;
}

@media (max-width: 991.98px) {
    .checkout-section {
        padding: 40px 0 65px;
    }

    .checkout-panel {
        padding: 25px;
    }
}

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

    .checkout-heading {
        margin-bottom: 25px;
    }

    .checkout-heading p {
        padding: 0 15px;
        line-height: 1.6;
    }

    .checkout-panel {
        padding: 20px 16px;
        border-radius: 17px;
    }

    .panel-heading {
        margin-bottom: 20px;
    }

    .panel-heading h4 {
        font-size: 17px;
    }

    .order-total {
        padding: 14px;
    }

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

    .coin-modal .modal-dialog {
        margin: 1rem auto;
    }

    .coin-modal .modal-body {
        padding: 25px 18px;
    }

    .coin-modal h3 {
        font-size: 21px;
    }

    .coin-scene {
        height: 225px;
    }

    .coin-pot {
        width: 155px;
        height: 135px;
    }

    .toss-coin {
        width: 30px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coin-scene.animate .toss-coin,
    .coin-scene.animate .coin-spark {
        animation-duration: .01ms;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const checkoutForm = document.getElementById('checkoutForm');
    const modalElement = document.getElementById('coinModal');

    if (!checkoutForm || !modalElement || typeof bootstrap === 'undefined') {
        return;
    }

    const coinModal = new bootstrap.Modal(modalElement);
    const coinScene = document.getElementById('coinScene');
    const coinSuccess = document.getElementById('coinSuccess');
    const coinLoading = document.getElementById('coinLoading');
    const placeOrderBtn = document.getElementById('placeOrderBtn');

    let animationTimer;

    window.copyOrderId = async function () {
        const orderId = document.getElementById('orderId').textContent.trim();

        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(orderId);
            } else {
                const input = document.createElement('textarea');
                input.value = orderId;
                input.style.position = 'fixed';
                input.style.opacity = '0';
                document.body.appendChild(input);
                input.select();
                document.execCommand('copy');
                input.remove();
            }

            const copyIcon = document.querySelector('.copy-order-id');

            copyIcon.classList.remove('bi-copy');
            copyIcon.classList.add('bi-check-lg');

            setTimeout(function () {
                copyIcon.classList.remove('bi-check-lg');
                copyIcon.classList.add('bi-copy');
            }, 1500);
        } catch (error) {
            console.error('Could not copy order ID:', error);
        }
    };

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

        if (!checkoutForm.checkValidity()) {
            checkoutForm.reportValidity();
            return;
        }

        clearTimeout(animationTimer);

        coinScene.classList.remove('animate');
        coinSuccess.classList.remove('show');
        coinLoading.style.display = 'flex';
        placeOrderBtn.disabled = true;

        coinModal.show();
    });

    modalElement.addEventListener('shown.bs.modal', function () {
        // Restart the coin animation every time the modal opens.
        coinScene.classList.remove('animate');
        void coinScene.offsetWidth;
        coinScene.classList.add('animate');

        animationTimer = setTimeout(function () {
            coinLoading.style.display = 'none';
            coinSuccess.classList.add('show');
        }, 1900);
    });

    modalElement.addEventListener('hidden.bs.modal', function () {
        clearTimeout(animationTimer);

        coinScene.classList.remove('animate');
        coinSuccess.classList.remove('show');
        coinLoading.style.display = 'flex';
        placeOrderBtn.disabled = false;
    });
});
</script>

@endsection