@extends('layouts.app')

@php $activePage = 'contact'; @endphp

@section('content')
<!-- Breadcrumbs -->
<div class="breadcrumbs overlay">
    <div class="container">
        <div class="bread-inner">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-white">
                        <i class="fa fa-ch"></i> Contactez-Nous
                    </h3>
                    <ul class="bread-list">
                        <li>
                            <a href="{{ route('accueil') }}">
                                Accueil
                            </a>
                        </li>
                        <li>
                            <i class="fa fa-chevron-right"></i>
                        </li>
                        <li class="active">
                            prenez contact
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contact Section -->
<section class="contact-us section">
    <div class="container">
        <div class="inner">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="contact-us-form">
                        <h2>Contactez nous</h2>
                        <p>Veuillez nous laisser un message particulier pour toute information concernant : <br><br>
                            <i class="fas fa-university text-info"></i>  L'IRIEC : Institut de Recherche et d'Information en &Eacute;conomie de la Construction <br><br>
                            <i class="fas fa-chart-line text-info"></i>  OPCC : Observatoire Permanent des Co&ucirc;ts de la construction
                        </p>
                        <form class="form" action="#" method="POST" id="form_getrdv">
                            @csrf
                            <div class="row">
                                <!-- Nom & Prenom Input -->
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input type="text" name="fullName" id="nomComplet" placeholder="Nom & Pr&eacute;nom">
                                    </div>
                                </div>

                                <!-- Email Input -->
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input type="email" name="email" id="emailContact" placeholder="Email">
                                    </div>
                                </div>

                                <!-- Telephone Input -->
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <input type="tel" name="telephone" id="telephone" placeholder="T&eacute;l&eacute;phone">
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <select name="statut" id="statut" class="form-control wide">
                                            <option value="">Vous &ecirc;tes</option>
                                            <option value="Chef d'entreprise">Chef d'entreprise</option>
                                            <option value="Salari&eacute;(e)">Salari&eacute;(e)</option>
                                            <option value="Ind&eacute;pendant(e)">Ind&eacute;pendant(e)</option>
                                            <option value="Entreprise industrielle">Entreprise industrielle</option>
                                            <option value="Ma&icirc;tre d'ouvrage">Ma&icirc;tre d'ouvrage</option>
                                            <option value="Architecte">Architecte</option>
                                            <option value="&Eacute;conomiste de la construction">&Eacute;conomiste de la construction</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <select name="souhait" id="souhait" class="form-control wide">
                                            <option value="">Vous souhaiter ?</option>
                                            <option value="Commander une &eacute;tude">Commander une &eacute;tude</option>
                                            <option value="Recevoir les indicateurs Maccro">Recevoir les indicateurs Maccro</option>
                                            <option value="Conna&icirc;tre l'Observatoire permanent des co&ucirc;ts de la construction">Conna&icirc;tre l'Observatoire permanent des co&ucirc;ts de la construction</option>
                                            <option value="Les trois (03) informations">Les trois (03) informations</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <select name="ouvrage" id="ouvrage" class="form-control wide">
                                            <option value="">Ouvrage concern&eacute; ?</option>
                                            <option value="A - B&acirc;timents &agrave; usage d'habitation">A - B&acirc;timents &agrave; usage d'habitation</option>
                                            <option value="B - B&acirc;timents &agrave; usage scolaire">B - B&acirc;timents &agrave; usage scolaire</option>
                                            <option value="C - B&acirc;timents &agrave; usage agricole, industriel ou commercial">C - B&acirc;timents &agrave; usage agricole, industriel ou commercial</option>
                                            <option value="D - B&acirc;timents &agrave; usage tertiaire">D - B&acirc;timents &agrave; usage tertiaire</option>
                                            <option value="E - B&acirc;timents &agrave; usage culturel ou socio-culturel">E - B&acirc;timents &agrave; usage culturel ou socio-culturel</option>
                                            <option value="F - B&acirc;timents &agrave; usage social ou m&eacute;dico-social">F - B&acirc;timents &agrave; usage social ou m&eacute;dico-social</option>
                                            <option value="G - B&acirc;timents &agrave; usage hospitalier">G - B&acirc;timents &agrave; usage hospitalier</option>
                                            <option value="H - B&acirc;timents &agrave; usage h&ocirc;telier ou de restauration">H - B&acirc;timents &agrave; usage h&ocirc;telier ou de restauration</option>
                                            <option value="I - B&acirc;timents &agrave; usage sportif ou de loisirs">I - B&acirc;timents &agrave; usage sportif ou de loisirs</option>
                                            <option value="J - B&acirc;timents judiciaires">J - B&acirc;timents judiciaires</option>
                                            <option value="K - B&acirc;timents d&eacute;di&eacute;s au transport">K - B&acirc;timents d&eacute;di&eacute;s au transport</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <select name="region" id="region" class="form-control wide">
                                            <option value="">Votre r&eacute;gion ?</option>
                                            <option value="Auvergne-Rh&ocirc;ne-Alpes">Auvergne-Rh&ocirc;ne-Alpes</option>
                                            <option value="Bourgogne-Franche-Comt&eacute;">Bourgogne-Franche-Comt&eacute;</option>
                                            <option value="Bretagne">Bretagne</option>
                                            <option value="Centre-Val de Loire">Centre-Val de Loire</option>
                                            <option value="Corse">Corse</option>
                                            <option value="Grand Est">Grand Est</option>
                                            <option value="Guadeloupe">Guadeloupe</option>
                                            <option value="Guyane">Guyane</option>
                                            <option value="Hauts-de-France">Hauts-de-France</option>
                                            <option value="&Icirc;le-de-France">&Icirc;le-de-France</option>
                                            <option value="Martinique">Martinique</option>
                                            <option value="Mayotte">Mayotte</option>
                                            <option value="Normandie">Normandie</option>
                                            <option value="Nouvelle-Aquitaine">Nouvelle-Aquitaine</option>
                                            <option value="Occitanie">Occitanie</option>
                                            <option value="Pays de la Loire">Pays de la Loire</option>
                                            <option value="Provence-Alpes-C&ocirc;te d'Azur">Provence-Alpes-C&ocirc;te d'Azur</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-8 col-8">
                                    <div class="form-group">
                                        <input name="name" id="sujet" type="text" placeholder="Objet :">
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-12">
                                    <div class="form-group">
                                        <textarea name="message" id="message" placeholder="Description de votre message"></textarea>
                                    </div>
                                </div>
                            </div>
                            <br><br><br>
                            <div class="row">
                                <div class="col-3">
                                    <div class="form-group">
                                        <div class="button">
                                            <button type="submit" name="SendMessage" class="btn" id="bRegister">
                                                <i class="fa fa-check"></i>
                                                Envoyer le message
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <div class="button">
                                            <button type="reset" name="cancelSendMessage" class="btn">
                                                <i class="fa fa-chevron-left"></i>
                                                Annuler
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div id="status">
                                    Veuillez remplir tous les champs !
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('extra_js')
<script>
    $(document).ready(function(){
        $("#form_getrdv input, #form_getrdv textarea").focus(function(){
            $("#status").fadeOut(400);
        });

        $("#form_getrdv").submit(function(e){
            e.preventDefault();
            var status = $("#status");
            var nomComplet = $("#nomComplet").val();
            var emailContact = $("#emailContact").val();
            var telephone = $("#telephone").val();
            var statut = $("#statut").val();
            var souhait = $("#souhait").val();
            var ouvrage = $("#ouvrage").val();
            var region = $("#region").val();
            var sujet = $("#sujet").val();
            var message = $("#message").val();

            if(nomComplet == "" || emailContact == "" || telephone == "" || sujet == "" || message == ""){
                status.html("Veuillez remplir tous les champs, avant de continuer").fadeIn(400);
            } else {
                $.ajax({
                    type: "post",
                    url: "{{ route('ajax.contact') }}",
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'nomComplet': nomComplet,
                        'emailContact': emailContact,
                        'telephone': telephone,
                        'statut': statut,
                        'souhait': souhait,
                        'ouvrage': ouvrage,
                        'region': region,
                        'sujet': sujet,
                        'message': message
                    },
                    beforeSend: function(){
                        $("#bRegister").html('<i class="fa fa-spinner fa-spin"></i> Traitement en cours...');
                    },
                    success: function(data){
                        if(data == "register_success"){
                            // Afficher l'alerte de succ&egrave;s
                            status.html('<div style="background:#d4edda;color:#155724;padding:15px;border-radius:5px;border:1px solid #c3e6cb;"><i class="fa fa-check-circle"></i> Votre formulaire a &eacute;t&eacute; envoy&eacute; avec succ&egrave;s. Le service OPCC prendra contact avec vous tr&egrave;s prochainement.</div>').fadeIn(400);
                            // R&eacute;initialiser le formulaire
                            $("#form_getrdv")[0].reset();
                            $("#bRegister").html('<i class="fa fa-check"></i> Envoyer le message');
                        } else {
                            status.html('<div style="background:#f8d7da;color:#721c24;padding:15px;border-radius:5px;border:1px solid #f5c6cb;"><i class="fa fa-exclamation-triangle"></i> ' + data + '</div>').fadeIn(400);
                            $("#bRegister").html('<i class="fa fa-check"></i> Envoyer le message');
                        }
                    },
                    error: function(xhr){
                        var errorMsg = "Erreur lors de l'envoi. Veuillez r\u00e9essayer.";
                        if(xhr.responseJSON && xhr.responseJSON.errors){
                            var errors = xhr.responseJSON.errors;
                            errorMsg = "";
                            for(var field in errors){
                                errorMsg += errors[field].join(", ") + "<br>";
                            }
                        }
                        status.html('<div style="background:#f8d7da;color:#721c24;padding:15px;border-radius:5px;border:1px solid #f5c6cb;"><i class="fa fa-exclamation-triangle"></i> ' + errorMsg + '</div>').fadeIn(400);
                        $("#bRegister").html('<i class="fa fa-check"></i> Envoyer le message');
                    }
                });
            }
        });
    });
</script>
@endsection