@extends('layouts.user')

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

@section('content')
<style>
/* Clean History Page - Mobile First */
.history {
    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: #6366f1;
}

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

/* Quick Filter */
.quick-filter {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    color: #6366f1;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-btn.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.filter-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* Transaction Item */
.transaction-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;
    transition: all 0.3s ease;
}

.transaction-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.transaction-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.transaction-id {
    font-size: 0.75rem;
    color: #6b7280;
    font-family: monospace;
}

.transaction-amount {
    text-align: right;
}

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

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

.transaction-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.detail-value {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

/* Status Badge */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-processing {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

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

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.empty-state p {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Load More */
.load-more {
    text-align: center;
    margin-top: 1rem;
}

.load-more-btn {
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: #5b21b6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 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: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

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

/* Desktop */
@media (min-width: 768px) {
    .history {
        max-width: 800px;
        padding: 2rem;
    }
    
    .transaction-details {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bottom-nav {
        display: none;
    }
}

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

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

    <!-- Quick Filter -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-filter"></i>
            {{ __('user.quick_filter') }}
        </h2>
        <div class="quick-filter">
            <button class="filter-btn active" onclick="filterTransactions('all')">{{ __('user.all_transactions') }}</button>
            <button class="filter-btn" onclick="filterTransactions('completed')">{{ __('user.completed_transactions') }}</button>
            <button class="filter-btn" onclick="filterTransactions('pending')">{{ __('user.pending_transactions') }}</button>
            <button class="filter-btn" onclick="filterTransactions('rejected')">{{ __('user.failed_transactions') }}</button>
        </div>
    </div>

    <!-- Transactions List -->
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-list"></i>
            {{ __('user.recent_transactions') }}
        </h2>
        
        <div id="transactionsList">
            @forelse($payments as $payment)
            <div class="transaction-item" data-status="{{ $payment->status }}">
                <div class="transaction-header">
                    <div class="transaction-info">
                        <h3>
                            @if($payment->type === 'card')
                                {{ __('user.card_recharge_type') }}
                            @elseif($payment->type === 'banking')
                                {{ __('user.bank_transfer_type') }}
                            @elseif($payment->type === 'privilege')
                                🎮 Mua đặc quyền
                            @else
                                {{ __('user.coin_recharge_type') }}
                            @endif
                        </h3>
                        <div class="transaction-id">#{{ $payment->transaction_id }}</div>
                    </div>
                    <div class="transaction-amount">
                        <div class="amount-value" style="color: {{ $payment->coins_added > 0 ? '#10b981' : '#ef4444' }};">
                            {{ $payment->coins_added > 0 ? '+' : '' }}{{ number_format($payment->coins_added) }}
                        </div>
                        <div class="amount-label">{{ __('user.coins_currency') }}</div>
                    </div>
                </div>

                <div class="transaction-details">
                    <div class="detail-item">
                        <div class="detail-label">{{ __('user.payment_method') }}</div>
                        <div class="detail-value">
                            @if($payment->type === 'card')
                                {{ __('user.card_recharge_method') }}
                            @elseif($payment->type === 'banking')
                                {{ __('user.bank_transfer_method') }}
                            @elseif($payment->type === 'privilege')
                                @php
                                    $paymentData = json_decode($payment->payment_data, true);
                                @endphp
                                {{ $paymentData['package_name'] ?? 'Đặc quyền' }}
                                @if(isset($paymentData['character_name']))
                                    <br><small>Nhân vật: {{ $paymentData['character_name'] }}</small>
                                @endif
                            @elseif($payment->type === 'momo')
                                {{ __('user.momo_wallet') }}
                            @else
                                {{ ucfirst($payment->type) }}
                            @endif
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">{{ __('user.transaction_status') }}</div>
                        <div class="detail-value">
                            @if($payment->status === 'completed')
                                <span class="status-badge status-completed">{{ __('user.status_completed') }}</span>
                            @elseif($payment->status === 'pending')
                                <span class="status-badge status-pending">{{ __('user.status_pending') }}</span>
                            @elseif($payment->status === 'processing')
                                <span class="status-badge status-pending">{{ __('user.status_pending') }}</span>
                            @else
                                <span class="status-badge status-failed">{{ __('user.status_failed') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">{{ __('user.amount_label') }}</div>
                        <div class="detail-value">{{ number_format($payment->amount_vnd) }} {{ __('user.vnd_currency') }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">{{ __('user.time_label') }}</div>
                        <div class="detail-value">
                            @if($payment->created_at)
                                @if(is_string($payment->created_at))
                                    {{ \Carbon\Carbon::parse($payment->created_at)->format('d/m/Y H:i') }}
                                @else
                                    {{ $payment->created_at->format('d/m/Y H:i') }}
                                @endif
                            @else
                                N/A
                            @endif
                        </div>
                    </div>
                </div>

                @if($payment->payment_data)
                    @php
                        $paymentData = is_string($payment->payment_data) ? json_decode($payment->payment_data, true) : $payment->payment_data;
                    @endphp
                    @if($paymentData && is_array($paymentData))
                    <div class="transaction-details" style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e5e7eb;">
                        @if(isset($paymentData['telco']))
                        <div class="detail-item">
                            <div class="detail-label">Nhà mạng</div>
                            <div class="detail-value">{{ $paymentData['telco'] }}</div>
                        </div>
                        @endif
                        @if(isset($paymentData['serial']))
                        <div class="detail-item">
                            <div class="detail-label">Serial</div>
                            <div class="detail-value">{{ substr($paymentData['serial'], 0, 6) }}***</div>
                        </div>
                        @endif
                    </div>
                    @endif
                @endif
            </div>
            @empty
            <div class="empty-state" id="emptyState">
                <i class="fas fa-inbox"></i>
                <h3>{{ __('user.no_transactions_title') }}</h3>
                <p>{{ __('user.transaction_history_empty') }}</p>
            </div>
            @endforelse


        </div>

        <div class="load-more">
            <button class="load-more-btn" onclick="loadMoreTransactions()">
                <i class="fas fa-plus"></i>
                Xem thêm
            </button>
        </div>
    </div>

    <!-- Empty State (hidden by default) -->
    <div class="empty-state" id="emptyState" style="display: none;">
        <i class="fas fa-receipt"></i>
        <h3>{{ __('user.no_transactions_empty') }}</h3>
        <p>{{ __('user.no_transactions_description') }}</p>
        <a href="{{ route('user.recharge') }}" class="load-more-btn" style="text-decoration: none; display: inline-block;">
            <i class="fas fa-gem"></i>
            {{ __('user.recharge_diamonds_now') }}
        </a>
    </div>
</div>

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

<script>
function filterTransactions(status) {
    // Update filter buttons
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');

    // Filter transactions
    const transactions = document.querySelectorAll('.transaction-item');
    let visibleCount = 0;

    transactions.forEach(transaction => {
        const transactionStatus = transaction.getAttribute('data-status');
        
        if (status === 'all' || transactionStatus === status) {
            transaction.style.display = 'block';
            visibleCount++;
        } else {
            transaction.style.display = 'none';
        }
    });

    // Show/hide empty state
    const emptyState = document.getElementById('emptyState');
    const transactionsList = document.getElementById('transactionsList');
    
    if (visibleCount === 0) {
        transactionsList.style.display = 'none';
        emptyState.style.display = 'block';
    } else {
        transactionsList.style.display = 'block';
        emptyState.style.display = 'none';
    }
}

function loadMoreTransactions() {
    const btn = event.target;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ __('user.loading_more') }}';
    btn.disabled = true;

    // Simulate loading
    setTimeout(() => {
        alert('{{ __('user.loaded_all_transactions') }}');
        btn.innerHTML = '<i class="fas fa-check"></i> {{ __('user.loaded_complete') }}';
        btn.disabled = true;
    }, 1500);
}

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

@endsection