@extends('User.layout')

@section('title', 'Buy / Sell Gold')

@section('content')

@php
    $goldRate = $goldRate ?? 7000;
    $availableGold = $availableGold ?? 2.5000;
@endphp

<div class="gold-trade-section">
    <div class="container">
        <div class="trade-heading text-center">
            <span class="trade-badge">
                <i class="bi bi-gem me-1"></i> DIGITAL GOLD
            </span>
            <h2>Buy & <span>Sell Gold</span></h2>
            <p>Manage your digital gold with a simple and secure experience.</p>
        </div>

        <div class="trade-wrapper mx-auto">
            <!-- BUY / SELL TABS -->
            <ul class="nav nav-pills trade-tabs" id="goldTradeTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="buy-tab"
                            data-bs-toggle="pill" data-bs-target="#buy-pane"
                            type="button" role="tab"
                            aria-controls="buy-pane" aria-selected="true">
                        <i class="bi bi-cart-plus me-2"></i>Buy Gold
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="sell-tab"
                            data-bs-toggle="pill" data-bs-target="#sell-pane"
                            type="button" role="tab"
                            aria-controls="sell-pane" aria-selected="false">
                        <i class="bi bi-currency-exchange me-2"></i>Sell Gold
                    </button>
                </li>
            </ul>

            <div class="tab-content trade-tab-content">

                <!-- BUY GOLD -->
                <div class="tab-pane fade show active" id="buy-pane"
                     role="tabpanel" aria-labelledby="buy-tab">

                    <div class="trade-intro">
                        <div class="trade-icon">
                            <i class="bi bi-bag-plus"></i>
                        </div>
                        <div>
                            <h4>Buy Digital Gold</h4>
                            <p>Select a denomination and enter the quantity.</p>
                        </div>
                    </div>

                    <div class="rate-box">
                        <div class="rate-icon"><i class="bi bi-coin"></i></div>
                        <div class="rate-info">
                            <span>Current Gold Rate</span>
                            <strong>₹<span>{{ number_format($goldRate, 2) }}</span>
                                <small>/ gram</small>
                            </strong>
                        </div>
                        <span class="rate-status">
                            <i class="bi bi-circle-fill"></i> Live Rate
                        </span>
                    </div>

                    <div class="form-section">
                        <label class="section-label">Select Amount</label>

                        <div class="denomination-grid">
                            <button type="button" class="denomination-card active"
                                    data-value="1">
                                <span class="denomination-symbol">₹</span>
                                <strong>1</strong>
                                <small>1 Coin</small>
                            </button>
                            <button type="button" class="denomination-card"
                                    data-value="10">
                                <span class="denomination-symbol">₹</span>
                                <strong>10</strong>
                                <small>10 Coins</small>
                            </button>
                            <button type="button" class="denomination-card"
                                    data-value="100">
                                <span class="denomination-symbol">₹</span>
                                <strong>100</strong>
                                <small>100 Coins</small>
                            </button>
                            <button type="button" class="denomination-card"
                                    data-value="1000">
                                <span class="denomination-symbol">₹</span>
                                <strong>1,000</strong>
                                <small>1,000 Coins</small>
                            </button>
                        </div>
                    </div>

                    <!-- MULTIPLIER -->
                    <div class="multiplier-card" id="multiplierCard">
                        <div class="multiplier-heading">
                            <div>
                                <h5>Choose Quantity</h5>
                                <p>Multiply your selected denomination.</p>
                            </div>
                            <span class="multiplier-badge">
                                <i class="bi bi-calculator me-1"></i> Multiplier
                            </span>
                        </div>

                        <div class="multiplier-control">
                            <button type="button" class="quantity-btn"
                                    id="buyMinus" aria-label="Decrease quantity">
                                <i class="bi bi-dash-lg"></i>
                            </button>

                            <div class="quantity-value">
                                <input type="number" id="buyQuantity"
                                       min="1" max="10000" value="1"
                                       inputmode="numeric">
                                <span>Quantity</span>
                            </div>

                            <button type="button" class="quantity-btn"
                                    id="buyPlus" aria-label="Increase quantity">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>

                        <div class="multiplier-equation">
                            <span>₹<strong id="selectedDenomination">1</strong></span>
                            <i class="bi bi-x"></i>
                            <span><strong id="buyQuantityDisplay">1</strong></span>
                            <i class="bi bi-equals"></i>
                            <strong class="equation-total">
                                ₹<span id="buyTotal">1.00</span>
                            </strong>
                        </div>
                    </div>

                    <!-- BUY SUMMARY -->
                    <div class="trade-summary">
                        <div class="summary-title">
                            <i class="bi bi-receipt"></i> Purchase Summary
                        </div>
                        <div class="summary-row">
                            <span>Purchase Amount</span>
                            <strong id="buySummaryAmount">₹1.00</strong>
                        </div>
                        <div class="summary-row">
                            <span>Gold Rate</span>
                            <strong>₹{{ number_format($goldRate, 2) }} / g</strong>
                        </div>
                        <div class="summary-row">
                            <span>Estimated Gold</span>
                            <strong id="buyGrams">0.0001 g</strong>
                        </div>
                        <div class="summary-total">
                            <span>Total Payable</span>
                            <strong id="buyPayable">₹1.00</strong>
                        </div>
                    </div>

                    <a href="{{ route('checkout') }}" type="button" class="trade-submit-btn">
                        Buy Gold <i class="bi bi-arrow-right"></i>
                    </a>

                    <p class="trade-note">
                        <i class="bi bi-shield-check me-1"></i>
                        Review your purchase details before confirmation.
                    </p>
                </div>

                <!-- SELL GOLD -->
                <div class="tab-pane fade" id="sell-pane"
                     role="tabpanel" aria-labelledby="sell-tab">

                    <div class="trade-intro">
                        <div class="trade-icon sell-icon">
                            <i class="bi bi-currency-exchange"></i>
                        </div>
                        <div>
                            <h4>Sell Digital Gold</h4>
                            <p>Enter the gold quantity you want to sell.</p>
                        </div>
                    </div>

                    <div class="available-gold">
                        <div class="available-icon">
                            <i class="bi bi-gem"></i>
                        </div>
                        <div>
                            <span>Available Gold Balance</span>
                            <strong>{{ number_format($availableGold, 4) }} g</strong>
                        </div>
                        <span class="available-label">Available</span>
                    </div>

                    <div class="rate-box sell-rate-box">
                        <div class="rate-icon"><i class="bi bi-coin"></i></div>
                        <div class="rate-info">
                            <span>Current Selling Rate</span>
                            <strong>₹{{ number_format($goldRate, 2) }}
                                <small>/ gram</small>
                            </strong>
                        </div>
                        <span class="rate-status">
                            <i class="bi bi-circle-fill"></i> Live Rate
                        </span>
                    </div>

                    <div class="form-section">
                        <label for="sellQuantity" class="section-label">
                            Gold Quantity
                        </label>

                        <div class="sell-input-group">
                            <input type="number" class="form-control"
                                   id="sellQuantity" min="0.0001"
                                   max="{{ $availableGold }}" step="0.0001"
                                   value="0.1000" placeholder="Enter grams">
                            <span class="input-unit">GRAMS</span>
                        </div>

                        <div class="quantity-shortcuts">
                            <button type="button" class="sell-shortcut"
                                    data-percent="25">25%</button>
                            <button type="button" class="sell-shortcut"
                                    data-percent="50">50%</button>
                            <button type="button" class="sell-shortcut"
                                    data-percent="75">75%</button>
                            <button type="button" class="sell-shortcut"
                                    data-percent="100">MAX</button>
                        </div>

                        <small class="input-hint">
                            Enter the amount of gold you want to sell.
                        </small>
                        <div class="field-error" id="sellError"></div>
                    </div>

                    <div class="trade-summary sell-summary">
                        <div class="summary-title">
                            <i class="bi bi-receipt"></i> Selling Summary
                        </div>
                        <div class="summary-row">
                            <span>Gold Quantity</span>
                            <strong id="sellSummaryGrams">0.1000 g</strong>
                        </div>
                        <div class="summary-row">
                            <span>Selling Rate</span>
                            <strong>₹{{ number_format($goldRate, 2) }} / g</strong>
                        </div>
                        <div class="summary-row">
                            <span>Estimated Amount</span>
                            <strong id="sellEstimatedAmount">₹700.00</strong>
                        </div>
                        <div class="summary-total sell-total">
                            <span>You Receive</span>
                            <strong id="sellReceiveAmount">₹700.00</strong>
                        </div>
                    </div>

                    <div class="sell-info">
                        <i class="bi bi-info-circle"></i>
                        <span>
                            The final amount may vary depending on the applicable
                            selling rate and charges.
                        </span>
                    </div>

                    <button type="button" class="trade-submit-btn sell-submit-btn"
                            id="sellGoldBtn">
                        Sell Gold <i class="bi bi-arrow-right"></i>
                    </button>

                    <p class="trade-note">
                        <i class="bi bi-shield-check me-1"></i>
                        Review your selling details before confirmation.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TRANSACTION MODAL -->
<div class="modal fade trade-modal" id="tradeConfirmModal" tabindex="-1"
     aria-labelledby="tradeConfirmTitle" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content trade-modal-content">
            <div class="modal-body text-center">

                <!-- CONFIRM VIEW -->
                <div id="confirmView">
                    <div class="confirm-icon">
                        <i class="bi bi-gem"></i>
                    </div>
                    <h4 id="tradeConfirmTitle">Confirm Your Transaction</h4>
                    <p id="tradeConfirmText">
                        Please review your transaction details.
                    </p>

                    <div class="confirm-amount" id="confirmAmount">₹1.00</div>
                    <div class="confirm-description" id="confirmDescription"></div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="button" class="btn cancel-btn flex-fill"
                                data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button"
                                class="btn confirm-action-btn flex-fill"
                                id="confirmTradeBtn">
                            Confirm <i class="bi bi-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>

                <!-- ANIMATION VIEW -->
                <div id="animationView" class="d-none">
                    <div class="transaction-animation">
                        <div class="animation-ring ring-one"></div>
                        <div class="animation-ring ring-two"></div>
                        <div class="animation-coin">
                            <i class="bi bi-coin"></i>
                        </div>
                        <div class="animation-spark spark-one">✦</div>
                        <div class="animation-spark spark-two">✧</div>
                        <div class="animation-spark spark-three">✦</div>
                    </div>
                    <h4 class="animation-title" id="animationTitle">
                        Processing Transaction
                    </h4>
                    <p class="animation-description" id="animationDescription">
                        Please wait while we prepare your transaction.
                    </p>
                    <div class="animation-progress">
                        <span></span>
                    </div>
                </div>

                <!-- SUCCESS VIEW -->
                <div id="successView" class="d-none">
                    <div class="success-animation">
                        <div class="success-circle">
                            <i class="bi bi-check-lg"></i>
                        </div>
                        <span class="success-particle particle-one">✦</span>
                        <span class="success-particle particle-two">✧</span>
                        <span class="success-particle particle-three">✦</span>
                    </div>
                    <h4 id="successTitle">Congratulations!</h4>
                    <p id="successText">
                        Your transaction has been confirmed.
                    </p>
                    <div class="success-amount" id="successAmount">₹1.00</div>
                    <div class="success-description" id="successDescription"></div>
                    <button type="button" class="btn success-close-btn mt-4"
                            data-bs-dismiss="modal">
                        Continue <i class="bi bi-arrow-right ms-1"></i>
                    </button>
                </div>

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

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

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

.trade-heading { margin-bottom: 32px; }

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

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

.trade-heading h2 span { color: var(--gold-dark, #a67c22); }
.trade-heading p { margin: 0; color: #7b857c; font-size: 13px; }

.trade-wrapper {
    max-width: 620px;
    padding: 10px;
    background: var(--cream-light, #fffcf5);
    border: 1px solid var(--trade-border);
    border-radius: 22px;
    box-shadow: 0 15px 45px rgba(18, 60, 42, .08);
}

.trade-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: #f1eddf;
    border-radius: 15px;
}

.trade-tabs .nav-item { flex: 1; }

.trade-tabs .nav-link {
    width: 100%;
    min-height: 46px;
    color: #68756b;
    background: transparent;
    border: 0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.trade-tabs .nav-link.active {
    color: var(--trade-gold-light);
    background: var(--trade-green);
    box-shadow: 0 4px 12px rgba(18, 60, 42, .15);
}

.trade-tab-content { padding: 25px 18px 18px; }

.trade-intro {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

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

.sell-icon { color: #fff8e7; background: var(--trade-green); }

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

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

.rate-box, .available-gold {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    margin-bottom: 25px;
    background: #f6f0dc;
    border: 1px solid #e9dbad;
    border-radius: 13px;
}

.rate-icon, .available-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #896717;
    background: #fff5ce;
    border-radius: 11px;
    font-size: 20px;
}

.rate-info, .available-gold > div:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.rate-info > span, .available-gold > div:nth-child(2) > span {
    color: #7b857c;
    font-size: 10px;
    font-weight: 600;
}

.rate-info strong, .available-gold > div:nth-child(2) strong {
    color: var(--trade-green);
    font-size: 18px;
    font-weight: 800;
}

.rate-info strong small {
    color: #7b857c;
    font-size: 10px;
    font-weight: 500;
}

.rate-status {
    color: #27804c;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.rate-status i { margin-right: 3px; font-size: 7px; }
.section-label { display: block; margin-bottom: 12px; color: var(--trade-dark); font-size: 12px; font-weight: 800; }

.denomination-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.denomination-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 94px;
    padding: 10px 4px;
    color: var(--trade-green);
    background: #fffdf7;
    border: 1px solid #e3dcc8;
    border-radius: 13px;
    transition: .2s ease;
}

.denomination-card:hover { border-color: var(--trade-gold); transform: translateY(-2px); }

.denomination-card.active {
    background: #f9f0cc;
    border: 2px solid var(--trade-gold);
    box-shadow: 0 5px 14px rgba(212, 175, 55, .12);
}

.denomination-symbol { color: #a67c22; font-size: 11px; font-weight: 800; }
.denomination-card strong { font-size: 19px; font-weight: 800; line-height: 1.3; }
.denomination-card small { margin-top: 4px; color: #858d84; font-size: 9px; }

.multiplier-card {
    padding: 17px;
    margin-top: 22px;
    background: #f7f3e7;
    border: 1px solid #e8dcb7;
    border-radius: 15px;
    animation: cardAppear .25s ease both;
}

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

.multiplier-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.multiplier-heading h5 { margin: 0 0 4px; color: var(--trade-green); font-size: 13px; font-weight: 800; }
.multiplier-heading p { margin: 0; color: #879087; font-size: 10px; }

.multiplier-badge {
    padding: 6px 9px;
    color: #856315;
    background: #f4e6b4;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.multiplier-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--trade-green);
    background: #fffdf7;
    border: 1px solid #d9cda9;
    border-radius: 50%;
    font-size: 15px;
    transition: .2s ease;
}

.quantity-btn:hover { color: #fff8e7; background: var(--trade-green); border-color: var(--trade-green); }

.quantity-value { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.quantity-value input {
    width: 95px;
    padding: 0;
    color: var(--trade-green);
    background: transparent;
    border: 0;
    outline: 0;
    text-align: center;
    font-size: 27px;
    font-weight: 800;
}

.quantity-value span { color: #858d84; font-size: 10px; }

.multiplier-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px dashed #d9cda9;
    color: #7b857c;
    font-size: 12px;
}

.multiplier-equation strong { color: var(--trade-green); font-size: 13px; }
.multiplier-equation i { color: #b39b5a; font-size: 13px; }
.multiplier-equation .equation-total { color: #9a721b; font-size: 17px; }

.trade-summary {
    padding: 17px;
    margin-top: 22px;
    background: #fffdf7;
    border: 1px solid #e9e1ce;
    border-radius: 14px;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 13px;
    margin-bottom: 13px;
    color: var(--trade-green);
    border-bottom: 1px solid #eee7d6;
    font-size: 12px;
    font-weight: 800;
}

.summary-title i { color: #a67c22; font-size: 17px; }

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    font-size: 11px;
}

.summary-row span { color: #7b857c; }
.summary-row strong { color: var(--trade-dark); font-size: 11px; font-weight: 700; text-align: right; }

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    margin-top: 5px;
    color: #fff8e7;
    background: var(--trade-green);
    border-radius: 10px;
}

.summary-total span { font-size: 12px; font-weight: 700; }
.summary-total strong { color: var(--trade-gold-light); font-size: 19px; font-weight: 800; white-space: nowrap; }
.sell-total { background: #24563d; }

.trade-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 20px;
    color: #fff8e7;
    background: var(--trade-green);
    border: 1px solid var(--trade-green);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.trade-submit-btn:hover {
    color: var(--trade-dark);
    background: var(--trade-gold);
    border-color: var(--trade-gold);
    transform: translateY(-2px);
    box-shadow: 0 7px 17px rgba(166, 124, 34, .18);
}

.trade-submit-btn i { font-size: 17px; }
.sell-submit-btn { background: #24563d; border-color: #24563d; }

.trade-note { margin: 12px 0 0; color: #879087; font-size: 10px; text-align: center; }
.trade-note i { color: #27804c; }

.available-gold { margin-bottom: 14px; background: #eef5e9; border-color: #d4e5cd; }
.available-icon { color: #fff8e7; background: var(--trade-green); }
.available-gold > div:nth-child(2) strong { font-size: 19px; }

.available-label {
    padding: 5px 9px;
    color: #287b48;
    background: #dcefd8;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
}

.sell-input-group { position: relative; }

.sell-input-group .form-control {
    min-height: 50px;
    padding: 12px 75px 12px 14px;
    color: var(--trade-green);
    background: #fffdf7;
    border: 1px solid #dfd8c5;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: none;
}

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

.input-unit {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #8a9189;
    font-size: 10px;
    font-weight: 800;
    transform: translateY(-50%);
    pointer-events: none;
}

.quantity-shortcuts { display: flex; gap: 8px; margin-top: 11px; }

.sell-shortcut {
    flex: 1;
    padding: 8px 4px;
    color: var(--trade-green);
    background: #f5f0df;
    border: 1px solid #e4d9b9;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    transition: .2s ease;
}

.sell-shortcut:hover, .sell-shortcut.active {
    color: #fff8e7;
    background: var(--trade-green);
    border-color: var(--trade-green);
}

.input-hint { display: block; margin-top: 8px; color: #879087; font-size: 10px; }
.field-error { min-height: 15px; margin-top: 5px; color: #b42318; font-size: 10px; }

.sell-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    color: #7b857c;
    font-size: 10px;
    line-height: 1.6;
}

.sell-info i { margin-top: 1px; color: #a67c22; font-size: 15px; }

/* MODAL */
.trade-modal-content {
    overflow: hidden;
    border: 1px solid var(--border, #d8c69b);
    border-radius: 20px;
    background: #fffcf5;
    box-shadow: 0 20px 70px rgba(0,0,0,.2);
}

.trade-modal-content .modal-body { padding: 32px 25px; }

.confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    color: #8b681c;
    background: #f9edc4;
    border-radius: 50%;
    font-size: 26px;
}

.trade-modal-content h4 {
    color: #123c2a;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
}

.trade-modal-content p { color: #7b857c; font-size: 12px; }

.confirm-amount {
    margin-top: 15px;
    color: #123c2a;
    font-size: 28px;
    font-weight: 800;
}

.confirm-description { margin-top: 5px; color: #7b857c; font-size: 11px; }

.cancel-btn {
    color: #526157;
    background: #f1eddf;
    border: 1px solid #e1d9c6;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 700;
}

.confirm-action-btn, .success-close-btn {
    color: #fff8e7;
    background: #123c2a;
    border: 1px solid #123c2a;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 800;
}

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

/* PROCESSING ANIMATION */
.transaction-animation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
}

.animation-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(212,175,55,.5);
    border-radius: 50%;
    animation: ringPulse 1.5s ease-out infinite;
}

.ring-two { animation-delay: .7s; }

.animation-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    color: #926b16;
    background: radial-gradient(circle at 30% 25%, #fff5bc, #e9bd39 65%, #a67c22);
    border: 4px solid #f5d979;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(166,124,34,.25), inset 0 0 0 2px rgba(255,255,255,.35);
    font-size: 32px;
    animation: coinFloat 1s ease-in-out infinite alternate;
}

.animation-spark {
    position: absolute;
    color: #d4af37;
    opacity: 0;
    animation: sparkPop 1.2s ease-in-out infinite;
}

.spark-one { top: 10px; left: 15px; font-size: 20px; }
.spark-two { top: 25px; right: 12px; font-size: 25px; animation-delay: .4s; }
.spark-three { bottom: 8px; left: 27px; font-size: 17px; animation-delay: .7s; }

@keyframes ringPulse {
    0% { transform: scale(.6); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes coinFloat {
    from { transform: translateY(5px) rotateY(0); }
    to { transform: translateY(-5px) rotateY(180deg); }
}

@keyframes sparkPop {
    0%, 100% { opacity: 0; transform: scale(.5) rotate(0); }
    50% { opacity: 1; transform: scale(1.2) rotate(35deg); }
}

.animation-title { margin-bottom: 7px; }
.animation-description { margin-bottom: 18px; }

.animation-progress {
    width: 80%;
    height: 5px;
    margin: 0 auto;
    overflow: hidden;
    background: #eee6d2;
    border-radius: 20px;
}

.animation-progress span {
    display: block;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, #a67c22, #f0d78c);
    border-radius: inherit;
    animation: progressMove 1.3s ease-in-out infinite;
}

@keyframes progressMove {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

/* SUCCESS ANIMATION */
.success-animation {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 15px;
}

.success-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 9px auto;
    color: #fff;
    background: #27804c;
    border-radius: 50%;
    font-size: 39px;
    box-shadow: 0 0 0 8px rgba(39,128,76,.1);
    animation: successPop .55s cubic-bezier(.2,.8,.2,1.3) both;
}

.success-particle {
    position: absolute;
    color: #d4af37;
    animation: successSpark .9s ease-out both;
}

.particle-one { top: 0; left: 0; font-size: 20px; }
.particle-two { top: 8px; right: 0; font-size: 23px; animation-delay: .15s; }
.particle-three { bottom: 0; right: 9px; font-size: 16px; animation-delay: .25s; }

@keyframes successPop {
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes successSpark {
    from { opacity: 0; transform: scale(.2) rotate(-40deg); }
    to { opacity: 1; transform: scale(1) rotate(25deg); }
}

#successTitle { margin-bottom: 6px; }
#successText { margin-bottom: 10px; }

.success-amount {
    color: #123c2a;
    font-size: 27px;
    font-weight: 800;
}

.success-description { color: #7b857c; font-size: 11px; margin-top: 4px; }
.success-close-btn { width: 100%; min-height: 44px; }

@media (max-width: 575.98px) {
    .gold-trade-section { padding: 30px 0 50px; }
    .trade-heading { margin-bottom: 23px; }
    .trade-heading p { padding: 0 15px; line-height: 1.6; }
    .trade-wrapper { padding: 7px; border-radius: 17px; }
    .trade-tab-content { padding: 22px 10px 13px; }
    .trade-intro h4 { font-size: 17px; }
    .rate-box, .available-gold { padding: 12px; gap: 9px; }
    .rate-info strong { font-size: 16px; }
    .rate-status { font-size: 8px; }
    .denomination-grid { gap: 6px; }
    .denomination-card { min-height: 83px; border-radius: 10px; }
    .denomination-card strong { font-size: 17px; }
    .denomination-card small { font-size: 8px; }
    .multiplier-card { padding: 14px 11px; }
    .multiplier-badge { font-size: 8px; }
    .multiplier-control { gap: 18px; }
    .quantity-btn { width: 35px; height: 35px; }
    .trade-summary { padding: 14px 12px; }
    .summary-total { padding: 12px; }
    .summary-total strong { font-size: 17px; }
    .trade-modal-content .modal-body { padding: 28px 18px; }
}
</style>

<!-- Bootstrap Icons CDN: include once in User.layout if already present -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<script>
document.addEventListener('DOMContentLoaded', function () {
    const goldRate = Number(@json($goldRate));
    const availableGold = Number(@json($availableGold));

    const modalElement = document.getElementById('tradeConfirmModal');
    const tradeModal = bootstrap.Modal.getOrCreateInstance(modalElement);

    const confirmView = document.getElementById('confirmView');
    const animationView = document.getElementById('animationView');
    const successView = document.getElementById('successView');

    let selectedDenomination = 1;
    let currentTrade = '';
    let animationTimer = null;

    const buyQuantity = document.getElementById('buyQuantity');
    const sellQuantity = document.getElementById('sellQuantity');

    function formatMoney(value) {
        return Number(value).toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function showView(view) {
        confirmView.classList.add('d-none');
        animationView.classList.add('d-none');
        successView.classList.add('d-none');
        view.classList.remove('d-none');
    }

    // BUY CALCULATIONS
    function updateBuySummary() {
        let quantity = parseInt(buyQuantity.value, 10);

        if (!Number.isFinite(quantity) || quantity < 1) quantity = 1;
        quantity = Math.min(quantity, 10000);
        buyQuantity.value = quantity;

        const total = selectedDenomination * quantity;
        const grams = total / goldRate;

        document.getElementById('selectedDenomination').textContent =
            selectedDenomination.toLocaleString('en-IN');
        document.getElementById('buyQuantityDisplay').textContent = quantity;
        document.getElementById('buyTotal').textContent = formatMoney(total);
        document.getElementById('buySummaryAmount').textContent = '₹' + formatMoney(total);
        document.getElementById('buyPayable').textContent = '₹' + formatMoney(total);
        document.getElementById('buyGrams').textContent = grams.toFixed(4) + ' g';

        return { total, grams, quantity };
    }

    document.querySelectorAll('.denomination-card').forEach(function (card) {
        card.addEventListener('click', function () {
            document.querySelectorAll('.denomination-card').forEach(function (item) {
                item.classList.remove('active');
            });

            card.classList.add('active');
            selectedDenomination = Number(card.dataset.value);
            updateBuySummary();
        });
    });

    document.getElementById('buyMinus').addEventListener('click', function () {
        buyQuantity.value = Math.max(1, Number(buyQuantity.value || 1) - 1);
        updateBuySummary();
    });

    document.getElementById('buyPlus').addEventListener('click', function () {
        buyQuantity.value = Math.min(10000, Number(buyQuantity.value || 1) + 1);
        updateBuySummary();
    });

    buyQuantity.addEventListener('input', updateBuySummary);

    // SELL CALCULATIONS
    function updateSellSummary() {
        let grams = Number(sellQuantity.value);

        if (!Number.isFinite(grams) || grams < 0) grams = 0;
        if (grams > availableGold) {
            grams = availableGold;
            sellQuantity.value = availableGold.toFixed(4);
        }

        const amount = grams * goldRate;

        document.getElementById('sellSummaryGrams').textContent = grams.toFixed(4) + ' g';
        document.getElementById('sellEstimatedAmount').textContent = '₹' + formatMoney(amount);
        document.getElementById('sellReceiveAmount').textContent = '₹' + formatMoney(amount);

        return { grams, amount };
    }

    sellQuantity.addEventListener('input', function () {
        document.getElementById('sellError').textContent = '';
        document.querySelectorAll('.sell-shortcut').forEach(function (button) {
            button.classList.remove('active');
        });
        updateSellSummary();
    });

    document.querySelectorAll('.sell-shortcut').forEach(function (button) {
        button.addEventListener('click', function () {
            const percentage = Number(button.dataset.percent);
            sellQuantity.value = (availableGold * percentage / 100).toFixed(4);

            document.querySelectorAll('.sell-shortcut').forEach(function (item) {
                item.classList.remove('active');
            });
            button.classList.add('active');

            document.getElementById('sellError').textContent = '';
            updateSellSummary();
        });
    });

    // OPEN CONFIRMATION
    document.getElementById('buyGoldBtn').addEventListener('click', function () {
        const result = updateBuySummary();

        currentTrade = 'buy';
        document.getElementById('tradeConfirmTitle').textContent = 'Confirm Gold Purchase';
        document.getElementById('tradeConfirmText').textContent =
            'Review your purchase details before continuing.';
        document.getElementById('confirmAmount').textContent =
            '₹' + formatMoney(result.total);
        document.getElementById('confirmDescription').textContent =
            'You are purchasing ' + result.grams.toFixed(4) + ' g of digital gold.';

        showView(confirmView);
        tradeModal.show();
    });

    document.getElementById('sellGoldBtn').addEventListener('click', function () {
        const result = updateSellSummary();
        const error = document.getElementById('sellError');

        if (!Number.isFinite(result.grams) || result.grams <= 0) {
            error.textContent = 'Please enter a valid gold quantity.';
            sellQuantity.focus();
            return;
        }

        if (result.grams > availableGold) {
            error.textContent = 'Your available gold balance is insufficient.';
            sellQuantity.focus();
            return;
        }

        error.textContent = '';
        currentTrade = 'sell';

        document.getElementById('tradeConfirmTitle').textContent = 'Confirm Gold Sale';
        document.getElementById('tradeConfirmText').textContent =
            'Review your selling details before continuing.';
        document.getElementById('confirmAmount').textContent =
            '₹' + formatMoney(result.amount);
        document.getElementById('confirmDescription').textContent =
            'You are selling ' + result.grams.toFixed(4) + ' g of digital gold.';

        showView(confirmView);
        tradeModal.show();
    });

    // CONFIRM AND ANIMATE
    document.getElementById('confirmTradeBtn').addEventListener('click', function () {
        if (!currentTrade) return;

        const buyResult = currentTrade === 'buy' ? updateBuySummary() : null;
        const sellResult = currentTrade === 'sell' ? updateSellSummary() : null;

        const amount = currentTrade === 'buy' ? buyResult.total : sellResult.amount;
        const grams = currentTrade === 'buy' ? buyResult.grams : sellResult.grams;

        showView(animationView);

        document.getElementById('animationTitle').textContent =
            currentTrade === 'buy' ? 'Preparing Your Gold Purchase' : 'Processing Your Gold Sale';

        document.getElementById('animationDescription').textContent =
            currentTrade === 'buy'
                ? 'Your gold purchase is being prepared...'
                : 'Your selling request is being prepared...';

        const confirmButton = document.getElementById('confirmTradeBtn');
        confirmButton.disabled = true;

        clearTimeout(animationTimer);
        animationTimer = setTimeout(function () {
            document.getElementById('successTitle').textContent =
                currentTrade === 'buy' ? 'Purchase Confirmed!' : 'Sale Confirmed!';

            document.getElementById('successText').textContent =
                currentTrade === 'buy'
                    ? 'Your purchase demo is complete.'
                    : 'Your selling demo is complete.';

            document.getElementById('successAmount').textContent =
                '₹' + formatMoney(amount);

            document.getElementById('successDescription').textContent =
                currentTrade === 'buy'
                    ? grams.toFixed(4) + ' g of gold purchase'
                    : grams.toFixed(4) + ' g of gold sale';

            showView(successView);
            confirmButton.disabled = false;
        }, 1700);
    });

    modalElement.addEventListener('hidden.bs.modal', function () {
        clearTimeout(animationTimer);
        showView(confirmView);
        document.getElementById('confirmTradeBtn').disabled = false;
        currentTrade = '';
    });

    updateBuySummary();
    updateSellSummary();
});
</script>

@endsection