@extends('Frontend.layout.main')
@section('title', 'Gallery')

@section('content')
<section class="page-banner">
    <div class="banner-wave wave-top">
        <svg viewBox="0 0 1440 110" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0,28 C80,8 190,63 330,38 C640,50 565,60 710,30 C855,10 965,65 1230,58 L1740,0 L0,0 Z"
                fill="#f5fff6" />
            <path
                d="M0,28 C80,8 190,63 330,28 C470,-7 565,58 710,28 C855,8 965,63 1130,28 C1270,-7 1370,58 1440,28 L1440,64 C1370,94 1270,44 1130,64 C965,94 855,44 710,64 C565,94 470,44 330,64 C190,94 80,44 0,64 Z"
                fill="#39B54A" />
        </svg>
    </div>

    <div class="banner-content">
        <h1>Gallery</h1>
    </div>

    <div class="banner-wave wave-bottom">
        <svg viewBox="0 0 1440 110" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0,62 C160,25 320,95 480,65 C640,38 800,92 960,62 C1120,32 1280,88 1440,58 L1440,110 L0,110 Z"
                fill="#39B54A" />
            <path
                d="M0,80 C160,43 320,110 480,82 C640,55 800,110 960,80 C1120,50 1280,106 1440,76 L1440,110 L0,110 Z"
                fill="#f5fff6" />
        </svg>
    </div>
</section>



<section class="container" style="padding: 50px 10%;">
    <div class="card-container layout-3">
@forelse($galleries as $gallery) 
        <a href="{{ route('gallery.inner', $gallery->id) }}" class="card gallery-card" style="padding: 15px !important; text-decoration: none; color: inherit;">
               @if(!empty($gallery->photo))
                <img src="{{ asset('storage/gallery_images/' . $gallery->photo) }}"
                    loading="lazy" alt="{{ $gallery->title }}" class="card-b-img">
            @else
                <img src="{{ asset('Frontend/assets/images/eggs-bg.jpg') }}"
                    loading="lazy" alt="{{ $gallery->title }}" class="card-b-img">
            @endif
            
            <div style="text-align: center; padding-top: 15px;">
                <h3 class="text-xl font-semibold" style="margin:0; ">{{ $gallery->title }}</h3>
                <p class="text-sm-body text-primary">{{ $gallery->details->count() }} Photo</p>
                 </div>
        </a>
        @empty
            <p class="text-grey">No galleries found.</p>
        @endforelse
    </div>
</section>
@endsection