@extends('web.layouts.main')
@section('content')



 <div class="page-heading">
                <div class="bread">
                    <h4>{{__('web.gallery')}}</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('web.gallery')}}</li>
                        </ol>
                    </nav>
                </div>
        </div>  
        <main>
            <!--start gallery-pg-->   
            <section class="gallery-pg">
                <div class="container">
                    <div class="tabs">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                              <a class="nav-link active" id="pills-tab1-tab" onclick="category(this)" data-id="null" data-toggle="pill" href="#pills-tab1" role="tab" aria-controls="pills-tab1" aria-selected="true">{{__('web.all')}}</a>
                            </li>
                           @foreach($categories as $row)
                            <li class="nav-item" role="presentation">
                              <a class="nav-link " id="pills-tab1-tab" data-toggle="pill"  onclick="category(this)" data-id="{{$row->id}}"  href="#pills-tab1" role="tab" aria-controls="pills-tab1" aria-selected="true">{{categoryname($row->id)}}</a>
                            </li>
                           @endforeach
                        </ul>
                    </div>
                    <div class="row" id="categories">
                        @foreach($galleries as $row)
                        <div class="col-lg-4 col-md-6">
                            <div class="item">
                               
                                <img src="{{asset($row->image)}}">
                                
                                <a data-fancybox href="@if(is_null($row->video)){{asset($row->image)}}@else {{$row->video}} @endif" class="more-butn">
                                    <i class="fas fa-plus"></i>
                                </a>
                                <div class="overlay-text">
                                    <span>{{galleryname($row->id)}}</span>
                                    <h5>{{gallerydescription($row->id)}} </h5>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <img src="images/nawal-pattern-2.png" class="logo-pattern-r">
            </section>
        </main>
         @push('js')
   <script>
        function category(elem){
       
       var row = $(elem).attr('data-id');
    
      $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/categorydata/')) !!}+'/'+row,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
           
            $('#categories').html(data);
             
          }
      
        })
        }
    </script>
   @endpush
        @stop