@extends('frontend.layouts.partials.app')

@section('title', 'Home')

@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

@section('content')
    <section class="h-[250px] p-10 text-white bg-cover bg-center"
        style="background-image: url('{{ asset('assets/img/year.png') }}');">
    </section>

    <section class="-mt-16 mb-10 w-full flex justify-center">
        <div class="p-10 flex flex-col space-y-8 bg-white shadow-xl rounded-md w-[1116px] ">
            <div class=" text-[#004d6e] flex justify-center flex-row p-4 rounded-t-lg">
                <p class="text-4xl font-extrabold text-[#004d6e]">
                    Gallery </p>
            </div>

            <div class="container mx-auto">
                <div class="flex justify-center">
                    <div class="w-full mx-auto">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            @foreach ($galleries as $i => $img)
                                <div class="group relative overflow-hidden rounded-2xl bg-gray-200 cursor-pointer aspect-square shadow-sm hover:shadow-xl transition"
                                    onclick="openLightbox({{ $i }})">
                                    <img src="{{ $img }}"
                                        class="w-full h-full object-cover group-hover:scale-105 transition duration-500" />
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ================= LIGHTBOX ================= --}}
    <div id="lightbox" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 backdrop-blur-sm">

        <div class="relative w-full h-full flex flex-col overflow-hidden">

            {{-- Top bar --}}
            <div class="absolute top-0 left-0 w-full flex items-center justify-between px-4 sm:px-6 py-4 z-30">
                <span id="lb-counter" class="text-white/80 text-sm"></span>

                <button onclick="closeLightbox()"
                    class="w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 flex items-center justify-center text-white text-xl shadow-lg">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            {{-- Image container --}}
            <div class="flex-1 flex items-center justify-center relative w-full h-full">

                {{-- Prev --}}
                <button onclick="prevPhoto()"
                    class="absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-black/50 hover:bg-black/70 text-white text-3xl flex items-center justify-center shadow-lg transition">
                    <i class="fas fa-angle-left"></i>
                </button>

                {{-- IMAGE --}}
                <img id="lb-img"
                    class="max-h-[90vh] max-w-[90vw] object-contain rounded-xl shadow-2xl transition-all duration-300">

                {{-- Next --}}
                <button onclick="nextPhoto()"
                    class="absolute right-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-black/50 hover:bg-black/70 text-white text-3xl flex items-center justify-center shadow-lg transition">
                    <i class="fas fa-angle-right"></i>
                </button>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const photos = @json($galleries);
        let current = 0;

        function openLightbox(index) {
            current = index;

            document.getElementById('lightbox').classList.remove('hidden');
            document.getElementById('lightbox').classList.add('flex');

            document.body.style.overflow = 'hidden';

            updateLightbox();
        }


        function closeLightbox() {
            const lb = document.getElementById('lightbox');

            lb.classList.add('hidden');
            lb.classList.remove('flex'); // ✅ FIX

            document.body.style.overflow = '';
        }


        function updateLightbox() {
            document.getElementById('lb-img').src =
                photos[current];

            document.getElementById('lb-counter').innerText =
                (current + 1) + ' / ' + photos.length;
        }

        function nextPhoto() {
            current = (current + 1) % photos.length;
            updateLightbox();
        }

        function prevPhoto() {
            current = (current - 1 + photos.length) % photos.length;
            updateLightbox();
        }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') nextPhoto();
            if (e.key === 'ArrowLeft') prevPhoto();
            if (e.key === 'Escape') closeLightbox();
        });

        document.getElementById('lightbox').addEventListener('click', function(e) {
            if (e.target.id === 'lightbox') {
                closeLightbox();
            }
        });
    </script>
@endsection