@section('seo')
@include('layouts._front_includes._seo', ['seo' => $portfolio_detail->seo])
@endsection
@extends('layouts.frontend_master')

@section('content')




@include(
'web._partials.page-banner',
[
'title' => $portfolio_page->title,
'image' => $portfolio_detail->cover_image->getPath(),

]
)
<!-- PROJECT DETAIL -->
<section class="section-padding-top section-padding-bottom section-light-bg-color">
  <div class="container">
    <div class="header-section mb-5">
      <span class="section-subheader text-uppercase primary-color mb-0">[ OUR PAST WORKS ]</span>
      <h2 class="section-header secondary-color mb-0">{{$portfolio_detail->title}}</h2>
    </div>
    <article class="mb-4">
      {!!$portfolio_detail->description!!}
    </article>



    <div class="row d-none d-sm-flex">

      @foreach ($galleries as $item )
      <div class="col-12 col-md-6">
        <figure class="overflow-hidden aspect-ratio-1 mt-4">
          <a data-bs-toggle="modal" data-bs-target="#galleryModal" class="d-inline cursor-pointer">
            <img src="{{$item->getpath()}}" alt="{{$item->alt}}" class="h-100 w-100 object-fit-cover">
          </a>
        </figure>
      </div>
      @endforeach


    </div>
    {{--
    <div id="galleryCarouselBlockIndicators" class="carousel slide d-block d-sm-none">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#galleryCarouselBlockIndicators" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#galleryCarouselBlockIndicators" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#galleryCarouselBlockIndicators" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#galleryCarouselBlockIndicators" data-bs-slide-to="3"
          aria-label="Slide 4"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <figure class="overflow-hidden aspect-ratio-1">
            <img src="assets/images/cards/portfolio-gallery1.jpg" class="w-100 h-100 object-fit-cover" alt="Gallery1">
          </figure>
        </div>
        <div class="carousel-item">
          <figure class="overflow-hidden aspect-ratio-1">
            <img src="assets/images/cards/portfolio-gallery2.jpg" class="w-100 h-100 object-fit-cover" alt="Gallery 2">
          </figure>
        </div>
        <div class="carousel-item">
          <figure class="overflow-hidden aspect-ratio-1">
            <img src="assets/images/cards/portfolio-gallery3.jpg" class="w-100 h-100 object-fit-cover" alt="Gallery 3">
          </figure>
        </div>
        <div class="carousel-item">
          <figure class="overflow-hidden aspect-ratio-1">
            <img src="assets/images/cards/portfolio-gallery4.jpg" class="w-100 h-100 object-fit-cover" alt="Gallery 4">
          </figure>
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarouselBlockIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#galleryCarouselBlockIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

  </div> --}}
</section>
{{-- <div class="modal fade gallery-modal" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content p-3 height-inherit">
      <div class="d-flex justify-content-end">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="galleryCarouselIndicators" class="carousel slide height-inherit">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#galleryCarouselIndicators" data-bs-slide-to="0" aria-current="true"
              aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#galleryCarouselIndicators" data-bs-slide-to="1"
              aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#galleryCarouselIndicators" data-bs-slide-to="2"
              aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#galleryCarouselIndicators" data-bs-slide-to="3"
              aria-label="Slide 4"></button>
          </div>

          <div class="carousel-inner height-inherit">
            @foreach ($galleries as $item )
            <div class="carousel-item">
              <figure class="overflow-hidden aspect-ratio-1 height-inherit">
                <img src="{{$item->getpath()}}" class="w-100 h-100 object-fit-cover" alt="{{$item->alt}}">
              </figure>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</div> --}}

<div id="galleryCarouselBlockIndicators" class="carousel slide d-block d-sm-none">
  <div class="carousel-indicators">
    @foreach($galleries as $index => $item)
    <button type="button" data-bs-target="#galleryCarouselBlockIndicators" data-bs-slide-to="{{ $index }}"
      class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}"
      aria-label="Slide {{ $index + 1 }}"></button>
    @endforeach
  </div>

  <div class="carousel-inner">
    @foreach($galleries as $index => $item)
    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
      <figure class="overflow-hidden aspect-ratio-1">
        <img src="{{ $item->getPath() }}" class="w-100 h-100 object-fit-cover" alt="{{ $item->alt }}">
      </figure>
    </div>
    @endforeach
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarouselBlockIndicators"
    data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#galleryCarouselBlockIndicators"
    data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="modal fade gallery-modal" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content p-3 height-inherit">
      <div class="d-flex justify-content-end">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="galleryCarouselIndicators" class="carousel slide height-inherit">
          <div class="carousel-indicators">
            @foreach($galleries as $index => $item)
            <button type="button" data-bs-target="#galleryCarouselIndicators" data-bs-slide-to="{{ $index }}"
              class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}"
              aria-label="Slide {{ $index + 1 }}"></button>
            @endforeach
          </div>

          <div class="carousel-inner height-inherit">
            @foreach($galleries as $index => $item)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
              <figure class="overflow-hidden aspect-ratio-1 height-inherit">
                <img src="{{ $item->getPath() }}" class="w-100 h-100 object-fit-cover" alt="{{ $item->alt }}">
              </figure>
            </div>
            @endforeach
          </div>

          {{-- <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarouselIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#galleryCarouselIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button> --}}
        </div>
      </div>
    </div>
  </div>
</div>


<!-- OTHERS -->
@if (count($similar_portfolios) > 0)
<section class="section-padding-bottom section-light-bg-color">
  <div class="container">
    <div class="header-section">
      <span class="section-subheader text-uppercase primary-color mb-0">[ EXPLORE ]</span>
      <h2 class="section-header secondary-color mb-4_5">Similar Projects</h2>
    </div>
    <div class="row">

      @foreach ($similar_portfolios as $item)
      <div class="col-12 col-md-6 col-lg-4">
        <a href="{{ route('portfolio-detail', ['portfolio' => $item->slug]) }} ">
          <div class="project-card mt-4">
            <figure class="overflow-hidden aspect-ratio-5_3 position-relative">
              <img src="{{$item->feature_image->getPath()}}" alt="{{$item->title}}"
                class="w-100 h-100 object-fit-cover">
              <div
                class="feature-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
                <i class="primary-color">
                  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <line x1="50.625" y1="2.73196e-08" x2="50.625" y2="100" stroke="currentColor" stroke-width="1.25" />
                    <line y1="49.375" x2="100" y2="49.375" stroke="currentColor" stroke-width="1.25" />
                  </svg>
                </i>
              </div>
            </figure>
            <h5 class="section-subheader-secondary before mt-3 secondary-color">
              {{$item->title}}
            </h5>
          </div>
        </a>
      </div>

      @endforeach



    </div>
  </div>
</section>
@endif

@endsection