<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contact us</title>
  <link rel="shortcut icon" href="../image/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/css/mdb.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../plugins/OwlCarousel2-2.2.1/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="../plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
    <link rel="stylesheet" type="text/css" href="../plugins/OwlCarousel2-2.2.1/animate.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>

    <!-- start navbar -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark  sticky-top" style="z-index: 10">
        <a class="navbar-brand" href="../index.html">
            <img src="../image/logs.gif" height="44px" alt="">
        </a>
        <button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
            aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0 text-center">
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#overview">Overview</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#articles">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="store/shop.html">Boutique</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index.html#temoignage">temoignage</a>
                </li>
                <li class="nav-item d-none dash">
                    <a class="nav-link" href="../Admin-Dashboard/dashboard.html" target="_blank">Dashbord</a>
                </li>
                <li class="nav-item avatar dropdown prof d-none"><a class="nav-link dropdown-toggle"
                        id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="../image/user.png" class="rounded-circle z-depth-0" alt="avatar image" height="35"
                            id="profileImg" style="width:35px;height:35px; "></a>
                    <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="../store/mystore.php">mon magasin</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" id="Deconnexion">Deconnexion</a>
                    </div>
                </li>
                <li class="nav-item d-none" id="sisi">
                    <a class="nav-link" href="../signin/signin.php"><input name="" class="btn btn-primary si"
                            type="button" value="Connexion ou inscription" style="padding:3px 6px;"></a>
                </li>
            </ul>
        </div>
    </nav>





    <div class="container">

        <div class="card mt-4">
            <div class="card-body">
                <div class="card-header blue-gradient mb-3">
                    <h2 class="h1-responsive font-weight-bold text-center my-4 text-light">Contact us</h2>
                </div>

                <section class="mb-4">

                    <!--Section heading-->
                    <!--Section description-->
                    <p class="text-center w-responsive mx-auto mb-5">
                        Si vous avez des questions,remarques ou suggestions n'hésitez pas à nous contacter via ce formulaire ou par télephone
                    </p>

                    <div class="row">

                        <!--Grid column-->
                        <div class="col-md-9 mb-md-0 mb-5">
                            <form id="contact-form" name="contact-form" action="mail.php" method="POST"
                                autocomplete="off">

                                <!--Grid row-->
                                <div class="row">

                                    <!--Grid column-->
                                    <div class="col-md-6">
                                        <div class="md-form mb-0">
                                            <input type="text" id="name" name="name" class="form-control">
                                            <label for="name" class="">Votre nom</label>
                                        </div>
                                    </div>
                                    <!--Grid column-->

                                    <!--Grid column-->
                                    <div class="col-md-6">
                                        <div class="md-form mb-0">
                                            <input type="text" id="email" name="email" class="form-control">
                                            <label for="email" class="">Votre email</label>
                                        </div>
                                    </div>
                                    <!--Grid column-->

                                </div>
                                <!--Grid row-->

                                <!--Grid row-->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="md-form mb-0">
                                            <input type="text" id="subject" name="subject" class="form-control">
                                            <label for="subject" class="">Le Sujet</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Grid row-->

                                <!--Grid row-->
                                <div class="row">

                                    <!--Grid column-->
                                    <div class="col-md-12">

                                        <div class="md-form">
                                            <textarea type="text" id="message" name="message" rows="2"
                                                class="form-control md-textarea"></textarea>
                                            <label for="message">Votre message</label>
                                        </div>

                                    </div>
                                </div>
                                <!--Grid row-->

                            </form>

                            <div class="text-center text-md-center">
                                <a class="btn btn-primary btn-block blue-gradient" onclick="validateForm()">Envoyer</a>
                            </div>
                            <div id="status"></div>
                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-md-3 text-center">
                            <ul class="list-unstyled mb-0">
                                <li><i class="text-primary fas fa-map-marker-alt fa-2x"></i>
                                    <p>Oran ,Algerie CA 31000, Alg</p>
                                </li>

                                <li><i class="text-primary fas fa-phone mt-4 fa-2x"></i>
                                    <p>+213 41 567 89</p>
                                </li>

                                <li><i class="text-primary fas fa-envelope mt-4 fa-2x"></i>
                                    <p>bachir@bahcir.com</p>
                                </li>
                            </ul>
                        </div>
                        <!--Grid column-->

                    </div>

                </section>
                <!--Section: Contact v.2-->
            </div>
            <!--Section: Contact v.2-->
        </div>
    </div>





    <!-- footer -->
    <footer class="text-light pt-4 page-footer" style="background:#000098;">

        <div class="container">

            <div class="row">
                <div class="col-md-4">
                    <h5 class="font-weight-bold mb-3">Le produit</h5>
                    <ul class="list-unstyled ml-3">
                        <li class="mb-2"><a href="../index.html">Comment ça marche ?</a></li>
                        <li class="mb-2"><a href="contactus.php">Contactez nous</a></li>
                        <li class="mb-2"><a href="../terms.html">Conditions d'utilisation</a></li>
                        <li class="mb-2"><a href="../aboutus.html">Qui sommes nous </a></li>
                    </ul>

                </div>
                <div class="col-md-4">
                    <h5 class="font-weight-bold mb-3">Les services</h5>
                    <ul class="list-unstyled ml-3 text-uppercase">
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=docteur">DOCTEUR</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=psychologue">psychologue</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=mater">MATERIEL
                                MEDICAL</a></li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=dentiste">Dentiste</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=hopital">HOPITAL</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=laboratoire">LABORATOIRE</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=centre">CENTRE
                                D'IMAGERIE</a></li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=clinique">CLINIQUE</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=aumbulance">AMBULANCE</a>
                        </li>
                        <li class="mb-2"><a target="_blank"
                                href="../services/services.php?serv=veterinaires">veterinaire</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=opticien">opticien</a>
                        </li>
                        <li class="mb-2"><a target="_blank" href="../services/services.php?serv=pharmacie">pharmacie</a>
                        </li>
                    </ul>

                </div>
                <div class="col-md-4">
                    <div class="footer-art">

                        <div class="footer-header d-flex">
                            <h5 class="font-weight-bold mb-3">Des articles aléatoires</h5>
                            <div class="owl-btn ml-auto">
                                <span class="prev"><i class="fas fa-chevron-left"></i></span>
                                <span class="next"><i class="fas fa-chevron-right"></i></span>
                            </div>
                        </div>
                        <div class="owl-articles">
                            <div class="owl-carousel">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 py-4">
                    <div class="flex-center">
                        <a href="https://www.facebook.com/dawinidz19/" target="_blank" class="fb-ic">
                            <i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://twitter.com/dawini9" target="_blank" class="tw-ic">
                            <i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.instagram.com/" target="_blank" class="inta-ic">
                            <i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.linkedin.com/in/dawini-dz-558031186" target="_blank" class="li-ic">
                            <i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>
                        <a href="https://www.youtube.com/" target="_blank" class="yb-ic">
                            <i class="fab fa-youtube fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
                        </a>

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


        </div>
        <hr class="my-0">
        <div class="copyrighto text-center py-2">
            <i class="fa fa-copyright" aria-hidden="true"></i> Copyright 2019 - Dawini dz
        </div>
    </footer>






    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js">
    </script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/js/mdb.min.js">
    </script>
    <!-- Owl -->
    <script src="../plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>




    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
    <script src="../js/connect.js"></script>
    <script src="../signin/signin.js"></script>
    <script>
    function validateForm() {
        var name = document.getElementById('name').value;
        if (name == "") {
            document.getElementById('status').innerHTML = "Name cannot be empty";
            return false;
        }
        var email = document.getElementById('email').value;
        if (email == "") {
            document.getElementById('status').innerHTML = "Email cannot be empty";
            return false;
        } else {
            var re =
                /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if (!re.test(email)) {
                document.getElementById('status').innerHTML = "Email format invalid";
                return false;
            }
        }
        var subject = document.getElementById('subject').value;
        if (subject == "") {
            document.getElementById('status').innerHTML = "Subject cannot be empty";
            return false;
        }
        var message = document.getElementById('message').value;
        if (message == "") {
            document.getElementById('status').innerHTML = "Message cannot be empty";
            return false;
        }
        document.getElementById('status').innerHTML = "Sending...";
        document.getElementById('contact-form').submit();



        document.getElementById('status').innerHTML = "Sending...";
        formData = {
            'name': $('input[name=name]').val(),
            'email': $('input[name=email]').val(),
            'subject': $('input[name=subject]').val(),
            'message': $('textarea[name=message]').val()
        };


        $.ajax({
            url: "mail.php",
            type: "POST",
            data: formData,
            success: function(data, textStatus, jqXHR) {

                $('#status').text(data.message);
                if (data.code) //If mail was sent successfully, reset the form.
                    $('#contact-form').closest('form').find("input[type=text], textarea").val("");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#status').text(jqXHR);
            }
        });
    }




    // footer
    $(document).ready(function() {
        $(".owl-articles .owl-carousel").owlCarousel({
            items: 1,
            margin: 15,
            loop: true,
            autoplay: true,
            autoplayTimeout: 5000,
            responsive: {
                0: {
                    items: 1
                }
            }
        });
        $(".prev").click(function() {
            $(".owl-carousel").trigger('prev.owl.carousel');
        });
        $(".next").click(function() {
            $(".owl-carousel").trigger('next.owl.carousel');

        });

        var dbref = firebase.database().ref().child("articles");
        var random = 1;
        dbref.once("value").then(function(s) {
            c = s.numChildren() - 2;
            random = Math.floor(Math.random() * c) + 1
        }).then(function() {
            dbref.orderByChild("arId").startAt(random).limitToFirst(3).once("value", function(x) {
                x.forEach(e => {
                    ar = ` <div class="owl-item">
                            <div class="card text-center">
                                <div class="view overlay">
                                    <img class="card-img-top" src="${e.val().image}" alt="miniature">
                                    <a href="#!">
                                        <div class="mask rgba-white-slight"></div>
                                        </a>
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">${e.val().titre}</h4>
                                    <p class="card-text">${e.val().resume}</p>
                                        <a href="../articles/articles.php?articleid=SdhDGInYjpo${e.val().arId}Hkd" class="btn btn-primary">Lire la suite</a>
                                </div>
                                </div>
                        </div> `;
                    $('.owl-articles .owl-carousel').trigger('add.owl.carousel', ar)
                        .trigger('refresh.owl.carousel');
                })
            });
        })
    });
    </script>



</body>

</html>