@php
    use Carbon\Carbon;
@endphp

@extends('layouts.site')

@section('styles')

@endsection

@section('page-content')

<!-- ============================ Page Title Start================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/bg2.png)no-repeat;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">

                <h2 class="ipt-title text-light">Aide & Support</h2>
                <span class="text-light opacity-75">Votre satisfaction, notre priorité : trouvez des réponses rapides à vos questions et obtenez l'assistance dont vous avez besoin. !</span>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Page Title End ================================== -->

<!-- ============================ Agency List Start ================================== -->
<section class="gray-simple">

    <div class="container">

        <!-- row Start -->
        <div class="row">

            <div class="col-xl-8 col-lg-8 col-md-12">

                <div class="col-lg-12 col-md-12">
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Foire aux Questions (FAQ)</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Retrouvez ici les réponses aux questions les plus fréquemment posées par nos utilisateurs.
                                    <ul>
                                        <li><strong>1. Comment créer un compte ?</strong><br> Pour créer un compte, cliquez sur le bouton
                                            "Inscription" en haut à droite de la page d'accueil, puis remplissez le formulaire avec vos informations personnelles.</li><br>
                                        <li><strong>2. Comment modifier mon profil ?</strong><br> Pour modifier votre profil, connectez-vous à votre compte, accédez à
                                            la section "Mon Profil", puis cliquez sur "Modifier" pour mettre à jour vos informations.</li><br>
                                        <li><strong>3. Comment soumettre une demande de service ?</strong><br> Pour soumettre une demande de service, connectez-vous à
                                            votre compte, cliquez sur "Soumettre une demande", remplissez les détails requis et cliquez sur "Envoyer".</li>
                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>



                <div class="col-lg-12 col-md-12">
                    <br>
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Guide de l'Utilisateur</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Un guide complet pour vous aider à naviguer et utiliser toutes les fonctionnalités de JOBBO.
                                    <ul>
                                        <li><strong>1. Présentation de la plateforme</strong><br> Une vue d'ensemble de la plateforme JOBBO, ses
                                            fonctionnalités principales et comment elle peut vous aider.</li><br>
                                        <li><strong>2. Utilisation des services</strong><br> Étape par étape pour utiliser les différents services proposés par JOBBO,
                                            de la création de votre profil à la gestion de vos demandes.</li><br>
                                        <li><strong>3. Conseils d'optimisation</strong><br> Des astuces et des recommandations pour tirer le meilleur parti de la
                                            plateforme et optimiser votre expérience utilisateur.</li>
                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>



                <div class="col-lg-12 col-md-12">
                    <br>
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Assistance Technique</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Obtenez de l'aide pour résoudre les problèmes techniques que vous pourriez rencontrer.
                                    <ul>
                                        <li><strong>1. Problèmes de connexion</strong><br> Solutions aux problèmes courants de connexion et procédures de récupération de mot de passe.</li><br>
                                        <li><strong>2. Problèmes de navigation</strong><br> Comment résoudre les problèmes de navigation sur le site, tels que les pages qui ne se chargent pas
                                            correctement ou les fonctionnalités qui ne fonctionnent pas.</li><br>
                                        <li><strong>3. Support logiciel</strong><br> Assistance pour les problèmes liés à l'utilisation des logiciels compatibles avec JOBBO, tels que les navigateurs web ou les applications mobiles.</li>
                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-lg-12 col-md-12">
                    <br>
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Contactez-nous</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Pour toute autre question ou assistance personnalisée, n'hésitez pas à nous contacter.
                                    <ul>
                                        <li><strong>1. Formulaire de contact</strong><br>
                                            Un formulaire simple pour soumettre vos questions ou demandes spécifiques directement à notre équipe de support.</li><br>

                                        <li><strong>2. Coordonnées</strong><br>
                                            Nos coordonnées téléphoniques et adresse email pour une assistance plus immédiate.</li><br>

                                        <li><strong>3. Horaires de support</strong><br>
                                            Nos heures d'ouverture pour le support client afin que vous sachiez quand nous sommes disponibles pour vous aider.</li>

                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>



                <div class="col-lg-12 col-md-12">
                    <br>
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Tutoriels Vidéo</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Des vidéos explicatives pour vous montrer comment utiliser les différentes fonctionnalités de JOBBO.
                                    <ul>
                                        <li><strong>1. Inscription et configuration du profil</strong><br>
                                            Une vidéo qui vous guide à travers le processus d'inscription et de configuration initiale de votre profil.</li><br>

                                        <li><strong>2. Soumission de demandes de service</strong><br>
                                            Une démonstration en vidéo de la façon de soumettre des demandes de service sur la plateforme.</li><br>

                                        <li><strong>3. Utilisation des fonctionnalités avancées</strong><br>
                                            Des tutoriels sur l'utilisation des fonctionnalités avancées, telles que l'envoi de devis et de factures, ou l'évaluation des prestataires.</li>

                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-lg-12 col-md-12">
                    <br>
                    <div class="box-block-wrap-group">

                        <div class="box-block-wrap">
                            <div class="box-block-wrap_header">
                                <h4 class="box-block-wrap_title text-primary">Communauté et Forums</h4>
                            </div>

                            <div class="box-block-wrap-body">
                                <p>
                                    Rejoignez notre communauté d'utilisateurs pour échanger des astuces, poser des questions et trouver des solutions.
                                    <ul>
                                        <li><strong>1. Forums de discussion</strong><br>
                                            Différents forums pour discuter de divers sujets liés à l'utilisation de JOBBO, partager des expériences et demander des conseils.</li><br>

                                        <li><strong>2. Groupes d'utilisateurs</strong><br>
                                            Groupes spécifiques pour les différents types d'utilisateurs (freelancers, entreprises, clients) pour des discussions plus ciblées.</li><br>

                                        <li><strong>3. Événements et webinaires</strong><br>
                                            Informations sur les événements à venir et les webinaires organisés par JOBBO pour vous aider à tirer le meilleur parti de la plateforme.</li>

                                    </ul>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="col-xl-4 col-lg-4 col-md-12">
                <div class="box-block-wrap-group">

                    <div class="box-block-wrap">
                        <div class="box-block-wrap_header">
                            <h4 class="box-block-wrap_title text-primary">Que pensez-vous de JOBBO ?</h4>
                        </div>

                        <div class="box-block-wrap-body">

                            <form method="POST" action="">
                                <div class="form-group">
                                    <label class="text-primary">Nom Complet</label>
                                    <input type="text" class="form-control" placeholder="Nom Complet" name="name">
                                </div>
                                <div class="form-group">
                                    <label class="text-primary">Email</label>
                                    <input type="email" class="form-control" placeholder="Email" name="email">
                                </div>
                                <div class="form-group">
                                    <label class="text-primary">Téléphone</label>
                                    <input type="text" class="form-control" placeholder="Téléphone" name="phone">
                                </div>
                                <div class="form-group">
                                    <label class="text-primary">Profession</label>
                                    <input type="text" class="form-control" placeholder="Profession" name="profession">
                                </div>
                                <div class="form-group">
                                    <label class="text-primary">Decrivez JOBBO en une phrase</label>
                                    <input type="text" class="form-control" placeholder="Ex. Un Gain de Temps Inestimable" name="message_min">
                                </div>

                                <div class="form-group">
                                    <label class="text-primary">Partagez nous votre experience JOBBO</label>
                                    <textarea class="form-control" placeholder="Votre message..." name="message_max" maxlength="300"></textarea>
                                    <small><strong class="text-primary">NB : </strong>Maximum 300 caracteres !</small>
                                </div>

                                <div class="form-group">
                                    <label class="text-primary">
                                        <strong>Quelle note donnez-vous a JOBBO ?</strong>
                                    </label>

                                    <input type="hidden" name="rating" value="1" id="rating" />

                                    <div class="star-container text-primary" id="one-star">
                                        1e étoile &nbsp; <i class="bi bi-star" id="star-11" onclick="setOne(1)"></i>
                                        <br>
                                    </div>

                                    <div class="star-container text-primary" id="two-star">
                                        2 étoiles &nbsp; <i class="bi bi-star" id="star-21" onclick="setTwo(2)"></i>
                                        <i class="bi bi-star" id="star-22" onclick="setTwo(2)"></i><br>
                                    </div>

                                    <div class="star-container text-primary" id="three-star">
                                        3 étoiles &nbsp; <i class="bi bi-star" id="star-31" onclick="setThree(3)"></i>
                                        <i class="bi bi-star" id="star-32" onclick="setThree(3)"></i>
                                        <i class="bi bi-star" id="star-33" onclick="setThree(3)"></i><br>
                                    </div>

                                    <div class="star-container text-primary" id="four-star">
                                        4 étoiles &nbsp; <i class="bi bi-star" id="star-41" onclick="setFour(4)"></i>
                                        <i class="bi bi-star" id="star-42" onclick="setFour(4)"></i>
                                        <i class="bi bi-star" id="star-43" onclick="setFour(4)"></i>
                                        <i class="bi bi-star" id="star-44" onclick="setFour(4)"></i><br>
                                    </div>

                                    <div class="star-container text-primary" id="five-star">
                                        5 étoiles &nbsp; <i class="bi bi-star" id="star-51" onclick="setFive(5)"></i>
                                        <i class="bi bi-star" id="star-52" onclick="setFive(5)"></i>
                                        <i class="bi bi-star" id="star-53" onclick="setFive(5)"></i>
                                        <i class="bi bi-star" id="star-54" onclick="setFive(5)"></i>
                                        <i class="bi bi-star" id="star-55" onclick="setFive(5)"></i>
                                    </div>

                                </div>

                                <br>

                                <div class="form-group m-0">
                                    <button type="button" class="btn btn-primary fw-medium full-width">Soumettre</button>
                                </div>

                                <br>

                                <p class="text-muted mt-2">
                                    Vos informations personnelles resteront strictement confidentielles et ne seront pas partagées avec des tiers.
                                    Pour plus de détails, veuillez consulter notre <a href="{{ route('site.policy') }}" class="text-primary" target="_blank">Politique de Confidentialité</a>.
                                </p>
                            </form>

                        </div>
                    </div>

                </div>

            </div>

        </div>
        <!-- /row -->

    </div>

</section>
<!-- ============================ Agency List End ================================== -->


<!-- ============================ Call To Action ================================== -->
<section class="bg-cover 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="sec-heading center">
                        <h2 class="lh-base mb-3 text-light">Devenez un Partenaire<br>JOBBO</h2>
                        <p class="fs-6 text-light">Devenez Partenaire de JOBBO et Développez Votre Activité et Profitez d'une Visibilité Accrue, Accédez à
                            Des Opportunités de Qualité et Rejoignez Une Communauté Dynamique de Clients et de Collaborateurs.</p>
                    </div>
                    <div class="call-action-buttons mt-3">
                        <a href="" class="btn btn-lg btn-dark fw-medium px-xl-5 px-lg-4 me-2">Freelance</a>
                        <a href="" class="btn btn-lg btn-whites fw-medium px-xl-5 px-lg-4 text-primary">Entreprise</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Call To Action End ================================== -->

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script>
    function resetStars() {
        const stars = document.querySelectorAll('.bi-star-fill');
        stars.forEach(star => {
            star.classList.remove('bi-star-fill');
            star.classList.add('bi-star');
        });
    }

    function setOne(value) {
        resetStars();
        document.getElementById('star-11').classList.remove('bi-star');
        document.getElementById('star-11').classList.add('bi-star-fill');
        document.getElementById('rating').value = value;
    }

    function setTwo(value) {
        resetStars();
        document.getElementById('star-21').classList.remove('bi-star');
        document.getElementById('star-21').classList.add('bi-star-fill');
        document.getElementById('star-22').classList.remove('bi-star');
        document.getElementById('star-22').classList.add('bi-star-fill');
        document.getElementById('rating').value = value;
    }

    function setThree(value) {
        resetStars();
        document.getElementById('star-31').classList.remove('bi-star');
        document.getElementById('star-31').classList.add('bi-star-fill');
        document.getElementById('star-32').classList.remove('bi-star');
        document.getElementById('star-32').classList.add('bi-star-fill');
        document.getElementById('star-33').classList.remove('bi-star');
        document.getElementById('star-33').classList.add('bi-star-fill');
        document.getElementById('rating').value = value;
    }

    function setFour(value) {
        resetStars();
        document.getElementById('star-41').classList.remove('bi-star');
        document.getElementById('star-41').classList.add('bi-star-fill');
        document.getElementById('star-42').classList.remove('bi-star');
        document.getElementById('star-42').classList.add('bi-star-fill');
        document.getElementById('star-43').classList.remove('bi-star');
        document.getElementById('star-43').classList.add('bi-star-fill');
        document.getElementById('star-44').classList.remove('bi-star');
        document.getElementById('star-44').classList.add('bi-star-fill');
        document.getElementById('rating').value = value;
    }

    function setFive(value) {
        resetStars();
        document.getElementById('star-51').classList.remove('bi-star');
        document.getElementById('star-51').classList.add('bi-star-fill');
        document.getElementById('star-52').classList.remove('bi-star');
        document.getElementById('star-52').classList.add('bi-star-fill');
        document.getElementById('star-53').classList.remove('bi-star');
        document.getElementById('star-53').classList.add('bi-star-fill');
        document.getElementById('star-54').classList.remove('bi-star');
        document.getElementById('star-54').classList.add('bi-star-fill');
        document.getElementById('star-55').classList.remove('bi-star');
        document.getElementById('star-55').classList.add('bi-star-fill');
        document.getElementById('rating').value = value;
    }
</script>
@endsection