@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 $gallery)
                                @php
                                    $images = json_decode($gallery->images, true) ?? [];
                                @endphp

                                <a href="{{ route('gallery-list', $gallery->slug) }}"
                                    class="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-lg transition border border-gray-100">
                                    <div class="relative overflow-hidden aspect-[4/3] bg-gray-100">
                                        <div class="grid grid-cols-2 grid-rows-2 w-full h-full gap-0.5">
                                            @foreach (array_slice($images, 0, 3) as $img)
                                                <img src="{{ asset('storage/' . $img) }}"
                                                    class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                            @endforeach

                                            @if (isset($images[3]))
                                                <div class="relative w-full h-full">
                                                    <img src="{{ asset('storage/' . $images[3]) }}"
                                                        class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                                                    @if (count($images) > 4)
                                                        <div
                                                            class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                                            <span
                                                                class="text-white text-sm font-bold">+{{ count($images) - 4 }}
                                                                more</span>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <span
                                            class="absolute top-3 left-3 bg-white/90 text-xs font-semibold text-gray-700 px-2 py-1 rounded-full">
                                            {{ count($images) }} Photos
                                        </span>
                                    </div>
                                    <div class="p-4">
                                        <h3 class="font-semibold text-gray-900 group-hover:text-primary transition">
                                            {{ $gallery->name }}</h3>
                                        <p class="text-xs text-gray-400 mt-1">{{ $gallery->created_at->format('F d, Y') }}
                                        </p>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection