@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">
                    @lang('My Projects')
                </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') }}" 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>
                            أضف مشروع جديد
                        </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 projects...')">
                    </div>

                    <h4 class="filter-title">
                        @lang('Project Status')
                    </h4>
                    <div class="filter-cont" style="margin-top: 15px;">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::DRAFT}}"
                                       @if(in_array((string)App\Models\Project::DRAFT, $selected_status)) 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('Draft Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::PENDING}}"
                                       @if(in_array((string)App\Models\Project::PENDING, $selected_status)) 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('Pending Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::APPROVED}}"
                                       @if(in_array((string)App\Models\Project::APPROVED, $selected_status)) 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('Approved Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::RUNNING}}"
                                       @if(in_array((string)App\Models\Project::RUNNING, $selected_status)) 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('Running Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::COMPLETED}}"
                                       @if(in_array((string)App\Models\Project::COMPLETED, $selected_status)) 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('Completed Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::REJECTED}}"
                                       @if(in_array((string)App\Models\Project::REJECTED, $selected_status)) 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('Rejected Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::CANCELLED}}"
                                       @if(in_array((string)App\Models\Project::CANCELLED, $selected_status)) 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('Cancelled Project')
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="status[]" value="{{App\Models\Project::CLOSED}}"
                                       @if(in_array((string)App\Models\Project::CLOSED, $selected_status)) 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('Closed')
                            </label>
                        </div>
                    </div>

                    @if(isset($freelancers) && $freelancers->count() > 0)
                    <h4 class="filter-title">
                        @lang('Freelancer')
                    </h4>
                    <div class="filter-cont">
                        <select class="form-control" name="freelancer_id">
                            <option value="">@lang('All')</option>
                            @foreach($freelancers as $freelancer)
                                <option value="{{ $freelancer->id }}" @if(request()->get('freelancer_id') == $freelancer->id) selected @endif>
                                    {{ $freelancer->first_name }} {{ $freelancer->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <!-- 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.project.list')
            </div>
        </div>
    </div>
</section>
<!-- End Page Content -->

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