@extends('frontend.layouts.app')
@section('title', 'Field Activities ')
@section('meta', content: 'Field Activities Page Description')
@section('content')


    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">
                        {{ __('field-activities.field_activities') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">{{ __('field-activities.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <span class="text-white font-bold">{{ __('field-activities.field_activities') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- banner-section -->

    <!-- content -->
    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <!-- Heading Section -->
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
            <div>
                <!-- Subtitle -->
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __('field-activities.on_the_ground') }}

                </p>

                <!-- Main Title -->
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#297945]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="gallery-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#gallery-pattern)" width="52" height="24"></rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                            {{ __('field-activities.field_activities') }}
                        </span>
                    </span>
                </h2>
            </div>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto text-gray-700">
                {{ __('field-activities.field_activities_description') }}

            </p>


            <!-- Gallery Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @forelse($galleries as $gallery)
                    <div
                        class="bg-white border border-gray-200 rounded-xl shadow-md max-w-sm mx-auto sm:max-w-xs md:max-w-sm lg:max-w-md p-4 flex flex-col">
                        <a href="{{ route('galleryDetail', $gallery->slug) }}">
                            <img class="rounded-lg w-full h-48 object-cover"
                                src="{{ $gallery->cover_image ? asset($gallery->cover_image) : asset('assets/images/placeholder.jpg') }}"
                                alt="{{ $gallery->name_en ?? 'Gallery Image' }}" />
                        </a>

                        <div class="mt-4 flex flex-col justify-between flex-1">
                            <div class="mb-3 space-y-1">
                                <div class="flex items-center text-xs text-gray-500 gap-3 flex-wrap">
                                    <div class="flex items-center gap-1">
                                        <img src="{{ asset('assets/images/news-and-events/calender-svgrepo-com.png') }}"
                                            class="w-3 h-3 object-contain" alt="Date" />
                                        <span>{{ \Carbon\Carbon::parse($gallery->published_date)->format('d M, Y') }}</span>
                                    </div>
                                    @if ($gallery->district)
                                        <div class="flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-gray-500"
                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M17.657 16.657L13.414 12.414M15 10a5 5 0 11-10 0 5 5 0 0110 0z" />
                                            </svg>
                                            <span>{{ $gallery->district }}</span>
                                        </div>
                                    @endif
                                </div>
                                <h3
                                    class="text-lg font-semibold text-gray-800 hover:text-primary transition-colors duration-200">
                                    {{ app()->getLocale() == 'np' ? $gallery->name_np : $gallery->name_en }}
                                </h3>
                            </div>

                            <div class="mt-auto">
                                <a href="{{ route('field.activities.detail', $gallery->slug) }}"
                                    class="block text-center text-sm font-medium text-primary border-2 border-primary hover:bg-primary hover:text-white transition-all ease-in-out px-4 py-2">
                                    {{ __('field-activities.view_more') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-gray-500 col-span-full">
                        {{ __('field-activities.no_field_activity_galleries_found') }}
                    </p>
                @endforelse

            </div>
            <!-- /Gallery Grid -->
        </div>
    </section>
@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush