@extends('front.layouts.master-auth')
@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">{{ $title ?? trans('My Offers') }}</h1>
            </div>
            <div class="d-flex align-items-center" style="gap: 10px;">
                @if(auth()->check() && auth()->user()->isFreelancer())
                    <div class="head-btns">
                        <a href="{{ route('user.project.create', ['direct' => 1]) }}" class="head-btn head-btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align: middle; margin-left: 5px;">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            @lang('Create Direct Contract')
                        </a>
                    </div>
                @endif
                <span class="filters-btn">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                    width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
                    <g transform="translate(128 128) scale(0.72 0.72)">
                        <g transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)">
                            <path
                                d="M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z"
                                transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        </g>
                    </g>
                </svg>
                </span>
            </div>
        </div>
        <div class="search-page-cont">
            <!-- Filters on the Right -->
            <div class="search-filters-cont">
                <div class="search-filters">

                    <h4 class="filter-title">
                        @lang('front.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 offers...')">
                    </div>

                    <h4 class="filter-title">
                        @lang('Status')
                    </h4>
                    <div class="filter-cont">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="all"
                                       @if(!request()->get('status') || request()->get('status') === 'all') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                @lang('All Statuses')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="pending"
                                       @if(request()->get('status') === 'pending') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                بانتظار الموافقة
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="running"
                                       @if(request()->get('status') === 'running') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                قيد التنفيذ
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="completed"
                                       @if(request()->get('status') === 'completed') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                مكتمل
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="closed"
                                       @if(request()->get('status') === 'closed') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                مغلقة
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="rejected"
                                       @if(request()->get('status') === 'rejected') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                مرفوض
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status" value="cancelled"
                                       @if(request()->get('status') === 'cancelled') checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                ملغي
                            </label>
                        </div>
                    </div>

                    <!-- Reset Filters Button -->
                    <div class="filter-actions">
                        <button type="button" id="resetFilters" 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>
                            @lang('Reset Filters')
                        </button>
                    </div>

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

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

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