@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <!-- Breadcrumb -->
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li><a href="#" class="hover:text-blue-600 transition-colors">Home</a></li>
            <li><svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></li>
            <li class="font-medium text-gray-800">Dashboard</li>
        </ol>
    </nav>

    <!-- Key Metrics Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <!-- Total Members -->
        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400">Total Members</p>
                    <p class="text-3xl font-extrabold text-gray-900 mt-1">{{ $totalMembers ?? 1248 }}</p>
                    <span class="inline-flex items-center text-xs font-medium text-emerald-600 mt-2">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                        +12% this month
                    </span>
                </div>
                <div class="p-3 bg-blue-50 text-blue-600 rounded-xl">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                </div>
            </div>
        </div>

        <!-- Total Events -->
        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400">Total Events</p>
                    <p class="text-3xl font-extrabold text-gray-900 mt-1">{{ $totalEvents ?? 25 }}</p>
                    <span class="inline-flex items-center text-xs font-medium text-blue-600 mt-2">
                        {{ $activeEvents ?? 18 }} Active Now
                    </span>
                </div>
                <div class="p-3 bg-indigo-50 text-indigo-600 rounded-xl">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                </div>
            </div>
        </div>

        <!-- Event Bookings -->
        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400">Total Registrations</p>
                    <p class="text-3xl font-extrabold text-gray-900 mt-1">{{ $totalRegistrations ?? 850 }}</p>
                    <span class="inline-flex items-center text-xs font-medium text-emerald-600 mt-2">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                        85% Capacity
                    </span>
                </div>
                <div class="p-3 bg-amber-50 text-amber-600 rounded-xl">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2H5z"></path></svg>
                </div>
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400">Total Revenue</p>
                    <p class="text-3xl font-extrabold text-gray-900 mt-1">${{ number_format($totalRevenue ?? 42500) }}</p>
                    <span class="inline-flex items-center text-xs font-medium text-emerald-600 mt-2">
                        Session: {{ session('session_time', '2h 30m') }}
                    </span>
                </div>
                <div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Interactive Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Monthly Registrations Chart (Line Chart) -->
        <div class="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-base font-bold text-gray-800">Event Registrations & Attendance</h3>
                    <p class="text-xs text-gray-500">Monthly overview of attendee sign-ups</p>
                </div>
                <span class="px-2.5 py-1 text-xs font-semibold text-blue-700 bg-blue-50 rounded-full">2026 Analytics</span>
            </div>
            <div class="relative h-72">
                <canvas id="registrationChart"></canvas>
            </div>
        </div>

        <!-- Member Status Distribution (Doughnut Chart) -->
        <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-base font-bold text-gray-800">Member Breakdown</h3>
                    <p class="text-xs text-gray-500">Status distribution of users</p>
                </div>
            </div>
            <div class="relative h-72 flex items-center justify-center">
                <canvas id="memberDistributionChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Bottom Section: Quick Event Form & Events Table -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Event Form -->
        <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
            <h3 class="text-base font-bold text-gray-800 mb-1">Create Event</h3>
            <p class="text-xs text-gray-500 mb-4">Add a new event directly to the setup</p>

            <form action="{{ route('events.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-gray-700 uppercase mb-1">Event Name</label>
                    <input type="text" name="name" required placeholder="e.g. Annual Alumni Meet 2026" class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 uppercase mb-1">Date</label>
                    <input type="date" name="date" required class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-700 uppercase mb-1">Description</label>
                    <textarea name="description" rows="3" placeholder="Brief details about the event..." class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea>
                </div>
                <button type="submit" class="w-full py-2 px-4 text-xs font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm">
                    Save Event
                </button>
            </form>
        </div>

        <!-- Table -->
        <div class="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-base font-bold text-gray-800">Recent Events</h3>
                    <p class="text-xs text-gray-500">Manage and monitor current event schedules</p>
                </div>
                <a href="#" class="text-xs font-semibold text-blue-600 hover:text-blue-800">View All →</a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50 text-gray-500 uppercase tracking-wider">
                        <th class="px-3 py-3 font-semibold">ID</th>
                        <th class="px-3 py-3 font-semibold">Event Name</th>
                        <th class="px-3 py-3 font-semibold">Date</th>
                        <th class="px-3 py-3 font-semibold">Status</th>
                        <th class="px-3 py-3 font-semibold text-right">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-gray-700">
                    @forelse($events ?? [] as $event)
                        <tr class="hover:bg-gray-50/80 transition-colors">
                            <td class="px-3 py-3 font-medium">{{ $event->id }}</td>
                            <td class="px-3 py-3 font-semibold text-gray-900">{{ $event->name }}</td>
                            <td class="px-3 py-3">{{ $event->date }}</td>
                            <td class="px-3 py-3">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
                                        {{ $event->status }}
                                    </span>
                            </td>
                            <td class="px-3 py-3 text-right space-x-2">
                                <a href="#" class="text-blue-600 hover:underline">Edit</a>
                                <a href="#" class="text-red-600 hover:underline">Delete</a>
                            </td>
                        </tr>
                    @empty
                        <!-- Fallback Demo Rows -->
                        <tr class="hover:bg-gray-50/80 transition-colors">
                            <td class="px-3 py-3 font-medium">1</td>
                            <td class="px-3 py-3 font-semibold text-gray-900">Grand Batch Reunion 2026</td>
                            <td class="px-3 py-3">2026-10-01</td>
                            <td class="px-3 py-3">
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-100 text-emerald-800">Active</span>
                            </td>
                            <td class="px-3 py-3 text-right space-x-2">
                                <button class="text-blue-600 hover:underline font-medium">Edit</button>
                                <button class="text-red-600 hover:underline font-medium">Delete</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50/80 transition-colors">
                            <td class="px-3 py-3 font-medium">2</td>
                            <td class="px-3 py-3 font-semibold text-gray-900">Executive Committee Meet</td>
                            <td class="px-3 py-3">2026-11-15</td>
                            <td class="px-3 py-3">
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-100 text-amber-800">Upcoming</span>
                            </td>
                            <td class="px-3 py-3 text-right space-x-2">
                                <button class="text-blue-600 hover:underline font-medium">Edit</button>
                                <button class="text-red-600 hover:underline font-medium">Delete</button>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @php
        $registrationData = session('chart_registrations', [65, 120, 190, 250, 310, 420, 500]);
        $memberStatsData = session('chart_member_stats', [850, 240, 158]);
    @endphp
@endsection

@push('scripts')
    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // Existing Sidebar & Dropdown Logic
        const toggleBtn = document.getElementById('toggle-sidebar');
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('main-content');
        const profileBtn = document.getElementById('profile-btn');
        const profileDropdown = document.getElementById('profile-dropdown');

        if (toggleBtn && sidebar && mainContent) {
            const isSidebarVisible = () => !sidebar.classList.contains('-translate-x-full');

            const setInitialState = () => {
                if (window.innerWidth >= 768) {
                    sidebar.classList.remove('-translate-x-full');
                    mainContent.classList.add('ml-64');
                } else {
                    sidebar.classList.add('-translate-x-full');
                    mainContent.classList.remove('ml-64');
                }
            };

            setInitialState();

            toggleBtn.addEventListener('click', () => {
                sidebar.classList.toggle('-translate-x-full');
                if (isSidebarVisible()) mainContent.classList.add('ml-64');
                else mainContent.classList.remove('ml-64');
            });
        }

        if (profileBtn && profileDropdown) {
            profileBtn.addEventListener('click', () => {
                profileDropdown.classList.toggle('hidden');
            });

            document.addEventListener('click', (e) => {
                if (!profileBtn.contains(e.target) && !profileDropdown.contains(e.target)) {
                    profileDropdown.classList.add('hidden');
                }
            });
        }

        // Initialize Chart.js Graphs
        document.addEventListener("DOMContentLoaded", function () {
            // Line Chart - Monthly Registrations
            const regCtx = document.getElementById('registrationChart').getContext('2d');

            // Laravel Session / Controller dynamic data injection
            const registrationData = @json($registrationData);
            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

            new Chart(regCtx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Registrations',
                        data: registrationData,
                        borderColor: '#2563eb',
                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 2,
                        pointBackgroundColor: '#2563eb',
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            grid: { borderDash: [4, 4] },
                            ticks: { font: { size: 11 } }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 11 } }
                        }
                    }
                }
            });

            // Doughnut Chart - Member Status Breakdown
            const memberCtx = document.getElementById('memberDistributionChart').getContext('2d');
            const memberStats = @json($memberStatsData);

            new Chart(memberCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Active', 'Pending', 'Inactive'],
                    datasets: [{
                        data: memberStats,
                        backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                        borderWidth: 0,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { boxWidth: 12, padding: 15, font: { size: 11 } }
                        }
                    },
                    cutout: '70%'
                }
            });
        });
    </script>
@endpush