@php
    use Carbon\Carbon;
@endphp

@extends('layouts.site')

@section('scripts')

@endsection

@section('page-content')

<!-- ============================ Hero Banner  Start================================== -->
<div class="image-cover hero-header primary-bg-dark" data-overlay="0">
    <div class="position-absolute top-0 end-0 z-0">
        <img src="assets/img/shape-3-soft-light.svg" alt="SVG" width="500" />
    </div>
    <div class="position-absolute top-0 start-0 me-10 z-0">
        <img src="assets/img/shape-1-soft-light.svg" alt="SVG" width="250" />
    </div>
    <div class="container d-flex flex-column justify-content-center position-relative zindex-2 pt-sm-3 pt-md-4 pt-xl-5">
        <div class="row justify-content-between align-items-center">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <h6 class="primary-2-cl fw-medium d-inline-flex align-items-center mb-3"><span class="primary-2-bg w-10 h-05 me-2"></span>
                    Bienvenue sur</h6>
                <h1 class="mb-4">
                    JOBBO,<br />
                    <span>Trouvez les Meilleurs Prestataires de Services en un Clic !</span>
                </h1>
                <p class="fs-5">Que vous soyez à la recherche d'un freelance talentueux ou d'une entreprise spécialisée,
                    JOBBO met à votre disposition une vaste gamme de professionnels prêts à répondre à vos besoins.</p>
                <!--div class="lios-vrst">
                    <ul>
                        <li>
                            <div class="lios-parts">
                                <h2><span class="ctr">200</span><span class="primary-2-cl">K</span></h2>
                                <h6>Freelances</h6>
                            </div>
                        </li>

                        <li>
                            <div class="lios-parts">
                                <h2><span class="ctr">40</span><span class="primary-2-cl">K</span></h2>
                                <h6>Entreprises</h6>
                            </div>
                        </li>

                        <li>
                            <div class="lios-parts">
                                <h2><span class="ctr">340</span><span class="primary-2-cl">K</span></h2>
                                <h6>Devis</h6>
                            </div>
                        </li>
                    </ul>
                </div-->
            </div>

            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                <div class="hero-search-wrap">
                    <div class="hero-search">
                        <h1>Quel est votre <br> <span class="text-primary">Besoin ?</span></h1>
                    </div>
                    <div class="hero-search-content verticle-space">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="form-group">
                                    <div class="input-with-icon">
                                        <input type="text" class="form-control border" placeholder="Mots-clés..." />
                                        <img src="assets/img/pin.svg" width="18" alt="" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-12 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Service</label>
                                    <select class="form-control">
                                        <option value="1">Electricité</option>
                                        <option value="2">Déménagement</option>
                                        <option value="3">Réseau</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-12 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Prestation</label>
                                    <select class="form-control">
                                        <option value="1">Cablage</option>
                                        <option value="2">Maintenance</option>
                                        <option value="3">Réparation</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Nombre de Prestataires</label>
                                    <select class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5+</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Adresse</label>
                                    <input type="text" class="form-control border" placeholder="Adresse" />
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label>Téléphone</label>
                                    <input type="phone" class="form-control border" placeholder="Téléphone" />
                                </div>
                            </div>

                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <button type="submit" class="btn btn-dark full-width">Recherche</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-absolute bottom-0 start-0 z-0">
        <img src="assets/img/shape-2-soft-light.svg" alt="SVG" width="400" />
    </div>
</div>
<!-- ============================ Hero Banner End ================================== -->

<!-- ============================ Our Partners Start ================================== -->
<section class="min">
    <div class="container">
        <div class="row justify-content-center mb-2">
            <div class="col-xl-4 col-lg-7 col-md-10 text-center">
                <div class="center mb-4">
                    <h5 class="fw-medium lh-lg">Rejoignez plus de 2 000 entreprises dans le monde qui font confiance à la plateforme
                        <span class="text-primary">JOBBO</span>
                    </h5>
                </div>
            </div>
        </div>

        <div class="row align-items-center justify-content-center row-cols-xl-5 row-cols-lg-5 row-cols-md-3 row-cols-3 gx-3 gy-3">
            <div class="col">
                <figure class="single-brand thumb-figure">
                    <img src="assets/img/brand/layar-primary.svg" class="img-fluid" alt="" />
                </figure>
            </div>

            <div class="col">
                <figure class="single-brand thumb-figure">
                    <img src="assets/img/brand/mailchimp-primary.svg" class="img-fluid" alt="" />
                </figure>
            </div>

            <div class="col">
                <figure class="single-brand thumb-figure">
                    <img src="assets/img/brand/fitbit-primary.svg" class="img-fluid" alt="" />
                </figure>
            </div>

            <div class="col">
                <figure class="single-brand thumb-figure">
                    <img src="assets/img/brand/capsule-primary.svg" class="img-fluid" alt="" />
                </figure>
            </div>

            <div class="col">
                <figure class="single-brand thumb-figure">
                    <img src="assets/img/brand/vidados-primary.svg" class="img-fluid" alt="" />
                </figure>
            </div>
        </div>
    </div>
</section>
<div class="clearfix"></div>
<!-- ============================ Our Partners End ================================== -->

<!-- ============================ Top Job Categories Start ================================== -->
<section class="gray-simple">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-7 col-md-10 text-center">
                <div class="sec-heading center">
                    <h2>Nos Catégories</h2>
                    <p>Trouvez les Experts qu'il Vous Faut pour Tous Vos Besoins</p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center gx-4 gy-4">

            @foreach($secteurs as $secteur)
            <!-- Single Item -->
            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                <div class="category-box">
                    <div class="category-desc">
                        <div class="category-icon">
                            <i class="fa-solid fa-file-invoice text-primary"></i>
                            <i class="fa-solid fa-file-invoice abs-icon"></i>
                        </div>
                        <div class="category-detail category-desc-text">
                            <h4 class="fs-5"><a href="">{{ $secteur->libelle }}</a></h4>
                            <p class="block">{{ $secteur->prestataires->count() }} Prestataires Actifs</p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- ============================ Top Job Categories End ================================== -->

<!-- ============================ Top Features & Process Start ================================== -->
<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-7 col-md-10">
                <div class="sec-heading center">
                    <h2>Comment Ça Marche ?</h2>
                    <p>Découvrez en Quelques Étapes Simples Comment Utiliser JOBBO !</p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center gx-xl-4 gx-lg-4">

            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-file-shield text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Créez Votre Compte</h4>
                        <p>Inscrivez-vous gratuitement sur Jobbo pour accéder à toutes les fonctionnalités de la plateforme.
                            Créez un profil détaillé pour vous présenter et définir vos services.</p>
                    </div>
                </div>
            </div>

            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-paste text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Publiez Votre Demande</h4>
                        <p>Soumettez une demande de service en remplissant notre formulaire simple et intuitif. Décrivez vos
                            besoins et vos attentes pour recevoir des propositions adaptées.</p>
                    </div>
                </div>
            </div>


            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-unlock text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Recevez des Propositions</h4>
                        <p>Explorez les devis et les offres envoyés par les prestataires intéressés. Comparez les options pour choisir
                            la meilleure solution pour votre projet.</p>
                    </div>
                </div>
            </div>

            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-user-clock text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Sélectionnez Votre Prestataire</h4>
                        <p>Choisissez le prestataire qui correspond le mieux à vos besoins. Engagez-vous avec lui directement via notre
                                plateforme pour discuter des détails du projet.</p>
                    </div>
                </div>
            </div>

            <!--div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-3 order-md-3">
                <div class="eslio-pincc m-auto">
                    <img src="assets/img/loginJobbo.png" height="893" width="450" class="img-fluid" alt="" />
                </div>
            </div-->

            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-3 order-lg-2 order-md-2">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-laptop-file text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Suivez l'Avancement</h4>
                        <p>Gardez le suivi de l’avancement de votre projet et communiquez facilement avec le prestataire via notre interface sécurisée et cela en toute quiétude.</p>
                    </div>
                </div>
            </div>



            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-business-time text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Évaluez et Donnez Votre Avis</h4>
                        <p>Une fois le projet terminé, laissez un avis pour aider les autres utilisateurs à choisir des prestataires de qualité et améliorer
                            l'expérience sur JOBBO.</p>
                    </div>
                </div>
            </div>



            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process mb-5">
                    <div class="work-process-icon">
                        <span><i class="fa-solid fa-sack-dollar text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Gérez Vos Projets en Cours</h4>
                        <p>Accédez à votre tableau de bord pour suivre l'évolution de tous vos projets en cours et communiquer directement avec les différents
                            prestataires depuis le chat privé de votre espace personnel.</p>
                    </div>
                </div>
            </div>


            <!-- Single Item -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
                <div class="work-process">
                    <div class="work-process-icon">
                        <span><i class="fa-regular fa-face-laugh-wink text-primary"></i></span>
                    </div>
                    <div class="work-process-caption">
                        <h4>Accédez aux Ressources et Support</h4>
                        <p>Bénéficiez de notre centre d'aide et de nos ressources pour résoudre tout problème ou répondre à vos questions. Notre équipe de support est disponible pour vous.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- ============================ Top Features & Process End ================================== -->

<!-- ============================ Video Help Start ================================== -->
<!--section class="bg-cover" style="background: #17ac6a url(assets/img/video-bg.jpg) no-repeat;" data-overlay="4">
    <div class="ht-200"></div>
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-xl-12 col-lg-12">
                <div class="overlio-vedio-box">
                    <a href="#" class="play-video-btn text-primary"><i class="fa-solid fa-play"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="ht-200"></div>
</section-->
<!-- ============================ Video Help End ================================== -->


<!-- ============================ Good Reviews By Customers ================================== -->
<!--section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-10 text-center">
                <div class="sec-heading center">
                    <h2>Ce Que Disent Nos Utilisateurs</h2>
                    <p>Découvrez les Avis et Témoignages de Ceux Qui Nous Font Confiance !</p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center gx-4 gy-4">

            @foreach($reviews as $review)
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="jobstock-reviews-box">
                    <div class="jobstock-reviews-desc">
                        <h6 class="review-title-yui">"{{ $review->slogan }}"</h6>
                        <p>{!! $review->commentaire !!}</p>
                    </div>
                    <div class="jobstock-reviews-flex">
                        <div class="jobstock-reviews-thumb">
                            @if($review->user_id != NULL || !empty($review->user_id) || $review->user_id != 0)
                                <div class="jobstock-reviews-figure"><img src="{{ $review->user->avatar }}" class="img-fluid circle" alt="" /></div>
                            @else
                                <div class="jobstock-reviews-figure"><img src="assets/img/avatar.png class="img-fluid circle" alt="" /></div>
                            @endif
                        </div>
                        <div class="jobstock-reviews-caption">
                            <div class="jobstock-reviews-title"><h4>{{ $review->nom_complet }}</h4></div>
                            <div class="jobstock-reviews-designation"><span>{{ $review->profession }}</span></div>
                            <div class="jobstock-reviews-rates">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star deactive"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section-->
<!-- ============================ Good Reviews By Customers ================================== -->

<!-- ============================ Call To Action ================================== -->
<section class="bg-cover call-action-container dark primary-bg-dark" style="background: url(assets/img/footer-bg-dark.png) no-repeat;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-10 col-md-12 col-sm-12">
                <div class="call-action-wrap">
                    <div class="call-action-caption">
                        <h2 class="text-light">Des Contenus Exclusifs Rien Que Pour Vous</h2>
                        <p class="fs-6 text-light">
                            Inscrivez-vous à notre newsletter et accédez à des ressources uniques, des interviews inspirantes et des réductions exclusives.
                        </p>
                    </div>
                    <div class="call-action-form">
                        <form>
                            <div class="newsltr-form">
                                <input type="text" class="form-control" placeholder="Entrez Votre Email" />
                                <button type="button" class="btn btn-subscribe">S'abonner</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ============================ Call To Action End ================================== -->


@endsection

@section('scripts')
    <!-- Les scripts spécifiques à cette vue enfant vont ici -->
@endsection