@extends('home_layout.master_sidebar')

@section('page_styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .stat-card {
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }
        .stat-card h3 {
            font-size: 2em;
            margin: 0;
        }
        .stat-card p {
            color: #6c757d;
        }
        .chart-container {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
@stop

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

@section('content')
    <div class="container-fluid">
        <div class="row mb-4">
            <!-- Statistics cards -->
            <div class="col-md-3">
                <div class="stat-card bg-primary text-white">
                    <h3>42</h3>
                    <p>Created events</p>
                    <small>+2 (5%) vs prior 30 days</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-success text-white">
                    <h3>31</h3>
                    <p>Completed events</p>
                    <small>-3 (8.82%) vs prior 30 days</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-warning text-white">
                    <h3>3</h3>
                    <p>Rescheduled events</p>
                    <small>+2 (200%) vs prior 30 days</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-danger text-white">
                    <h3>10</h3>
                    <p>Canceled events</p>
                    <small>+5 (100%) vs prior 30 days</small>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Completed events trend -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Completed Events Trend</h5>
                    <div id="completedEventsTrend"></div>
                </div>
            </div>
            <!-- Event distribution by duration -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Event Distribution by Duration</h5>
                    <div id="eventDurationDistribution"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Popular events -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Popular Events</h5>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Event Name</th>
                            <th>Events</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>Meet with Mac RTM Intro</td><td>26</td></tr>
                        <tr><td>Real Time Marketing Discovery Call</td><td>22</td></tr>
                        <tr><td>Real Time Marketing Google Meet</td><td>8</td></tr>
                        <tr><td>30 Minute Call</td><td>6</td></tr>
                        <tr><td>Marketing Audit</td><td>2</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Popular times -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Popular Times</h5>
                    <div id="popularTimes"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Users with most events -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Users with the Most Events</h5>
                    <div id="mostEventsUsers"></div>
                </div>
            </div>
            <!-- Users with least events -->
            <div class="col-md-6 mb-4">
                <div class="chart-container">
                    <h5>Users with the Least Events</h5>
                    <div id="leastEventsUsers"></div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        // Completed Events Trend Chart
        Highcharts.chart('completedEventsTrend', {
            chart: { type: 'line' },
            title: { text: null },
            xAxis: { categories: ['Oct 3', 'Oct 9', 'Oct 15', 'Oct 21', 'Oct 27'] },
            yAxis: { title: { text: 'Event Volume' } },
            series: [{ name: 'Events', data: [1, 3, 7, 5, 2] }]
        });

        // Event Duration Distribution Chart
        Highcharts.chart('eventDurationDistribution', {
            chart: { type: 'bar' },
            title: { text: null },
            xAxis: { categories: ['30 min', '45 min', '60 min'] },
            yAxis: { title: { text: 'Event Volume' } },
            series: [{ name: 'Duration', data: [28, 5, 8] }]
        });

        // Popular Times Chart
        Highcharts.chart('popularTimes', {
            chart: { type: 'column' },
            title: { text: null },
            xAxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
            yAxis: { title: { text: 'Event Volume' } },
            series: [{ name: 'Times', data: [5, 15, 28, 18, 10, 0, 4] }]
        });

        // Users with Most Events Chart
        Highcharts.chart('mostEventsUsers', {
            chart: { type: 'bar' },
            title: { text: null },
            xAxis: { categories: ['Mac Canali', 'Nikki Muyaert', 'Courtlyn Saxby', 'Paul Stinnemetz'] },
            yAxis: { title: { text: 'Event Volume' } },
            series: [{ name: 'Users', data: [40, 30, 20, 10] }]
        });

        // Users with Least Events Chart
        Highcharts.chart('leastEventsUsers', {
            chart: { type: 'bar' },
            title: { text: null },
            xAxis: { categories: ['Paul Stinnemetz', 'Courtlyn Saxby', 'Nikki Muyaert', 'Mac Canali'] },
            yAxis: { title: { text: 'Event Volume' } },
            series: [{ name: 'Users', data: [10, 5, 3, 1] }]
        });
    </script>
@stop