@extends('layouts.app')

@section('title', 'Temple History')

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <!-- Introduction -->
            <div class="max-w-4xl mx-auto text-center mb-12">
                <h1 class="text-4xl font-bold mb-6">Temple History</h1>
                <p class="text-gray-600 text-lg leading-relaxed">
                    Discover the divine history and spiritual significance of Sri Vidya Saraswathi Shani Temple, Wargal.
                    A sacred journey through time, witnessing centuries of devotion and divine grace.
                </p>
            </div>

            <!-- Timeline Section -->
            <div class="max-w-8xl mx-auto mb-16">
                <div class="relative">
                    <!-- Vertical Line -->
                    <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-red-700"></div>

                    <!-- Timeline Events -->
                    <div class="space-y-12">
                        <!-- Event 1 -->

                        <div class="relative">
                            <div class="flex items-center justify-center">
                                <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-8 h-8 bg-red-700 rounded-full border-4 border-white"></div>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row items-center md:justify-between">
                                <div class="md:w-5/12 mb-4 md:mb-0 md:pl-8 order-2 md:order-1">
                                    <img src="{{ asset('images/history/history1.jpeg') }}" alt="Major Renovation" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity" onclick="openLightbox(this.src)">
                                </div>
                                <div class="md:w-5/12 md:pr-8 text-left order-1 md:order-2">
                                    <div class="bg-white p-6 rounded-lg shadow-md">
                                        <h3 class="text-xl font-bold mb-2">Location for Temple</h3>
                                        <p class="text-gray-600 mb-4">After searching and evaluating many options to build temple, Wargal hill rock was finalized due to its historic significance where other centuries old temples were found and a historic SwambhuShanbhulingeswara Temple in a cave, which is more than hundred years old.</p>
                                        <span class="text-red-700 font-semibold">Year 1989</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Event 2 -->
                        <div class="relative">
                            <div class="flex items-center justify-center">
                                <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-8 h-8 bg-red-700 rounded-full border-4 border-white"></div>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row items-center md:justify-between">
                                <div class="md:w-5/12 mb-4 md:mb-0 md:pr-8 text-right order-1 md:order-1">
                                    <div class="bg-white p-6 rounded-lg shadow-md">
                                        <h3 class="text-xl font-bold mb-2">Temple Foundation</h3>
                                        <p class="text-gray-600 mb-4">Year 1989, Vibhava Nama Samvatsara, Shudha Panchami thidhi is when the foundation stone was laid to build the temple with a meagre amount of Rs 2700.</p>
                                        <span class="text-red-700 font-semibold">Year 1989</span>
                                    </div>
                                </div>
                                <div class="md:w-5/12 md:pl-8 order-2 md:order-2">
                                    <img src="{{ asset('images/history/history2.jpeg') }}" alt="Temple Foundation" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity" onclick="openLightbox(this.src)">
                                </div>
                            </div>
                        </div>

                        <!-- Event 3 -->
                        <div class="relative">
                            <div class="flex items-center justify-center">
                                <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-8 h-8 bg-red-700 rounded-full border-4 border-white"></div>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row items-center md:justify-between">
                                <div class="md:w-5/12 mb-4 md:mb-0 md:pl-8 order-2 md:order-1">
                                    <img src="{{ asset('images/history/history3.jpeg') }}" alt="Major Renovation" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity" onclick="openLightbox(this.src)">
                                </div>
                                <div class="md:w-5/12 md:pr-8 text-left order-1 md:order-2">
                                    <div class="bg-white p-6 rounded-lg shadow-md">
                                        <h3 class="text-xl font-bold mb-2">Temple Consecration</h3>
                                        <p class="text-gray-600 mb-4">Starting the construction with just Rs 2700, facing several uphill tasks the Sri Vidya Saraswathi Shani Temples - Wargal was consecrated in year 1992 Swasthisri Prajothopathi nama samvatsara maghashudha tryodashi by his Holiness Sri SriSri Vidya Narsimha Bharathi Swamy of Pushpagiri Peetham.</p>
                                        <span class="text-red-700 font-semibold">Year 1992</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Event 4 -->
                        <div class="relative">
                            <div class="flex items-center justify-center">
                                <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-8 h-8 bg-red-700 rounded-full border-4 border-white"></div>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row items-center md:justify-between">
                                <div class="md:w-5/12 mb-4 md:mb-0 md:pr-8 text-right order-1 md:order-1">
                                    <div class="bg-white p-6 rounded-lg shadow-md">
                                        <h3 class="text-xl font-bold mb-2">Affiliation to Kanchi Kamakoti Peetham</h3>
                                        <p class="text-gray-600 mb-4">In year 1999 -Under the guidance of BrahmasriYayavaram Chandrasekhar Sharma, the temple committee unanimously opted to bring the temple affiliated to Sri Kanchi KamakotiPeetham and all the rituals and customs are undertaken as per the guidance and approval of the Kanchi KamakotiPeetham.</p>
                                        <span class="text-red-700 font-semibold">Year 1999</span>
                                    </div>
                                </div>
                                <div class="md:w-5/12 md:pl-8 order-2 md:order-2">
                                    <img src="{{ asset('images/history/history4.jpeg') }}" alt="First Brahmotsavam" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity" onclick="openLightbox(this.src)">
                                </div>
                            </div>
                        </div>

                        <!-- Event 5 -->
                        <div class="relative">
                            <div class="flex items-center justify-center">
                                <div class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <div class="w-8 h-8 bg-red-700 rounded-full border-4 border-white"></div>
                                </div>
                            </div>
                            <div class="flex flex-col md:flex-row items-center md:justify-between">
                                <div class="md:w-5/12 mb-4 md:mb-0 md:pl-8 order-2 md:order-1">
                                    <img src="{{ asset('images/history/history5.jpeg') }}" alt="Major Renovation" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition-opacity" onclick="openLightbox(this.src)">
                                </div>
                                <div class="md:w-5/12 md:pr-8 text-left order-1 md:order-2">
                                    <div class="bg-white p-6 rounded-lg shadow-md">
                                        <h3 class="text-xl font-bold mb-2">Sri Sharadha Vaidhika Smartha Vidyalayam</h3>
                                        <p class="text-gray-600 mb-4">Under the guidance of Late Sri BrahmasriMookeralla Prabhakar Sharma and blessings of His Holiness Sri SriSriJayandra Saraswathi Swamigal& Sri SriSri Shankara Vijayendra Saraswathi , a Smartha Vedapatashala is started on 10th November- 1999, Sri Bahudanya Samvatsara Karthika Shudha Panchami. Over the last 25yrs, hundreds of students have undergone the Panchadasa Samskaras and successfully passed out.</p>
                                        <span class="text-red-700 font-semibold">Year 1999</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Historical Events Section -->
            <div class="max-w-6xl mx-auto mb-16">
                <h2 class="text-3xl font-bold text-center mb-8">Key Historical Events</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach([
                        [
                            'title' => 'Lakshmi Ganapathi Temple',
                            'description' => 'Sri Lakshmi Ganapathi Temple was consecrated by Sri SriSri Shankara Vijayendra Saraswathi Swamy of Sri Kanchi KamakotiPeetham and foundation for Nitya Annadanasatram was laid.',
                            'year' => 'Year 2001',
                            'image' => 'history6.jpeg'
                        ],
                        [
                            'title' => 'Kalyana Venkateshwara Swamy Temple',
                            'description' => 'Sri Sridevi BhoodeviSamethaKalyana Venkateshwara Swamy & Sri Valli DevasenaSamethaSubrahmanya Swamy Temple were consecrated by Sri SriSri Vidya Shankara Bharathi Swamy of PushpagiriPeetham, Sri SriSriMadhavananda Saraswathi Swamy of Rangampet& Sri SriSriVidyaranya Bharathi Swamy of HampiPeetham.',
                            'year' => 'Year 2021',
                            'image' => 'history7.jpeg'
                        ],
                        [
                            'title' => 'Shankara Matham',
                            'description' => 'Sri Sri Sri Vijayandra Saraswathi Swamy of Kanchi KamakotiPeetham had consecrated the Shankara Matham which was built in record time of 4 months.',
                            'year' => 'Year 2023',
                            'image' => 'history8.jpeg'
                        ],
                        [
                            'title' => 'Sri Chandramouleshwara Swamy Temple',
                            'description' => 'Construction of Sri Chandramouleshwara Swamy temple is about to be completed in couple of months.',
                            'year' => 'Year 2024',
                            'image' => 'history9.jpeg'
                        ]
                    ] as $event)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <img src="{{ asset('images/history/' . $event['image']) }}"
                                alt="{{ $event['title'] }}"
                                class="w-full h-48 object-cover cursor-pointer hover:opacity-90 transition-opacity"
                                onclick="openLightbox(this.src)">
                            <div class="p-6">
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="text-xl font-bold">{{ $event['title'] }}</h3>
                                    <span class="text-red-700 font-semibold text-sm">{{ $event['year'] }}</span>
                                </div>
                                <p class="text-gray-600">{{ $event['description'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Image Gallery -->
            <div class="max-w-6xl mx-auto">
                <h2 class="text-3xl font-bold text-center mb-8">Temple Gallery</h2>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    @foreach([
                        'gallery1.jpeg' => 'Temple Front View',
                        'gallery2.jpeg' => 'Aerial View',
                        'gallery3.jpeg' => 'Temple Interior',
                        'gallery4.jpeg' => 'Festival Celebration',
                        'gallery5.jpeg' => 'Traditional Ritual',
                        'gallery6.jpeg' => 'Temple Architecture',
                        'gallery7.jpeg' => 'Ancient Sculpture',
                        'gallery8.jpeg' => 'Evening Aarti'
                    ] as $image => $caption)
                        <div class="relative group cursor-pointer" onclick="openLightbox('{{ asset('images/gallery/' . $image) }}')">
                            <img src="{{ asset('images/gallery/' . $image) }}"
                                alt="{{ $caption }}"
                                class="w-full h-40 object-cover rounded-lg">
                            <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
                                <p class="text-white text-center text-sm px-2">{{ $caption }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Lightbox -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 hidden z-50" onclick="closeLightbox()">
        <div class="absolute top-4 right-4">
            <button class="text-white text-2xl" onclick="closeLightbox()">&times;</button>
        </div>
        <div class="flex items-center justify-center h-full">
            <img id="lightbox-image" src="" alt="Lightbox Image" class="max-h-[90vh] max-w-[90vw] object-contain">
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function openLightbox(imageSrc) {
        document.getElementById('lightbox-image').src = imageSrc;
        document.getElementById('lightbox').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeLightbox() {
        document.getElementById('lightbox').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Close lightbox with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeLightbox();
        }
    });
</script>
@endpush