@extends('front.layouts.master-auth')
@section('content')
@section('canonical')
    @php
        $queryParams = request()->only(['category_id', 'country_id', 'rating', 'verified', 'online', 'complete_profile', 'search', 'skill_id', 'sub_category_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

    <!-- 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('Freelancers')
                </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 (Right Side) -->
                @include('front.freelancer._filters')

                <!-- Results (Left Side) -->
                <div class="search-results-cont" id="results-container">
                    @include('front.freelancer.list')
                </div>
            </div>
        </div>
    </section>
    <!-- End Page Content -->

@endsection
@section('js-body')
<script>
/* Blade config — PHP values only. All logic lives in freelancer-filter.js */
window.FreelancerFilterConfig = {
    baseUrl: '{{ route("freelancers.list") }}'
};
</script>
<script src="{{ asset('front/js/freelancer-filter.js') }}?v={{ filemtime(public_path('front/js/freelancer-filter.js')) }}"></script>
@endsection