<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include 'includes/head.php'; ?>
<body>
<?php include 'includes/header.php';?>
<!-- LOGO HEADER END-->
<?php include 'includes/navbar.php';?>
<!-- MENU SECTION END-->
<?php
if (isset($_GET['msg'])) {
    ?>
    <script type='text/javascript'>
        iziToast.success({
            title: '',
            message: "Message envoyé avec succes",
            timeout: 5000,
            transitionOut: 'flipOutX'
        });
    </script>
<?php } ?>
<div class="tab-content">
    <div class="container">
        <div class="row" style="margin-top:15px">
            <div class="col-md-6">
                <div class="well well-sm">
                    <form id="contactForm" name="contactForm" class="form-horizontal" data-toggle="validator" action="db/contact.php" method="post">
                        <fieldset>
                            <legend class="text-center header">Nous contacter</legend>
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <input id="fname" name="fname" type="text" placeholder="Prenom" class="form-control" required minlength="3">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <input id="lname" name="lname" type="text" placeholder="Nom" class="form-control" required minlength="3">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <input id="email" name="email" type="email" placeholder="E-mail" class="form-control" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <input id="phone" name="phone" type="text" placeholder="Téléphone" class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1">
                                    <textarea class="form-control" id="message" name="message"
                                              required minlength="10" maxlength="300"
                                              placeholder="Entrez votre message ici. Nous vous répondrons dans les 2 jours ouvrables." rows="11"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn btn-primary btn-lg">Envoyer</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <div class="panel panel-default">
                        <div class="text-center header">Nos locaux</div>
                        <div class="panel-body text-center">
                            <h4>Adresse</h4>
                            <div>
                                Lotissement ANNAIM<br />
                                Lot N°49 Tit Mellil, Casablanca, Maroc<br />
                                Téléphone : +212 522 51 14 42<br />
                                Faxe : +212 522 51 14 43<br />
                                E-mail : contact@apexvet.ma<br />
                            </div>
                            <hr />
                            <div id="map1" class="map">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="http://maps.google.com/maps/api/js?key=AIzaSyBt6vwcKYwKnUWZxlc1LXCfbwsXUMFJmvU"></script>
    <script src="js/jquery.min.js"></script>

    <?php include 'includes/footer-scripts.php';?>

    <script src="js/validator.min.js" type="text/javascript"></script>
    <script src="js/label.js" type="text/javascript"></script>
    <script type="text/javascript">

        $('#contactForm').validator()

        jQuery(function ($) {
            function init_map1() {
                var myLocation = new google.maps.LatLng(33.561995, -7.486346);
                var mapOptions = {
                    center: myLocation,
                    zoom: 17
                };
                var marker = new google.maps.Marker({
                    position: myLocation,
                    title: "Apexvet"
                });
                var map = new google.maps.Map(document.getElementById("map1"),
                    mapOptions);


                marker.setMap(map);

                var label = new Label({
                    map: map
                });
                label.bindTo('position', marker, 'position');
                label.bindTo('text', marker, 'position');
            }
            init_map1();
        });
    </script>

    <style>
        .map {
            min-width: 300px;
            min-height: 300px;
            width: 100%;
            height: 100%;
        }

        .header {
            background-color: #F5F5F5;
            color: #36A0FF;
            height: 70px;
            font-size: 27px;
            padding: 10px;
        }
    </style>
</div>
</body>
</html>