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

<style>
@media only screen and (min-width: 300px) and (max-width: 519px) {
    .pro-bg {
        margin-top: 0px !important;
    }
}
</style>

<main>
    <section class="banner">
        <div class="the-before">
            <video id="myVideobanner" loop="" autoplay="" muted="">
                <source src="{{ asset('assets/front/images/energy.mp4') }}" type="video/mp4">
            </video>
        </div>
        <div class="container-fluid h-100">
            <div class="row h-100 justify-content-center">
                <div class="col-lg-10 col-12">
                    <div class="row h-100">
                        <div class="pos h-100">
                            <div class="content">
                                <h3 data-aos="fade-right" data-aos-delay="400" data-aos-duration="1000"
                                    class="aos-init aos-animate">{!! $page->home_banner_title !!}
                                </h3>
                                <p>{!! $page->home_banner_content !!}</p>

                                <div class="btn-div">
                                    <button class="btn" onclick="location.href = '{{ route("signUp") }}'">
                                        Get Started &nbsp;<span>&nbsp; &nbsp;<i
                                                class="fa-solid fa-arrow-right"></i></span>
                                    </button>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pro-bg">
        <h3>{!! $page->home_section_one_heading !!}</h3>
        <h5 class="ano">{!! $page->home_section_one_title !!}<br></h5>
        <div class="text-center mb-5 pb-5"> <a href="{{ route('signUp') }}" class="logon text-center"> To appear in this zone, post
                your project here:</a>
        </div>
        <p>{!! $page->home_section_one_content !!}</p>
        <form action="{{ route('searchProjects') }}" method="POST">
            @csrf
            <div class="sl1">
                <input type="text" class="inp1" name="keywords" placeholder="Enter Keyword....">
                
            </div>
            <div class="sl2">
               
                
                <div class="lab">
                    <h6>Project Category</h6>
                    <select name="department_id" id="department_id" class="sl sl-1 left-bor">
                        <option value="">Select Project Category</option>
                        @foreach($departments as $depart)
                        <option value="{{ $depart->id }}">{{ $depart->department_name }}</option>
                        @endforeach
                    </select>
                </div>

                

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

                <div class="lab">
                    <h6>Project Scope</h6>
                    <select name="scope" id="scope" class="sl sl-2 sl-3">
                        <option value="">Select Scope</option>
                        @foreach($scopes as $scope)
                        <option value="{{ $scope->name }}">{{ $scope->name }}</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 }}">{{ $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">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                   
                </div>
            </div>
           
            

            <div class="row divvv justify-content-center">
                <div class="col-lg-10 col-12">
                    <h3>{!! $page->home_section_two_heading !!}</h3>
                    <div class="divv">
                        <p>{!! $page->home_section_two_content !!}</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>

    <section class="pro-bg">
        <h3>{!! $page->home_section_three_heading !!}</h3>
        <h5>{!! $page->home_section_three_title !!}<br></h5>
        <div class="text-center mb-5 pb-5 thetop"> <a href="{{ route('signUp') }}" class="logon text-center">To Appear in this
                Zone, post
                your Organization services here:</a>
        </div>
        <p>{!! $page->home_section_three_content !!}</p>
        <form action="{{ route('searchOrganizations') }}" method="POST">
            @csrf
            <div class="sl1">
                <input type="text" name="keywords" class="inp1" placeholder="Enter Keyword....">
                
            </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 }}">{{ $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 }}">{{ $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 }}">{{ $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 divvv justify-content-center">
                <div class="col-lg-10 col-12">
                    <h3>Browse organization 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>

    <!--<section class="testi">-->
    <!--    <div class="container">-->
    <!--        <div class="row justify-content-center">-->
    <!--            <div class="col-lg-10 col-12">-->
    <!--                <h1>Testimonials</h1>-->
    <!--                <p>Lorem Ipsum is simply dummy text of the printin</p>-->
    <!--                <div class="slider-testi sli">-->
    <!--                    @if($testimonials)-->
    <!--                    @foreach($testimonials as $testimonial)-->
    <!--                    <div class="">-->
    <!--                        <h6>{{ $testimonial->content }}</h6>-->
    <!--                        <div class="img-div">-->
    <!--                            <img src="{{ asset($testimonial->image)}}" alt="" class="img-fluid">-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                    @endforeach-->
    <!--                    @endif-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->
</main>



@endsection