@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">

    <!-- Key Stats -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-4">
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center">
                    <i data-feather="map" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Total Packages</p>
                    <p class="text-2xl font-bold text-[#0c2340]">{{ $stats['total_packages'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                    <i data-feather="check-circle" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Active Packages</p>
                    <p class="text-2xl font-bold text-[#0c2340]">{{ $stats['active_packages'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center">
                    <i data-feather="calendar" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Total Bookings</p>
                    <p class="text-2xl font-bold text-[#0c2340]">{{ $stats['total_bookings'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center">
                    <i data-feather="clock" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Pending Bookings</p>
                    <p class="text-2xl font-bold text-[#0c2340]">{{ $stats['pending_bookings'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                    <i data-feather="dollar-sign" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Total Revenue</p>
                    <p class="text-2xl font-bold text-[#0c2340]">${{ number_format($stats['total_revenue'] ?? 0, 0) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 {{ ($stats['pending_offline_payments'] ?? 0) > 0 ? 'ring-2 ring-orange-300' : '' }}">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-orange-100 text-orange-600 flex items-center justify-center">
                    <i data-feather="credit-card" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Pending Offline</p>
                    <p class="text-2xl font-bold text-orange-600">{{ $stats['pending_offline_payments'] ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Bookings by Status -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <h3 class="font-semibold text-[#0c2340] mb-4">Bookings by Status</h3>
            <div class="h-64">
                <canvas id="bookingsStatusChart"></canvas>
            </div>
        </div>

        <!-- Revenue Overview -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <h3 class="font-semibold text-[#0c2340] mb-4">Revenue Overview</h3>
            <div class="flex items-center justify-center h-64 text-gray-400">
                <div class="text-center">
                    <i data-feather="bar-chart-2" class="w-12 h-12 mx-auto mb-3"></i>
                    <p>Revenue trend chart will be added here</p>
                    <p class="text-xs">(We can add monthly breakdown next)</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Popular Packages + Recent Activity -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        
        <!-- Popular Packages -->
        <div class="xl:col-span-1 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-serif text-lg font-semibold text-[#0c2340]">Popular Packages</h3>
                <a href="{{ route('admin.packages') }}" class="text-sm text-[#c9a84c] hover:text-[#0c2340]">View all</a>
            </div>
            
            @forelse($popularPackages ?? [] as $package)
                <div class="flex items-center justify-between py-3 border-b last:border-0">
                    <div class="min-w-0">
                        <p class="font-medium text-sm text-[#0c2340] truncate">{{ $package->title }}</p>
                        <p class="text-xs text-gray-500">{{ $package->bookings_count }} bookings</p>
                    </div>
                    <div class="text-right">
                        <span class="text-sm font-semibold text-emerald-600">${{ number_format($package->price, 0) }}</span>
                    </div>
                </div>
            @empty
                <p class="text-sm text-gray-500 py-4">No popular packages yet.</p>
            @endforelse
        </div>

        <!-- Recent Bookings -->
        <div class="xl:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100">
            <div class="px-6 py-4 border-b flex justify-between items-center">
                <h3 class="font-semibold text-[#0c2340]">Recent Bookings</h3>
                <a href="{{ route('admin.bookings') }}" class="text-sm text-[#c9a84c] hover:text-[#0c2340]">View all →</a>
            </div>
            <div class="divide-y">
                @forelse ($recentBookings ?? [] as $booking)
                    <div class="px-6 py-3 flex items-center justify-between hover:bg-gray-50">
                        <div>
                            <p class="font-medium text-sm">{{ $booking->package->title }}</p>
                            <p class="text-xs text-gray-500">{{ $booking->user->name }} • {{ $booking->created_at->format('M d, H:i') }}</p>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="px-3 py-1 text-xs rounded-full {{ $booking->status === 'confirmed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                {{ ucfirst($booking->status) }}
                            </span>
                            <a href="{{ route('admin.bookings.detail', $booking->booking_reference) }}" class="text-[#c9a84c] hover:text-[#0c2340]">
                                <i data-feather="arrow-right" class="w-4 h-4"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="px-6 py-6 text-center text-gray-500 text-sm">No recent bookings</div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-semibold text-[#0c2340] mb-4">Quick Actions</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <a href="{{ route('admin.packages.create') }}" class="flex items-center gap-3 p-4 bg-gray-50 hover:bg-[#0c2340] hover:text-white rounded-xl transition-colors">
                <i data-feather="plus" class="w-5 h-5"></i>
                <span class="font-medium">Create Package</span>
            </a>
            <a href="{{ route('admin.bookings') }}" class="flex items-center gap-3 p-4 bg-gray-50 hover:bg-[#0c2340] hover:text-white rounded-xl transition-colors">
                <i data-feather="calendar" class="w-5 h-5"></i>
                <span class="font-medium">Manage Bookings</span>
            </a>
            <a href="{{ route('admin.offline-payments.index') }}" class="flex items-center gap-3 p-4 bg-gray-50 hover:bg-[#0c2340] hover:text-white rounded-xl transition-colors">
                <i data-feather="credit-card" class="w-5 h-5"></i>
                <span class="font-medium">Offline Payments</span>
            </a>
            <a href="{{ route('admin.users') }}" class="flex items-center gap-3 p-4 bg-gray-50 hover:bg-[#0c2340] hover:text-white rounded-xl transition-colors">
                <i data-feather="users" class="w-5 h-5"></i>
                <span class="font-medium">Manage Users</span>
            </a>
        </div>
    </div>

</div>

@push('scripts')
<script>
    // Bookings by Status Chart
    const ctx = document.getElementById('bookingsStatusChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Confirmed', 'Pending', 'Cancelled'],
                datasets: [{
                    data: [
                        {{ $stats['confirmed_bookings'] ?? 0 }},
                        {{ $stats['pending_bookings'] ?? 0 }},
                        {{ $stats['total_bookings'] - ($stats['confirmed_bookings'] ?? 0) - ($stats['pending_bookings'] ?? 0) }}
                    ],
                    backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' }
                }
            }
        });
    }
</script>
@endpush
@endsection