@extends('home_layout.master_sidebar')

@section('page_styles')
    <!-- Font Awesome, FullCalendar CSS (Bootstrap 5 is assumed loaded in your master layout) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet" />
    <style>
        /* General widget card styling */
        .widget-card {
            border-radius: 8px;
            background: #fff;
            border: 1px solid #e3e6f0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .widget-card .card-body {
            padding: 20px;
        }
        .widget-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            font-weight: 600;
            color: #333;
        }
        /* Stat Cards */
        .stat-card {
            border-radius: 8px;
            background: #fff;
            border: 1px solid #e3e6f0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 20px;
            text-align: center;
            min-height: 120px;
        }
        /* Full width Calendar container */
        .calendar-container {
            border-radius: 8px;
            background: #fff;
            border: 1px solid #e3e6f0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            min-height: 600px;
            padding: 20px;
        }
        /* FullCalendar overrides */
        .fc {
            font-family: 'Poppins', sans-serif;
        }
        .fc-event {
            background-color: #09dca4 !important;
            border: none !important;
            color: #fff !important;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Dashboard',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => route('dashboard')],
           ['title' => 'Dashboard', 'link' => route('dashboard')]
       ]
    ])
@stop

@section('content')
    <div class="container-fluid">
        <!-- Stat Cards Row -->
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="stat-card">
                    <h3 class="fw-bold text-primary">{{ $createdEvents }}</h3>
                    <p class="mb-0">Created Services</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <h3 class="fw-bold text-success">{{ $completedEvents }}</h3>
                    <p class="mb-0">Completed Bookings</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <h3 class="fw-bold text-warning">{{ $rescheduledEvents }}</h3>
                    <p class="mb-0">Rescheduled Bookings</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <h3 class="fw-bold text-danger">{{ $canceledEvents }}</h3>
                    <p class="mb-0">Canceled Bookings</p>
                </div>
            </div>
        </div>

        <!-- Full Width Calendar Row -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="calendar-container">
                    <div class="widget-title">Booking Calendar</div>
                    <div id="calendar"></div>
                </div>
            </div>
        </div>

        <!-- Two Charts Row: Bookings per User & Popular Booking Days -->
        <div class="row g-4 mb-4">
            <div class="col-md-6">
                <div class="widget-card h-100">
                    <div class="card-body">
                        <div class="widget-title">Bookings per User</div>
                        <div id="bookingsPerUserChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="widget-card h-100">
                    <div class="card-body">
                        <div class="widget-title">Popular Booking Days</div>
                        <div id="popularTimesChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Popular Events Table -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="widget-card">
                    <div class="card-body">
                        <div class="widget-title">Popular Events</div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered align-middle">
                                <thead class="table-light">
                                <tr>
                                    <th>Event Name</th>
                                    <th>Bookings</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($popularEvents as $pe)
                                    <tr>
                                        <td>{{ $pe->event->event_name ?? 'N/A' }}</td>
                                        <td>{{ $pe->total }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Users by Bookings Chart -->
        <div class="row g-4">
            <div class="col-12">
                <div class="widget-card">
                    <div class="card-body">
                        <div class="widget-title">Top Users by Bookings</div>
                        <div id="mostEventsUsersChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_scripts')
    <!-- Highcharts and FullCalendar JS -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // FullCalendar initialization with improved styling.
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: {!! json_encode($calendarEvents) !!},
                eventColor: '#09dca4',
                eventTextColor: '#ffffff'
            });
            calendar.render();

            // Bookings per User Chart
            Highcharts.chart('bookingsPerUserChart', {
                chart: { type: 'column', backgroundColor: null },
                title: { text: null },
                credits: { enabled: false },
                colors: ['#0de0fe', '#09dca4', '#f39c12', '#e63333', '#9368e9'],
                xAxis: {
                    categories: {!! json_encode($bookingsPerUser->map(function($b) {
                        return $b->user->name ?? ('User ' + $b->user_id);
                    })->toArray()) !!}
                },
                yAxis: { title: { text: 'Number of Bookings' } },
                series: [{
                    name: 'Bookings',
                    data: {!! json_encode($bookingsPerUser->pluck('total')->toArray()) !!}
                }]
            });

            // Popular Booking Days Chart
            Highcharts.chart('popularTimesChart', {
                chart: { type: 'column', backgroundColor: null },
                title: { text: null },
                credits: { enabled: false },
                colors: ['#00e65b', '#028ee1', '#09dca4', '#f39c12', '#e63333'],
                xAxis: {
                    categories: {!! json_encode($popularTimes->pluck('day')->toArray()) !!}
                },
                yAxis: { title: { text: 'Bookings' } },
                series: [{
                    name: 'Bookings',
                    data: {!! json_encode($popularTimes->pluck('total')->toArray()) !!}
                }]
            });

            // Top Users by Bookings Chart
            Highcharts.chart('mostEventsUsersChart', {
                chart: { type: 'bar', backgroundColor: null },
                title: { text: null },
                credits: { enabled: false },
                colors: ['#09dca4', '#f39c12', '#00e65b', '#e63333'],
                xAxis: {
                    categories: {!! json_encode($mostEventsUsers->map(function($b) {
                        return $b->user->name ?? ('User ' + $b->user_id);
                    })->toArray()) !!}
                },
                yAxis: { title: { text: 'Bookings' } },
                series: [{
                    name: 'Bookings',
                    data: {!! json_encode($mostEventsUsers->pluck('total')->toArray()) !!}
                }]
            });
        });
    </script>
@stop