@extends('layouts.app')

@section('title', 'Mahostavams')

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold text-center mb-8">Temple Festivals & Events</h1>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @foreach($events as $event)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <img src="{{ $event['image'] }}" alt="{{ $event['name'] }}" class="w-full h-64 object-cover">
                        <div class="p-6">
                            <div class="flex justify-between items-start mb-4">
                                <h2 class="text-2xl font-bold">{{ $event['name'] }}</h2>
                                <div class="text-right">
                                    <div class="text-[#E0115F] font-semibold">{{ date('F j, Y', strtotime($event['date'])) }}</div>
                                    <div class="text-gray-500 text-sm">{{ $event['duration'] }}</div>
                                </div>
                            </div>

                            <p class="text-gray-600 mb-4">{{ $event['description'] }}</p>

                            <div class="border-t border-gray-200 pt-4">
                                <h3 class="text-sm font-semibold text-gray-700 mb-2">Highlights:</h3>
                                <ul class="space-y-1">
                                    @foreach($event['highlights'] as $highlight)
                                        <li class="flex items-start">
                                            <svg class="w-4 h-4 text-[#F4C430] mt-1 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                            </svg>
                                            <span class="text-gray-600 text-sm">{{ $highlight }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="mt-6">
                                <a href="{{ route('mahostavams.show', $event['slug']) }}" class="btn-primary px-4 py-2 rounded-md font-medium">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-12" id="upcoming-sevas-section">
                <h2 class="text-2xl font-bold mb-6">Upcoming Events/Sevas</h2>
                <div id="upcoming-sevas-list" class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 xl:grid-cols-4 gap-10"></div>
                <div id="upcoming-sevas-pagination" class="mt-8 flex justify-center"></div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    function loadUpcomingSevas(url = '{{ route('sevas.upcoming') }}') {
        $.get(url, function(data) {
            $('#upcoming-sevas-list').html(data.cards);
            $('#upcoming-sevas-pagination').html(data.pagination);
            $('#upcoming-sevas-pagination').find('a').on('click', function(e) {
                e.preventDefault();
                loadUpcomingSevas($(this).attr('href'));
            });
        });
    }
    $(document).ready(function() {
        loadUpcomingSevas();
    });
    </script>
    @endpush
@endsection