@extends('layouts.app3')

@section('title', 'Event Calendar - RAI University')

@section('content') 
    
    <style>
        body { font-family: Arial, sans-serif; margin: 0; background-color: #f8f9fa; line-height: 1.6; }
        .header { background-color: #2c3e50; color: white; padding: 2rem 0; text-align: center; }
        .container { /*max-width: 1200px;*/ margin: 0 auto; padding: 0 1rem; }
        .calendar-container { background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 2rem 0; overflow: hidden; }
        .calendar-header { background-color: #007bff; color: white; padding: 1rem; text-align: center; }
        .calendar-nav { display: flex; justify-content: space-between; align-items: center; }
        .nav-btn { background: rgba(255,255,255,0.2); border: none; color: white; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }
        .nav-btn:hover { background: rgba(255,255,255,0.3); }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
        .calendar-day-header { background-color: #f8f9fa; padding: 1rem; text-align: center; font-weight: bold; border-right: 1px solid #dee2e6; }
        .calendar-day { min-height: 100px; padding: 0.5rem; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; position: relative; }
        .calendar-day:nth-child(7n) { border-right: none; }
        .calendar-day.other-month { background-color: #f8f9fa; color: #6c757d; }
        .calendar-day.today { background-color: #e3f2fd; }
        .day-number { font-weight: bold; margin-bottom: 0.5rem; }
        .day-events { font-size: 0.8rem; }
        .event-item { background-color: #007bff; color: white; padding: 0.2rem 0.4rem; margin-bottom: 0.2rem; border-radius: 2px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .event-item:hover { background-color: #0056b3; }
        .event-item.featured { background-color: #ffc107; color: #212529; }
        .breadcrumb { background-color: #e9ecef; padding: 1rem 0; }
        .breadcrumb a { color: #007bff; text-decoration: none; }
        .btn { background-color: #007bff; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; display: inline-block; }
        .btn:hover { background-color: #0056b3; }
        .events-list { margin: 2rem 0; }
        .event-card { background: white; padding: 1rem; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .event-title { font-weight: bold; color: #2c3e50; }
        .event-meta { color: #6c757d; font-size: 0.9rem; }
    </style>
    <!-- Breadcumb -->
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('assets/img/bg/breadcumb-bg.jpg') }}" data-overlay="title" data-opacity="8">
        <div class="breadcumb-shape" data-bg-src="{{ asset('assets/img/bg/breadcumb_shape_1_1.png') }}"></div>
        <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px">
            <img src="{{ asset('assets/img/bg/breadcumb_shape_1_2.png') }}" alt="shape">
        </div>
        <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
            <img src="{{ asset('assets/img/bg/breadcumb_shape_1_3.png') }}" alt="shape">
        </div>
        <div class="container">
            <div class="breadcumb-content text-center">
                <h1 class="breadcumb-title">Our Events</h1>
                <ul class="breadcumb-menu">
                    <li><a href="/">Home</a></li>
                    <li>Events</li>
                </ul>
            </div>
        </div>
    </div>

   
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin: 2rem 0;">
            <h2>{{ now()->format('F Y') }}</h2>
            <a href="{{ route('events.index') }}" class="btn">📋 List View</a>
        </div>

        <div class="calendar-container">
            <div class="calendar-header">
                <div class="calendar-nav">
                    <button class="nav-btn" onclick="previousMonth()">‹ Previous</button>
                    <h3 id="current-month">{{ now()->format('F Y') }}</h3>
                    <button class="nav-btn" onclick="nextMonth()">Next ›</button>
                </div>
            </div>

            <div class="calendar-grid">
                <div class="calendar-day-header">Sun</div>
                <div class="calendar-day-header">Mon</div>
                <div class="calendar-day-header">Tue</div>
                <div class="calendar-day-header">Wed</div>
                <div class="calendar-day-header">Thu</div>
                <div class="calendar-day-header">Fri</div>
                <div class="calendar-day-header">Sat</div>

                @php
                    $currentDate = now();
                    $startOfMonth = $currentDate->copy()->startOfMonth();
                    $endOfMonth = $currentDate->copy()->endOfMonth();
                    $startOfCalendar = $startOfMonth->copy()->startOfWeek();
                    $endOfCalendar = $endOfMonth->copy()->endOfWeek();
                    
                    $calendarDays = [];
                    $day = $startOfCalendar->copy();
                    
                    while ($day <= $endOfCalendar) {
                        $calendarDays[] = $day->copy();
                        $day->addDay();
                    }
                @endphp

                @foreach($calendarDays as $day)
                    @php
                        $dayEvents = $events->filter(function($event) use ($day) {
                            return $event->start_date <= $day && 
                                   ($event->end_date ? $event->end_date >= $day : $event->start_date == $day);
                        });
                        
                        $isOtherMonth = $day->month !== $currentDate->month;
                        $isToday = $day->isToday();
                    @endphp
                    
                    <div class="calendar-day {{ $isOtherMonth ? 'other-month' : '' }} {{ $isToday ? 'today' : '' }}">
                        <div class="day-number">{{ $day->format('j') }}</div>
                        <div class="day-events">
                            @foreach($dayEvents->take(3) as $event)
                                <div class="event-item {{ $event->is_featured ? 'featured' : '' }}" 
                                     onclick="window.location.href='{{ route('events.show', $event) }}'"
                                     title="{{ $event->title }} - {{ $event->venue }}">
                                    {{ Str::limit($event->title, 15) }}
                                </div>
                            @endforeach
                            @if($dayEvents->count() > 3)
                                <div style="font-size: 0.7rem; color: #6c757d;">
                                    +{{ $dayEvents->count() - 3 }} more
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="events-list">
            <h3>Upcoming Events</h3>
            @foreach($events->take(10) as $event)
                <div class="event-card">
                    <div class="event-title">
                        <a href="{{ route('events.show', $event) }}" style="text-decoration: none; color: inherit;">
                            {{ $event->title }}
                        </a>
                        @if($event->is_featured)
                            <span style="background: #ffc107; color: #212529; padding: 0.2rem 0.4rem; border-radius: 2px; font-size: 0.7rem; margin-left: 0.5rem;">Featured</span>
                        @endif
                    </div>
                    <div class="event-meta">
                        📅 {{ $event->date_range }} 
                        @if($event->time_range) | 🕒 {{ $event->time_range }} @endif
                        | 📍 {{ $event->venue }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <script>
        function previousMonth() {
            // Implement month navigation if needed
            alert('Previous month navigation - implement with AJAX if needed');
        }

        function nextMonth() {
            // Implement month navigation if needed
            alert('Next month navigation - implement with AJAX if needed');
        }
    </script>
@endsection