@extends('layouts.app')

@section('title', 'Home')

@section('content')
    <!-- Hero Carousel -->
    <div class="relative" x-data="{ activeSlide: 0, slides: {{ $slides->count() }}, pause: false }" @mouseenter="pause = true" @mouseleave="pause = false">
        <!-- Auto Advance Logic -->
        <div x-init="setInterval(function() { if (!pause) { activeSlide = activeSlide === slides - 1 ? 0 : activeSlide + 1 } }, 5000)"></div>

        <!-- Slides -->
        <div class="relative h-64 md:h-96 overflow-hidden">
            @foreach($slides as $index => $slide)
            <div x-show="activeSlide === {{ $index }}" class="absolute inset-0 transition-opacity duration-500">
                <img src="{{ asset('uploads/slides/' . $slide->image_url) }}" alt="Temple View" class="w-full h-full object-cover">
            </div>
            @endforeach
        </div>

        <!-- Carousel Navigation -->
        <div class="absolute bottom-4 w-full flex justify-center space-x-2">
            <template x-for="(slide, index) in slides" :key="index">
                <button
                    @click="activeSlide = index"
                    :class="{'active': activeSlide === index}"
                    class="dot">
                </button>
            </template>
        </div>
    </div>

    @if($announcementConfig->is_enabled && $announcementConfig->message)
    <!-- Announcements Banner -->
    <div class="bg-yellow-50 border-y border-yellow-200">
        <div class="container mx-auto px-4 py-3">
            <div class="flex items-center justify-center">
                <div class="flex-shrink-0 mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z" clip-rule="evenodd" />
                    </svg>
                </div>
                <p class="font-medium text-yellow-800 text-sm md:text-base">
                    {{ $announcementConfig->message }}
                </p>
            </div>
        </div>
    </div>
    @endif

    
     @if($liveConfig->is_enabled && $liveConfig->youtube_id)
    <!-- YouTube Live -->
    <section class="py-8 bg-black">
        <div class="container mx-auto px-4">
            <div class="mb-4 text-center">
                <h2 class="text-2xl md:text-3xl font-bold text-white">{{ $liveConfig->title ?: 'Live from Temple' }}</h2>
                @if($liveConfig->description)
                    <p class="text-gray-300 mt-1">{{ $liveConfig->description }}</p>
                @else
                    <p class="text-gray-300 mt-1">Watch the live stream from Sri Vidya Saraswathi Shani Temples - Wargal</p>
                @endif
            </div>
            <div class="max-w-4xl mx-auto">
                <div class="relative w-full" style="padding-top: 45%;">
                    <iframe class="absolute top-0 left-0 w-full h-full rounded-lg shadow-lg"
                        src="https://www.youtube.com/embed/{{ $liveConfig->youtube_id }}"
                        title="YouTube Live Stream"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </section>
    @endif
   

    <!-- Temple Highlights -->
    @include('components.temple-highlights')

    <!-- Frequently Booked Sevas -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold sanskrit mb-2">Popular Sevas</h2>
                <p class="text-gray-600 max-w-xl mx-auto">Book your divine offerings and receive blessings from Sri Vidya Saraswathi Ammavari Devalayam</p>
            </div>

            <div id="featured-sevas" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                <!-- Loading spinner -->
                <div class="col-span-full flex justify-center items-center py-8">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-kumkum"></div>
                </div>
            </div>

            <div class="text-center mt-8">
                <a href="{{ route('sevas.index') }}" class="inline-flex items-center text-kumkum hover:text-red-800 font-medium">
                    View All Sevas
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Temple Timings -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                <div class="grid grid-cols-1 md:grid-cols-2">
                    <div class="p-6 md:p-8">
                        <h2 class="text-2xl font-bold mb-4">Temple Timings</h2>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center border-b border-gray-200 pb-2">
                                <span class="font-medium">Morning Darshan <span class="text-xs text-gray-500 font-normal">(Monday to Thursday)</span></span>
                                <span>6:00 AM - 01:00 PM</span>
                            </div>
                            <div class="flex justify-between items-center border-b border-gray-200 pb-2">
                                <span class="font-medium">Morning Darshan <span class="text-xs text-gray-500 font-normal">(Fri, Sat & Sun)</span></span>
                                <span>6:00 AM - 02:00 PM</span>
                            </div>
                            <div class="flex justify-between items-center border-b border-gray-200 pb-2">
                                <span class="font-medium">Evening Darshan <span class="text-xs text-gray-500 font-normal">(Daily)</span></span>
                                <span>4:00 PM - 7:30 PM</span>
                            </div>
                            <div class="flex justify-between items-center pb-2">
                                <span class="font-medium">Aarti Times</span>
                                <span>6 AM, 12 PM, 7 PM</span>
                            </div>
                        </div>
                        <div class="mt-6">
                            <p class="text-xs text-gray-600">
                                * Temple timings may vary during special festivals and events. Please check the events page for updates.
                            </p>
                        </div>
                    </div>

                    <div class="bg-gray-100 p-6 md:p-8 flex flex-col justify-center">
                        <h3 class="text-xl font-bold mb-4">Plan Your Visit</h3>
                        <p class="text-gray-700 mb-6">
                            Located just 20km from the city center, our temple is easily accessible by public transport. Free parking available for devotees.
                        </p>
                        <div class="flex space-x-4">
                            <a href="{{ route('travel') }}" class="explore-history-btn inline-flex items-center px-8 py-3 rounded-lg font-medium">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                                </svg>
                                Directions
                            </a>
                            <a href="{{ route('contact') }}" class="btn-primary px-4 py-2 rounded-md font-medium flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                                </svg>
                                Contact
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch('{{ route("sevas.featured") }}')
            .then(response => response.json())
            .then(data => {
                document.getElementById('featured-sevas').innerHTML = data.cards;
            });
    });
</script>
@endpush