@extends('layouts.user')
@section('header')
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        #hero {
            /* Hero Background menggunakan Overlay Gelap agar Teks Emas Menyala */
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('{{asset('user/images/Tugu-Jogja.png')}}') center center;
            background-size: cover;
            height: 60vh !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        body {
            background-color: #0a0e14; /* Deep Dark Theme */
            color: #e0e0e0;
            font-family: 'Poppins', sans-serif;
        }

        h1, h2, .font-playfair {
            font-family: 'Playfair Display', serif;
        }

        /* Gallery Style */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 215, 0, 0.2); 
            transition: all 0.4s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            background: #161b22;
        }

        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2); 
            border-color: rgba(255, 215, 0, 0.6);
        }

        .gallery-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform 0.6s ease;
            display: block;
        }

        .gallery-item:hover .gallery-img {
            transform: scale(1.1);
        }

        /* Overlay Text */
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.95));
            padding: 25px 20px;
            opacity: 1;
        }

        .gallery-title {
            color: #ffd700; /* Diamond Gold */
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 5px;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        }

        /* Search Bar Elegant */
        .search-box {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50px;
            padding: 5px 20px;
            display: flex;
            align-items: center;
        }

        .search-box input {
            background: transparent !important;
            color: white !important;
            border: none !important;
            box-shadow: none !important;
        }

        .search-box input::placeholder {
            color: #888;
        }

        .recent-card {
            background: rgba(255, 255, 255, 0.03);
            border-left: 3px solid #ffd700;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
            transition: 0.3s;
        }

        .recent-card:hover {
            background: rgba(255, 215, 0, 0.1);
            padding-left: 20px;
        }
    </style>    
@endsection

@section('hero')
    <div class="text-center">
        <h1 class="text-white" style="font-size: 3.5rem; text-shadow: 0 0 20px rgba(255,215,0,0.4);">Diamond Lightning Gallery</h1>
        <p class="italic text-light" style="font-family: 'Playfair Display'; font-size: 1.2rem;">"Illuminating Your Eternal Moments with Elegance"</p>
    </div>
@endsection

@section('content')  
<section id="gallery-section" class="py-5">
    <div class="container wow fadeIn">
        <div class="row">
            <div class="col-lg-9">
                <div class="row">
                    {{-- Perbaikan: Menggunakan variabel $galleries dari Controller --}}
                    @forelse ($galleries as $gallery)
                    <div class="col-md-6">
                        <div class="gallery-item">
                            {{-- Route diarahkan ke detail project (jika ada) atau tetap di gallery --}}
                            <a href="#">
                                @if($gallery->image)
                                    {{-- Perbaikan: Langsung panggil string Base64 dari database --}}
                                    <img src="{{ $gallery->image }}" class="gallery-img" alt="{{ $gallery->title }}">
                                @else
                                    <img src="{{ asset('user/images/default-wedding.jpg') }}" class="gallery-img" alt="Default">
                                @endif
                                
                                <div class="gallery-overlay">
                                    <div class="gallery-title">{{ $gallery->title }}</div>
                                    <small class="text-white-50">
                                        <i class="fa fa-calendar-o mr-1"></i> 
                                        {{ $gallery->created_at->format('M d, Y') }}
                                    </small>
                                </div>
                            </a>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5">
                        <h4 class="text-muted">No inspirations found in the gallery.</h4>
                    </div>
                    @endforelse
                </div>

                {{-- Pagination Styling --}}
                <div class="d-flex justify-content-center mt-4">
                    {{ $galleries->links() }}
                </div>
            </div>

            <div class="col-lg-3">
                <div class="sidebar-sticky">
                    <!-- <form action="{{ route('gallery.index') }}" method="GET" class="mb-5">
                        <div class="search-box">
                            <input type="text" name="keyword" value="{{ Request::get('keyword') }}" placeholder="Search inspirations..." class="form-control">
                            <button type="submit" class="btn text-warning"><i class="fa fa-search"></i></button>
                        </div>
                    </form> -->

                    <h5 class="font-playfair text-warning mb-4" style="letter-spacing: 2px; border-bottom: 1px solid #ffd700; display: inline-block; padding-bottom: 5px;">LATEST PROJECT</h5>
                    
                    {{-- Recents diambil dari data terbaru --}}
                    @foreach ($galleries->take(5) as $recent)
                        <div class="recent-card">
                            <a href="#" class="text-white d-block" style="text-decoration:none; font-size: 14px;">
                                <i class="fa fa-magic text-warning mr-2"></i> {{ Str::limit($recent->title, 40) }}
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection