@extends('layouts.user')

@section('title', __('user.withdraw_title'))

@section('content')
<style>
/* Clean Withdraw Page */
.withdraw {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    min-height: 100vh;
}

/* First Withdrawal Gift Modal */
.gift-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gift-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.gift-modal-content {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gift-modal-header {
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 20px 20px 0 0;
    text-align: center;
    position: relative;
}

.gift-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.gift-title {
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.gift-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gift-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.gift-modal-body {
    padding: 2rem 1.5rem;
    color: white;
}

.gift-description {
    text-align: center;
    margin-bottom: 2rem;
}

.gift-description p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.gift-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.gift-tier {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.gift-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.gift-tier.silver {
    border-color: #c0c0c0;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.1));
}

.gift-tier.gold {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
}

.gift-tier.diamond {
    border-color: #00d4ff;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 123, 255, 0.1));
}

.gift-tier.master {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 59, 48, 0.1));
}

.tier-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.tier-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.tier-info p {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.9;
}

.gift-warning {
    background: rgba(255, 193, 7, 0.2);
    border: 2px solid #ffc107;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

.warning-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.warning-content h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.warning-content ul {
    margin: 0;
    padding-left: 1.2rem;
}

.warning-content li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.gift-cta {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.gift-cta p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
}

.gift-modal-footer {
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-understand,
.btn-withdraw-now {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.btn-understand {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-understand:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-withdraw-now {
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.btn-withdraw-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
}

/* First Withdraw Notice */
.first-withdraw-notice {
    margin-top: 1rem;
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    border-radius: 12px;
    padding: 1rem;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
    }
}

.notice-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.notice-icon {
    font-size: 2rem;
    animation: bounce 2s infinite;
}

.notice-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.notice-text strong {
    font-size: 1rem;
}

.btn-view-gifts {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-view-gifts:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-view-gifts i {
    margin-right: 0.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gift-modal-content {
        margin: 1rem;
        max-height: 95vh;
    }

    .gift-title {
        font-size: 1.2rem;
    }

    .gift-tiers {
        grid-template-columns: 1fr;
    }

    .gift-modal-footer {
        flex-direction: column;
    }

    .btn-understand,
    .btn-withdraw-now {
        width: 100%;
    }

    .notice-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .btn-view-gifts {
        width: 100%;
    }
}

/* Page Header */
.page-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #1f2937;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #10b981;
}

.page-header p {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Card Base */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-out;
}

.section-title {
    font-size: 1.1rem;
    color: #374151;
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Balance */
.balance-item {
    text-align: center;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 0.25rem;
}

.balance-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.balance-meta {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

/* Form */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
}

.form-input:focus {
    outline: none;
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Info Box - Mobile Optimized */
.info-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
    border: 2px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.info-title {
    font-weight: 700;
    color: #047857;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
}

.info-title i {
    font-size: 1.25rem;
    padding: 0.5rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 8px;
}

.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-list li {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border-left: 4px solid #10b981;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.4;
}

.info-list li:last-child {
    margin-bottom: 0;
}

.info-list li::before {
    content: '✓';
    color: #10b981;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Warning Box - Mobile Optimized */
.warning-box {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
}

.warning-title {
    font-weight: 700;
    color: #d97706;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
}

.warning-title i {
    font-size: 1.25rem;
    padding: 0.5rem;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
}

.warning-box .info-list li {
    color: #92400e;
    border-left-color: #f59e0b;
    background: rgba(254, 243, 199, 0.6);
}

.warning-box .info-list li::before {
    content: '⚠';
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}



/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    display: flex;
    justify-content: space-around;
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 8px;
    min-width: 55px;
    transition: all 0.3s ease;
}

.nav-item.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.nav-item i {
    font-size: 1.1rem;
}

/* Desktop */
@media (min-width: 768px) {
    .withdraw {
        max-width: 800px;
        padding: 2rem;
    }

    .bottom-nav {
        display: none;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<div class="withdraw">
    <!-- Page Header -->
    <div class="page-header">
        <h1>
            <i class="fas fa-money-bill-transfer"></i>
            {{ __('user.withdraw') }}
        </h1>
        <p>{{ __('user.withdraw_coins_from_web') }}</p>
    </div>

    <!-- Current Balance -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-wallet"></i>
            {{ __('user.current_balance') }}
        </h2>
        <div class="balance-item">
            <div class="balance-amount">{{ number_format($userCoins->coins ?? 0) }}</div>
            <div class="balance-label">{{ __('user.available_diamonds') }}</div>
            <div class="balance-meta">
                {{ __('user.withdrawable_amount') }}: {{ number_format($userCoins->coins ?? 0) }} {{ __('user.available_diamonds') }}
            </div>
        </div>
    </div>

    <!-- First Withdrawal Gift Popup -->
    <div id="firstWithdrawGiftModal" class="gift-modal" style="display: none;">
        <div class="gift-modal-overlay"></div>
        <div class="gift-modal-content">
            <div class="gift-modal-header">
                <div class="gift-icon">🎁</div>
                <h2 class="gift-title">{{ __('user.first_withdraw_gift_title') }}</h2>
                <button class="gift-close" onclick="closeFirstWithdrawModal()">&times;</button>
            </div>

            <div class="gift-modal-body">
                <div class="gift-description">
                    <p>{{ __('user.first_withdraw_gift_description') }}</p>
                </div>

                <div class="gift-tiers">
                    <div class="gift-tier silver">
                        <div class="tier-icon">⚪️</div>
                        <div class="tier-info">
                            <h3>{{ __('user.silver_package') }}</h3>
                            <p>{{ __('user.withdraw_above', ['amount' => '250,000']) }}</p>
                        </div>
                    </div>

                    <div class="gift-tier gold">
                        <div class="tier-icon">🟡</div>
                        <div class="tier-info">
                            <h3>{{ __('user.gold_package') }}</h3>
                            <p>{{ __('user.withdraw_above', ['amount' => '625,000']) }}</p>
                        </div>
                    </div>

                    <div class="gift-tier diamond">
                        <div class="tier-icon">💎</div>
                        <div class="tier-info">
                            <h3>{{ __('user.diamond_package') }}</h3>
                            <p>{{ __('user.withdraw_above', ['amount' => '1,250,000']) }}</p>
                        </div>
                    </div>

                    <div class="gift-tier master">
                        <div class="tier-icon">🔱</div>
                        <div class="tier-info">
                            <h3>{{ __('user.master_package') }}</h3>
                            <p>{{ __('user.withdraw_above', ['amount' => '2,475,000']) }}</p>
                        </div>
                    </div>
                </div>

                <div class="gift-warning">
                    <div class="warning-icon">⚠️</div>
                    <div class="warning-content">
                        <h4>{{ __('user.important_note') }}</h4>
                        <ul>
                            <li>{{ __('user.gift_locked_warning') }}</li>
                            <li>{{ __('user.no_accumulation_warning') }}</li>
                        </ul>
                    </div>
                </div>

                <div class="gift-cta">
                    <p>🎯 <strong>{{ __('user.first_withdraw_cta') }}</strong></p>
                </div>
            </div>

            <div class="gift-modal-footer">
                <button class="btn-understand" onclick="closeFirstWithdrawModal()">
                    {{ __('user.i_understand') }}
                </button>
                <button class="btn-withdraw-now" onclick="closeFirstWithdrawModal(); focusWithdrawForm();">
                    {{ __('user.withdraw_now') }}
                </button>
            </div>
        </div>
    </div>

    <!-- Withdraw Info -->
    <div class="info-box">
        <div class="info-title">
            <i class="fas fa-info-circle"></i>
            {{ __('user.withdraw_guide') }}
        </div>
        <ul class="info-list">
            <li>{{ __('user.conversion_rate') }}</li>
            <li>{{ __('user.instant_transfer') }}</li>
            <li>{{ __('user.no_daily_limit') }}</li>
            <li>{{ __('user.transaction_fee') }}</li>
        </ul>

        @if($isFirstWithdrawal && ($userCoins->coins ?? 0) >= 250000)
        <div class="first-withdraw-notice">
            <div class="notice-content">
                <div class="notice-icon">🎁</div>
                <div class="notice-text">
                    <strong>{{ __('user.first_time_withdraw') }}</strong><br>
                    {{ __('user.learn_about_gifts') }}
                </div>
                <button class="btn-view-gifts" onclick="showFirstWithdrawModal()">
                    <i class="fas fa-gift"></i>
                    {{ __('user.view_gifts') }}
                </button>
            </div>
        </div>
        @endif
    </div>



    <!-- Withdraw Form -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-exchange-alt"></i>
            {{ __('user.withdraw_coins') }}
        </h2>

        <form method="POST" action="{{ route('user.withdraw.post') }}" id="withdrawForm">
            @csrf

            <div class="form-group">
                <label for="character_id" class="form-label">{{ __('user.select_character_receive_diamonds') }}</label>
                <select name="character_id" id="character_id" class="form-input" required>
                    <option value="">{{ __('user.select_character_option') }}</option>
                    @if(isset($gameCharacters) && $gameCharacters->count() > 0)
                        @foreach($gameCharacters as $character)
                            <option value="{{ $character->rid }}" {{ old('character_id') == $character->rid ? 'selected' : '' }}>
                                {{ $character->rname }} (ID: {{ $character->rid }})
                            </option>
                        @endforeach
                    @endif
                </select>
                <div style="color: #6b7280; font-size: 0.75rem; margin-top: 0.25rem;">
                    @if(!isset($gameCharacters) || $gameCharacters->count() == 0)
                        <span style="color: #ef4444;">{{ __('user.no_characters_create_first') }}</span>
                    @else
                        {{ __('user.diamonds_transfer_to_character') }}
                    @endif
                </div>
                @error('character_id')
                    <div style="color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="amount" class="form-label">{{ __('user.diamonds_amount_to_withdraw') }}</label>
                <input
                    type="number"
                    name="amount"
                    id="amount"
                    class="form-input"
                    value="{{ old('amount') }}"
                    placeholder="{{ __('user.enter_diamond_amount') }}"
                    required
                    min="1"
                    max="{{ $userCoins->coins ?? 0 }}"
                >
                <div style="color: #6b7280; font-size: 0.75rem; margin-top: 0.25rem;">
                    {{ __('user.withdraw_limits', ['min' => 1, 'max' => number_format($userCoins->coins ?? 0)]) }}
                </div>
                <div id="gameCoinsPreview" style="color: #10b981; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;"></div>
                @error('amount')
                    <div style="color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
                @enderror
            </div>

            <div class="warning-box">
                <div class="warning-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    {{ __('user.important_notice') }}
                </div>
                <ul class="info-list" style="color: #d97706;">
                    <li>{{ __('user.diamonds_transfer_directly') }}</li>
                    <li>{{ __('user.transaction_irreversible') }}</li>
                    <li>{{ __('user.check_amount_carefully') }}</li>
                    <li>{{ __('user.contact_admin_issues') }}</li>
                </ul>
            </div>

            <button type="submit" class="submit-btn" id="withdrawBtn">
                <i class="fas fa-money-bill-transfer"></i>
                {{ __('user.withdraw_coins') }}
            </button>
        </form>
    </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('user.dashboard') }}" class="nav-item">
        <i class="fas fa-home"></i>
        <span>Trang chủ</span>
    </a>
    <a href="{{ route('user.recharge') }}" class="nav-item">
        <i class="fas fa-gem"></i>
        <span>{{ __('user.recharge_nav') }}</span>
    </a>
    <a href="{{ route('user.withdraw') }}" class="nav-item active">
        <i class="fas fa-money-bill-transfer"></i>
        <span>{{ __('user.withdraw_nav') }}</span>
    </a>
    <a href="{{ route('user.giftcode') }}" class="nav-item">
        <i class="fas fa-gift"></i>
        <span>{{ __('user.giftcode') }}</span>
    </a>
    <a href="{{ route('user.recharge.history') }}" class="nav-item">
        <i class="fas fa-history"></i>
        <span>Lịch sử</span>
    </a>
</div>

<script>
// Calculate game coins preview
document.getElementById('amount').addEventListener('input', function() {
    const amount = parseInt(this.value) || 0;
    const gameCoins = amount * 10; // 1 web coin = 10 game coins
    const preview = document.getElementById('gameCoinsPreview');

    if (amount >= 1) {
        preview.textContent = `→ {{ __('user.receive_diamonds_in_game', ['amount' => 'AMOUNT_PLACEHOLDER']) }}`.replace('AMOUNT_PLACEHOLDER', new Intl.NumberFormat().format(gameCoins));
    } else {
        preview.textContent = '';
    }
});

// Form validation
document.getElementById('withdrawForm').addEventListener('submit', function(e) {
    // Check character selection
    const characterSelect = document.getElementById('character_id');
    if (!characterSelect.value) {
        alert('{{ __('user.please_select_character') }}');
        e.preventDefault();
        return;
    }

    const amount = parseInt(document.getElementById('amount').value);
    const maxAmount = {{ $userCoins->coins ?? 0 }};

    if (amount < 1) {
        alert('{{ __('user.diamonds_must_greater_zero') }}');
        e.preventDefault();
        return;
    }

    if (amount > maxAmount) {
        alert(`{{ __('user.diamonds_exceed_limit', ['max' => 'MAX_PLACEHOLDER']) }}`.replace('MAX_PLACEHOLDER', new Intl.NumberFormat().format(maxAmount)));
        e.preventDefault();
        return;
    }

    const gameCoins = amount * 10;
    const selectedCharacterText = characterSelect.options[characterSelect.selectedIndex].text;
    const confirmMessage = `{{ __('user.confirm_withdraw', ['amount' => ':amount', 'character' => ':character', 'gameCoins' => ':gameCoins']) }}`
        .replace(':amount', new Intl.NumberFormat().format(amount))
        .replace(':character', selectedCharacterText)
        .replace(':gameCoins', new Intl.NumberFormat().format(gameCoins));

    if (!confirm(confirmMessage)) {
        e.preventDefault();
        return;
    }

    // Disable button to prevent double submission
    const btn = document.getElementById('withdrawBtn');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ __('user.processing_withdrawal') }}';
    btn.disabled = true;
});

// Add touch feedback
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.nav-item').forEach(element => {
        element.addEventListener('touchstart', function() {
            if (navigator.vibrate) {
                navigator.vibrate(10);
            }
        });
    });
});

// First Withdrawal Gift Modal Functions
function showFirstWithdrawModal() {
    document.getElementById('firstWithdrawGiftModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeFirstWithdrawModal() {
    document.getElementById('firstWithdrawGiftModal').style.display = 'none';
    document.body.style.overflow = 'auto';

    // Mark as seen in localStorage
    localStorage.setItem('firstWithdrawModalSeen', 'true');
}

function focusWithdrawForm() {
    document.getElementById('amount').focus();
    document.getElementById('amount').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

// Check if user should see the first withdrawal modal
function checkFirstWithdrawalStatus() {
    // Get data from server
    const hasSeenModal = localStorage.getItem('firstWithdrawModalSeen');
    const userBalance = {{ $userCoins->coins ?? 0 }};
    const isFirstWithdrawal = {{ $isFirstWithdrawal ? 'true' : 'false' }};
    const hasWithdrawHistory = {{ count($recentWithdraws) > 0 ? 'true' : 'false' }};

    // Show modal if:
    // 1. User hasn't seen it in this session
    // 2. User has sufficient balance (at least 250k for minimum gift)
    // 3. This is actually their first withdrawal according to database
    // 4. User has no withdrawal history
    if (!hasSeenModal && userBalance >= 1000 && isFirstWithdrawal && !hasWithdrawHistory) {
        // Show modal after a short delay for better UX
        setTimeout(showFirstWithdrawModal, 2000);
    }
}

// Initialize modal on page load
document.addEventListener('DOMContentLoaded', function() {
    // Check if we should show the first withdrawal modal
    checkFirstWithdrawalStatus();
});

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    const modal = document.getElementById('firstWithdrawGiftModal');
    if (e.target === modal) {
        closeFirstWithdrawModal();
    }
});
</script>

@endsection