@extends('layouts.user')

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

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
/* Clean Monthly Card Page - Mobile First */
.monthly-card {
    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;
}

/* 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: #7c3aed;
}

.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;
}

/* Current Status */
.current-status {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03));
    border: 2px solid rgba(124, 58, 237, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.status-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.status-icon i {
    font-size: 1.5rem;
    color: white;
}

.status-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 0.5rem;
}

.status-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Package Cards */
.packages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.package-card {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(124, 58, 237, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.package-card:hover {
    border-color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.15);
}

.package-card.popular {
    border-color: #7c3aed;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
}

.package-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #7c3aed;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.package-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.package-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

.package-price {
    font-size: 2rem;
    font-weight: 800;
    color: #7c3aed;
    margin-bottom: 0.25rem;
}

.package-duration {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Benefits List */
.benefits-list {
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
}

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

.benefits-list li::before {
    content: '✓';
    color: #10b981;
    font-weight: 700;
    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;
    flex-shrink: 0;
}

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

.purchase-btn:hover {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

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

/* Info Box */
.info-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.info-title {
    font-weight: 700;
    color: #1d4ed8;
    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(59, 130, 246, 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 #3b82f6;
    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: '💡';
    font-size: 1rem;
    flex-shrink: 0;
}

/* 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: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
}

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

/* Purchase Modal - Mobile Optimized */
.purchase-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.purchase-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1001;
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    border-radius: 20px 20px 0 0;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal-body {
    padding: 1.5rem;
}

/* Package Summary */
.package-summary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03));
    border: 2px solid rgba(124, 58, 237, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.package-summary h3 {
    color: #7c3aed;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.package-summary .price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #374151;
    margin-bottom: 0.75rem;
}

.package-summary .description {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
}

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

.form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.form-label i {
    color: #7c3aed;
    font-size: 1rem;
}

.form-select {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    background: white;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: 3rem;
}

.form-select:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237c3aed' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.form-select option {
    padding: 0.75rem;
    font-size: 1rem;
}

.form-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 8px;
    border-left: 3px solid #7c3aed;
}

.form-hint i {
    color: #7c3aed;
    font-size: 0.9rem;
}

/* Select Wrapper */
.select-wrapper {
    position: relative;
}

.select-loading {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7c3aed;
    font-size: 1rem;
    display: none;
}

.select-loading.show {
    display: block;
}

/* Character Options Styling */
.form-select option {
    padding: 1rem;
    background: white;
    color: #374151;
}

.form-select option:hover {
    background: rgba(124, 58, 237, 0.05);
}

.form-select option:disabled {
    color: #9ca3af;
    font-style: italic;
}

/* Modal Actions */
.modal-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-cancel {
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-cancel:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.btn-purchase {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

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

/* Desktop */
@media (min-width: 768px) {
    .monthly-card {
        max-width: 800px;
        padding: 2rem;
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    }

    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .purchase-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto;
        max-width: 500px;
        width: 90%;
        border-radius: 20px;
        animation: scaleIn 0.3s ease-out;
    }

    .modal-header {
        border-radius: 20px 20px 0 0;
    }

    .bottom-nav {
        display: none;
    }
}

/* Animations */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes scaleIn {
    from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

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

<div class="monthly-card">
    <!-- Page Header -->
    <div class="page-header">
        <h1>
            <i class="fas fa-crown"></i>
            {{ __('user.monthly_card') }}
        </h1>
        <p>{{ __('user.monthly_card_special_offer') }}</p>
    </div>

    <!-- Current Status -->
    <div class="current-status">
        <div class="status-icon">
            <i class="fas fa-crown"></i>
        </div>
        <div class="status-title">
            @if(isset($activeCards) && $activeCards->count() > 0)
                {{ __('user.vip_card_active') }}
            @else
                {{ __('user.no_monthly_card') }}
            @endif
        </div>
        <div class="status-subtitle">
            @if(isset($activeCards) && $activeCards->count() > 0)
                @php $latestCard = $activeCards->first(); @endphp
                {{ __('user.expires_on') }}: {{ \Carbon\Carbon::parse($latestCard->expires_at)->format('d/m/Y') }}
                <br>{{ __('user.daily_receive') }}: {{ number_format($latestCard->daily_reward_coins) }} {{ __('user.available_diamonds') }}
            @else
                {{ __('user.monthly_card_special_offer') }}
            @endif
        </div>
    </div>

    <!-- Available Package -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-shopping-cart"></i>
            {{ __('user.monthly_card_package') }}
        </h2>

        @if(isset($packages['premium']))
        @php $package = $packages['premium']; @endphp
        <div class="package-card popular">
            <div class="package-badge">VIP</div>
            <div class="package-header">
                <div class="package-name">{{ __('user.premium_monthly_card') }}</div>
                <div class="package-price">{{ number_format($package['cost_coins']) }} {{ __('user.coins') }}</div>
                <div class="package-duration">{{ __('user.duration_days', ['days' => $package['duration_days']]) }}</div>
            </div>

            <ul class="benefits-list">
                <li>{{ __('user.receive_diamonds_daily', ['amount' => number_format($package['daily_reward_coins'])]) }}</li>
                <li>{{ __('user.premium_card_description') }}</li>
                <li>{{ __('user.special_items_daily') }}</li>
                <li>{{ __('user.vip_benefits_in_game') }}</li>
                <li>{{ __('user.priority_support') }}</li>
            </ul>

            <button class="purchase-btn" onclick="showPurchaseForm('premium')">
                <i class="fas fa-crown"></i>
                {{__('user.buy_now')}} - {{ number_format($package['cost_coins']) }} Coins
            </button>
        </div>
        @else
        <div style="text-align: center; padding: 2rem; color: #6b7280;">
            <i class="fas fa-exclamation-triangle" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;"></i>
            <h3>{{ __('user.monthly_card_unavailable') }}</h3>
            <p>{{ __('user.contact_admin_details') }}</p>
        </div>
        @endif
    </div>

    <!-- Purchase Form (Hidden) -->
    <div id="purchaseForm" style="display: none;">
        <!-- Overlay -->
        <div class="purchase-overlay" onclick="hidePurchaseForm()"></div>

        <!-- Modal -->
        <div class="purchase-modal">
            <div class="modal-header">
                <h2>
                    <i class="fas fa-crown"></i>
                    {{ __('user.buy_monthly_card_vip') }}
                </h2>
                <button type="button" class="close-btn" onclick="hidePurchaseForm()">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="modal-body">
                <form method="POST" action="{{ route('user.monthly-card.purchase') }}" id="monthlyCardForm">
                    @csrf
                    <input type="hidden" name="package_type" id="selectedPackageType">

                    <!-- Package Summary -->
                    <div class="package-summary" id="packageSummary">
                        <!-- Package details will be shown here -->
                    </div>

                    <!-- Character Selection -->
                    <div class="form-group">
                        <label for="character_id" class="form-label">
                            <i class="fas fa-user"></i>
                            {{ __('user.select_character_monthly') }}
                        </label>
                        <div class="select-wrapper">
                            <select name="character_id" id="character_id" class="form-select" required>
                                <option value="">
                                    <i class="fas fa-spinner fa-spin"></i> {{ __('user.loading_characters') }}
                                </option>
                            </select>
                            <div class="select-loading" id="selectLoading">
                                <i class="fas fa-spinner fa-spin"></i>
                            </div>
                        </div>
                        <div class="form-hint">
                            <i class="fas fa-info-circle"></i>
                            {{ __('user.monthly_card_activate_character') }}
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="modal-actions">
                        <button type="button" class="btn-cancel" onclick="hidePurchaseForm()">
                            <i class="fas fa-times"></i>
                            Hủy
                        </button>
                        <button type="submit" class="btn-purchase">
                            <i class="fas fa-crown"></i>
                            {{ __('user.confirm_purchase') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Info Guide -->
    <div class="info-box">
        <div class="info-title">
            <i class="fas fa-info-circle"></i>
            {{ __('user.monthly_card_info') }}
        </div>
        <ul class="info-list">
            <li>{{ __('user.monthly_card_effective_immediately') }}</li>
            <li>{{ __('user.monthly_card_applies_all_transactions') }}</li>
            <li>{{ __('user.monthly_card_no_refund') }}</li>
            <li>{{ __('user.contact_admin_issues') }}</li>
        </ul>
    </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('user.dashboard') }}" class="nav-item">
        <i class="fas fa-home"></i>
        <span>{{ __('user.home') }}</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">
        <i class="fas fa-money-bill-transfer"></i>
        <span>{{ __('user.withdraw_nav') }}</span>
    </a>
    <a href="{{ route('user.monthly-card') }}" class="nav-item active">
        <i class="fas fa-crown"></i>
        <span>{{ __('user.monthly_card_nav') }}</span>
    </a>
    <a href="{{ route('user.recharge.history') }}" class="nav-item">
        <i class="fas fa-history"></i>
        <span>{{ __('user.history_nav') }}</span>
    </a>
</div>

<script>
@if(isset($packages['premium']))
const packageData = @json($packages['premium']);
@endif

function showPurchaseForm(packageType) {
    @if(isset($packages['premium']))
    // Set package type
    document.getElementById('selectedPackageType').value = packageType;

    // Update package summary
    const summary = document.getElementById('packageSummary');
    summary.innerHTML = `
        <h3>{{ __('user.premium_monthly_card') }}</h3>
        <div class="price">${new Intl.NumberFormat().format(packageData.cost_coins)} {{ __('user.coins') }}</div>
        <div class="description">
            <strong>{{ __('user.monthly_card_duration') }}:</strong> ${packageData.duration_days} {{ __('user.days') }}<br>
            <strong>{{ __('user.daily_receive') }}:</strong> ${new Intl.NumberFormat().format(packageData.daily_reward_coins)} {{ __('user.diamonds') }}<br>
            <strong>{{ __('user.description') }}:</strong> {{ __('user.premium_card_description') }}
        </div>
    `;

    // Load characters
    loadCharacters();

    // Show modal
    document.getElementById('purchaseForm').style.display = 'block';
    document.body.style.overflow = 'hidden'; // Prevent background scroll
    @else
    alert('{{ __('user.monthly_card_unavailable_alert') }}');
    @endif
}

function hidePurchaseForm() {
    document.getElementById('purchaseForm').style.display = 'none';
    document.body.style.overflow = 'auto'; // Restore background scroll
}

function showErrorMessage(message) {
    // Create error toast
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #ef4444;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-weight: 600;
        z-index: 10000;
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
        animation: slideDown 0.3s ease-out;
    `;
    toast.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;

    // Add animation keyframes
    if (!document.getElementById('toast-styles')) {
        const style = document.createElement('style');
        style.id = 'toast-styles';
        style.textContent = `
            @keyframes slideDown {
                from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
                to { transform: translateX(-50%) translateY(0); opacity: 1; }
            }
        `;
        document.head.appendChild(style);
    }

    document.body.appendChild(toast);

    // Remove after 3 seconds
    setTimeout(() => {
        toast.style.animation = 'slideDown 0.3s ease-out reverse';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function showSuccessMessage(message) {
    // Create success toast
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #10b981;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-weight: 600;
        z-index: 10000;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
        animation: slideDown 0.3s ease-out;
    `;
    toast.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;

    document.body.appendChild(toast);

    // Remove after 4 seconds
    setTimeout(() => {
        toast.style.animation = 'slideDown 0.3s ease-out reverse';
        setTimeout(() => toast.remove(), 300);
    }, 4000);
}

function loadCharacters() {
    const select = document.getElementById('character_id');
    const loading = document.getElementById('selectLoading');

    // Show loading state
    select.innerHTML = '<option value="">{{ __('user.loading_characters') }}</option>';
    select.disabled = true;
    loading.classList.add('show');

    // Load characters via AJAX
    fetch('/user/monthly-card/get-characters')
        .then(response => response.json())
        .then(data => {
            select.innerHTML = '<option value="">{{ __('user.select_character_option') }}</option>';

            if (data.success && data.characters.length > 0) {
                data.characters.forEach(char => {
                    const option = document.createElement('option');
                    option.value = char.rid;
                    option.textContent = `🎮 ${char.rname} (Level ${char.level || 'N/A'})`;
                    select.appendChild(option);
                });

                // Add helpful message if no characters
                if (data.characters.length === 0) {
                    select.innerHTML = '<option value="" disabled>{{ __('user.no_characters_in_game') }}</option>';
                }
            } else {
                select.innerHTML = '<option value="" disabled>❌ {{ __('user.no_characters_found') }}</option>';
            }
        })
        .catch(error => {
            console.error('Error loading characters:', error);
            select.innerHTML = '<option value="" disabled>❌ {{ __('user.character_loading_error') }}</option>';
        })
        .finally(() => {
            // Hide loading state
            select.disabled = false;
            loading.classList.remove('show');
        });
}

// Form submission
document.getElementById('monthlyCardForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const characterSelect = document.getElementById('character_id');
    const packageType = document.getElementById('selectedPackageType').value;

    if (!characterSelect.value) {
        // Highlight the select field
        characterSelect.style.borderColor = '#ef4444';
        characterSelect.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';

        // Show error message
        showErrorMessage('{{ __('user.select_character_activate_monthly') }}');

        // Reset border after 3 seconds
        setTimeout(() => {
            characterSelect.style.borderColor = '';
            characterSelect.style.boxShadow = '';
        }, 3000);

        return;
    }

    @if(isset($packages['premium']))
    const selectedCharacter = characterSelect.options[characterSelect.selectedIndex].text;

    const confirmMessage = `{{ __('user.confirm_purchase_monthly_card', ['package' => ':package', 'character' => ':character', 'coins' => ':coins']) }}`
        .replace(':package', packageData.name)
        .replace(':character', selectedCharacter)
        .replace(':coins', new Intl.NumberFormat().format(packageData.cost_coins));

    if (!confirm(confirmMessage)) {
        return;
    }

    // Show loading
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang xử lý...';
    submitBtn.disabled = true;
    submitBtn.style.background = '#9ca3af';

    // Send AJAX request
    const formData = new FormData(e.target);

    fetch('/user/monthly-card/purchase', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage(data.message);
            // Hide modal and reload page after 2 seconds
            setTimeout(() => {
                hidePurchaseForm();
                window.location.reload();
            }, 2000);
        } else {
            showErrorMessage(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorMessage('{{ __('user.monthly_card_purchase_error') }}');
    })
    .finally(() => {
        // Reset button
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
        submitBtn.style.background = '';
    });
    @else
    alert('{{ __('user.monthly_card_unavailable_alert') }}');
    @endif
});

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

@endsection