@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">Service Provider/Organization Zone</h3>
        <form action="{{ route('searchOrganizations') }}" 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>Service Category</h6>
                    <select name="department_id" id="department_id" class="sl sl-1 left-bor">
                        <option value="">Select Service Category</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>Organization Type</h6>
                        <select name="organization_type" id="organization_type" class="sl sl-2 sl-22">
                            <option value="">Select Organization Type</option>
                            @foreach($organization_types as $type)
                            <option value="{{ $type->name }}" @if(isset($organization_type)) {{ $organization_type == $type->name ? 'selected' : '' }} @endif>{{ $type->name }}</option>
                            @endforeach
                    </select>
                </div>
    
                <div class="lab">
                    <h6>Organization Size</h6>
                    <select name="size" id="size" class="sl sl-2 sl-22">
                        <option value="">Organization Size</option>
                        @foreach($scopes as $scope)
                        <option value="{{ $scope->name }}" @if(isset($size)) {{ $size == $scope->name ? 'selected' : '' }} @endif>{{ $scope->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="lab">
                    <h6>Years In Business</h6>
                    <select id="years_business" name="years_business" class="sl sl-2 sl-22">
                    	<option value="">Select Years</option>                
                        <option value="0-5">0-5</option>
                        <option value="5-10">5-10</option>
                        <option value="10+">over a decade (10+)</option>        
                    </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($procurements) > 0)
                            @foreach($procurements as $procurement)
                            <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($procurement->image) }}" alt="Card image cap">
                                    </div>
                                    <div class="padd">
                                        <div class="card-body">
                                            <a href="{{ route('organization_show', $procurement->id) }}">
                                                <!--<h5 class="card-title">{{ $depart->department_name }}</h5>-->
                                                <h5 class="card-title">{{ $procurement->name }}</h5>
                                                <p class="card-text">{{ \Illuminate\Support\Str::limit($procurement->desc, 65, '...') }}</p>
                                            </a>
                                        </div>
                                        <hr>
                                        <!--<div class="card-body d-flex justify-content-between">-->
                                        <!--    <a href="{{ route('org-pro-profile', $procurement->id) }}" class="card-link"><img src="{{ asset($procurement->image) }}" class="img-fluid">-->
                                        <!--        <span class="user">{{ $procurement->name }}</span></a>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @elseif(!empty($organizations))
                            @foreach($organizations as $org)
                            <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($org->procurement->image) }}" alt="Card image cap">
                                    </div>
                                    <div class="padd">
                                        <div class="card-body">
                                            <a href="{{ route('organization_show', $org->procurement->id) }}">
                                                <!--<h5 class="card-title">{{ $depart->department_name }}</h5>-->
                                                <h5 class="card-title">{{ $org->procurement->name }}</h5>
                                                <p class="card-text">{{ \Illuminate\Support\Str::limit($org->procurement->desc, 65, '...') }}</p>
                                            </a>
                                        </div>
                                        <hr>
                                        <!--<div class="card-body d-flex justify-content-between">-->
                                        <!--    <a href="{{ route('org-pro-profile', $org->procurement->id) }}" class="card-link"><img src="{{ asset($org->procurement->image) }}" class="img-fluid">-->
                                        <!--        <span class="user">{{ $org->procurement->name }}</span></a>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            <div class="btn-div text-center mt-5 pt-3">
                                <a class="btn btn-light" href="{{ route('organization-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 Organization/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_2', $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