@extends('layouts.admin')

@section('title', 'Quản lý tài khoản - MU Admin Panel')

@section('content')
    <!-- Page Header -->
    <div class="content-card">
        <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem;">
            <div style="flex: 1;">
                <h1 style="font-size: 1.875rem; font-weight: 700; color: #f1f5f9; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem;">
                    <i class="fas fa-users" style="color: #60a5fa;"></i>
                    Quản lý tài khoản
                </h1>
                <p style="color: #cbd5e1;">
                    Quản lý tài khoản người dùng trong hệ thống game MU Online
                </p>
            </div>
            <div style="display: flex; gap: 0.75rem;">
                <a href="{{ route('admin.accounts.create') }}" class="btn btn-success">
                    <i class="fas fa-plus"></i>
                    <span>Tạo tài khoản</span>
                </a>
                <a href="{{ route('admin.accounts.bulk-create') }}" class="btn btn-info">
                    <i class="fas fa-users"></i>
                    <span>Tạo hàng loạt</span>
                </a>
                <a href="#" class="btn btn-secondary">
                    <i class="fas fa-download"></i>
                    <span>Xuất Excel</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Search & Filter Section -->
    <div class="content-card">
        <h2 style="font-size: 1.25rem; font-weight: 600; color: #f1f5f9; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-search" style="color: #fbbf24;"></i>
            Tìm kiếm & Lọc
        </h2>

        <form method="GET" class="search-form">
            <div class="search-grid">
                <div class="form-group">
                    <label class="form-label">Loại tìm kiếm</label>
                    <select name="search_type" class="form-select">
                        <option value="username" {{ $searchType == 'username' ? 'selected' : '' }}>Tên tài khoản</option>
                        <option value="email" {{ $searchType == 'email' ? 'selected' : '' }}>Email</option>
                        <option value="character_name" {{ $searchType == 'character_name' ? 'selected' : '' }}>Tên nhân vật</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">Từ khóa tìm kiếm</label>
                    <input type="text" name="search" class="form-input"
                           placeholder="Nhập từ khóa tìm kiếm..."
                           value="{{ $search }}">
                </div>

                <div class="form-group">
                    <label class="form-label">Server</label>
                    <select name="server" class="form-select">
                        <option value="all" {{ $serverFilter == 'all' ? 'selected' : '' }}>Tất cả server</option>
                        @if(isset($servers))
                            @foreach($servers as $server)
                                <option value="{{ $server->serverid }}" {{ $serverFilter == $server->serverid ? 'selected' : '' }}>
                                    {{ $server->ServerName }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>

            <div class="search-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i>
                    <span>Tìm kiếm</span>
                </button>
                <a href="{{ route('admin.accounts.index') }}" class="btn btn-secondary">
                    <i class="fas fa-redo"></i>
                    <span>Đặt lại</span>
                </a>
            </div>
        </form>

        <style>
            .search-form {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }

            .search-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1rem;
            }

            .search-actions {
                display: flex;
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            @media (max-width: 768px) {
                .search-grid {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }

                .search-actions {
                    flex-direction: column;
                }

                .search-actions .btn {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 480px) {
                .search-form {
                    gap: 1rem;
                }

                .search-grid {
                    gap: 0.75rem;
                }
            }
        </style>
    </div>










    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-error">
            <i class="fas fa-exclamation-circle"></i>
            @foreach($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif

    <!-- Accounts Table -->
    <div class="content-card">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
            <h2 style="font-size: 1.25rem; font-weight: 600; color: #f1f5f9; display: flex; align-items: center; gap: 0.5rem;">
                <i class="fas fa-table" style="color: #60a5fa;"></i>
                Danh sách tài khoản
                @if(isset($accounts) && count($accounts) > 0)
                    <span style="font-size: 0.875rem; font-weight: 400; color: #cbd5e1;">({{ count($accounts) }} tài khoản)</span>
                @endif
            </h2>

            <div style="display: flex; gap: 0.5rem;">
                <button onclick="clearGameCache()" class="btn btn-warning" style="padding: 0.5rem 0.75rem; font-size: 12px;">
                    <i class="fas fa-trash"></i>
                    <span>Clear Cache</span>
                </button>
                <button onclick="testConnections()" class="btn btn-info" style="padding: 0.5rem 0.75rem; font-size: 12px;">
                    <i class="fas fa-database"></i>
                    <span>Test DB</span>
                </button>
            </div>
        </div>

        @if(isset($accounts) && count($accounts) > 0)
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th style="text-align: center;">ID</th>
                            <th>Tên đăng nhập</th>
                            <th class="hidden">Email</th>
                            <th style="text-align: center;" class="hidden">Trạng thái</th>
                            <th style="text-align: center;" class="hidden">Kim cương web</th>
                            <th style="text-align: center;" class="hidden">Kim cương game</th>
                            <th style="text-align: center;" class="hidden">Nhân vật</th>
                            <th style="text-align: center;" class="hidden">Đăng ký</th>
                            <th style="text-align: center;">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($accounts as $account)
                            <tr style="transition: all 0.2s ease;">
                                <td style="text-align: center; font-weight: 600; color: #60a5fa;">
                                    #{{ $account->ID }}
                                </td>
                                <td>
                                    <div style="display: flex; flex-direction: column;">
                                        <span style="font-weight: 600; color: #f1f5f9;">{{ $account->UserName }}</span>
                                        <div class="hidden" style="margin-top: 0.25rem;">
                                            <div style="font-size: 0.875rem; color: #cbd5e1; margin-bottom: 0.25rem;">
                                                {{ $account->Email ?: 'Chưa có email' }}
                                            </div>
                                            <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                                                <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; {{ $account->Status == 1 ? 'background: #dcfce7; color: #166534;' : 'background: #fef2f2; color: #dc2626;' }}">
                                                    {{ $account->Status == 1 ? '✅ Hoạt động' : '❌ Bị khóa' }}
                                                </span>
                                                <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #dbeafe; color: #1e40af;">
                                                    💎W: {{ number_format($account->web_coins ?? 0) }}
                                                </span>
                                                <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #f3e8ff; color: #7c3aed;">
                                                    💎G: {{ number_format($account->total_money ?? 0) }}
                                                </span>
                                                <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #f3f4f6; color: #374151;">
                                                    NV: {{ $account->characters_count ?? 0 }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="hidden">
                                    <span style="color: #e2e8f0;">{{ $account->Email ?: 'Chưa có email' }}</span>
                                </td>
                                <td style="text-align: center;" class="hidden">
                                    <span style="display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; {{ $account->Status == 1 ? 'background: #dcfce7; color: #166534;' : 'background: #fef2f2; color: #dc2626;' }}">
                                        {{ $account->Status == 1 ? 'Hoạt động' : 'Bị khóa' }}
                                    </span>
                                </td>
                                <td style="text-align: center;" class="hidden">
                                    <div style="display: flex; flex-direction: column;">
                                        <span style="font-weight: 600; color: #60a5fa;">{{ number_format($account->web_coins ?? 0) }}</span>
                                        <span style="font-size: 0.75rem; color: #94a3b8;">Kim cương web</span>
                                    </div>
                                </td>
                                <td style="text-align: center;" class="hidden">
                                    <div style="display: flex; flex-direction: column;">
                                        <span style="font-weight: 600; color: #a78bfa;">{{ number_format($account->total_money ?? 0) }}</span>
                                        <span style="font-size: 0.75rem; color: #94a3b8;">Kim cương game</span>
                                    </div>
                                </td>
                                <td style="text-align: center;" class="hidden">
                                    <div style="display: flex; flex-direction: column;">
                                        <span style="font-weight: 600; color: #f1f5f9;">{{ $account->characters_count ?? 0 }}</span>
                                        <span style="font-size: 0.75rem; color: #94a3b8;">nhân vật</span>
                                    </div>
                                </td>
                                <td style="text-align: center;" class="hidden">
                                    <div style="display: flex; flex-direction: column;">
                                        <span style="color: #e2e8f0;">
                                            {{ $account->CreateTime ? \Carbon\Carbon::parse($account->CreateTime)->format('d/m/Y') : 'N/A' }}
                                        </span>
                                        <span style="font-size: 0.75rem; color: #94a3b8;">
                                            {{ $account->CreateTime ? \Carbon\Carbon::parse($account->CreateTime)->format('H:i') : '' }}
                                        </span>
                                    </div>
                                </td>
                                <td style="text-align: center;">
                                    <div class="table-actions">
                                        <a href="/admin/accounts/{{ $account->ID }}"
                                           class="btn btn-info"
                                           style="padding: 0.375rem 0.75rem; font-size: 12px;"
                                           title="Xem chi tiết">
                                            <i class="fas fa-eye"></i>
                                            <span>Xem</span>
                                        </a>
                                        <a href="/admin/accounts/{{ $account->ID }}/edit"
                                           class="btn btn-warning"
                                           style="padding: 0.375rem 0.75rem; font-size: 12px;"
                                           title="Chỉnh sửa">
                                            <i class="fas fa-edit"></i>
                                            <span>Sửa</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div style="margin-top: 1.5rem;">
                {{ $accounts->appends(request()->query())->links('pagination.mobile-optimized') }}
            </div>
        @else
            <div style="text-align: center; padding: 3rem;">
                <div style="font-size: 4rem; margin-bottom: 1rem;">🔍</div>
                <h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem;">Không tìm thấy tài khoản nào</h3>
                <p style="color: #6b7280; margin-bottom: 1.5rem;">Thử thay đổi từ khóa tìm kiếm hoặc loại tìm kiếm</p>
                <a href="{{ route('admin.accounts.index') }}" class="btn btn-primary">
                    <i class="fas fa-redo"></i>
                    Đặt lại tìm kiếm
                </a>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
<script>
    // Clear game cache function
    function clearGameCache() {
        if (confirm('Bạn có chắc chắn muốn xóa cache game?')) {
            // Add your cache clearing logic here
            alert('Cache đã được xóa thành công!');
        }
    }

    // Test database connections
    function testConnections() {
        alert('Đang kiểm tra kết nối database...');
        // Add your database testing logic here
    }

    // Add loading states to table actions
    document.querySelectorAll('.table-actions a').forEach(link => {
        link.addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang tải...';
            btn.style.pointerEvents = 'none';

            // Re-enable after navigation (fallback)
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.style.pointerEvents = 'auto';
            }, 3000);
        });
    });

    // Enhanced search functionality
    document.querySelector('form').addEventListener('submit', function() {
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Đang tìm...';
        submitBtn.disabled = true;
    });
</script>