@extends('layouts.site')

@section('content')

    @php
        /**/ [
            $name,
            $email,
            $phone,
            $whatsapp,
            $google_map_url,
            $addresss,
            $facebook,
            $instagram,
            $twitter,
            $youtube,
            $tiktok,
        ] = getGeneralSettings();
        $lang = app()->getLocale();
        $name = 'name_' . $lang;
        $details = 'details_' . $lang;

        $description = 'description_' . $lang;
        $img_alt = 'img_alt_' . $lang;
        $company_name = 'company_name_' . $lang;
    @endphp

   <!--Start Page Header-->
    <section class="page-header">
      <div class="page-header__bg" style="background-image: url({{ asset('assets/front/img/page.webp') }})">
        </div>
        <div class="container">
            <div class="page-header__inner text-center">
                <h2>{{ __('Gallery') }}</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('home_index') }}">{{ __('Home') }}</a></li>

                    <li><span class="icon-right-arrow-5"></span></li>
                    <li>
                       {{ __('Gallery') }}

                    </li>
                </ul>
            </div>
        </div>
        <svg class="wave" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="1" d="M0,40 Q360,10 720,30 T1440,40 L1440,50 L0,50Z">
            </path>
        </svg>
    </section>
    
 <!-- LightGallery CSS -->
<link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery-bundle.min.css" rel="stylesheet">
 
 <!--Start gallery -->
    <section class="services-details-page direction ">
        <div class="container">
            <div class="row" id="lightgallery">
                @if ($uploads && $uploads->count() > 0)
                             @foreach ($uploads as $upload)
                <div class="col-md-4 mmbb20 wow fadeInDown" data-wow-delay=".3s">
                    <div class="services-details-page__content1">
                        <div class="services-details-page__content-img1 cs_video_block cs_style_2 position-relative vedio-icone">
                            <a href="{{ asset('assets/images/uploads/' . $upload->img) }}">
                            <div class="backservdetails"  style="background-image: url({{ asset('assets/images/uploads/' . $upload->img) }});"
                                alt="gallery img"></div>
                                 </a>
                                  <img class="mous max-width" src="{{ asset('assets/front/img/zoom.png') }}" alt="icon">
                         </div>
 
   

                    </div>
                </div>
  @endforeach
            @endif
                
            </div>
        </div>
    </section>
         <!-- LightGallery JS -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/lightgallery.min.js"></script>
<!-- Plugins (اختياري) -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>

<script>
    lightGallery(document.getElementById('lightgallery'), {
        selector: 'a',
        plugins: [lgZoom],
        zoom: true,
        download: false
    });
</script>
 @stop
@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

@stop