@extends('front.layouts.main')

@section('title') Top Consultants from Curated Categories | {{ 'Empower Jobs' }}@endsection

@section('description')Empower Jobs offers a list of top consultants and trending consultants from curated categories.
Hire the best consultant according to your requirements.@endsection

@section('content')

<main class="before-login-page consultant-landing-page pt-0">
    <section class="banner">
        <div class="container banner-form">
            <h1 class="text-center bold m-0">Let Top Talent Consult for You</h1>
            <p class="text-center title-font mt-2 mb-3">Browse, Select & Engage</p>
            <div class="row justify-content-center">
                <div class="col-xl-8 col-sm-8 col-md-12">

                    <form class="d-flex justify-content-center flex-column flex-md-row"
                        action="{{ route('consultant.browse') }}">
                        <div class="form-group mb-0 select btm-arrow without-label">
                            <select name="categories[]" id="categories" class="gray form-control h-100">
                                <option value="">Category</option>
                                @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-0 select btm-arrow without-label">
                            <select name="skills[]" id="skills"
                                class="gray form-control h-100 rounded-0 border-left-0 border-right-0">
                                <option value="">Skill</option>
                                @foreach($skills as $skill)
                                <option value="{{ $skill->id }}">{{ $skill->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-0">
                            <input type="text" name="search" class="form-control rounded-0 h-100"
                                placeholder="Consultant's Name" />
                        </div>
                        <button type="submit" class="btn btn-primary-em">Search</button>
                    </form>
                </div>
                @if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
                <div class="col-12 text-center mt-3">
                    <a href="#become-cons"
                        class="text-white become-cons d-inline-flex justify-content-center align-items-center">Become a
                        Consultant<span class="material-icons">chevron_right</span></a>
                </div>
                @endif
            </div>
        </div>
    </section>

    <section class="section trending-cons dark-bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-5">Browse Our Trending Consultants</h2>
                </div>
                @foreach($consultants as $consultant)
                <div class="col-xl-3 col-lg-4 col-sm-6 wow zoomIn fast mb-5" data-wow-delay="0.1s">
                   @include('front.modules.consultant.common.consultant_box_h100', ['consultant' => $consultant])
                </div>
                @endforeach
                <div class="col-md-12 text-center mt-3">
                    @if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
                    <a href="#become-cons" class="btn btn-transparent m-1 become-cons">Become a Consultant</a>
                    @endif
                    <a href="{{ route('consultant.browse') }}" class="btn btn-em m-1">Browse All Consultants</a>
                </div>
            </div>
        </div>
    </section>

    <section class="section curated-cate-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-4">Browse Consultants From Curated Categories</h2>
                </div>
            </div>
            <div class="row">
                @foreach($categories as $category)
                <div class="col-lg-2 col-md-3 col-sm-4 mb-4 col-6 wow zoomIn fast" data-wow-delay="0.1s">
                    <a href="{{ route('consultant.browse')}}?categories[]={{ $category->id }}"
                        class="box orange border text-center shadow-none h-100 m-0 pb-2 d-block">
                        <img src="{{ $category->image_link }}" alt="{{ $category->name }}" />
                        <p class="mb-0 mt-1 bold">{{ $category->name }}</p>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section benifit-sec dark-bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="h2 sec-title mb-0">Benefits of being a registered Consultant</h2>
                </div>
                <div class="col-md-3 col-sm-6 wow zoomIn fast text-center" data-wow-delay="0.1s">
                    <img src="{{ asset('img/visiblity.svg') }}" alt="visiblity" />
                    <h3 class="mt-3 mb-1">Visibility</h3>
                    <p class="gray">Have your profile viewed by serious prospects</p>
                </div>
                <div class="col-md-3 col-sm-6 wow zoomIn fast text-center mt-4 mt-sm-0" data-wow-delay="0.2s">
                    <img src="{{ asset('img/choice.svg') }}" alt="choice" />
                    <h3 class="mt-3 mb-1">Choice</h3>
                    <p class="gray">Receive requests and only engage with projects that interest you</p>
                </div>
                <div class="col-md-3 col-sm-6 wow zoomIn fast text-center mt-4 mt-md-0" data-wow-delay="0.5s">
                    <img src="{{ asset('img/ease.svg') }}" alt="ease" />
                    <h3 class="mt-3 mb-1">Ease</h3>
                    <p class="gray">Our platform is easy, quick and comes with fantastic features</p>
                </div>
                <div class="col-md-3 col-sm-6 wow zoomIn fast text-center mt-4 mt-md-0" data-wow-delay="0.7s">
                    <img src="{{ asset('img/grow.svg') }}" alt="grow" />
                    <h3 class="mt-3 mb-1">Grow</h3>
                    <p class="gray">Pick up leads and take on projects that earn you cash and experience</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section curated-cate-sec">
        <div class="container">
            <div class="row flex-column-reverse flex-md-row align-items-center">
                <div class="col-md-6 mt-4 mt-md-0 wow zoomIn fast">
                    <h2>Incognito Mode</h2>
                    <p>If you would prefer to keep your identity hidden on the consultant profile; then use our
                        "Incognito Mode" feature that will hide your identity from your public profile</p>
                    @if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
                    <a href="#become-cons" class="btn btn-transparent become-cons">Become a Consultant</a>
                    @endif
                </div>
                <div class="col-md-6 wow zoomIn fast">
                    <img src="{{ asset('img/incognito-mode.svg') }}" alt="incognito-mode" />
                </div>
            </div>
            <div class="row align-items-center mt-5">
                <div class="col-md-6 wow zoomIn fast">
                    <img src="{{ asset('img/cv-builder.svg') }}" alt="cv-builder" />
                </div>
                <div class="col-md-6 mt-4 mt-md-0 wow zoomIn fast">
                    <h2>CV Builder</h2>
                    <p>Use our CV Builder feature that will give prospective clients a clear understanding of your
                        experience in a clear and professionally designed template format.</p>
                    @if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
                    <a href="#become-cons" class="btn btn-transparent become-cons">Become a Consultant</a>
                    @endif
                </div>
            </div>
        </div>
    </section>

    @if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
    @include('front.modules.consultant.common.join_as_consultant')
    @endif

</main>
@endsection

@push('pageJs')
<script>
    $(document).ready(function() {

        $(document).on('change', '#categories', function() {
            axios.get("{{ route('common.select2Options') }}", {
                params: {
                    type: 'skills',
                    category: $('#categories').val()
                }
            }).then(function(response) {
                this.data = response.data;
                $('#skills').empty();
                $('#skills').append($('<option>', {
                    value: "",
                    text: "Skill"
                }));
                this.data.forEach(function(item) {
                    $('#skills').append($('<option>', {
                        value: item.id,
                        text: item.text
                    }))
                });
            });
        });

    });
</script>
@endpush

@include('front.modules.consultant.common.contact_consultant',[
'userDetails' => $userDetails
])