@extends('front.layout.app')
@section('content')

<style>
header {
    background: #011452;
    padding: 0;
}

.pro-bg {
    margin-top: 142px;
}
</style>
<main>

    <section class="pro-bg">
        <h3 class="mb-5 pb-3">Project/Service Request Zone</h3>
        <form action="{{ route('searchProjects') }}" method="POST">
            @csrf
            <div class="sl1">
                @if(isset($keywords))
                <input type="text" name="keywords" class="inp1" value="{{ $keywords }}">
                @else
                <input type="text" name="keywords" class="inp1" placeholder="Enter keywords...">
                @endif
                
            </div>
            <div class="sl2">
               
                
                <div class="lab">
                    <h6>Sector</h6>
                    <select name="department_id" id="department_id" class="sl sl-1 left-bor">
                        <option value="">Sector</option>
                        @foreach($departments as $depart)
                        <option value="{{ $depart->id }}" @if(isset($sector_id)) {{ $sector_id == $depart->id ? 'selected' : '' }} @endif>{{ $depart->department_name }}</option>
                        @endforeach
                    </select>
                </div>

                

                <div class="lab">
                    <h6>Project Type</h6>
                    <select name="type_name" id="type" class="sl sl-2 sl-22">
                        <option value="">Project Type</option>
                        @foreach($types as $type)
                        <option value="{{ $type->name }}" @if(isset($type_name)) {{ $type_name == $type->name ? 'selected' : '' }} @endif>{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                

                <div class="lab">
                    <h6>Experience Level</h6>
                    <select name="experience_id" id="experience_id" class="sl sl-2 sl-3">
                        <option value="">Experience Level</option>
                        @foreach($experiences as $experience)
                        <option value="{{ $experience->id }}" @if(isset($experience_id)) {{ $experience_id == $experience->id ? 'selected' : '' }} @endif>{{ $experience->level }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="lab">
                    <h6>Project Role Type</h6>
                    <select name="occupation" id="occupation" class="sl sl-1 left-bor">
                        <option value="">Project Role Type</option>
                        @foreach($roles as $role)
                        <option value="{{ $role->id }}" @if(isset($occupation_id)) {{ $occupation_id == $role->id ? 'selected' : '' }} @endif>{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>

            </div>


            <div class="btn-div">
                <button class="btn" type='submit'>Search <i class="fa-solid fa-arrow-right"></i></button>
            </div>
        </form>
    </section>

    <section class="services org">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="row gx-5 gy-5">
                        @if(count($projects) > 0)
                        @foreach($projects as $project)
                        <div class="col-12 col-lg-3 col-md-4 panel">
                            <div class="card h-100">
                                <div class="height"><img class="card-img-top" src="{{ asset($project->image) }}" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="{{ route('project_detail', $project->slug) }}">
                                            <h5 class="card-title">{{ $project->department->department_name }}</h5>
                                            <p class="card-text">{{ \Illuminate\Support\Str::limit($project->title, 45, '...') }}</p>
                                        </a>
                                    </div>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="{{ route('org-pro-profile', $project->procurement->id) }}" class="card-link"><img src="{{ asset($project->procurement->image) }}" class="img-fluid">
                                            <span class="user">{{ $project->procurement->name }}</span></a>
                                        <a href="#" class="card-link strt">Starting at: 
                                        @if($project->rate == 'hourly')
                                        <span class="start">${{ $project->budget }} / hourly</span>
                                        @else
                                        <span class="start">${{ $project->budget }} / fixed</span>
                                        @endif
                                        </a>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        <div class="btn-div text-center mt-5 pt-3">
                            <a class="btn btn-light" href="{{ route('project-zone') }}">
                                View All </a>
                        </div>
                        @else
                        <div class="text-center mt-5 mb-3 pb-3 pt-5" >
                            <h4>Data not found</h4>
                        </div>
                        @endif
                    </div>

                </div>
            </div>
            

            <div class="row divvv justify-content-center">
                <div class="col-lg-10 col-12">
                    <h3>Browse project/services by category</h3>
                    <div class="divv">
                        <p>Get some Inspirations from 1800+ skills</p>
                        <a href="javascript:;">All Categories &nbsp; <i class="fa-solid fa-arrow-right"></i></a>
                    </div>

                    <div class="slider-cat sli">
                        @foreach($departments as $department)
                        <div class="">
                            <div class="box">
                                <div class="content">
                                    <a href="{{ route('department_detail_1', $department->department_slug) }}">{{ $department->department_name }}</a>
                                </div>
                                <img src="{{ asset($department->image) }}" class="img-fluid" alt="">
                            </div>
                        </div>
                        @endforeach
                       
                    </div>

                </div>
            </div>


        </div>
    </section>

</main>

@endsection