<?php
    $articleId = @filter_var($_GET['articleid'],FILTER_SANITIZE_NUMBER_INT) or die("erruer fatale") ;
    $image = "../image/favicon.png"
?>

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" >

<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">
    <meta property="og:title" content="Dawini dz" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="<?php echo "http://localhost/courses/firebase/articles/articles.php?articleid=".$_GET["articleid"]; ?>" />
    <meta property="og:image" content="<?php echo $image; ?>" />
    <title>Articles</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" type="text/css" href="../plugins/globalOwl.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" href="../css/wowanimate.css"> -->
    <link rel="stylesheet" href="../css/style.css">
    <style>
    /* start dropdown */

    .dropdown-menu.primary-default .dropdown-item:hover {
        background-color: #219287 !important;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
        border-radius: .125rem;
        color: white;
    }


    .dropdown-menu {
        left: auto;
        right: 0;
    }

    .btn-rounded {
        border-radius: 10em;
    }

    .articleContent img {
        max-width: 550px;
        border: 2px solid #000098;
        border-radius: 5px;
        padding: 5px;
    }

    .media .avatar {
        width: 44px;
    }

    .at-expanding-share-button-toggle-bg span {
        background-color: #000098 !important;
    }

    .position-none {
        position: unset;
    }

    .dropdown-menu span {
        cursor: pointer;
    }

    .md-form textarea.md-textarea:focus:not([readonly]) {
        box-shadow: 0 1px 0 0 #2bbbad;
        border-bottom: 1px solid #2bbbad;
    }

    @media (max-width: 1199.98px) {
        .dropdown-menu {
            left: 0 !important;
            right: 0 !important;
        }
    }

    @media (min-width: 576px) {}

    /* Medium devices (tablets, 768px and up)*/
    @media (min-width: 768px) {
        .position-md-absolute {
            position: absolute !important;
        }
    }

    /* Large devices (desktops, 992px and up)*/
    @media (min-width: 992px) {}

    /* Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {}
    </style>


</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="Dawini dz">
        </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 disabled" 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="S'inscrire / connexion" style="padding:3px 6px;"></a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- strat articles -->

    <div class="articles-content mt-4">
        <div class="container">

            <div class="card z-depth-3">
                <div class="card-header mb-4 blue-gradient text-light">
                    <h1 class="title-header text-center" id="title-header">chargement ...</h1>
                </div>
                <div class="card-body" style="min-height: 1050px;">
                    <div class="aarticles text-center">
                        <div id="view" class="view overlay zoom z-depth-2 mb-3">
                            <div class="mask flex-center waves-effect waves-light rgba-black-strong ">
                                <p class="white-text msk"></p>
                            </div>
                        </div>
                        <p class="articleContent mt-4" style="overflow-x:auto;">
                            <!-- article content -->

                            <div class="text-center spinner text-primary">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                        </p>
                    </div>
                </div>
            </div>
            <!-- end firstcard -->

            <!--Section: Author Box-->
            <section class="my-5  wow fadeIn">
                <div class="card pb-3">

                    <!-- Card header -->
                    <div
                        class="card-header blue-gradient text-light border-0 font-weight-bold d-flex justify-content-between">
                        <p class="mr-4 mb-0 text-light">A propos de l'auteur</p>
                    </div>

                    <div class="media mt-4 px-1">
                        <img class="card-img-100 rounded-circle d-flex z-depth-1 mx-3" src="../image/user.png"
                            alt="image de profile" id="authProf">
                        <div class="media-body">
                            <!-- <h5 class="font-weight-bold mt-0"> -->
                            <h4 class="text-primary font-weight-bold" id="authName" href=""></h4>
                            <!-- </h5> -->
                            <ul class="list-unstyled list-inline mb-2 pt-1">
                                <li class="list-inline-item">
                                    <a class="grey-text mr-1"><i class="fab fa-lg fa-facebook"> </i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="grey-text mr-1"><i class="fab fa-lg fa-twitter"> </i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="grey-text mr-1"><i class="fab fa-lg fa-linkedin"> </i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="grey-text mr-1"><i class="fab fa-lg fa-instagram"> </i></a>
                                </li>
                            </ul>
                            <p id="authDesc"></p>
                        </div>
                    </div>
                </div>

            </section>

            <!-- Section: Blog v.2 -->
            <section id="recentPosts-sec" class="text-center my-5">

                <!-- Section heading -->
                <h2 class="h1-responsive font-weight-bold my-5 blue-gradient p-4 text-light">Les derniers articles</h2>

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

                    <!-- pink-text deep-orange-text blue-text-->




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

            </section>
            <!-- Section: Blog v.2 -->


            <!--Section: Comments-->
            <section class="my-5" id="com-sec">

                <!-- Card header -->
                <div class="card-header border-0 font-weight-bold" id="nbrComment">Chargement ...</div>
                <div class="comments" style="max-height:600px;overflow-y:auto;">

                    <!-- Quick Reply -->
                    <div class="md-form mt-4 d-none" id="commentArea1">
                        <label id="labelCom" for="quickReplyFormComment">le commentaire</label>
                        <textarea class="form-control md-textarea" id="quickReplyFormComment" rows="3"></textarea>

                        <div class="text-center my-4">
                            <button class="btn btn-default btn-sm btn-rounded disabled"
                                id="post-comment">Poster</button>
                        </div>
                    </div>

                </div>

                <div class="justify-content-center d-none" id="CommentNotLogedIn">
                    <a name="" id="" class="btn btn-primary" href="../signin/signin.php" role="button">Connexion ou
                        inscription</a>
                </div>
                <!--Pagination -->
                <nav class=" justify-content-center mt-5 d-none disabled" id="commentArea2">
                    <ul class="pagination pagination-circle pg-teal mb-0">

                        <!--First-->
                        <li class="page-item disabled">
                            <a class="page-link">First</a>
                        </li>

                        <!--Arrow left-->
                        <li class="page-item disabled">
                            <a class="page-link" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>

                        <!--Numbers-->
                        <li class="page-item active">
                            <a class="page-link">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link">5</a>
                        </li>

                        <!--Arrow right-->
                        <li class="page-item">
                            <a class="page-link" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>

                        <!--Last-->
                        <li class="page-item">
                            <a class="page-link">Last</a>
                        </li>

                    </ul>
                </nav>
                <!--Pagination -->

            </section>


        </div>
    </div>

    <footer class="text-light pt-4 page-footer" data-foot="<?php echo $articleId; ?>" 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/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="copyright text-center py-2">
            <i class="fa fa-copyright" aria-hidden="true"></i> Copyright 2019 - Dawini dz
        </div>
    </footer>

    <div class="overlay-loader">
        <div class="con">
            <div class="l">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>


    <!-- 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>
    <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.2.4/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>
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5d597b618130db0b"></script>
    <!-- <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> -->
    <!-- wow animation -->
    <script src="../js/animation.js"></script>
    <script src="../js/footer.js"></script>
    <script src="../js/customArticle.js"></script>
    <script>
        new WOW().init();    

        $(window).on("load", function() {
            $(".overlay-loader").fadeOut("slow")
        });



    </script>

</body>

</html>