@extends('Client.layouts.layout')
@section('title', __('trans.gallery')  )
@section('content')



<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <ul class="breadcrumb wizard">
              <li class="completed"><a href="{{ route('client.home') }}">@lang('trans.home')</a></li>
              <li class="not-completed"><a href="javascript:void(0);">{{ __('trans.gallery')  }}</a></li>
            </ul>
        </div>
    </div>
    
    <div class="d-flex align-items-center justify-content-md-center" style="overflow-x: auto;">        
        <ul class="nav nav-pills px-0" style="display: contents;" role="tablist">
            <li class="nav-item my-2">
                <a class="nav-link active" data-bs-toggle="pill" href="#art_work">{{ __('trans.art_work') }}</a>
            </li>
            <li class="nav-item my-2">
                <a class="nav-link" data-bs-toggle="pill" href="#life_style">{{ __('trans.life_style') }}</a>
            </li>

        </ul>
    </div>

   <div class="tab-content">
        <div id="art_work" class="container tab-pane active">
            <div class="row">
                @forelse ($Gallery->where('type_id',1) as $Item)
                    <div class="col-6 col-md-4 col-lg-3 d-flex align-items-center justify-content-center my-2 mx-auto">
                        <a href="{{ asset($Item->image) }}" data-fancybox="gallery" class="h-100">
                          <img loading="lazy" src="{{ asset($Item->image) }}" alt="Image" style="width: 100%;height: auto;">
                        </a>
                    </div>
                @empty
                    <a class="text-center">
                      <img loading="lazy" src="{{ asset('empty.jpg') }}" alt="Image" style="max-width: 400px;height: auto;">
                    </a>
                @endforelse
            </div>
        </div>
        <div id="life_style" class="container tab-pane">
            <div class="row">
                @forelse ($Gallery->where('type_id',2) as $Item)
                    <div class="col-6 col-md-4 col-lg-3 d-flex align-items-center justify-content-center my-2 mx-auto">
                        <a href="{{ asset($Item->image) }}" data-fancybox="gallery" class="h-100">
                          <img loading="lazy" src="{{ asset($Item->image) }}" alt="Image" style="width: 100%;height: auto;">
                        </a>
                    </div>
                @empty
                    <a class="text-center">
                      <img loading="lazy" src="{{ asset('assets/img/empty.jpg') }}" alt="Image" style="max-width: 400px;height: auto;">
                    </a>
                @endforelse
            </div>
        </div>
   </div>
</div>


@endsection


@push('css')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
    <style>
        .nav-pills .nav-link {
            border-radius: 0px;
            min-width: 150px;
            color: var(--main--color);
            text-align: center;
            border: 1px solid var(--main--color);
            margin: 0px 5px;
        }
        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: #fff;
            background-color: var(--main--color);
            border-radius: 0px;
            min-width: 150px;
            text-align: center;
        }
    
    </style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        Fancybox.bind('[data-fancybox="gallery"]', {
          // Your custom options for a specific gallery
        });
    </script>
@endpush