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

@section('content')




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

]
)

<!-- MAIN -->
<section class="section-padding-top section-padding-bottom section-light-bg-color" id="portfolio_data">
  <div class="container">
    <div class="text-center">
      <span class="section-subheader text-uppercase primary-color mb-0">[ PORTFOLIO ]</span>
      <h2 class="section-header center secondary-color mb-5">Our Past Works</h2>
    </div>

    <div class="d-flex align-items-center justify-content-center gap-3 mb-3 mt-2">
      <a href="{{$page->slug}}#portfolio_data"
        class="component-header secondary-color {{$typeName==null || $isValidType==false ? 'active': ''}}">All</a>


      @foreach ($template as $portfolio_type)
      <a href="{{ route('page', $page->slug) }}?type={{ $portfolio_type['title'] }}#portfolio_data"
        class="component-header uc-first secondary-color {{$typeName && $typeName == $portfolio_type['title'] ? 'active' : ''}} capitalize-first">
        {{ $portfolio_type['title'] }}
      </a>
      @endforeach

    </div>

    <div class="row" >
      @foreach ($portfolios as $portfolio)
      <div class="col-12 col-md-6 col-lg-4">
        <a href="{{ route('portfolio-detail', ['portfolio' => $portfolio->slug]) }} ">
          <div class="project-card mt-4">
            <figure class="overflow-hidden aspect-ratio-5_3 position-relative">
              <img src="{{$portfolio->feature_image->getPath()}}" alt="{{$portfolio->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">
              {{$portfolio->title}}
            </h5>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </div>
</section>



<!-- BANNER -->
@if($portfolio_ads)
<section class="section-padding-top section-padding-bottom service-footer-banner d-flex align-items-center" style="background-image: url('{{ $portfolio_ads->feature_image->getPath() }}');">
  <div class="container">
    <div class="d-flex flex-column align-items-center justify-content-center">
      <h2 class="section-header no-after primary-color mb-4_5 text-center">{{$portfolio_ads->name}}</h2>
      <a href="{{$portfolio_ads->meta}}" class="main-button text-uppercase">GET IN TOUCH</a>
    </div>
  </div>
</section>
@endif

@endsection