@extends('front.layouts.master-auth')
@section('canonical')
    @php
        $queryParams = request()->only(['category_id', 'country_id', 'project_size_id', 'rating', 'budget', 'time_id', 'search', 'skill_id']);
        if (request()->integer('page', 1) > 1) {
            $queryParams['page'] = request()->integer('page');
        }
        $customCanonical = url()->current() . (!empty($queryParams) ? '?' . http_build_query($queryParams) : '');
    @endphp
    <link rel="canonical" href="{{ $customCanonical }}" />
@endsection
@section('hreflang')
    <link rel="alternate" hreflang="ar" href="{{ $customCanonical }}" />
@endsection
@section('content')
<!-- Start Page Content -->

<section class="page-content">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div class="page-title-cont">
                @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                    <x-breadcrumb :items="$breadcrumbs" />
                @endif
                <h1 class="page-title">
                    @lang('Projects')
                </h1>
            </div>
            <span class="filters-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                </svg>
            </span>
        </div>
        <div class="search-page-cont">
            <!-- Filters on the Right -->
            @include('front.project._filters')
            
            <!-- Results on the Left -->
            <div class="search-results-cont" id="results-container">
                @include('front.project.list')
            </div>
        </div>
    </div>
</section>
<!-- End Page Content -->

@endsection
@section('js-body')
<script>
/* Blade config — PHP values only. All logic lives in project-filter.js */
window.ProjectFilterConfig = {
    priceSteps    : [50, 100, 300, 500, 800, 1000, 1500, 2000, 3000, 5000, 10000],
    timeLabels    : @json($timesOrdered ?? []),
    timeIds       : @json($timeIds ?? []),
    defaultTimeVal: 0,
    baseUrl       : '{{ route("project.list") }}'
};
</script>
<script src="{{ asset('front/js/project-filter.js') }}?v={{ filemtime(public_path('front/js/project-filter.js')) }}"></script>
@endsection