@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@push('css')
    <!-- SELECT2-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endpush
@section('content')
    <div id="pageWrapper" class="ProjectPage">

        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        <!-- Projects -->
        <section id="Projects">
            <div class="container">
                <div class="tleWrap">
                    <h2 class="mTle">{{ $projectCms->title }}</h2>
                </div>
                {!! $projectCms->description !!}
                @if ($projects->isNotEmpty())
                    <div class="dFlx CmnFlx">
                        <div class="lftSd">
                            @include('frontend::project.includes.sidebar')
                        </div>
                        <div class="ritSd">
                            <div class="Projects">
                                <div class="dFlx">
                                    <div class="lftSec">
                                        <div class="ttl">All Projects</div>
                                    </div>
                                    <div class="rgtSec">
                                        <div class="filterWrap">
                                            <div class="txt">Select Region</div>
                                            <div class="slctBx">
                                                <select class="form-select select2" id="region"
                                                    data-select2-id="select2-2" aria-label="City">
                                                    <option value="all">All</option>
                                                    @foreach ($cities as $city)
                                                        <option value="{{ base64_encode($city->id) }}">
                                                            {{ $city->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="projectList">
                                    @foreach ($projects as $project)
                                        <div class="item">
                                            <a class="proBx"
                                                href="{{ route('project-details', ['category_slug' => $project->projectCategory->slug, 'slug' => $project->slug]) }}"
                                                aria-label="{{ $project->title }}">
                                                <div class="imgDrp">
                                                    <img src="{{ $project->image_value }}" loading="lazy" width="1920"
                                                        height="480" alt="{{ $project->title }}" />
                                                </div>
                                                <div class="CntBx">
                                                    <div class="ttl">{{ $project->title }}</div>
                                                    <div class="subt">{{ $project->city->name }}</div>
                                                </div>
                                                <div class="backDrp"></div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- SELECT2-->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".select2").select2({
            minimumResultsForSearch: -1,
            maximumSelectionLength: 3,
            theme: "bootstrap-5",
            containerCssClass: "select2--small",
            selectionCssClass: "select2--small",
            dropdownCssClass: "select2--small",
        });
        document.addEventListener("DOMContentLoaded", function() {
            if (window.innerWidth <= 992) {
                var accordions = document.querySelectorAll("#Dashboard-Pro .accordion-collapse");
                accordions.forEach(function(accordion) {
                    accordion.classList.remove("show");
                    var button = accordion.previousElementSibling.querySelector(".accordion-button");
                    button.classList.add("collapsed");
                    button.setAttribute("aria-expanded", "false");
                });
            }
        });
        $(document).ready(function() {
            $(document).on('change', '#region', function() {
                var cityId = $(this).val();
                var projectCategoryId = $('.projectCategoryList.active').data('project-category-id');
                getProjectsByCategoryAndCity(projectCategoryId, cityId);
            });

            var projectCategoryListDebounceTimer;

            function getProjectsByCategoryAndCity(projectCategoryId, cityId) {
                if (projectCategoryId && cityId) {
                    clearTimeout(projectCategoryListDebounceTimer);
                    projectCategoryListDebounceTimer = setTimeout(function() {
                        $('.projectCategoryList').removeClass('active');
                        $(`.projectCategoryList[data-project-category-id='${projectCategoryId}']`).addClass(
                            'active');
                        $.ajax({
                            url: "{{ route('projects.byCategoryAndCity', ['category_id' => 'categoryId', 'city_id' => 'cityId']) }}"
                                .replace('categoryId', projectCategoryId).replace('cityId',
                                    cityId),
                            dataType: 'json',
                            success: function(result) {
                                if (result.success) {
                                    $('.projectList').html(result.data);
                                } else {
                                    $('.projectList').empty();
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.error('AJAX error:', textStatus, errorThrown);
                            }
                        });
                    }, 300);
                }
            }
        });
    </script>
@endpush