@extends('layouts.bistro')

@push('styles')
<style>
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
@media (max-width: 767px) {
    .gallery-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.gallery-grid-item .item-container {
    overflow: hidden;
    position: relative;
}
.gallery-grid-item .item-container .image {
    position: relative;
    overflow: hidden;
}
.gallery-grid-item .item-container .image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
</style>
@endpush

@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-prostor-klasicna-postava.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">Galerija</h2>
                    <p>Pogledajte našu krčmu i jela</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Gallery Section -->
<section id="gallery" class="padding-top">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="heading text-center">Naša &nbsp; galerija</h2>
                <hr class="heading_space">
            </div>
        </div>
        @php
        $galleryImages = [
            ['image' => 'images/konoba/konoba-ulaz-nocna-hero.jpg', 'title' => 'Ulaz u restoran noću', 'desc' => 'Dobrodošli u Krčmu Petrić - jedinstveno mjesto uz sportski aerodrom', 'alt' => 'Ulaz u restoran Krčma Petrić Osijek - tradicionalna krčma uz aerodrom'],
            ['image' => 'images/konoba/konoba-sala-bijeli-stolnjaci.jpg', 'title' => 'Elegantna sala', 'desc' => 'Prostrana sala s bijelim stolnjacima za posebne prilike', 'alt' => 'Krčma Petrić sala s bijelim stolnjacima - elegantan prostor, Osijek'],
            ['image' => 'images/konoba/konoba-sala-proslave-elegantna.jpg', 'title' => 'Proslave i domjenke', 'desc' => 'Savršen prostor za vjenčanja, krštenja i obiteljska okupljanja', 'alt' => 'Elegantna sala za proslave - Krčma Petrić Osijek'],
            ['image' => 'images/konoba/konoba-enterijer-rustikalni-pec.jpg', 'title' => 'Rustikalni enterijer', 'desc' => 'Tradicionalna atmosfera s kamenom peći i autentičnim dekorom', 'alt' => 'Rustikalni enterijer Krčma Petrić - tradicionalna atmosfera s kamenom peći, Osijek'],
            ['image' => 'images/konoba/konoba-enterijer-stolovi-drvo.jpg', 'title' => 'Drveni stolovi', 'desc' => 'Topla i ugodna atmosfera uz prirodne materijale', 'alt' => 'Tradicionalni drveni stolovi - Krčma Petrić Osijek'],
            ['image' => 'images/konoba/konoba-enterijer-stolovi-jelovnici.jpg', 'title' => 'Tradicionalni dekor', 'desc' => 'Svaki detalj pažljivo odabran za autentičan doživljaj', 'alt' => 'Drveni stolovi Krčma Petrić s tradicionalnim dekorom, Osijek'],
            ['image' => 'images/konoba/konoba-sala-klasicna.jpg', 'title' => 'Klasična sala', 'desc' => 'Prostrana sala idealna za poslovne ručkove i obiteljska okupljanja', 'alt' => 'Klasična sala za ručak Krčma Petrić, Osijek'],
            ['image' => 'images/konoba/konoba-bar-kotaci-rustikalni.jpg', 'title' => 'Bar prostor', 'desc' => 'Rustikalni bar s bogatom ponudom pića i domaćih rakija', 'alt' => 'Bar prostor Krčma Petrić - rustikalni dizajn, Osijek'],
            ['image' => 'images/konoba/konoba-stol-postavljen-proslava.jpg', 'title' => 'Priprema za slavlje', 'desc' => 'Elegantno postavljen stol spreman za vašu proslavu', 'alt' => 'Elegantno postavljen stol za proslave - Krčma Petrić Osijek'],
            ['image' => 'images/konoba/konoba-prostor-klasicna-postava.jpg', 'title' => 'Klasična postava', 'desc' => 'Udoban prostor za opuštene obroke i druženja', 'alt' => 'Klasična postava stolova - Krčma Petrić Osijek'],
            ['image' => 'images/konoba/konoba-enterijer-slike-slavonske.jpg', 'title' => 'Slavonski motivi', 'desc' => 'Zidovi ukrašeni tradicijom i kulturom Slavonije', 'alt' => 'Krčma Petrić enterijer sa slavonskim motivima na zidovima, Osijek'],
            ['image' => 'images/konoba/konoba-ulaz-nocna-logo.jpg', 'title' => 'Noćna rasvjeta', 'desc' => 'Krčma Petrić vas poziva i u večernjim satima', 'alt' => 'Krčma Petrić ulaz noćna rasvjeta - Osijek'],
        ];
        @endphp
        <div class="gallery-grid">
            @foreach($galleryImages as $item)
            <div class="gallery-grid-item">
                <div class="item-container">
                    <div class="image">
                        <img src="{{ asset($item['image']) }}" alt="{{ $item['alt'] }}"/>
                        <div class="overlay">
                            <a class="fancybox overlay-inner" href="{{ asset($item['image']) }}" data-fancybox-group="gallery">
                                <i class="icon-eye6"></i>
                            </a>
                        </div>
                    </div>
                    <div class="gallery_content">
                        <h3>{{ $item['title'] }}</h3>
                        <p>{{ $item['desc'] }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="info_section paralax" style="background: url('{{ asset('images/konoba/konoba-prostor-klasicna-postava.jpg') }}') center/cover;">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="heading_space">Posjetite nas uživo</h2>
                <p class="heading_space detail">Rezervirajte stol i doživite autentične okuse Slavonije.</p>
                <a href="{{ route('reservations') }}" class="btn-common-white">Rezerviraj stol</a>
            </div>
        </div>
    </div>
</section>

@endsection