@extends('front.layout')

@section('header')
    <link rel="stylesheet" href="/front/assets/css/pages/index.css" />
    <title>{{ trans('translate.gallery_title') }}</title>
    <style>

        @media screen and (min-width: 768px) {
            .image-banner::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 70%;
                background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
                pointer-events: none;
            }
            .image-banner img{
                height: 400px;
                object-fit: cover;
            }
        }

        @media screen and (max-width: 768px) {
            .image-banner img{
                height: 490px;
                object-fit: cover;
                width: 100% !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="image-banner">
        @php
            $desktopSrc = '6.jpg';
            $mobileSrc =  '4.png';
        @endphp
        <picture>
            <source srcset="/{{ $mobileSrc }}" media="(max-width: 600px)">
            <source srcset="/{{ $desktopSrc }}">
            <img src="/{{ $desktopSrc }}" class="d-block w-100" alt="{{ trans('translate.gallery_title') }}">
        </picture>

            <div>
                <h1>
                    <div class="container">{{ trans('translate.gallery_title') }}</div>
                </h1>
            </div>

    </div>

    <div class="container p-2 pt-0">
        <section class="home-gallery">
            <header class="section-title">
                <div class="d-flex align-items-center justify-content-between">
                    <h2>
                        {{ trans('translate.gallery_title') }}
                    </h2>
                </div>
            </header>

            <div class="home-gallery__contents">
                <div class="row">
                    @forelse($galleries as $item)
                        @php
                            $photos = json_decode($item->src,true) ?: [];
                        @endphp
                        <div class="col-12 col-md-3 home-gallery__content">
                            <div class="gallery-trigger" style="position: relative" data-gallery-id="gallery{{ $item->id }}">
                                @if(isset($photos[0]))
                                    <img src="/{{ $photos[0] }}" class="d-block w-100" alt="gallery" />
                                @endif
                                @if($item->description)
                                    <div class="gal-desc"><p>{{ $item->description }}</p></div>
                                @endif
                            </div>

                            <div class="gallery-images d-none" id="gallery{{ $item->id }}">
                                @foreach($photos as $photo)
                                    <img src="{{ $photo }}" />
                                @endforeach
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="alert alert-info">{{ trans('translate.no_data') ?? 'موردی یافت نشد.' }}</div>
                        </div>
                    @endforelse
                </div>
            </div>

            <div id="fullscreen-slider" class="full-gallery-overlay">
                <div class="owl-carousel full-gallery-slider"></div>
                <div id="slider-close"><i class="fas fa-times"></i></div>
            </div>
        </section>
    </div>
@endsection

@section('footer')
    <script src="/front/assets/js/index.js"></script>
@endsection