@php
/**
 * Variables (optional — for use on skill page to avoid ID conflicts):
 *   $resetBtnId    — default: 'resetFilters'
 *   $bigStarsClass — default: 'big-stars'
 */
$_resetBtnId    = $resetBtnId    ?? 'resetFilters';
$_bigStarsClass = $bigStarsClass ?? 'big-stars';
@endphp
<div class="search-filters-cont">
    <div class="search-filters">

        <h4 class="filter-title">
            @lang('Search')
            <span id="filterLoadingSpinner" style="display:none; margin-inline-start:6px; vertical-align:middle; line-height:1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50" aria-hidden="true">
                    <circle cx="25" cy="25" r="20" fill="none" stroke="#000" stroke-width="4"
                        stroke-linecap="round" stroke-dasharray="31.4 31.4">
                        <animateTransform attributeName="transform" type="rotate"
                            from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/>
                    </circle>
                </svg>
            </span>
        </h4>
        <div class="filter-cont">
            <input type="search" class="search-page-input" name="search" value="{{ request()->get('search') }}" placeholder="@lang('Search Freelancers')">
        </div>

        @if(isset($categories) && count($categories) > 0)
        <h4 class="filter-title">
            @lang('Speciality')
        </h4>
        <div class="filter-cont">
            @php
            $selected_cat = [];
            if (request()->get('category_id')) {
                $category_ids = request()->get('category_id');
                $selected_cat = strpos($category_ids, ',') !== false
                    ? explode(',', $category_ids)
                    : [$category_ids];
            }
            @endphp
            @foreach($categories as $category)
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="category_id[]" value="{{ $category->id }}"
                        @if(in_array($category->id, $selected_cat)) checked @endif>
                    <span class="mark">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </span>
                    {{ $category->name }}
                </label>
            </div>
            @endforeach
        </div>
        @endif

        @if(isset($sub_categories) && count($sub_categories) > 0)
        <h4 class="filter-title">
            المسمى الوظيفي
        </h4>
        <div class="filter-cont">
            <select class="form-control" name="sub_category_id">
                <option value="">الكل</option>
                @foreach($sub_categories as $sub)
                    <option value="{{ $sub->id }}" @if(request()->get('sub_category_id') == $sub->id) selected @endif>
                        {{ $sub->name }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif

        @if(isset($skills) && count($skills) > 0)
        <h4 class="filter-title">
            المهارات
        </h4>
        <div class="filter-cont">
            <select class="form-control" name="skill_id">
                <option value="">الكل</option>
                @foreach($skills as $skillItem)
                    <option value="{{ $skillItem->id }}" @if(request()->get('skill_id') == $skillItem->id) selected @endif>
                        {{ $skillItem->name }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif

        <h4 class="filter-title">
            التقييم
        </h4>
        <div class="filter-cont">
            <div class="{{ $_bigStarsClass }}">
                @foreach([5, 4, 3, 2, 1] as $star)
                <input type="checkbox" value="{{ $star }}" name="rating" {{ request()->get('rating') == $star ? 'checked' : '' }}>
                <span data-value="{{ $star }}" class="{{ request()->get('rating') >= $star ? 'active' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="19.386" height="18.417" viewBox="0 0 19.386 18.417">
                        <path data-name="Icon material-star"
                              d="m12.693 17.8 5.99 3.616-1.589-6.816 5.293-4.585-6.969-.591L12.693 3 9.969 9.427 3 10.018 8.293 14.6 6.7 21.417z"
                              transform="translate(-3 -3)" />
                    </svg>
                </span>
                @endforeach
            </div>
        </div>

        <h4 class="filter-title">
            الحالة
        </h4>
        <div class="filter-cont">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="verified" value="1" {{ request()->get('verified') == '1' ? 'checked' : '' }}>
                    <span class="mark">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </span>
                    موثق فقط
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="online" value="1" {{ request()->get('online') == '1' ? 'checked' : '' }}>
                    <span class="mark">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </span>
                    متصل الآن فقط
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="complete_profile" value="1" {{ request()->get('complete_profile') == '1' ? 'checked' : '' }}>
                    <span class="mark">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </span>
                    أكمل ملفه الشخصي
                </label>
            </div>
        </div>

        @if(isset($countries) && count($countries) > 0)
        <h4 class="filter-title">
            @lang('Country')
        </h4>
        <div class="filter-cont">
            <select class="form-control" name="country_id">
                <option value="">@lang('Select')</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}" @if(request()->get('country_id') == $country->id) selected @endif>
                        {{ $country->name }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif

        <!-- Reset Filters Button -->
        <div class="filter-actions" style="margin-top: 20px;">
            <button type="button" id="{{ $_resetBtnId }}" class="reset-filters-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="1 4 1 10 7 10"></polyline>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                </svg>
                إعادة تعيين الفلاتر
            </button>
        </div>

    </div>
    <div class="filter-overlay"></div>
</div>