<?php

$service = @filter_var($_GET['serv'], FILTER_SANITIZE_STRING) or die("erruer fatale");

?>
<!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>Services</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/globalOwl.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
    }

    .a {
        height: 500px;
        margin-top: 50px;
    }

    #formap {
        background: #000098;
        height: 90vh;
    }

    #map {
        height: 100%;
        position: relative;
        overflow: hidden;
        margin: 10px;
        border: 4px solid white;
    }

    #accordionExample .card-header {
        background-color: rgb(0, 0, 152);

    }

    #accordionExample .btn-link {
        color: #ffffff !important;

    }

    #accordionExample button:hover {
        color: #ffffff;

    }

    span {
        width: 100%;
    }
    </style>
</head>

<body>


    <!-- start navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top z-depth-0" style="z-index: 10">
        <a class="navbar-brand" href="../index.html">
            <img src="../image/logs.gif" height="42" alt="">
        </a>
        <button class="navbar-toggler d-lg-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">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" id="profileImg"
                            width="35" height="35"></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 sisi" 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 my-3">
            <div class="card-header bg-primary text-light">
                <h2 class="text-center my-3" id="titre-service"></h2>
            </div>
            <div class="card-body">


                <div class="row my-3">
                    <div class="col-md-4">
                        <label class="mt-3" for="wilayat">choisissez une region <span id="chargement"
                                class="text-primary">(Chargement ...)</span></label>
                        <select class="form-control" disabled="disabled" name="" id="wilayat">

                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="mt-3" for="baladiyat">choisissez une commune <span id="chargement1"
                                class="text-primary d-none">(Chargement ...)</label>
                        <select class="form-control" disabled="disabled" name="" id="baladiyat">

                        </select>
                    </div>
                    <div class="col-md-4 sp">
                        <label class="mt-3" for="specialites">choisissez une specialite (optionnelle)</label>
                        <select class="form-control" disabled="disabled" name="" id="specialites">

                        </select>
                    </div>
                    <div class="col-md-12 my-3">
                        <input name="" id="rechercherEt" class="btn btn-primary btn-block btn-lg" type="button"
                            value="rechercher">
                    </div>
                </div>
                <!-- start accordian -->

                <div class="accordion mb-4" id="accordionExample">

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                        data-parent="#accordionExample">
                        <div class="card-body">
                            <div class="text-center spinner text-primary d-none">
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                            <!-- start card  -->

                            <!-- end card -->



                        </div>
                    </div>


                </div>

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

    <!-- end accordian -->

    <!-- 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/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>


    <!-- Modal -->
    <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#000098;color:white;">
                    <h5 class="modal-title" id="exampleModalScrollableTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" style="color:#fff;">&times;</span>
                    </button>
                </div>
                <div class="modal-body sts">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        style="background-color:#000098 !important;">Close</button>
                </div>
            </div>
        </div>
    </div>


    <!-- extra large modal -->
    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" id="formap">
                <!-- start map -->
                <div id="map" class="map"></div>
            </div>
        </div>
    </div>



    <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.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/footer.js"></script>
    <script src="../js/connect.js"></script>
    <script src="../signin/signin.js"></script>

    <script>
    // Initialize and add the map
    function initMap() {
        // The location of Uluru
        var uluru = {
            lat: 35,
            lng: -1
        };
        // The map, centered at Uluru
        var map = new google.maps.Map(
            document.getElementById('map'), {
                zoom: 13,
                center: uluru
            });
        // The marker, positioned at Uluru
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }
    </script>

    <!--Load the API from the specified URL
         * The async attribute allows the browser to render the page while the API loads
         * The key parameter will contain your own API key (which is not needed for this tutorial)
         * The callback parameter executes the initMap() function
        -->
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeFnilgWW-7VhU7U6pi1tgeT2nzu725G4&callback=initMap">
    </script>


    <script>
    var service = "<?php echo filter_var($service, FILTER_SANITIZE_STRING); ?>";
    let table = "";
    let stable = "";
    let titreService = "";

    switch (service) {
        case "aumbulance":
            table = "All_ambulences";
            titreService = "Les ambulances";
            break;

        case "centre":
            table = "All_centres_dimagerie";
            titreService = "Les centres d'imageries";
            break;

        case "clinique":
            table = "All_clinics";
            stable = "clinics";
            titreService = "Les cliniques";
            break;

        case "hopital":
            table = "";
            titreService = "Les hopitaux";
            break;

        case "laboratoire":
            table = "All_laboratoires";
            titreService = "Les laboratoires";
            break;

        case "opticien":
            table = "All_opticiens";
            stable = "opticiens";
            titreService = "Les opticiens";
            break;

        case "pharmacie":
            table = "All_Pharmacies";
            titreService = "Les pharmacies";
            break;

        case "docteur":
            table = "All_doctors";
            stable = "doctors";
            titreService = "Les docteurs";
            break;

        case "mater":
            table = "All_Materiels_medicaux";
            titreService = "Les matériels médicaux";
            break;

        case "veterinaires":
            table = "All_veterinaires";
            titreService = "Les vétérinaires";
            break;

        case "psychologues":
            table = "All_psychologues";
            titreService = "Les psychologues"
            break;

        case "dentiste":
            table = "all_dentists";
            stable = "dentists";
            titreService = "Les dentistes"
            break;

        default:
            break;
    }

    $("#titre-service").append(titreService);
    let wil = ["choisissez une region"],
        h = 0;

    $("#wilayat").append("<option>" + wil[0] + "</option>");
    var dbref = firebase.database().ref().child(table).orderByChild("wilaya");
    dbref.once("value", function(e) {
        e.forEach(function(s) {
            if (wil.indexOf(s.val().wilaya) == -1) {
                wil.push(s.val().wilaya);
                $("#wilayat").append("<option>" + wil[++h] + "</option>");
            }
        })
    }).then(function() {
        $("select#wilayat").removeAttr("disabled");
        $("#chargement").remove();
    })


    let bala = ["choisissez une commune"],
        j = 0;

    $("#wilayat").on("change", function() {
        $("#baladiyat").html("");
        $("#chargement1").removeClass("d-none");
        $("#baladiyat").append("<option>" + bala[0] + "</option>");
        dbref.once("value", function(c) {
            c.forEach(function(e) {

                if ($("#wilayat").val() == e.val().wilaya) {

                    if (bala.indexOf(e.val().commute) == -1) {
                        bala.push(e.val().commute);
                        $("#baladiyat").append("<option>" + bala[++j] + "</option>");
                    }

                } //end 1st if

            }) //end foreach

        }).then(function() {
            $("select#baladiyat").removeAttr("disabled");
            $("#chargement1").addClass("d-none");

        }); //end debref

    }) //end onChange

    if (table == "All_clinics" || table == "all_dentists" || table == "All_doctors") {

        let refdb = firebase.database().ref().child(stable);
        let specialite = ["toutes les spécialités"],
            x = 0;
        $("#specialites").append("<option>" + specialite[0] + "</option>");
        refdb.on("child_added", function(e) {
            refdb.child(e.key).on("child_added", function(v) {
                refdb.child(e.key).child(v.key).on("child_added", function(w) {

                    if (specialite.indexOf(w.key) == -1) {
                        if (!w.key.startsWith("-L")) {
                            specialite.push(w.key);
                            $("#specialites").append("<option>" + specialite[++x] +
                                "</option>");
                        }
                        // console.log(w.key);

                    }

                })
            })
        })

    } else {
        $(".sp").addClass("d-none");
    }


    let choixRegion = "",
        choixCommune = "",
        choixSpecialite = "";

    $("#wilayat").on("change", function() {
        choixRegion = $(this).val();
    });

    $("#baladiyat").on("change", function() {
        choixCommune = $(this).val();
        $("select#specialites").removeAttr("disabled");


    });


    if (table == "All_clinics" || table == "all_dentists" || table == "All_doctors") {

        $("#specialites").on("change", function() {
            if ($(this).val() == "toutes les spécialités") {
                choixSpecialite = "";
            } else {
                choixSpecialite = $(this).val();
            }
        });

    } //end if        


    $("#rechercherEt").on("click", function() {
        bdref = firebase.database().ref().child(table);
        var cc = 0;
        let orders = [];
        $(".spinner").removeClass("d-none")
        dbref.once("value", function(s) {
            s.forEach(c => {
                orders.push("cord" + cc);
                cc++;
            });
        }).then(function() {

            $("#accordionExample").html("");

            let index = 0;
            bdref.on("child_added", function(e) {
                let spec = e.val().specialte;
                let desc = e.val().description;
                let descModif = desc.replace(/'/g, '\`').toString();

                if (spec == undefined) {
                    spec = "";
                }

                if (choixSpecialite == "") {
                    if (choixRegion == e.val().wilaya && choixCommune == e.val().commute) {

                        var sss = e.val().phone.split(",").join(
                            "<span class='text-primary'> * </span>");
                        var imgutl = (e.val().image.slice(0, 5) == "https") ? e.val().image :
                            "../image/mm.jpg";
                        $("#accordionExample").append(
                            `<div class='card'>` +
                            `<div class='card-header text-center' id='headingOne'>` +
                            `<h2 class='mb-0'>` +
                            `<button class='btn btn-link collapsed' type='button' data-toggle='collapse' data-target='#` +
                            orders[index] + `' aria-expanded='true' aria-controls='` +
                            orders[index] +
                            `'>` +
                            e.val().name +
                            `</button>` +
                            `</h2>` +
                            `</div>` +
                            `<div id='` + orders[index] +
                            `' class='collapse' aria-labelledby='headingOne' data-parent='#accordionExample'>` +
                            `<div class='card-body text-center'>` +

                            `<div class='card mb-3' style='max-width: 100%;'>` +
                            `<div class='row no-gutters'>` +
                            `<div class='col-md-4'><img src='` + imgutl +
                            `' class='card-img img-fluid' style='height: 100%;' alt='...'></div>` +
                            `<div class='col-md-8'>` +
                            `<div class='card-body'>` +
                            `<p class='card-text'>` +
                            e.val().description.substr(0, 70) +
                            ` .... <a id='readmore' data-titre='` +
                            e.val().name + `' data-text='` + descModif +
                            `' href='#' class='text-primary' data-toggle='modal' data-target='#exampleModalScrollable'>lire  la suite</a><br>` +
                            `<b class='text-primary'>adress</b> <i class='mx-2 far fa-address-book text-primary' aria-hidden='true'></i><b>` +
                            e.val().adress + `</b><br>` +
                            `<b class='text-primary'>Email</b> <i class='far fa-envelope mx-2 text-primary' aria-hidden='true'></i><b>` +
                            e.val().email + `</b><br>` +
                            `<b class='text-primary'>Phone</b><i class='fa fa-phone-square mx-2 text-primary' aria-hidden='true'></i>  <b>` +
                            sss + `</b><br>` +
                            `<b class='text-info'>` + spec + `</b><br></p>` +
                            `<p class='card-text'><small class='text-muted'>` +
                            `ouvre à<i class='mx-2 text-primary fa fa-hourglass-start' aria-hidden='true'></i>` +
                            e.val().hStart +
                            `<b class='text-primary'> ** || ** </b>ferme à<i class='mx-2 text-primary fa fa-hourglass-end' aria-hidden='true'></i>` +
                            e.val().hEnd +
                            `</small></br></br>` +
                            `<button  data-toggle='modal' data-target='.bd-example-modal-xl' data-lognitude='` +
                            e.val().lognitude + `' data-longitude='` + e.val().longitude +
                            `' type='button' class='btn btn-primary' id='surMap'>sur le map <i class='fa fa-map-marker-alt mx-2 text-light' aria-hidden='true'></i></button></p>` +
                            `</div></div></div></div>` +
                            `</div>` +
                            `</div>` +
                            `</div> `
                        );
                        index++;
                        // temp.indexOf(choixSpecialite)!= -1
                    }
                } else if (choixRegion == e.val().wilaya && choixCommune == e.val().commute &&
                    spec
                    .includes(choixSpecialite)) {
                    var sss = e.val().phone.split(",").join(
                        "<span class='text-primary'> * </span>");
                    var imgutl = (e.val().image.slice(0, 5) == "https") ? e.val().image :
                        "../image/mm.jpg";

                    spec = e.val().specialte;
                    desc = e.val().description;
                    descModif = desc.replace(/'/, "*").toString();

                    $("#accordionExample").append(
                        `<div class='card'>` +
                        `<div class='card-header text-center' id='headingOne'>` +
                        `<h2 class='mb-0'>` +
                        `<button class='btn btn-link collapsed' type='button' data-toggle='collapse' data-target='#` +
                        orders[index] + `' aria-expanded='true' aria-controls='` + orders[
                            index] +
                        `'>` +
                        e.val().name +
                        `</button>` +
                        `</h2>` +
                        `</div>` +
                        `<div id='` + orders[index] +
                        `' class='collapse' aria-labelledby='headingOne' data-parent='#accordionExample'>` +
                        `<div class='card-body text-center'>` +

                        `<div class='card mb-3' style='max-width: 100%;'>` +
                        `<div class='row no-gutters'>` +
                        `<div class='col-md-4'><img src='` + imgutl +
                        `' class='card-img img-fluid' style='height: 100%;' alt='...'></div>` +
                        `<div class='col-md-8'>` +
                        `<div class='card-body'>` +
                        `<p class='card-text'>` +
                        e.val().description.substr(0, 70) +
                        ` .... <a id='readmore' data-titre='` + e
                        .val().name + `' data-text='` + e.val().description +
                        `' href=\`#\` class='text-primary' data-toggle='modal' data-target='#exampleModalScrollable'>lire  la suite</a><br>` +
                        `<b class='text-primary'>adress</b> <i class='mx-2 far fa-address-book text-primary' aria-hidden='true'></i><b>` +
                        e.val().adress + `</b><br>` +
                        `<b class='text-primary'>Email</b> <i class='far fa-envelope mx-2 text-primary' aria-hidden='true'></i><b>` +
                        e.val().email + `</b><br>` +
                        `<b class='text-primary'>Phone</b><i class='fa fa-phone-square mx-2 text-primary' aria-hidden='true'></i>  <b>` +
                        sss + `</b><br>` +
                        `<b class='text-info'>` + spec + `</b><br></p>` +
                        `<p class='card-text'><small class='text-muted'>` +
                        `ouvre à<i class='mx-2 text-primary fa fa-hourglass-start' aria-hidden='true'></i>` +
                        e.val().hStart +
                        `<b class='text-primary'> ** || ** </b>ferme à<i class='mx-2 text-primary fa fa-hourglass-end' aria-hidden='true'></i>` +
                        e.val().hEnd +
                        `</small></br></br>` +
                        `<button  data-toggle='modal' data-target='.bd-example-modal-xl' data-lognitude='` +
                        e.val().lognitude + `' data-longitude='` + e.val().longitude +
                        `' type='button' class='btn btn-primary' id='surMap'>sur le map <i class='fa fa-map-marker-alt mx-2 text-light' aria-hidden='true'></i></button></p>` +
                        `</div></div></div></div>` +
                        `</div>` +
                        `</div>` +
                        `</div> `
                    );
                    index++;
                }
            }); //end bdref
        })

    }); //end click


    // 
    let refd = firebase.database().ref().child(table);
    $(document).on("click", "#readmore", function() {
        // console.log($(this).attr("data-titre"));
        $('#exampleModalScrollableTitle').html($(this).attr("data-titre"));
        if ($(this).attr("data-text").length > 2)
            $('.sts').html($(this).attr("data-text"));
        else
            $('.sts').html("pas de description");
    })


    // modal map
    $(document).on("click", "#surMap", function() {

        let longi = parseFloat($(this).attr("data-lognitude"));
        let lati = parseFloat($(this).attr("data-longitude"));


        // Initialize and add the map
        // The location of Uluru
        var uluru = {
            lat: longi,
            lng: lati
        };
        // The map, centered at Uluru
        var map = new google.maps.Map(
            document.getElementById('map'), {
                zoom: 15,
                center: uluru
            });
        // The marker, positioned at Uluru
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });

        console.log(longi);
        console.log(lati);

    });

    $(document).on("click", "#readmore", function(e) {
        e.preventDefault();
    });
    </script>
</body>

</html>