@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">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Vous &ecirc;tes</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected">Chef d'entreprise</li>
                                                <li data-value="2" class="option">Salari&eacute;(e)</li>
                                                <li data-value="3" class="option">Ind&eacute;pendant(e)</li>
                                                <li data-value="4" class="option">Entreprise industrielle</li>
                                                <li data-value="5" class="option">Ma&icirc;tre d'ouvrage</li>
                                                <li data-value="6" class="option">Architecte</li>
                                                <li data-value="7" class="option">&Eacute;conomiste de la construction</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Vous souhaiter ?</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected">Commander une &eacute;tude</li>
                                                <li data-value="2" class="option">Recevoir les indicateurs Maccro</li>
                                                <li data-value="3" class="option">Conna&icirc;tre l'Observatoire permanent des co&ucirc;ts de la construction</li>
                                                <li data-value="4" class="option">Les trois (03) informations</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Ouvrage concern&eacute; ?</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected">A - B&acirc;timents &agrave; usage d'habitation</li>
                                                <li data-value="2" class="option">B - B&acirc;timents &agrave; usage scolaire</li>
                                                <li data-value="3" class="option">C - B&acirc;timents &agrave; usage agricole, industriel ou commercial</li>
                                                <li data-value="4" class="option">D - B&acirc;timents &agrave; usage tertiaire</li>
                                                <li data-value="5" class="option">E - B&acirc;timents &agrave; usage culturel ou socio-culturel</li>
                                                <li data-value="6" class="option">F - B&acirc;timents &agrave; usage social ou m&eacute;dico-social</li>
                                                <li data-value="7" class="option">G - B&acirc;timents &agrave; usage hospitalier</li>
                                                <li data-value="8" class="option">H - B&acirc;timents &agrave; usage h&ocirc;telier ou de restauration</li>
                                                <li data-value="9" class="option">I - B&acirc;timents &agrave; usage sportif ou de loisirs</li>
                                                <li data-value="10" class="option">J - B&acirc;timents judiciaires</li>
                                                <li data-value="11" class="option">K - B&acirc;timents d&eacute;di&eacute;s au transport</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="form-group">
                                        <div class="nice-select form-control wide" tabindex="0"><span class="current">Votre r&eacute;gion ?</span>
                                            <ul class="list">
                                                <li data-value="1" class="option selected">Auvergne-Rh&ocirc;ne-Alpes</li>
                                                <li data-value="2" class="option">Bourgogne-Franche-Comt&eacute;</li>
                                                <li data-value="3" class="option">Bretagne</li>
                                                <li data-value="4" class="option">Centre-Val de Loire</li>
                                                <li data-value="5" class="option">Corse</li>
                                                <li data-value="6" class="option">Grand Est</li>
                                                <li data-value="7" class="option">Guadeloupe</li>
                                                <li data-value="8" class="option">Guyane</li>
                                                <li data-value="9" class="option">Hauts-de-France</li>
                                                <li data-value="10" class="option">&Icirc;le-de-France</li>
                                                <li data-value="11" class="option">Martinique</li>
                                                <li data-value="12" class="option">Mayotte</li>
                                                <li data-value="13" class="option">Normandie</li>
                                                <li data-value="14" class="option">Nouvelle-Aquitaine</li>
                                                <li data-value="15" class="option">Occitanie</li>
                                                <li data-value="16" class="option">Pays de la Loire</li>
                                                <li data-value="17" class="option">Provence-Alpes-C&ocirc;te d'Azur</li>
                                            </ul>
                                        </div>
                                    </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 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,
                        '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