@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.projects.all_projects'),
    'meta_description' => trans('front.projects.meta_description', ['appName' => $general_settings->website_title]),
    'cover_image' => $coverImage,
    'model_type' => 'project',
])

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.projects.projects') }}",
        "item": "{{ route('projects/', ['projects' => trans('route.frontend.projects') ]) }}"
      }]
    }
    </script>
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner banner-2">
        <!--v2 banner-->
        <div class="card">
            <div class="card-img-overlay" style="background-image: url('{{ $coverImage = $general_settings->getFirstMediaUrlTraitAttribute('project', 'default') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ trans('front.projects.all_projects') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li class="active"><a href="{{ route('projects/', ['projects' => trans('route.frontend.projects') ]) }}">{{ trans('front.projects.projects') }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!--====== gridmenu portfolio ONE PART STARTS ======-->
    <section class="st-gridmenu py-5">
        <div class="container">
            <div class="row py-2 pb-3 wow fadeInUp" data-wow-delay=".1s">
                <div class="col-lg-12">
                    <div class="ud-section-title mb-4">
                        <span>{{ trans('front.projects.our_projects') }}</span>
                        <h2>{{ trans('front.projects.h2_title') }}</h2>
                        <p>{{ trans('front.projects.description') }}</p>
                    </div>
                    <!-- portfolio menu -->
                    <div class="grid-menu text-center text-md-start">
                        <button data-filter="all" class="ud-rounded-btn ud-border-btn py-2 py-md-3 px-3 px-md-4 text-uppercase active">{{ trans('front.general.all') }}</button>
                        @foreach($projectCategory as $category)
                            @if($category->projects->count() > 0)
                                <button data-filter="{{ $category->slug }}" class="ud-rounded-btn ud-border-btn py-2 py-md-3 px-3 px-md-4 text-uppercase">{{ $category->title }}</button>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- row -->
            <div class="row filtr-container wow fadeInUp justify-content-sm-start justify-content-center" data-wow-delay=".15s">
            @foreach($projectCategory as $category)
                @foreach($projects = $category->projects()->paginate(9) as $project)
                    <!-- card item -->
                    <div class="filtr-item col-lg-3 col-md-4 col-sm-6 col-10" data-category="{{ $category->slug }}" data-sort="value">
                        <div class="grid-content card same-height">
                            <div class="grid-image ratio ratio-4x3">
                                <div class="card-img-overlay d-flex align-items-center justify-content-center h-100 w-100 portfolio-content">
                                    <div class="grid-icon d-inline-block position-relative">
                                        <a class="stretched-link" href="{{ route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $category->slug, 'slug' => $project->slug])}}">
                                            <i class="lni lni-link fw-bold"></i>
                                            <div class="gradient-mask-2"></div>
                                        </a>
                                    </div>
                                </div>
                                @if($projectThumbImage = $project->getFirstMediaUrlTraitAttribute('cover', 'thumb_200'))
                                    <img src="{{ $projectThumbImage }}" class="card-img-top" alt="{{ $project->slug }} card image">
                                @else
                                    <img width="255" height="191" src="{{ fallbackImageUrl() }}" alt="no images">
                                @endif
                            </div>
                            <div class="card-body w-100 d-flex flex-column justify-content-between">
                                <h4 class="card-title st-card-title">{{ $project->title }}</h4>
                                <a class="stretched-link d-flex" href="{{route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $category->slug, 'slug' => $project->slug])}}">
                                    <p class="card-text st-befor position-relative">{{ $category->title }}</p>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endforeach
            </div>

            <div class="d-flex justify-content-center justify-content-lg-start pt-5">
                {{ optional($projects ?? '')->links('themes.'.config('smartekcms.themes.frontend').'.layouts.paginate') }}
            </div>
        </div> <!-- container -->
    </section>
    <!--====== portfolio ONE PART ENDS ======-->

@endsection

@section('js')
    <!--====== FilterizR js (st-grid-menu) Start ======-->
    <script src="{{ asset('themes/smartblue/js/filterizr/jquery.filterizr.min.js') }}"></script>
    <script type="text/javascript">
        // Use Filterizr as a jQuery plugin
        $('.filtr-container').filterizr();

        //============== button active for grid-menu portfolio
        elements=document.querySelectorAll(".grid-menu button");
        for(var i=0; i<elements.length; i++){
            elements[i].onclick=function(){
                var el=elements[0];
                while(el){
                    if(el.tagName==="BUTTON"){
                        el.classList.remove("active");
                    }
                    el=el.nextSibling;
                }
                this.classList.add("active");
            };
        }
    </script>
    <!--====== FilterizR js (st-grid-menu) End ======-->

    <!-- Equal height js (same) ======-->
    <script src="{{ asset('themes/smartblue/js/sameElementsHeight.min.js') }}" charset="utf-8"></script>
    <script type="text/javascript">
        Utils.sameElementsHeight(".same-height");
    </script>
    <!-- Equal height js (same) ======-->
    @parent
@endsection