@extends('layouts.home')

@section('title','GestStudentElearning | Contactez-nous')

@section('css')
@endsection

@section('content')

    <!--
    =============================================
        Theme Inner Banner
    ==============================================
    -->
    <div class="inner-banner">
        <div class="opacity">
            <div class="container">
                <h2>Nous contacter</h2>
                <ul>
                    <li><a href="{{route('/')}}" class="tran3s">Accueil</a></li>
                    <li>/</li>
                    <li>Contact</li>
                </ul>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.inner-banner -->

    <!-- Alert with content -->
    @if(session()->has('success'))
        <div class="container alert-container">
            <div class="alert alert-{{session('success') ?'success':'danger'}}">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <i class="fa fa-{{session('success')?'check':'times'}}-circle"></i> {{session('msg')}}
            </div>
        </div>
    @endisset


    <!--
    =============================================
        Contact Form
    ==============================================
    -->
    <div class="container contact-us-page">
        <div class="row">
            <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft">
                <div class="contact-us-form">
                    <h2>Envoyer un message</h2>

                    <form action="{{route('sendEmail')}}" method="POST" {{-- class="form-validation" --}} autocomplete="off">
                        @csrf
                        <input type="hidden" name="sendee" value="SCHOOL">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="single-input">
                                    <input type="text" placeholder="Nom et Prénoms *" name="name" value="{{old('name') ? old('name') : ''}}" required>
                                </div> <!-- /.single-input -->
                            </div> <!-- /.col- -->
                            <div class="col-sm-6 col-xs-12">
                                <div class="single-input">
                                    <input type="email" placeholder="Email *" name="email" value="{{old('email') ? old('email') : ''}}" required>
                                </div> <!-- /.single-input -->
                            </div> <!-- /.col- -->
                            <div class="col-sm-6 col-xs-12">
                                <div class="single-input">
                                    <input type="text" placeholder="Contact. ex : +229 95959595" name="phone" value="{{old('phone') ? old('phone') : ''}}">
                                </div> <!-- /.single-input -->
                            </div> <!-- /.col- -->
                            <div class="col-xs-12">
                                <div class="single-input">
                                    <textarea placeholder="Votre Message *" name="message" required>{{old('message') ? old('message') : ''}}</textarea>
                                </div> <!-- /.single-input -->
                            </div> <!-- /.col- -->
                        </div> <!-- /.row -->
                        <input type="submit" value="Envoyer" class="tran3s p-bg-color">
                    </form>

                    <!-- Contact Form Validation Markup -->
                    <!-- Contact alert -->
                    <div class="alert-wrapper" id="alert-success">
                        <div id="success">
                            <button class="closeAlert"><i class="fa fa-times" aria-hidden="true"></i></button>
                            <div class="wrapper">
                                <p>Votre message a été envoyé avec succès.</p>
                                </div>
                        </div>
                    </div> <!-- End of .alert_wrapper -->
                    <div class="alert-wrapper" id="alert-error">
                        <div id="error">
                            <button class="closeAlert"><i class="fa fa-times" aria-hidden="true"></i></button>
                            <div class="wrapper">
                                <p>Désolé! Une erreur est survenue.</p>
                            </div>
                        </div>
                    </div> <!-- End of .alert_wrapper -->
                </div> <!-- /.contact-us-form -->
            </div> <!-- /.col- -->

            <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight">
                <div class="contactUs-address">
                    <h2>A propos de nous</h2>
                    <p>Nous serons ravi de vous lire. N'hésitez donc pas à nous écrire si vous avez une quelconque préoccupation.</p>
                    <div class="single-address clearfix">
                        <div class="icon float-left"><i class="flaticon-placeholder"></i></div>
                        <div class="text float-left">
                            <h6>Addresse</h6>
                            <span>{{ $ecole['ville']}} <br>{{ $ecole['adresse']}}</span>
                        </div>
                    </div> <!-- End of .single-address -->
                    <div class="single-address clearfix">
                        <div class="icon float-left"><i class="flaticon-envelope"></i></div>
                        <div class="text float-left">
                            <h6>Email</h6>
                            <span>{{ $ecole['email'] }}</span>
                        </div>
                    </div> <!-- End of .single-address -->
                    <div class="single-address clearfix">
                        <div class="icon float-left"><i class="flaticon-phone-call"></i></div>
                        <div class="text float-left">
                            <h6>Téléphone</h6>
                            <span>{{ $ecole['phone_number'] }}</span>
                        </div>
                    </div> <!-- End of .single-address -->
                </div> <!-- /.our-address -->
            </div>
        </div> <!-- /.row -->
    </div> <!-- /.container -->




    <!--
    =============================================
        Goolge-map
    ==============================================
    -->
    <div>
        {{-- <div id="google-map-area" style="display: none;"> --}}
        <div id="google-map-area">
            <div class="google-map-two" id="contact-google-map" data-map-lat="40.925372" data-map-lng="-74.276544" data-icon-path="{{asset('gestel/images/logo/map.png')}}" data-map-title="Find Map" data-map-zoom="12"></div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Validation -->
    {{-- <script type="text/javascript" src="{{ asset('gestel/vendor/contact-form/validate.js')}}"></script>
    <script type="text/javascript" src="{{ asset('gestel/vendor/contact-form/jquery.form.js')}}"></script> --}}
    <!-- Google map js -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZ8VrXgGZ3QSC-0XubNhuB2uKKCwqVaD0&callback=googleMap" type="text/javascript"></script> <!-- Gmap Helper -->
    <script src="{{ asset('gestel/vendor/gmaps.min.js')}}"></script>
    <!-- Theme js -->
	<script type="text/javascript" src="{{ asset('gestel/js/map-script.js')}}"></script>
@endsection