{{-- contact.blade.php --}}
@extends("layout.master")

@section('content')
    <div class="container-fluid">

        <div class="row">
            <div class="col-xs-12">
                <h3>Nous contacter</h3>
                <hr>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>Adresse &amp; Carte</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-3">
                <h5>Notre adresse</h5>
                <address style="font-size: 100%">
                    Rue de l'Université SP16<br>
                    62307 Lens Cedex<br>
                    FRANCE<br>
                    <i class="fa fa-phone"></i>: +33 (0)3.21.79.32.53<br>
                    <i class="fa fa-fax"></i>: +33 (0)3.21.79.32.40<br>
                    <i class="fa fa-envelope"></i>:
                    <a href="mailto:contact@iut-lens.univ-artois.fr">contact@iut-lens.univ-artois.fr</a>
                </address>
                <div>
                    <div class="btn-group" role="group" aria-label="...">
                        <a class="btn btn-primary" href="tel:+85212345678"><i class="fa fa-phone left"></i> Call</a>
                        <a class="btn btn-info" href="tel:+85212345678"><i class="fa fa-skype left"></i> Skype</a>
                        <a class="btn btn-success" href="mailto:contact@iut-lens.univ-artois.fr"><i
                                    class="fa fa-envelope-o left"></i> Email</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-9">
                <div class="card">
                    <div class="card-header">
                        Carte de situation
                    </div>
                    <div class="card-body">
                        <div id="map-container" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card">
            <div class="card-block">

                <!--Header-->
                <div class="text-center">
                    <h4><i class="fa fa-pencil"></i> Impressions:</h4>
                    <hr class="mt-2 mb-2">
                </div>
                <p>Faites nous connaitre vos impressions.</p>
                <br>
                <div class="form-group row">
                    <!--First column-->
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="nom" name="nom" class="form-control"
                                   placeholder="Nom">
                        </div>
                    </div>

                    <!--Second column-->
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="prenom" name="prenom" class="form-control"
                                   placeholder="Prénom">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <input type="email" id="mail" name="mail" class="form-control" placeholder="Email">
                            <span class="input-group-addon">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-phone"></i>
                            </span>

                            <input type="tel" id="telnum" name="telnum" class="form-control" placeholder="numéro Tel.">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <!--First column-->
                    <label class="col-md-3 form-control-label" for="select"><strong>Pouvons nous vous contacter
                            ?</strong></label>
                    <div class="col-md-2">
                        <label class="switch switch-text switch-pill switch-primary-outline-alt">
                            <input type="checkbox" class="switch-input" checked="">
                            <span class="switch-label" data-on="Oui" data-off="Non"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <label class="col-md-3 form-control-label" for="select"><strong>Comment ?</strong></label>
                    <div class="col-md-4">
                        <select id="disabledSelect" class="form-control">
                            <option value="" disabled selected>Votre Choix</option>
                            <option>Tel.</option>
                            <option>Email</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 form-control-label" for="textarea-input">Vos impressions :</label>
                    <div class="col-md-9">
                        <textarea id="feedback" name="feedback" rows="9" class="form-control"
                                  placeholder="Content.."></textarea>
                    </div>
                </div>
                <div class="text-center">
                    <button class="btn btn-success">Envoyer</button>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        function initMap() {
            var var_location = new google.maps.LatLng(50.438425, 2.807404);

            var var_mapoptions = {
                center: var_location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 16
            };
            var var_map = new google.maps.Map(document.getElementById("map-container"),
                var_mapoptions);

            var var_marker = new google.maps.Marker({
                position: var_location,
                map: var_map,
                title: "IUT de Lens"
            });
            var_marker.setMap(var_map);
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYo0uvJ5rOQ8t9Gs5lqV1IBdvGTG_3Lh4&callback=initMap">
    </script>
@endsection