@extends('layouts.user')

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

@section('content')
<style>
/* Modern Recharge Page - Mobile Optimized */
.recharge {
    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: #4f46e5;
}

.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(79, 70, 229, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(79, 70, 229, 0.1);
}

.balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4f46e5;
    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;
}

/* Mobile-First Payment Tabs */
.payment-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    gap: 0.25rem;
}

.tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tab-btn.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.tab-btn i {
    font-size: 1rem;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.tab-content.active {
    display: block;
}

/* Compact Payment Cards */
.payment-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.payment-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.payment-icon.vn {
    background: linear-gradient(135deg, #10b981, #059669);
}

.payment-icon.gcash {
    background: linear-gradient(135deg, #007dff, #0056cc);
}





.payment-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.payment-info p {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Compact Details */
.payment-details {
    display: grid;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 8px;
    border-left: 3px solid #4f46e5;
}

.detail-row.full-width {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.detail-row .label {
    font-weight: 600;
    color: #374151;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-row .value {
    font-weight: 600;
    color: #1f2937;
    font-family: 'SF Mono', monospace;
    font-size: 0.85rem;
}

.value-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    transition: all 0.3s ease;
}

.value-copy:hover {
    background: rgba(79, 70, 229, 0.2);
    transform: translateY(-1px);
}

.value-copy i {
    color: #4f46e5;
    font-size: 0.8rem;
}

/* Bonus Banner */
.bonus-banner {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.bonus-banner i {
    font-size: 1.1rem;
}



/* Instructions */
.instructions {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 12px;
    border-left: 4px solid #4f46e5;
}

.step-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.step-content p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.contact-support {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.contact-support i {
    font-size: 1.5rem;
    color: #10b981;
}

.contact-support h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.contact-support p {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Amount Selection */
.amounts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.amount-btn {
    padding: 1rem;
    border: 2px solid rgba(79, 70, 229, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.amount-btn:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
}

.amount-btn.selected {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
}

.amount-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 0.25rem;
}

.amount-label {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: #4f46e5;
    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: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}

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

/* 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: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
}

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

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

    .payment-card {
        padding: 1rem;
    }

    .payment-header {
        gap: 0.75rem;
    }

    .payment-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .payment-info h3 {
        font-size: 1rem;
    }

    .payment-info p {
        font-size: 0.75rem;
    }

    .detail-row {
        padding: 0.625rem;
    }

    .detail-row .label {
        font-size: 0.75rem;
    }

    .detail-row .value {
        font-size: 0.8rem;
    }

    .value-copy {
        padding: 0.375rem 0.5rem;
    }

    .tab-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }

    .bonus-banner {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .instruction-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .contact-support {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
}

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

    .payment-tabs {
        max-width: 400px;
        margin: 0 auto 2rem;
    }

    .tab-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .payment-card {
        padding: 2rem;
        max-width: 600px;
        margin: 0 auto 1.5rem;
    }

    .payment-header {
        gap: 1.5rem;
    }

    .payment-icon {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .payment-info h3 {
        font-size: 1.25rem;
    }

    .payment-info p {
        font-size: 0.9rem;
    }

    .detail-row {
        padding: 1rem 1.25rem;
    }

    .detail-row .label {
        font-size: 0.9rem;
    }

    .detail-row .value {
        font-size: 0.95rem;
    }

    .instructions {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .instruction-item {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }

    .bottom-nav {
        display: none;
    }
}

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

    .payment-section {
        padding: 3rem;
    }
}

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

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Promotion Alert Styles */
.promotion-alert {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    border-radius: 15px;
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
    animation: slideInDown 0.6s ease-out;
    position: relative;
    overflow: hidden;
}

.promotion-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.promotion-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.promotion-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.promotion-text {
    flex: 1;
    color: white;
}

.promotion-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.promotion-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.promotion-action {
    flex-shrink: 0;
}

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

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

.promotion-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3;
}

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

.promotion-alert.closing {
    animation: slideOutUp 0.4s ease-in forwards;
}

/* Banking Promotion Styles */
.banking-promotion {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
}

.banking-promotion::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

.promotion-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    min-width: 80px;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.promotion-badge i {
    font-size: 1.2rem;
}

.promotion-details {
    flex: 1;
    color: white;
}

.promotion-details h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.promotion-details p {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.promotion-example {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-left: 3px solid rgba(255, 255, 255, 0.4);
}

/* Card Recharge Styles */
.card-recharge-section {
    padding: 1rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Telco Grid */
.telco-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.telco-option input[type="radio"] {
    display: none;
}

.telco-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    text-align: center;
}

.telco-label:hover {
    border-color: #4f46e5;
    transform: translateY(-2px);
}

.telco-option input[type="radio"]:checked + .telco-label {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.telco-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    color: white;
    margin-bottom: 0.5rem;
}

.telco-logo.viettel { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.telco-logo.vinaphone { background: linear-gradient(135deg, #3498db, #2980b9); }
.telco-logo.mobifone { background: linear-gradient(135deg, #f39c12, #e67e22); }
.telco-logo.vietnamobile { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.telco-logo.zing { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.telco-logo.vcoin { background: linear-gradient(135deg, #34495e, #2c3e50); }
.telco-logo.gate { background: linear-gradient(135deg, #e67e22, #d35400); }

/* Amount Grid */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.amount-option input[type="radio"] {
    display: none;
}

.amount-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    text-align: center;
}

.amount-label:hover {
    border-color: #4f46e5;
    transform: translateY(-2px);
}

.amount-option input[type="radio"]:checked + .amount-label {
    border-color: #4f46e5;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.amount-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.amount-coins {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Recharge Button */
.btn-recharge {
    width: 100%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.btn-recharge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}

.btn-recharge:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Instructions */
.card-instructions {
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 12px;
    padding: 1rem;
}

.card-instructions h4 {
    color: #4f46e5;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-instructions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-instructions li {
    color: #6b7280;
    font-size: 0.8rem;
    padding: 0.25rem 0;
    position: relative;
    padding-left: 1rem;
}

.card-instructions li:before {
    content: "•";
    color: #4f46e5;
    position: absolute;
    left: 0;
}

/* Card History Styles */
.card-history-section {
    margin-top: 1.5rem;
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.1);
    border-radius: 12px;
    padding: 1rem;
}

.card-history-section h4 {
    color: #4f46e5;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-container {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.history-item:hover {
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-info {
    flex: 1;
}

.history-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.telco-name {
    color: #374151;
}

.amount {
    color: #4f46e5;
}

.history-details {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.history-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-success {
    background: #d1fae5;
    color: #065f46;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.coins-received {
    font-size: 0.7rem;
    color: #059669;
    font-weight: 600;
}

.empty-history {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
}

.empty-history i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.history-actions {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn-load-more {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
}

.btn-load-more:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .promotion-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .promotion-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .promotion-title {
        font-size: 1rem;
    }

    .promotion-subtitle {
        font-size: 0.85rem;
    }

    .promotion-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .promotion-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .promotion-alert {
        margin: 0.5rem 0;
        padding: 0.75rem;
        border-radius: 12px;
    }

    .promotion-content {
        gap: 0.5rem;
    }

    .promotion-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .promotion-title {
        font-size: 0.9rem;
    }

    .promotion-subtitle {
        font-size: 0.8rem;
    }

    .promotion-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        border-radius: 20px;
    }

    .banking-promotion {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .promotion-badge {
        min-width: auto;
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .promotion-details h4 {
        font-size: 1rem;
    }

    .promotion-details p {
        font-size: 0.85rem;
    }

    .promotion-example {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    /* Card History Mobile */
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .history-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .history-details {
        flex-direction: column;
        gap: 0.25rem;
    }

    .history-status {
        align-items: flex-start;
        width: 100%;
    }

    .card-history-section h4 {
        font-size: 0.85rem;
    }

    .history-container {
        max-height: 250px;
    }
}

@media (min-width: 768px) {
    .telco-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .amount-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .promotion-content {
        padding: 0.5rem 0;
    }
}

@media (min-width: 1024px) {
    .telco-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
</style>

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

    <!-- Promotion Alert -->
    <div class="promotion-alert">
        <div class="promotion-content">
            <div class="promotion-icon">
                <i class="fas fa-gift"></i>
            </div>
            <div class="promotion-text">
                <div class="promotion-title">{{ __('user.special_promotion') }}</div>
                <div class="promotion-subtitle">{{ __('user.bank_transfer_bonus') }}</div>
            </div>
            <div class="promotion-action">
                <button class="promotion-btn" onclick="switchTab('vn')">
                    <i class="fas fa-arrow-right"></i>
                    {{ __('user.recharge_now') }}
                </button>
            </div>
        </div>
        <button class="promotion-close" onclick="closePromotion()">
            <i class="fas fa-times"></i>
        </button>
    </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.total_recharged_amount') }}: {{ number_format($userCoins->total_recharged ?? 0) }}đ
                @if(isset($cardStats))
                | {{ __('user.card_recharge_stats', ['success' => number_format($cardStats['success']), 'coins' => number_format($cardStats['total_coins'])]) }}
                @endif
            </div>
        </div>
    </div>

    <!-- Payment Methods -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-credit-card"></i>
            {{ __('user.payment_method') }}
        </h2>

        <!-- Payment Tabs -->
        <div class="payment-tabs">
            <button class="tab-btn active" onclick="switchTab('vn')">
                <i class="fas fa-flag"></i>
                Việt Nam
            </button>
           <button class="tab-btn" onclick="switchTab('card')">
               <i class="fas fa-credit-card"></i>
               {{ __('user.card_recharge') }}
           </button>
            <button class="tab-btn" onclick="switchTab('international')">
                <i class="fas fa-globe"></i>
                International
            </button>

        </div>

        <!-- VN Payment Tab -->
        <div class="tab-content active" id="vn-tab">
            <!-- Banking Promotion -->
            <div class="banking-promotion">
                <div class="promotion-badge">
                    <i class="fas fa-percentage"></i>
                    <span>+10% BONUS</span>
                </div>
                <div class="promotion-details">
                    <h4>{{ __('user.bank_transfer_promotion') }}</h4>
                    <p>{{ __('user.bank_transfer_bonus_description') }}</p>
                    <div class="promotion-example">
                        <span>{{ __('user.bank_transfer_example') }}</span>
                    </div>
                </div>
            </div>

            <div class="payment-card">
                <div class="payment-header">
                    <div class="payment-icon vn">
                        <i class="fas fa-university"></i>
                    </div>
                    <div class="payment-info">
                        <h3>ACB Bank</h3>
                        <p>{{ __('user.fast_bank_transfer') }}</p>
                    </div>
                </div>

                <div class="payment-details">
                    <div class="detail-row">
                        <span class="label">{{ __('user.account_number') }}:</span>
                        <div class="value-copy" onclick="copyToClipboard('837608888')">
                            <span class="value">837608888</span>
                            <i class="fas fa-copy"></i>
                        </div>
                    </div>
                    <div class="detail-row">
                        <span class="label">{{ __('user.account_holder_name') }}:</span>
                        <span class="value">DINH THI DIEU LINH</span>
                    </div>
                    <div class="detail-row full-width">
                        <span class="label">{{ __('user.transfer_content') }}:</span>
                        <div class="value-copy" onclick="copyToClipboard('{{ __('user.copy_transfer_content') }}')">
                            <span class="value">{{ __('user.copy_transfer_content') }}</span>
                            <i class="fas fa-copy"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card Recharge Tab -->
        <div class="tab-content" id="card-tab">
            <div class="card-recharge-section">
                <!-- Telco Selection -->
                <div class="form-group">
                    <label class="form-label">Chọn nhà mạng</label>
                    <div class="telco-grid">
                        <div class="telco-option">
                            <input type="radio" id="viettel" name="telco" value="Viettel" required>
                            <label for="viettel" class="telco-label">
                                <div class="telco-logo viettel">VT</div>
                                <span>Viettel</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="vinaphone" name="telco" value="Vinaphone" required>
                            <label for="vinaphone" class="telco-label">
                                <div class="telco-logo vinaphone">VP</div>
                                <span>VinaPhone</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="mobifone" name="telco" value="Mobifone" required>
                            <label for="mobifone" class="telco-label">
                                <div class="telco-logo mobifone">MB</div>
                                <span>MobiFone</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="vietnamobile" name="telco" value="Vietnamobile" required>
                            <label for="vietnamobile" class="telco-label">
                                <div class="telco-logo vietnamobile">VM</div>
                                <span>Vietnamobile</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="zing" name="telco" value="Zing" required>
                            <label for="zing" class="telco-label">
                                <div class="telco-logo zing">ZG</div>
                                <span>Zing</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="vcoin" name="telco" value="Vcoin" required>
                            <label for="vcoin" class="telco-label">
                                <div class="telco-logo vcoin">VC</div>
                                <span>Vcoin</span>
                            </label>
                        </div>
                        <div class="telco-option">
                            <input type="radio" id="gate" name="telco" value="Gate" required>
                            <label for="gate" class="telco-label">
                                <div class="telco-logo gate">GT</div>
                                <span>Gate</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Amount Selection -->
                <div class="form-group">
                    <label class="form-label">{{ __('user.choose_denomination') }}</label>
                    <div class="amount-grid">
                        <div class="amount-option">
                            <input type="radio" id="amount_10k" name="amount" value="10000" required>
                            <label for="amount_10k" class="amount-label">
                                <span class="amount-value">10,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 10,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                        <div class="amount-option">
                            <input type="radio" id="amount_20k" name="amount" value="20000" required>
                            <label for="amount_20k" class="amount-label">
                                <span class="amount-value">20,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 20,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                        <div class="amount-option">
                            <input type="radio" id="amount_50k" name="amount" value="50000" required>
                            <label for="amount_50k" class="amount-label">
                                <span class="amount-value">50,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 50,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                        <div class="amount-option">
                            <input type="radio" id="amount_100k" name="amount" value="100000" required>
                            <label for="amount_100k" class="amount-label">
                                <span class="amount-value">100,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 100,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                        <div class="amount-option">
                            <input type="radio" id="amount_200k" name="amount" value="200000" required>
                            <label for="amount_200k" class="amount-label">
                                <span class="amount-value">200,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 200,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                        <div class="amount-option">
                            <input type="radio" id="amount_500k" name="amount" value="500000" required>
                            <label for="amount_500k" class="amount-label">
                                <span class="amount-value">500,000 {{ __('user.vnd_currency') }}</span>
                                <span class="amount-coins">= 500,000 {{ __('user.coins_currency') }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Card Info -->
                <div class="form-group">
                    <label for="serial" class="form-label">{{ __('user.card_serial_number') }}</label>
                    <input type="text" id="serial" name="serial" class="form-control"
                           placeholder="{{ __('user.enter_card_serial') }}" required>
                </div>

                <div class="form-group">
                    <label for="card_code" class="form-label">{{ __('user.card_code') }}</label>
                    <input type="text" id="card_code" name="card_code" class="form-control"
                           placeholder="{{ __('user.enter_card_code') }}" required>
                </div>

                <!-- Submit Button -->
                <button type="button" class="btn-recharge" onclick="submitCardRecharge()">
                    <i class="fas fa-paper-plane"></i>
                    <span class="btn-text">{{ __('user.recharge_card_now') }}</span>
                    <div class="btn-loading" style="display: none;">
                        <i class="fas fa-spinner fa-spin"></i>
                        {{ __('user.processing') }}...
                    </div>
                </button>

                <!-- Instructions -->
                <div class="card-instructions">
                    <h4><i class="fas fa-info-circle"></i> {{ __('user.card_recharge_guide') }}</h4>
                    <ul>
                        <li>{{ __('user.select_correct_provider') }}</li>
                        <li>{{ __('user.enter_correct_serial_code') }}</li>
                        <li>{{ __('user.card_processing_time_guide') }}</li>
                        <li>{{ __('user.coins_auto_added') }}</li>
                        <li>{{ __('user.no_used_cards') }}</li>
                    </ul>
                </div>

                <!-- Card Recharge History -->
                <div class="card-history-section">
                    <h4><i class="fas fa-history"></i> {{ __('user.card_recharge_history') }}</h4>
                    <div class="history-container" id="cardHistoryContainer">
                        @if(isset($cardHistory) && $cardHistory->count() > 0)
                            @foreach($cardHistory as $item)
                            <div class="history-item">
                                <div class="history-info">
                                    <div class="history-main">
                                        <span class="telco-name">{{ $item->telco_name }}</span>
                                        <span class="amount">{{ number_format($item->amount) }} {{ __('user.vnd_currency') }}</span>
                                    </div>
                                    <div class="history-details">
                                        <span class="serial">Serial: {{ substr($item->serial, 0, 6) }}***</span>
                                        <span class="date">{{ $item->created_at->format('d/m/Y H:i') }}</span>
                                    </div>
                                </div>
                                <div class="history-status">
                                    <span class="status-badge status-{{ $item->status }}">
                                        {{ $item->status_text }}
                                    </span>
                                    @if($item->coins_received)
                                    <span class="coins-received">+{{ number_format($item->coins_received) }} {{ __('user.coins_currency') }}</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        @else
                            <div class="empty-history">
                                <i class="fas fa-inbox"></i>
                                <p>{{ __('user.no_card_history') }}</p>
                            </div>
                        @endif
                    </div>

                    @if(isset($cardHistory) && $cardHistory->count() >= 10)
                    <div class="history-actions">
                        <button class="btn-load-more" onclick="loadMoreCardHistory()">
                            <i class="fas fa-plus"></i>
                            Xem thêm
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- International Payment Tab -->
        <div class="tab-content" id="international-tab">
            <div class="bonus-banner">
                <i class="fas fa-gift"></i>
                <span><strong>+15% Bonus</strong> cho GCash</span>
            </div>

            <!-- GCash -->
            <div class="payment-card">
                <div class="payment-header">
                    <div class="payment-icon gcash">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <div class="payment-info">
                        <h3>GCash</h3>
                        <p>Philippines mobile payment</p>
                    </div>
                </div>

                <div class="payment-details">
                    <div class="detail-row">
                        <span class="label">Number:</span>
                        <div class="value-copy" onclick="copyToClipboard('09662671705')">
                            <span class="value">09662671705</span>
                            <i class="fas fa-copy"></i>
                        </div>
                    </div>
                    <div class="detail-row">
                        <span class="label">Name:</span>
                        <span class="value">Candida Alcantra</span>
                    </div>
                    <div class="detail-row full-width">
                        <span class="label">Description:</span>
                        <div class="value-copy" onclick="copyToClipboard('MUTLG - {{ $user->UserName }} - Server1')">
                            <span class="value">MUTLG - {{ $user->UserName }} - Server1</span>
                            <i class="fas fa-copy"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Instructions -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-info-circle"></i>
            {{ __('user.recharge_guide_title') }}
        </h2>
        <div class="instructions">
            <div class="instruction-item">
                <div class="step-number">1</div>
                <div class="step-content">
                    <h4>{{ __('user.transfer_money_instruction') }}</h4>
                    <p>{{ __('user.copy_account_info') }}</p>
                </div>
            </div>
            <div class="instruction-item">
                <div class="step-number">2</div>
                <div class="step-content">
                    <h4>{{ __('user.correct_transfer_content') }}</h4>
                    <p>{{ __('user.ensure_correct_content') }}</p>
                </div>
            </div>
            <div class="instruction-item">
                <div class="step-number">3</div>
                <div class="step-content">
                    <h4>Chờ xử lý tự động</h4>
                    <p>{{ __('user.diamonds_added_to_account') }}</p>
                </div>
            </div>
        </div>

        <div class="contact-support">
            <i class="fas fa-headset"></i>
            <div>
                <h4>{{ __('user.need_support') }}</h4>
                <p>{{ __('user.contact_admin_if_no_diamonds') }}</p>
            </div>
        </div>
    </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 active">
        <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">
        <i class="fas fa-gift"></i>
        <span>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>
// Tab Switching
function switchTab(tabName) {
    // Remove active class from all tabs and content
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

    // Add active class to clicked tab and corresponding content
    event.target.classList.add('active');
    document.getElementById(tabName + '-tab').classList.add('active');

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

function copyToClipboard(text) {
    // Create temporary textarea
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);

    // Show success toast
    showCopyToast('{{ __('user.copied_success') }}');

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

function showCopyToast(message) {
    // Create toast
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 0.75rem 1.25rem;
        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;
        font-size: 0.9rem;
    `;
    toast.innerHTML = `<i class="fas fa-check-circle"></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; }
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); color: #10b981; }
                100% { transform: scale(1); }
            }
        `;
        document.head.appendChild(style);
    }

    document.body.appendChild(toast);

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

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

    // Auto-hide promotion after 10 seconds
    setTimeout(function() {
        const promotion = document.querySelector('.promotion-alert');
        if (promotion && !promotion.classList.contains('closing')) {
            closePromotion();
        }
    }, 10000);
});

// Promotion Alert Functions
function closePromotion() {
    const promotion = document.querySelector('.promotion-alert');
    if (promotion) {
        promotion.classList.add('closing');
        setTimeout(() => {
            promotion.style.display = 'none';
        }, 400);

        // Haptic feedback
        if (navigator.vibrate) {
            navigator.vibrate(50);
        }
    }
}

// Card Recharge Functions
function submitCardRecharge() {
    const telco = document.querySelector('input[name="telco"]:checked');
    const amount = document.querySelector('input[name="amount"]:checked');
    const serial = document.getElementById('serial').value.trim();
    const cardCode = document.getElementById('card_code').value.trim();
    const submitBtn = document.querySelector('.btn-recharge');
    const btnText = submitBtn.querySelector('.btn-text');
    const btnLoading = submitBtn.querySelector('.btn-loading');

    // Validation
    if (!telco) {
        showErrorToast('{{ __('user.select_telco_provider') }}');
        return;
    }

    if (!amount) {
        showErrorToast('{{ __('user.select_card_amount') }}');
        return;
    }

    if (!serial || serial.length < 10) {
        showErrorToast('{{ __('user.enter_valid_serial') }}');
        return;
    }

    if (!cardCode || cardCode.length < 10) {
        showErrorToast('{{ __('user.enter_valid_card_code') }}');
        return;
    }

    // Show loading state
    submitBtn.disabled = true;
    btnText.style.display = 'none';
    btnLoading.style.display = 'flex';

    // Prepare form data
    const formData = new FormData();
    formData.append('telco', telco.value);
    formData.append('amount', amount.value);
    formData.append('serial', serial);
    formData.append('card_code', cardCode);

    // Submit to server
    fetch('{{ route("user.recharge.card.submit") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // Reset loading state
        submitBtn.disabled = false;
        btnText.style.display = 'flex';
        btnLoading.style.display = 'none';

        if (data.success) {
            showSuccessToast(data.message);
            // Clear form
            document.querySelectorAll('input[name="telco"]').forEach(input => input.checked = false);
            document.querySelectorAll('input[name="amount"]').forEach(input => input.checked = false);
            document.getElementById('serial').value = '';
            document.getElementById('card_code').value = '';

            // Haptic feedback
            if (navigator.vibrate) {
                navigator.vibrate([100, 50, 100]);
            }
        } else {
            showErrorToast(data.message);
        }
    })
    .catch(error => {
        // Reset loading state
        submitBtn.disabled = false;
        btnText.style.display = 'flex';
        btnLoading.style.display = 'none';

        console.error('Error:', error);
        showErrorToast('{{ __('user.request_error') }}');
    });
}

function showSuccessToast(message) {
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #10b981, #059669);
        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;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    `;
    toast.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;

    document.body.appendChild(toast);

    setTimeout(() => {
        toast.style.animation = 'slideUp 0.3s ease-out';
        setTimeout(() => document.body.removeChild(toast), 300);
    }, 4000);
}

function showErrorToast(message) {
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #ef4444, #dc2626);
        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;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    `;
    toast.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;

    document.body.appendChild(toast);

    setTimeout(() => {
        toast.style.animation = 'slideUp 0.3s ease-out';
        setTimeout(() => document.body.removeChild(toast), 300);
    }, 5000);
}

// Notification polling for real-time updates
let notificationInterval;

function startNotificationPolling() {
    // Check for notifications every 5 seconds
    notificationInterval = setInterval(checkNotifications, 5000);

    // Check immediately
    checkNotifications();
}

function checkNotifications() {
    fetch('/user/api/notifications?unread_only=1')
        .then(response => response.json())
        .then(data => {
            if (data.success && data.notifications.length > 0) {
                data.notifications.forEach(notification => {
                    if (notification.type === 'card_recharge_success') {
                        showRechargeSuccessNotification(notification);

                        // Mark as read
                        markNotificationAsRead(notification.id);

                        // Update balance display if exists
                        updateBalanceDisplay();
                    }
                });
            }
        })
        .catch(error => {
            console.log('Notification check failed:', error);
        });
}

function showRechargeSuccessNotification(notification) {
    const data = JSON.parse(notification.data);

    // Show success toast with coin amount
    showSuccessToast(`🎉 ${notification.title} {{ __('user.coins_added_notification', ['amount' => '']) }}`.replace(':amount', data.coins_added.toLocaleString()));

    // Haptic feedback
    if (navigator.vibrate) {
        navigator.vibrate([200, 100, 200]);
    }

    // Play success sound if available
    try {
        const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT');
        audio.play().catch(() => {});
    } catch (e) {}
}

function markNotificationAsRead(notificationId) {
    fetch('/user/api/notifications/mark-read', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            notification_ids: [notificationId]
        })
    }).catch(error => {
        console.log('Failed to mark notification as read:', error);
    });
}

function updateBalanceDisplay() {
    // Reload balance if there's a balance display on the page
    const balanceElements = document.querySelectorAll('.balance-amount, .coin-balance');
    if (balanceElements.length > 0) {
        // Trigger a subtle animation to indicate balance update
        balanceElements.forEach(element => {
            element.style.animation = 'pulse 0.5s ease-in-out';
            setTimeout(() => {
                element.style.animation = '';
            }, 500);
        });
    }
}

// Start polling when page loads
document.addEventListener('DOMContentLoaded', function() {
    startNotificationPolling();
});

// Stop polling when page unloads
window.addEventListener('beforeunload', function() {
    if (notificationInterval) {
        clearInterval(notificationInterval);
    }
});

// Card History Functions
function loadMoreCardHistory() {
    const container = document.getElementById('cardHistoryContainer');
    const loadMoreBtn = document.querySelector('.btn-load-more');

    // Show loading state
    loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang tải...';
    loadMoreBtn.disabled = true;

    // Get current history count
    const currentCount = container.querySelectorAll('.history-item').length;

    // Fetch more history
    fetch(`{{ route("user.recharge.card.history") }}?limit=10&offset=${currentCount}`, {
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.data.history.length > 0) {
            // Append new history items
            data.data.history.forEach(item => {
                const historyItem = createHistoryItem(item);
                container.appendChild(historyItem);
            });

            // Hide load more button if no more items
            if (data.data.history.length < 10) {
                loadMoreBtn.style.display = 'none';
            } else {
                loadMoreBtn.innerHTML = '<i class="fas fa-plus"></i> Xem thêm';
                loadMoreBtn.disabled = false;
            }
        } else {
            loadMoreBtn.style.display = 'none';
        }
    })
    .catch(error => {
        console.error('Error loading more history:', error);
        loadMoreBtn.innerHTML = '<i class="fas fa-plus"></i> {{ __('user.view_more') }}';
        loadMoreBtn.disabled = false;
        showErrorToast('{{ __('user.load_more_history_error') }}');
    });
}

function createHistoryItem(item) {
    const div = document.createElement('div');
    div.className = 'history-item';
    div.innerHTML = `
        <div class="history-info">
            <div class="history-main">
                <span class="telco-name">${item.telco_name}</span>
                <span class="amount">${parseInt(item.amount).toLocaleString()} {{ __('user.vnd_currency') }}</span>
            </div>
            <div class="history-details">
                <span class="serial">Serial: ${item.serial.substring(0, 6)}***</span>
                <span class="date">${formatDate(item.created_at)}</span>
            </div>
        </div>
        <div class="history-status">
            <span class="status-badge status-${item.status}">
                ${item.status_text}
            </span>
            ${item.coins_received ? `<span class="coins-received">+${parseInt(item.coins_received).toLocaleString()} {{ __('user.coins_currency') }}</span>` : ''}
        </div>
    `;
    return div;
}

function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('vi-VN') + ' ' + date.toLocaleTimeString('vi-VN', {
        hour: '2-digit',
        minute: '2-digit'
    });
}

// Auto refresh card history every 30 seconds
setInterval(function() {
    if (document.getElementById('card-tab').style.display !== 'none') {
        refreshCardHistory();
    }
}, 30000);

function refreshCardHistory() {
    const container = document.getElementById('cardHistoryContainer');

    fetch('{{ route("user.recharge.card.history") }}?limit=10', {
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Clear current history
            container.innerHTML = '';

            if (data.data.history.length > 0) {
                // Add new history items
                data.data.history.forEach(item => {
                    const historyItem = createHistoryItem(item);
                    container.appendChild(historyItem);
                });
            } else {
                container.innerHTML = `
                    <div class="empty-history">
                        <i class="fas fa-inbox"></i>
                        <p>{{ __('user.no_card_history') }}</p>
                    </div>
                `;
            }
        }
    })
    .catch(error => {
        console.error('Error refreshing history:', error);
    });
}
</script>

@endsection