@extends('home_layout.master_sidebar')

@section('page_styles')
    <style>
        .events-header {
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            text-align: center;
        }
        .events-header .stat {
            flex: 1;
        }
        .events-header .stat h3 {
            font-size: 2em;
            color: #00bcd4;
            margin: 0;
        }
        .events-header .stat p {
            color: #6c757d;
            font-size: 0.9em;
            margin: 5px 0;
        }
        .events-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .events-table th, .events-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }
        .events-table th {
            color: #6c757d;
            font-weight: normal;
        }
        .events-table td .event-status {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8em;
            font-weight: bold;
            background-color: #e8f5e9;
            color: #388e3c;
        }
        .event-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
    </style>
@stop

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

@section('content')
    <div class="container-fluid">
        <!-- Summary Stats -->
        <div class="events-header">
            <div class="stat">
                <h3>5</h3>
                <p>events<br>in next 180 days</p>
            </div>
            <div class="stat">
                <h3>27</h3>
                <p>booked<br>in past 365 days</p>
            </div>
            <div class="stat">
                <h3>19</h3>
                <p>active</p>
            </div>
            <div class="stat">
                <h3>44</h3>
                <p>archived</p>
            </div>
        </div>

        <!-- Events Table -->
        <table class="events-table">
            <thead>
            <tr>
                <th>Event</th>
                <th>Attendee Type</th>
                <th>Event Start</th>
                <th>Event End</th>
                <th>Day</th>
                <th>Booked</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody>
            @if($events)
                @foreach($events as $event)
                    <tr>
                        <td>
                            <div style="display: flex; align-items: center;">
                                <!-- Placeholder icon, replace with actual if available -->
                                <img src="https://via.placeholder.com/40" class="event-icon" alt="Event Icon">
                                <div>
                                    <strong>{{ $event->getSummary() }}</strong><br>
                                </div>
                            </div>
                        </td>
                        <td>Hosts and Guests</td>
                        <td>{{ \Carbon\Carbon::parse($event->getStart()->getDateTime() ?: $event->getStart()->getDate())->format(Auth::user()->date_format . ' ' . Auth::user()->time_format) }}</td>
                        <td>{{ \Carbon\Carbon::parse($event->getEnd()->getDateTime() ?: $event->getEnd()->getDate())->format(Auth::user()->date_format . ' ' . Auth::user()->time_format) }}</td>
                        <td>{{ \Carbon\Carbon::parse($event->getStart()->getDateTime() ?: $event->getStart()->getDate())->format('D') }}</td>
                        <td>{{ \Carbon\Carbon::now()->format(Auth::user()->date_format) }}</td>
                        <td><span class="event-status">Active</span></td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="7" style="text-align: center;">No upcoming events found.</td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>
@stop