@extends('layouts.user')

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

@section('content')
<style>
/* Modern Giftcode Page - Mobile First */
.giftcode {
    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: #f59e0b;
}

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

/* Modern Quick Input */
.quick-input {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.quick-input::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #d97706, #b45309);
}

.input-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.code-input {
    flex: 1;
    padding: 1.25rem 1.5rem;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
    position: relative;
    overflow: hidden;
}

.code-input::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
    transition: left 0.5s ease;
}

.code-input:focus::before {
    left: 100%;
}

.code-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 8px 25px rgba(245, 158, 11, 0.3);
    transform: translateY(-2px);
}

.code-input::placeholder {
    color: #d97706;
    font-weight: 600;
    letter-spacing: 1px;
}

.submit-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}

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

.submit-btn i {
    font-size: 1.2rem;
}

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

.form-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.form-label i {
    font-size: 1.25rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.form-select {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    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 24 24'%3e%3cpath stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 1.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
    padding-right: 4rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
    position: relative;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: #f59e0b;
    background: white;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 8px 25px rgba(245, 158, 11, 0.3);
    transform: translateY(-2px);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 15l-7-7-7 7'/%3e%3c/svg%3e");
}

.form-select option {
    padding: 1.25rem;
    background: white;
    color: #374151;
    font-weight: 600;
}

.form-select option:hover {
    background: rgba(245, 158, 11, 0.05);
}

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

.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(245, 158, 11, 0.05);
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
}

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

.form-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.form-error i {
    color: #ef4444;
    font-size: 0.9rem;
}

/* Custom Character Dropdown */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select {
    width: 100%;
    padding: 1.25rem 1.5rem;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
    position: relative;
    overflow: hidden;
}

.custom-select::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
    transition: left 0.5s ease;
}

.custom-select:hover::before {
    left: 100%;
}

.custom-select:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.2);
}

.custom-select.active {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 8px 25px rgba(245, 158, 11, 0.3);
}

.select-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

.select-display i {
    font-size: 1.25rem;
    color: #f59e0b;
}

.select-arrow {
    color: #f59e0b;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.custom-select.active .select-arrow {
    transform: rotate(180deg);
}

.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    animation: slideDown 0.3s ease-out;
}

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

.select-option {
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-option:hover {
    background: rgba(245, 158, 11, 0.05);
}

.select-option.selected {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
}

.select-option.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.character-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.character-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.character-details {
    flex: 1;
}

.character-name {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.25rem;
}

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

.character-select {
    color: #10b981;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.select-option.selected .character-select {
    opacity: 1;
}

/* Form Sections for Desktop */
.form-section {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .form-section {
        margin-bottom: 2.5rem;
    }

    .form-section:last-child {
        margin-bottom: 0;
    }
}

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

/* History */
.history-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-code {
    font-weight: 600;
    color: #374151;
    font-family: monospace;
    font-size: 0.9rem;
}

.history-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.history-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* 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: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

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

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

    .quick-input {
        padding: 3rem 4rem;
        display: grid;
        gap: 2rem;
    }

    /* Desktop Form Layout */
    .form-group {
        margin-bottom: 2.5rem;
    }

    .form-label {
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
        justify-content: center;
    }

    .form-label i {
        font-size: 1.4rem;
        padding: 0.75rem;
    }

    /* Desktop Character Selection */
    .custom-select-wrapper {
        max-width: 600px;
        margin: 0 auto;
    }

    .custom-select {
        padding: 1.5rem 2rem;
        font-size: 1.1rem;
        min-height: 70px;
    }

    .select-display {
        font-size: 1.1rem;
        gap: 1rem;
    }

    .select-display i {
        font-size: 1.3rem;
    }

    .select-arrow {
        font-size: 1.3rem;
    }

    .select-dropdown {
        border-radius: 0 0 20px 20px;
        max-height: 400px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }

    .select-option {
        padding: 1.5rem 2rem;
        transition: all 0.3s ease;
    }

    .select-option:hover {
        background: rgba(245, 158, 11, 0.1);
        transform: translateX(5px);
    }

    .character-info {
        gap: 1.5rem;
    }

    .character-avatar {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        border-radius: 14px;
    }

    .character-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .character-level {
        font-size: 0.9rem;
    }

    .character-select {
        font-size: 1.5rem;
    }

    /* Desktop Input Group */
    .input-group {
        max-width: 600px;
        margin: 0 auto 2rem;
        gap: 1.5rem;
    }

    .code-input {
        padding: 1.5rem 2rem;
        font-size: 1.3rem;
        letter-spacing: 3px;
        min-height: 70px;
    }

    .submit-btn {
        padding: 1.5rem 2.5rem;
        font-size: 1.2rem;
        min-height: 70px;
        max-width: 250px;
    }

    .form-hint, .form-error {
        max-width: 600px;
        margin: 1rem auto 0;
        padding: 1.25rem 1.5rem;
        font-size: 0.9rem;
    }

    .bottom-nav {
        display: none;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .giftcode {
        max-width: 900px;
        padding: 3rem;
    }

    .quick-input {
        padding: 4rem 5rem;
        border-radius: 24px;
    }

    .custom-select-wrapper {
        max-width: 700px;
    }

    .custom-select {
        padding: 2rem 2.5rem;
        font-size: 1.2rem;
        min-height: 80px;
        border-radius: 20px;
    }

    .select-display {
        font-size: 1.2rem;
        gap: 1.25rem;
    }

    .select-display i {
        font-size: 1.4rem;
    }

    .select-arrow {
        font-size: 1.4rem;
    }

    .select-dropdown {
        border-radius: 0 0 24px 24px;
    }

    .select-option {
        padding: 2rem 2.5rem;
    }

    .character-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
        border-radius: 16px;
    }

    .character-name {
        font-size: 1.2rem;
    }

    .character-level {
        font-size: 1rem;
    }

    .input-group {
        max-width: 700px;
        gap: 2rem;
    }

    .code-input {
        padding: 2rem 2.5rem;
        font-size: 1.4rem;
        min-height: 80px;
        border-radius: 20px;
    }

    .submit-btn {
        padding: 2rem 3rem;
        font-size: 1.3rem;
        min-height: 80px;
        border-radius: 20px;
    }
}

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

/* Mobile Specific */
@media (max-width: 480px) {
    .giftcode {
        padding: 0.75rem;
    }

    .input-group {
        flex-direction: column;
        gap: 1rem;
    }

    .submit-btn {
        width: 100%;
        padding: 1.25rem;
        font-size: 1.1rem;
    }

    .code-input {
        font-size: 1.2rem;
        padding: 1.25rem;
    }

    .custom-select {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }

    .select-display {
        font-size: 1rem;
        gap: 0.5rem;
    }

    .select-display i {
        font-size: 1.1rem;
    }

    .select-arrow {
        font-size: 1.1rem;
    }

    .select-option {
        padding: 0.875rem 1rem;
    }

    .character-avatar {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .character-name {
        font-size: 0.9rem;
    }

    .character-level {
        font-size: 0.75rem;
    }

    .character-select {
        font-size: 1.1rem;
    }

    .form-hint, .form-error {
        padding: 1rem;
        font-size: 0.85rem;
    }

    .select-dropdown {
        max-height: 250px;
    }
}
</style>

<div class="giftcode">
    <!-- Page Header -->
    <div class="page-header">
        <h1>
            <i class="fas fa-gift"></i>
            {{ __('user.giftcode') }}
        </h1>
        <p>{{ __('user.enter_giftcode_description') }}</p>
    </div>

    <!-- Quick Input -->
    <div class="quick-input">
        <form method="POST" action="{{ route('user.giftcode.redeem') }}" id="giftcodeForm">
            @csrf

            <!-- Character Selection Section -->
            <div class="form-section">
                <div class="form-group">
                    <label for="character_id" class="form-label">
                        <i class="fas fa-user-ninja"></i>
                        {{ __('user.select_character_receive_gift') }}
                    </label>
                    <!-- Custom Character Dropdown -->
                    <div class="custom-select-wrapper">
                        <div class="custom-select" id="customSelect" onclick="toggleDropdown()">
                            <div class="select-display" id="selectDisplay">
                                <i class="fas fa-user-ninja"></i>
                                <span>{{ __('user.select_character_option') }}</span>
                            </div>
                            <div class="select-arrow">
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>

                        <div class="select-dropdown" id="selectDropdown">
                            @if(isset($characters) && $characters->count() > 0)
                                @foreach($characters as $character)
                                    <div class="select-option" data-value="{{ $character->rid }}" onclick="selectCharacter({{ $character->rid }}, '{{ $character->rname }}', {{ $character->level ?? 'N/A' }})">
                                        <div class="character-info">
                                            <div class="character-avatar">
                                                <i class="fas fa-user-ninja"></i>
                                            </div>
                                            <div class="character-details">
                                                <div class="character-name">{{ $character->rname }}</div>
                                                <div class="character-level">Level {{ $character->level ?? 'N/A' }}</div>
                                            </div>
                                        </div>
                                        <div class="character-select">
                                            <i class="fas fa-check"></i>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="select-option disabled">
                                    <div class="character-info">
                                        <div class="character-avatar">
                                            <i class="fas fa-exclamation-triangle"></i>
                                        </div>
                                        <div class="character-details">
                                            <div class="character-name">Chưa có nhân vật</div>
                                            <div class="character-level">Vui lòng tạo nhân vật trong game</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Hidden input for form submission -->
                        <input type="hidden" name="character_id" id="character_id" required>
                    </div>

                    @if(!isset($characters) || $characters->count() == 0)
                        <div class="form-error">
                            <i class="fas fa-exclamation-triangle"></i>
                            {{ __('user.no_characters_giftcode') }}
                        </div>
                    @else
                        <div class="form-hint">
                            <i class="fas fa-gift"></i>
                            {{ __('user.rewards_sent_to_character') }}
                        </div>
                    @endif

                    @error('character_id')
                        <div class="form-error">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <!-- Giftcode Input Section -->
            <div class="form-section">
                <div class="input-group">
                    <input
                        type="text"
                        name="code"
                        id="giftcode"
                        class="code-input"
                        placeholder="{{ __('user.enter_giftcode_placeholder') }}"
                        value="{{ old('code') }}"
                        required
                        maxlength="50"
                        autocomplete="off"
                    >
                    <button type="submit" class="submit-btn" id="redeemBtn">
                        <i class="fas fa-gift"></i>
                        Nhận quà
                    </button>
                </div>
            </div>

            <!-- Messages Section -->
            @if($errors->any())
                <div class="form-error">
                    <i class="fas fa-exclamation-triangle"></i>
                    {{ $errors->first() }}
                </div>
            @endif

            @if(session('success'))
                <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 12px; padding: 1rem; color: #059669; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; max-width: 600px; margin: 0 auto;">
                    <i class="fas fa-check-circle"></i>
                    {{ session('success') }}
                </div>
            @endif
        </form>
    </div>

    <!-- Info Guide -->
    <div class="info-box">
        <div class="info-title">
            <i class="fas fa-info-circle"></i>
            {{ __('user.giftcode_guide') }}
        </div>
        <ul class="info-list">
            <li>{{ __('user.giftcode_once_only') }}</li>
            <li>{{ __('user.giftcode_expiry') }}</li>
            <li>{{ __('user.rewards_to_character') }}</li>
            <li>{{ __('user.contact_admin_problems') }}</li>
        </ul>
    </div>

    <!-- Recent History -->
    @if(isset($usageHistory) && $usageHistory->count() > 0)
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-history"></i>
            {{ __('user.recent_giftcode_usage') }}
        </h2>
        @foreach($usageHistory->take(5) as $usage)
            <div class="history-item">
                <div>
                    <div class="history-code">{{ $usage->code }}</div>
                    <div class="history-date">{{ $usage->created_at->format('d/m/Y H:i') }}</div>
                </div>
                <div class="history-status status-success">
                    {{ __('user.used') }}
                </div>
            </div>
        @endforeach

        @if($usageHistory->count() > 5)
        <div style="text-align: center; margin-top: 1rem;">
            <a href="#" style="color: #f59e0b; text-decoration: none; font-weight: 500;" onclick="showAllHistory()">
                {{ __('user.view_all_history') }} →
            </a>
        </div>
        @endif
    </div>
    @endif
</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.giftcode') }}" class="nav-item active">
        <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>{{ __('user.history_nav') }}</span>
    </a>
</div>

<script>
// Auto uppercase and format giftcode input
document.getElementById('giftcode').addEventListener('input', function() {
    this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
});

// Custom Dropdown Functions
function toggleDropdown() {
    const customSelect = document.getElementById('customSelect');
    const dropdown = document.getElementById('selectDropdown');

    customSelect.classList.toggle('active');
    dropdown.classList.toggle('show');

    // Add haptic feedback
    if (navigator.vibrate) {
        navigator.vibrate(20);
    }
}

function selectCharacter(characterId, characterName, characterLevel) {
    const customSelect = document.getElementById('customSelect');
    const dropdown = document.getElementById('selectDropdown');
    const selectDisplay = document.getElementById('selectDisplay');
    const hiddenInput = document.getElementById('character_id');

    // Update display
    selectDisplay.innerHTML = `
        <i class="fas fa-user-ninja"></i>
        <span>${characterName} (Level ${characterLevel})</span>
    `;

    // Update hidden input
    hiddenInput.value = characterId;

    // Update selected option
    document.querySelectorAll('.select-option').forEach(option => {
        option.classList.remove('selected');
    });
    document.querySelector(`[data-value="${characterId}"]`).classList.add('selected');

    // Close dropdown
    customSelect.classList.remove('active');
    dropdown.classList.remove('show');

    // Add haptic feedback
    if (navigator.vibrate) {
        navigator.vibrate(30);
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const customSelect = document.getElementById('customSelect');
    const dropdown = document.getElementById('selectDropdown');

    if (!customSelect.contains(e.target) && !dropdown.contains(e.target)) {
        customSelect.classList.remove('active');
        dropdown.classList.remove('show');
    }
});

// Form validation
document.getElementById('giftcodeForm').addEventListener('submit', function(e) {
    const characterInput = document.getElementById('character_id');
    const giftcodeInput = document.getElementById('giftcode');
    const customSelect = document.getElementById('customSelect');

    // Reset previous error states
    customSelect.style.borderColor = '';
    customSelect.style.boxShadow = '';
    giftcodeInput.style.borderColor = '';
    giftcodeInput.style.boxShadow = '';

    let hasError = false;

    if (!characterInput.value) {
        // Highlight character select
        customSelect.style.borderColor = '#ef4444';
        customSelect.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';
        showErrorToast('{{ __('user.select_character_gift') }}');
        hasError = true;
    }

    if (!giftcodeInput.value || giftcodeInput.value.trim().length < 4) {
        // Highlight giftcode input
        giftcodeInput.style.borderColor = '#ef4444';
        giftcodeInput.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';
        if (!giftcodeInput.value || giftcodeInput.value.trim().length === 0) {
            showErrorToast('{{ __('user.giftcode_required') }}');
        } else {
            showErrorToast('{{ __('user.giftcode_min_length') }}');
        }
        hasError = true;
    }

    if (hasError) {
        e.preventDefault();

        // Reset error styles after 3 seconds
        setTimeout(() => {
            customSelect.style.borderColor = '';
            customSelect.style.boxShadow = '';
            giftcodeInput.style.borderColor = '';
            giftcodeInput.style.boxShadow = '';
        }, 3000);

        return;
    }

    // Show loading
    const btn = document.getElementById('redeemBtn');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang xử lý...';
    btn.disabled = true;
    btn.style.background = '#9ca3af';
});

function showAllHistory() {
    // Show all history items
    document.querySelectorAll('.history-item').forEach((item, index) => {
        if (index >= 5) {
            item.style.display = 'block';
        }
    });

    // Hide the "show more" link
    event.target.style.display = 'none';
}

function showErrorToast(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;
        max-width: 90%;
        text-align: center;
    `;
    toast.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;

    // Add animation keyframes if not exists
    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 showSuccessToast(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;
        max-width: 90%;
        text-align: center;
    `;
    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);
}

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

@endsection