@extends('app')
@section('title-page',"Nous contacter")
@section('content')
      <section>
    <div class="lgx-banner lgx-banner-inner">
        <div class="lgx-page-inner">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="lgx-heading-area">
                            <div class="lgx-heading lgx-heading-white">
                              
                            </div>
                          
                        </div>
                    </div>
                </div><!--//.ROW-->
            </div><!-- //.CONTAINER -->
        </div><!-- //.INNER -->
    </div>
    <div class="akwaba-overPage"> Akwaba</div>
</section> <!--//.Banner Inner-->

        @include('components/marquee-text')
    <main>
        <div class="lgx-page-wrapper">
            <!--News-->
            <section>

                <div class="lgx-heading lgx-heading-white title">
                    <div style="display:flex;justify-content:center; flex-direction:column;width:100%;margin-top:25px">
                        <h1 class="text-black title-text">NOUS CONTACTER</h1>
                        <h2 style="margin-top: -45px">Nous contacter</h2>
                    </div>

                </div>

                <div class="container">
                    <div class="row">

                        <div class="col-sm-12 col-md-6 col-md-offset-2">
                            {{-- https://themearth.com/demo/html/emeet/view/php/form-handler.php --}}
                            <form class="lgx-contactform" id="lgx-contactform">
                                @csrf
                                <div class="form-group">
                                    <input type="text" name="lgxname" class="form-control lgxname" id="lgxname"
                                        placeholder="Entrer votre nom" required>
                                </div>

                                <div class="form-group">
                                    <input type="email" name="lgxemail" class="form-control lgxemail" id="lgxemail"
                                        placeholder="Entrer votre email" required>
                                </div>

                                <div class="form-group">
                                    <input type="text" name="lgxsubject" class="form-control lgxsubject" id="lgxsubject"
                                        placeholder="Objet" required>
                                </div>

                                <div class="form-group">
                                    <textarea class="form-control lgxmessage" name="lgxmessage" id="lgxmessage" rows="5"
                                        placeholder="Taper votre message ici..." required></textarea>
                                </div>


                                <button type="submit" name="submit" value="contact-form"
                                    class="lgx-btn hvr-glow hvr-radial-out lgxsend lgx-send"
                                    style="background:orange"><span>Envoyer votre message</span></button>
                            </form>

                            <!-- MODAL SECTION -->
                            <div id="lgx-form-modal" class="modal fade lgx-form-modal" tabindex="-1" role="dialog"
                                aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content lgx-modal-content">
                                        <div class="modal-header lgx-modal-header">
                                            <button type="button" class="close brand-color-hover" data-dismiss="modal"
                                                aria-label="Close">
                                                <i class="fa fa-power-off"></i>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            <div class="alert lgx-form-msg" role="alert"></div>
                                        </div> <!--//MODAL BODY-->

                                    </div>
                                </div>
                            </div> <!-- //MODAL -->

                        </div> <!--//.COL-->
                    </div>

                    <div style="display:block;margin:0 auto;">
                        <div class="row" style="margin-top : 50px; display:flex; justify-content : center;">
                            <div class="col-10">
                                <div class="row">
                                    <div class="col-lg-6 col-xl-6" style=" font-family: Arial, sans-serif; line-height: 1.6;">

                                        <h4 style="margin-bottom: 5px; color: #019e5f">LIEU DE L’UNIVERSITÉ :</h4>
                                        <p>PALAIS DES CONGRÈS DU SOFITEL HÔTEL IVOIRE</p>
                                        <p>📍 ABIDJAN – COCODY<br>Boulevard Hassan II</p>

                                        <h4 style="margin-bottom: 5px; color: #019e5f">DATE DE L’UNIVERSITÉ :</h4>
                                        <p>Du 23 au 25 Avril 2025</p>
                                    </div>
                                    <div class="col-lg-6 col-xl-6">
                                        <h4 style="margin-bottom: 5px; color: #019e5f">CONTACT :</h4>
                                        <p>Secrétariat 18<sup>ème</sup> Université</p>
                                        <p>Email : <a href="mailto:secretariat@18e-universitecaaf.ci"
                                                style="color: #000000; font-weight: bold">secretariat@18e-universitecaaf.ci</a></p>
                                        <p>
                                                Téléphone : <a href="https://wa.me/0101655757" style="color: #007BFF;">+225 01
                                                01 65 57 57</a> (WhatsApp)
                                                <div>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a style="color: #007BFF;margin-left:-8px">+225 05 84 87 97 01</a> 
                                                </div>
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    

                </div><!-- //.CONTAINER -->

            </section>
            <!--News END-->
        </div>
    </main>
@endsection
@section('script')
    <script>
        $(function () { 
            $(document).on("submit", "#lgx-contactform", function (evt) {
                evt.preventDefault();
                
                let formData = new FormData(document.getElementById("lgx-contactform"))
                formData.append("_token", "{{ csrf_token() }}")
    
                $.ajax({
                        // headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
                        url: "{{ url('/mailContact') }}",
                        type: 'post',
                        data: formData,
                        dataType : "json",
                        processData : false,
                        contentType : false,
                        // beforeSubmit: function(argument) {
    
                        // },
    
                        success: function(ajaxResponse) {
                            console.log(ajaxResponse);
                            
                            // try {
                                // var ajaxResponse = $.parseJSON(ajaxResponse);
                                if (ajaxResponse.error == true) {
    
                                    $('.lgx-form-msg').removeClass('alert-success').addClass('alert-danger')
                                .text(
                                    'Une erreur est survenue.'
                                    );
    
                            $('#lgx-form-modal').modal('show');
    
                            alertInterval = setInterval(function() {
    
                                $('#lgx-form-modal').modal('hide');
    
                            }, 5000);
    
                                } else {
    
                                
    
                                    $('.lgx-form-msg').removeClass('alert-danger')
                                    $('.lgx-form-msg').addClass('alert-success').text(ajaxResponse.messages);
    
                                    $('#lgx-form-modal').modal('show');
    
                                    alertInterval = setInterval(function() {
    
                                        $('#lgx-form-modal').modal('hide');
    
                                    }, 5000);
    
                                    $("#lgxname").val("")
                                    $("#lgxemail").val("")
                                    $("#lgxsubject").val("")
                                    $("#lgxmessage").val("")
    
                                }
    
                            // } catch (e) {
    
                            //     $('.lgx-form-msg').removeClass('alert-success')
                            //     $('.lgx-form-msg').addClass('alert-danger') .text(
                            //             'Sorry, we are failed to contact with you. Please reload the page and try again.'
                            //             );
    
                            //     $('#lgx-form-modal').modal('show');
    
                            //     alertInterval = setInterval(function() {
    
                            //         $('#lgx-form-modal').modal('hide');
    
                            //     }, 5000);
    
                            // }
    
                        },
    
                        error: function(argument) {
    
                            $('.lgx-form-msg').removeClass('alert-success').addClass('alert-danger')
                                .text(
                                    'Une erreur est survenue.'
                                    );
    
                            $('#lgx-form-modal').modal('show');
    
                            alertInterval = setInterval(function() {
    
                                $('#lgx-form-modal').modal('hide');
    
                            }, 5000);
    
                        },
    
                        // complete: function() {
    
                        // }
    
                    });
            })

         })

        
        // var $contactForm = $('form.lgx-contactform');

        // $contactForm.validate({

        //     submitHandler: function(form, event) {
        //         event.preventDefault();
                
        //         //console.log(form);

        //         var $form = $(form);

        //         //console.log($form.serialize());
        //         let contactForm = new FormData(document.getElementById("lgx-contactform"))
        //         contactForm.append("_token", "{{ csrf_token() }}")

        //         $.ajax({
        //             // headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
        //             url: "{{ url('/mailContact') }}",
        //             type: 'post',
        //             data: contactForm,
        //             dataType : "json",
        //             processData : false,
        //             contentType : false,
        //             // beforeSubmit: function(argument) {

        //             // },

        //             success: function(ajaxResponse) {

        //                 try {
        //                     // var ajaxResponse = $.parseJSON(ajaxResponse);
        //                     if (ajaxResponse.error) {

        //                         for (var i = 0; i < ajaxResponse.error_field.length; i++) {

        //                             if ($('p#' + ajaxResponse.error_field[i] + '-error').length) {

        //                                 $('p#' + ajaxResponse.error_field[i] + '-error').text(
        //                                     ajaxResponse.message[ajaxResponse.error_field[i]]);

        //                             } else {

        //                                 $('#' + ajaxResponse.error_field[i]).after('<p id="' +
        //                                     ajaxResponse.error_field[i] +
        //                                     '-error" class="help-block">' + ajaxResponse
        //                                     .message[ajaxResponse.error_field[i]] + '</p>');

        //                             }

        //                         }

        //                     } else {

                            

        //                         $('.lgx-form-msg').removeClass('alert-danger')
        //                         $('.lgx-form-msg').addClass('alert-success').text(ajaxResponse.messages);

        //                         $('#lgx-form-modal').modal('show');

        //                         alertInterval = setInterval(function() {

        //                             $('#lgx-form-modal').modal('hide');

        //                         }, 5000);

        //                         $form[0].reset();

        //                     }

        //                 } catch (e) {

        //                     $('.lgx-form-msg').removeClass('alert-success')
        //                     $('.lgx-form-msg').addClass('alert-danger') .text(
        //                             'Sorry, we are failed to contact with you. Please reload the page and try again.'
        //                             );

        //                     $('#lgx-form-modal').modal('show');

        //                     alertInterval = setInterval(function() {

        //                         $('#lgx-form-modal').modal('hide');

        //                     }, 5000);

        //                 }

        //             },

        //             error: function(argument) {

        //                 $('.lgx-form-msg').removeClass('alert-success').addClass('alert-danger')
        //                     .text(
        //                         'Sorry, we can not communicate with you. Please make sure you are connected with internet.'
        //                         );

        //                 $('#lgx-form-modal').modal('show');

        //                 alertInterval = setInterval(function() {

        //                     $('#lgx-form-modal').modal('hide');

        //                 }, 5000);

        //             },

        //             complete: function() {

        //             }

        //         });
        //         return false;
        //     },
        //     errorElement: 'p',
        //     errorClass: 'help-block',
        //     rules: {
        //         'lgxname': {
        //             required: true,
        //             minlength: 3
        //         },
        //         'lgxemail': {
        //             required: true,
        //             email: true
        //         },
        //         'lgxsubject': {
        //             required: true,
        //             minlength: 5
        //         },
        //         'lgxmessage': {
        //             required: true,
        //             minlength: 5
        //         }

        //     }

        // });
    </script>
@endsection