@extends('layouts.admin')

@section('title', 'User BattlePass Management - MU Admin Panel')

@section('styles')
<style>
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255, 255, 255, 0.1);
        }
        .page-header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 30px;
            margin-bottom: 30px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .page-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .page-subtitle {
            opacity: 0.8;
            font-size: 16px;
        }
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            font-size: 14px;
        }
        .btn-primary {
            background: linear-gradient(45deg, #8b5cf6, #7c3aed);
            color: white;
        }
        .btn-secondary {
            background: linear-gradient(45deg, #6b7280, #4b5563);
            color: white;
        }
        .btn-info {
            background: linear-gradient(45deg, #06b6d4, #0891b2);
            color: white;
        }
        .btn-warning {
            background: linear-gradient(45deg, #f59e0b, #d97706);
            color: white;
        }
        .btn-success {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
        }
        .btn-danger {
            background: linear-gradient(45deg, #ef4444, #dc2626);
            color: white;
        }
        .header-actions {
            display: flex;
            gap: 10px;
        }
        .header-actions .btn {
            white-space: nowrap;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 25px;
            color: white;
            text-align: center;
            transition: transform 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            opacity: 0.8;
        }
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .stat-label {
            opacity: 0.8;
            font-size: 14px;
        }
        .filters-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 25px;
            margin-bottom: 30px;
        }
        .filters-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            align-items: end;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        .form-group label {
            color: white;
            margin-bottom: 8px;
            font-weight: 600;
        }
        .form-control {
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 14px;
        }
        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        .form-control:focus {
            outline: none;
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        }
        .table-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 25px;
            overflow: hidden;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        .table th {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .table td {
            padding: 15px;
            color: white;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: transparent;
        }
        .table tr {
            background: transparent;
        }
        .table tbody tr:hover {
            background: rgba(255, 255, 255, 0.05) !important;
        }
        .table tbody tr:nth-child(even) {
            background: rgba(255, 255, 255, 0.02);
        }
        .form-control option {
            background: #1f2937;
            color: white;
        }
        .badge {
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            display: inline-block;
        }
        .badge-success {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
        }
        .badge-warning {
            background: linear-gradient(45deg, #f59e0b, #d97706);
            color: white;
        }
        .badge-danger {
            background: linear-gradient(45deg, #ef4444, #dc2626);
            color: white;
        }
        .badge-info {
            background: linear-gradient(45deg, #06b6d4, #0891b2);
            color: white;
        }
        .badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }
        .badge-success {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
        }
        .badge-warning {
            background: linear-gradient(45deg, #f59e0b, #d97706);
            color: white;
        }
        .badge-danger {
            background: linear-gradient(45deg, #ef4444, #dc2626);
            color: white;
        }
        .user-info {
            display: flex;
            flex-direction: column;
        }
        .user-name {
            font-weight: 600;
            margin-bottom: 4px;
        }
        .user-email {
            font-size: 12px;
            opacity: 0.7;
        }
        .character-info {
            display: flex;
            flex-direction: column;
        }
        .character-name {
            font-weight: 600;
            margin-bottom: 4px;
            color: #fbbf24;
        }
        .character-details {
            font-size: 12px;
            opacity: 0.7;
        }
        .package-info {
            display: flex;
            flex-direction: column;
        }
        .package-name {
            font-weight: 600;
            margin-bottom: 4px;
            color: #a78bfa;
        }
        .package-details {
            font-size: 12px;
            opacity: 0.7;
        }
        .btn-group {
            display: flex;
            gap: 5px;
        }
        .btn-sm {
            padding: 8px 12px;
            font-size: 12px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination .page-link {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 8px 12px;
            margin: 0 2px;
            border-radius: 6px;
            text-decoration: none;
        }
        .pagination .page-link:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .pagination .page-item.active .page-link {
            background: linear-gradient(45deg, #8b5cf6, #7c3aed);
            border-color: #8b5cf6;
        }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="header-content">
            <h1 class="page-title">👥 User BattlePass Management</h1>
            <p class="page-subtitle">Quản lý chi tiết người dùng mua BattlePass</p>
        </div>
        <div class="header-actions">
            <a href="{{ route('admin.battle-pass.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Quay lại
            </a>
        </div>
    </div>

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-value">{{ number_format($stats['total_users']) }}</div>
            <div class="stat-label">Tổng User mua</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-value">{{ number_format($stats['active_users']) }}</div>
            <div class="stat-label">Đang hoạt động</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-value">{{ number_format($stats['total_revenue_coins']) }}</div>
            <div class="stat-label">Doanh thu (Coins)</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">📅</div>
            <div class="stat-value">{{ number_format($stats['today_purchases']) }}</div>
            <div class="stat-label">Hôm nay</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="filters-card">
        <form method="GET" class="filters-form">
            <div class="form-group">
                <label>🔍 Tìm kiếm</label>
                <input type="text" name="search" class="form-control"
                       placeholder="Username, email..." value="{{ $search }}">
            </div>
            <div class="form-group">
                <label>📋 Template</label>
                <select name="template_id" class="form-control">
                    <option value="">Tất cả</option>
                    @foreach($templates as $template)
                    <option value="{{ $template->id }}" {{ $templateFilter == $template->id ? 'selected' : '' }}>
                        {{ $template->package_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>📊 Trạng thái</label>
                <select name="status" class="form-control">
                    <option value="">Tất cả</option>
                    <option value="active" {{ $statusFilter == 'active' ? 'selected' : '' }}>Đang hoạt động</option>
                    <option value="expired" {{ $statusFilter == 'expired' ? 'selected' : '' }}>Hết hạn</option>
                    <option value="cancelled" {{ $statusFilter == 'cancelled' ? 'selected' : '' }}>Đã hủy</option>
                </select>
            </div>
            <div class="form-group">
                <label>📅 Từ ngày</label>
                <input type="date" name="date_from" class="form-control" value="{{ $dateFrom }}">
            </div>
            <div class="form-group">
                <label>📅 Đến ngày</label>
                <input type="date" name="date_to" class="form-control" value="{{ $dateTo }}">
            </div>
            <div class="form-group">
                <label>&nbsp;</label>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Lọc
                </button>
            </div>
        </form>
    </div>

    <!-- User Purchases Table -->
    <div class="table-card">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>👤 User Info</th>
                        <th>🎮 Nhân vật</th>
                        <th>⚔️ BattlePass</th>
                        <th>💰 Giá (Coins)</th>
                        <th>📅 Ngày mua</th>
                        <th>⏰ Hết hạn</th>
                        <th>📊 Trạng thái</th>
                        <th>🔧 Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($purchases as $purchase)
                    <tr>
                        <td><strong>#{{ $purchase->id }}</strong></td>
                        <td>
                            <div class="user-info">
                                <div class="user-name">{{ $purchase->username }}</div>
                                @if($purchase->email)
                                <div class="user-email">{{ $purchase->email }}</div>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="character-info">
                                @if($purchase->character_name)
                                <div class="character-name">{{ $purchase->character_name }}</div>
                                <div class="character-details">
                                    @if($purchase->character_id)
                                    ID: {{ $purchase->character_id }}
                                    @endif
                                    @if($purchase->zone_id)
                                    | Zone: {{ $purchase->zone_id }}
                                    @endif
                                </div>
                                @else
                                <div class="character-name" style="opacity: 0.5;">Chưa có nhân vật</div>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="package-info">
                                <div class="package-name">{{ $purchase->package_name }}</div>
                                <div class="package-details">{{ $purchase->duration_days }} ngày</div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-warning">
                                {{ number_format($purchase->coins_price) }} coins
                            </span>
                        </td>
                        <td>
                            <div style="font-size: 13px;">
                                {{ \Carbon\Carbon::parse($purchase->purchased_at)->format('d/m/Y H:i') }}
                                <div style="font-size: 11px; opacity: 0.7; margin-top: 2px;">
                                    {{ \Carbon\Carbon::parse($purchase->purchased_at)->diffForHumans() }}
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size: 13px;">
                                {{ \Carbon\Carbon::parse($purchase->expires_at)->format('d/m/Y H:i') }}
                                @php
                                    $now = now();
                                    $expiresAt = \Carbon\Carbon::parse($purchase->expires_at);
                                    $isExpired = $now > $expiresAt;
                                    $daysLeft = $isExpired ? 0 : $now->diffInDays($expiresAt);
                                @endphp
                                <div style="font-size: 11px; margin-top: 2px; color: {{ $isExpired ? '#ef4444' : ($daysLeft <= 3 ? '#f59e0b' : '#10b981') }};">
                                    @if($isExpired)
                                        Đã hết hạn
                                    @else
                                        Còn {{ $daysLeft }} ngày
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            @php
                                $now = now();
                                $expiresAt = \Carbon\Carbon::parse($purchase->expires_at);
                                $isExpired = $now > $expiresAt;

                                if ($purchase->status === 'cancelled') {
                                    $statusClass = 'badge-danger';
                                    $statusText = 'Đã hủy';
                                } elseif ($isExpired || $purchase->status === 'expired') {
                                    $statusClass = 'badge-warning';
                                    $statusText = 'Hết hạn';
                                } elseif ($purchase->status === 'active') {
                                    $statusClass = 'badge-success';
                                    $statusText = 'Đang hoạt động';
                                } else {
                                    $statusClass = 'badge-info';
                                    $statusText = ucfirst($purchase->status);
                                }
                            @endphp
                            <span class="badge {{ $statusClass }}">{{ $statusText }}</span>
                        </td>
                        <td>
                            <div class="btn-group">
                                <a href="{{ route('admin.battle-pass.show', $purchase->id) }}"
                                   class="btn btn-info btn-sm" title="Xem chi tiết">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.battle-pass.edit', $purchase->id) }}"
                                   class="btn btn-warning btn-sm" title="Chỉnh sửa">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center" style="padding: 50px;">
                            <div class="empty-state">
                                <div style="font-size: 3rem; margin-bottom: 20px; opacity: 0.5;">📭</div>
                                <h5 style="margin-bottom: 10px;">Không có dữ liệu</h5>
                                <p style="opacity: 0.7;">Chưa có user nào mua BattlePass với bộ lọc này.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($purchases->hasPages())
    <div class="pagination">
        {{ $purchases->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection