@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
            <p class="mt-1 text-sm text-gray-600">Welcome back! Here's what's happening with your event today.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-3">
            <a href="{{ route('attendance.scan.page') }}" 
               class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-qrcode mr-2"></i>
                Scan QR Code
            </a>
            <a href="{{ route('admin.participants.create') }}" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus mr-2"></i>
                Add Participant
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Participants</p>
                    <p class="text-3xl font-bold mt-2">{{ $totalParticipants }}</p>
                    <p class="text-blue-100 text-xs mt-1">Registered users</p>
                </div>
                <div class="bg-white/20 rounded-full p-3">
                    <i class="fas fa-users text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">Total Scans</p>
                    <p class="text-3xl font-bold mt-2">{{ $totalAttendances }}</p>
                    <p class="text-green-100 text-xs mt-1">Attendance recorded</p>
                </div>
                <div class="bg-white/20 rounded-full p-3">
                    <i class="fas fa-check-circle text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">QR Codes Sent</p>
                    <p class="text-3xl font-bold mt-2">{{ $participants->where('qr_sent', true)->count() }}</p>
                    <p class="text-purple-100 text-xs mt-1">Emails delivered</p>
                </div>
                <div class="bg-white/20 rounded-full p-3">
                    <i class="fas fa-envelope text-2xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium">Attendance Rate</p>
                    <p class="text-3xl font-bold mt-2">
                        {{ $totalParticipants > 0 ? round(($totalAttendances / $totalParticipants) * 100, 1) : 0 }}%
                    </p>
                    <p class="text-orange-100 text-xs mt-1">Participation rate</p>
                </div>
                <div class="bg-white/20 rounded-full p-3">
                    <i class="fas fa-chart-line text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Quick Actions -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                    <h2 class="text-lg font-semibold text-white">Quick Actions</h2>
                </div>
                <div class="p-6 space-y-4">
                    <!-- Upload Excel -->
                    <form action="{{ route('admin.upload.excel') }}" method="POST" enctype="multipart/form-data" 
                          onsubmit="console.log('Form submitted'); this.querySelector('button[type=submit]').disabled = true; this.querySelector('button[type=submit]').innerHTML = '<i class=&quot;fas fa-spinner fa-spin mr-2&quot;></i> Uploading...'; return true;">
                        @csrf
                        @if (session('error'))
                            <div class="mb-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                                <p class="text-sm text-red-600">{{ session('error') }}</p>
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="mb-3 p-3 bg-green-50 border border-green-200 rounded-lg">
                                <p class="text-sm text-green-600">{{ session('success') }}</p>
                            </div>
                        @endif
                        <div class="space-y-3">
                            <label class="block text-sm font-medium text-gray-700">
                                <i class="fas fa-file-excel mr-1 text-green-600"></i>
                                Upload Excel File
                            </label>
                            <input type="file" name="excel_file" accept=".xlsx,.xls,.csv" required
                                   class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer"
                                   onchange="console.log('File selected:', this.files[0]?.name); document.getElementById('file-name').textContent = this.files[0]?.name || '';">
                            <div id="file-name" class="text-xs text-gray-500"></div>
                            <button type="submit" class="w-full bg-blue-600 text-white py-2.5 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium">
                                <i class="fas fa-upload mr-2"></i> Upload Participants
                            </button>
                        </div>
                    </form>

                    <div class="border-t pt-4">
                        <form action="{{ route('admin.generate.qr') }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full bg-green-600 text-white py-2.5 px-4 rounded-lg hover:bg-green-700 transition-colors font-medium">
                                <i class="fas fa-qrcode mr-2"></i> Generate QR Codes
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Recent Scans -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mt-6">
                <div class="bg-gradient-to-r from-green-600 to-green-700 px-6 py-4">
                    <h2 class="text-lg font-semibold text-white">Recent Scans</h2>
                </div>
                <div class="p-6">
                    <div class="space-y-3 max-h-80 overflow-y-auto">
                        @forelse($recentAttendances as $attendance)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                <div class="flex items-center space-x-3">
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-green-600 text-xs"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-sm">{{ $attendance->participant?->name ?? 'Unknown Participant' }}</p>
                                        <p class="text-xs text-gray-500">{{ $attendance->scanned_at->format('H:i') }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs text-gray-500">{{ $attendance->scanned_at->format('M j') }}</span>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-8">
                                <i class="fas fa-clock text-4xl text-gray-300 mb-3"></i>
                                <p class="text-gray-500 text-sm">No recent scans</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Participants Table -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-6 py-4 flex justify-between items-center">
                    <h2 class="text-lg font-semibold text-white">Recent Participants</h2>
                    <a href="{{ route('admin.participants') }}" class="text-white hover:text-purple-200 transition-colors">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Participant</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">QR Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scans</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($participants as $participant)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                                <span class="text-blue-600 text-sm font-medium">{{ strtoupper(substr($participant->name, 0, 1)) }}</span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900">{{ $participant->name }}</p>
                                                <p class="text-xs text-gray-500">{{ $participant->email }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($participant->location)
                                            <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full bg-blue-100 text-blue-800">
                                                {{ $participant->location }}
                                            </span>
                                        @else
                                            <span class="text-xs text-gray-400">N/A</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ $participant->total_attendees }}</div>
                                        <div class="text-xs text-gray-500">people</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($participant->qr_sent)
                                            <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full bg-green-100 text-green-800">
                                                <i class="fas fa-check mr-1"></i> Sent
                                            </span>
                                        @else
                                            <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-clock mr-1"></i> Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <span class="text-sm font-medium text-gray-900">{{ $participant->attendance_count }}</span>
                                            @if($participant->attendance_count > 0)
                                                <i class="fas fa-check-circle text-green-500 ml-2 text-xs"></i>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center">
                                        <div class="text-gray-400">
                                            <i class="fas fa-users text-4xl mb-4"></i>
                                            <p class="text-lg font-medium">No participants found</p>
                                            <p class="text-sm">Upload an Excel file to get started</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection