@extends('layouts.front')
@section('meta')
<title>ছবি</title>
<meta property="og:title" content="ছবি" />
<meta property="og:image" content="{{asset('assets/images/logo/'.$gs->og_baner)}}" />
@endsection
@section('contents')

<!-- main div -->
<div class="mainDiv">
  <!-- header categories -->
  <div class="bg2 marginT-15 marginB10 visible-xs">
    <div class="">
      <div class=" padding0">
        <div class="positionRelative" style="border-bottom: 3px solid #9b090d">
          <div class="mobileHeaderCategoryDiv">
            <a class="sidebarCatTitle colorBlack hoverBlue paddingLR15 textDecorationNone" aria-label="হোম"
              href="{{ route('frontend.index') }}"><strong>হোম</strong></a>
            @foreach ($categories->take(7) as $category)
              <a class="sidebarCatTitle colorBlack hoverBlue paddingLR15 textDecorationNone" aria-label="{{ $category->title }}"
                href="{{ route('frontend.category', $category->slug) }}"><strong>{{ $category->title }}</strong></a>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- header categories end -->

  <!-- desktop and mobile version start -->
  <div class="bgWHite">
    <div class="container">
      <div class="row">

        <!-- category header -->
        <div class="col-sm-12 col-md-12 marginB20 xs-marginB10 marginT10">
          <h1 class="desktopCategoryTitle"><span class="categoryLeftCart"></span> <a aria-label="ছবি"
              href="{{ url('/photos') }}"><strong>ছবি <i
                  class="fa fa-caret-right title1_8 verticalAlignMiddle"></i></strong></a></h1>
        </div>

        <div class="col-sm-9 col-md-9">
          @php
            $language_id = Session::has('language')
              ? Session::get('language')
              : DB::table('languages')->where('is_default', '=', 1)->first()->id;

            $photoAlbums = DB::table('image_albums')
              ->where('language_id', $language_id)
              ->orderBy('id', 'DESC')
              ->get();

            $leadAlbum = $photoAlbums->first();
          @endphp

          @if($photoAlbums->count() > 0)
          <!-- lead photo -->
          @if($leadAlbum)
          <div class="row marginLR-10">
            <div class="col-sm-12 col-md-12 paddingLR10">
              <div class="row desktopFlexRow">
                <div class="col-sm-6 col-md-6 desktopSectionLead">
                  <div class="thumbnail marginB0 borderRadius0">
                    <div class="positionRelative paddingT0">
                      <img src="{{ asset('assets/images/image-album/'.$leadAlbum->photo) }}"
                        class="img-responsive borderRadius0" alt="{{ $leadAlbum->album_name }}">
                      <span class="fa fa-camera pvIconMedium"></span>
                    </div>
                    <a href="{{ url('/gallery-view/'.$leadAlbum->id) }}" class="linkOverlay"></a>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6 desktopSectionLead">
                  <div class="thumbnail marginB0 borderRadius0 xs-text-center">
                    <div class="marginB10 xs-marginT20">
                      <h1 class="title8 marginT0 marginB0"><strong>{{ $leadAlbum->album_name }}</strong></h1>
                    </div>
                    <a href="{{ url('/gallery-view/'.$leadAlbum->id) }}" class="linkOverlay"></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="borderC1T1 marginB15 marginT15"></p>
          @endif

          <!-- 3 column photo grid -->
          <div class="row marginLR-15 desktopFlexRow loadMoreCategoryNewsDesktop borderR3rdItemNone">
            @foreach ($photoAlbums->skip(1) as $album)
            <div class="col-md-4 col-xs-12 marginB20 xs-marginB15 paddingLR15 borderC1R1 desktopSectionLead">
              <div class="thumbnail h100P borderC1B1 borderRadius0">
                <div class="positionRelative">
                  <p class="marginT15 marginB13 positionAbsolute bottom0 marginL10"><span
                      class="categoryNameClass borderC1-1 bg9 colorWhite"><i class="fa fa-regular fa-tag"></i>
                      ছবি</span></p>
                  <img src="{{ asset('assets/images/image-album/'.$album->photo) }}"
                    class="img-responsive borderRadius0"
                    alt="{{ $album->album_name }}">
                  <span class="fa fa-camera pvIconLarge"></span>
                </div>
                <div class="caption paddingLR0">
                  <h1 class="title11 colorBlack marginT10">{{ $album->album_name }}</h1>
                </div>
              </div>
              <a href="{{ url('/gallery-view/'.$album->id) }}" class="linkOverlay"></a>
            </div>
            @endforeach
          </div>

          @else
          <div class="col-md-12">
            <div class="text-center padding20">
              <p class="colorBrand">{{ __('No Photos Available') }}</p>
            </div>
          </div>
          @endif
        </div>

        <div class="col-sm-3 col-md-3 xs-marginT30">
          <!-- latest popular news -->
          <div class="row hidden-xs">
            <div class="col-sm-12 col-md-12 marginB20">
              @include('partial.front.sidebar-latest-popular')
            </div>
          </div>
          <!-- latest popular news end -->
        </div>

      </div>
    </div>
  </div>
  <!-- desktop and mobile version end -->

</div>
<!-- main div end -->

@endsection

@section('scripts')
<script>
$(document).ready(function(){
  // Tab toggle
  $('.latestNav').click(function(){
    $('.latestCaret').show();
    $('.highestCaret').hide();
  });
  $('.highestNav').click(function(){
    $('.highestCaret').show();
    $('.latestCaret').hide();
  });
});
</script>
@endsection