{% extends "::basePlanParcours.html.twig" %}

{% block title %}
    SDE paris- La liste de vos exposants
{% endblock %}

{% block body %}

    <!-- Button trigger modal -->
    <div class="container-fluid" style="height: 500px;padding: 0px;margin: 0px">
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand"  href="#">Bliwe</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="modal" data-target="#exampleModalLong">Les conférence</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  data-toggle="modal" data-target="#exampleModalselect">Ma Selection</a>
                        </li>
                    </ul>

                </div>
            </nav>
        </header>
        <div class="header" style="width: 100%;margin-top: 55px;">
            <img src="{{ asset('images/pub/totem-banner-footer.jpg') }}" class="img-fluid" alt="Responsive image">
        </div>
        <div class="container" style="height: 472px;padding: 0px;margin: 0px">
            <div id="mapid"></div>
        </div>
        <div class="footer" style="text-align: center">

            <!-- Modal -->
            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLongTitle" aria-hidden="true" title="Conférences">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Nos Conférences</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="container-block">
                                {% for conference in conferences %}
                                    <div class="card-header">
                                        <p style="margin: 0px;font-size: 17px">{{ conference.date_debut }}</p>
                                        <h2 class="title"
                                            style="margin: 0px;font-size: 1rem;">{{ conference.titre|e }}</h2>
                                        <p class="footer" style="margin: 0px"> <span
                                                    style="color: #9f191f"></span></p>
                                      <p class="footer" style="margin: 0px"> SALLE: <span style="color: #9f191f">{{  conference.salle|e }}</span></p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="exampleModalselect" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLongTitle" aria-hidden="true" title="Favoris">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="min-height: 570px;">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">
                                <span style="margin-right: 114px;">Favoris</span><img style="border-radius: 100%;" src="{{ asset('images/map_sms/images.jpg') }}" id="" height="50" width="50"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>

                        </div>
                        <div class="container">
                            <button type="button" style="float: right;">
                                Exporter ma visite
                            </button>
                        </div>
                        <div class="modal-body">
                                {% for Commentaire in Commentaires %}
                                    <div class="card-header">
                                        <div class="container" style="border-bottom: 1px solid #e1e1dc;">
                                            <div style="width: 78%;min-height: 25px;margin-top: 10px;"  class="row">
                                                <span style="text-transform: uppercase;color: #FF0000;">{{ Commentaire.name_exhibor }}</span></div>
                                            <div style="margin-left: 227px;margin-top: -35px;">
                                                <img style="border-radius: 100%;" src="{{ asset('images/map_sms/etoile_roue.jpg') }}" alt="favoris" height="40" width="40"></div>

                                        </div>
                                        <div class="container-fluid" style="text-align: left;padding-left: 0;">
                                            <div >
                                                <p style="margin: 0px;"><span>STAND: </span><span style="color: #928e8e;">{{ Commentaire.stand }}</span></p>
                                            </div>
                                            <div>
                                                <p style="margin: 0px"><span>COMMENTAIRE: </span><span style="color: #928e8e;">{{ Commentaire.commentaire }}</span></p>
                                            </div>
                                            <div>
                                                <p style="margin: 0px"><span>DATE: </span><span style="color: #928e8e;">{{ Commentaire.date_commentaire|date('j-m-Y h:m:s') }}</span></p>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Button trigger modal -->
    <div class="standsList" data-stands="{{ exhibitionStandList }}"></div>
    <div class="standsclick" data-stands="{{ list }}"></div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>

            var token = '{{ token }}';


        function showAllpopups() {
            for (var i in exposant) {
                exposant[i].openPopup();
                console.log(exposant[i]);
            }
            $('a.leaflet-popup-close-button').css('display','none');
        }
        var data ={}
        var idexhebitor =null
        var idstand =null
        var datatoken =null

        function comment(idexh,tittle,idstad,comment) {
            var commento= comment.replace(/-/gi, ' ');
            var array = commento.split ("**");
            console.log(array)
            var itemval =""
            array.forEach(function(item){
                itemval +="<p>"+item+"</p>";
            });
           idexhebitor = idexh;
            idstand = idstad;
            datatoken= document.getElementById("idvalue").value =token;
            $('#exampleModal #exampleModalLabel').html(tittle);

            $('#exampleModal #commentaire').html('<p class="titre">'+itemval+'</p>');

            $("#exampleModal").show();
        }

        $(document).ready(function () {
            var standNum;
            $collectionStandHolder = $('div.standsList');
            $collectionStandHolder.data('stands').forEach(stand => {
                standNum = stand.vchName;
                    var innovationHtml = "";
                    var exposants = stand.exposants;

                    var innovations = stand.innovations;
                    // console.log(exposants.length);
                    var exposantTitleWidth = '100%';
                    if (exposants.length > 14) {
                        exposantTitleWidth = '46%'
                    }
                    var exposantsHtml = "";
                    for (var k in exposants) {
                        element = exposants[k];
                        exposantsHtml += element;

                    }
                    innovationHtml = stand.innovations[0];

                    var poi = JSON.parse(stand.vchAreaposition);


                    var dataPolygon = [];
                    //Handle click on polygon
                    var onPolyClick = function (event) {
                        //callFancyboxIframe('flrs.html')
                        var stand = event.target.options.Name;
                        //console.log(event);
                        //console.log(enableTour);
                        if (!enableTour) {
                            //	map.closePopup();
                        } else {

                            addToCart(stand);
                        }
                    };
                    poi[0].forEach(element => {

                        dataPolygon.push([element.lat, element.lng]);
                    });
                    /*var slogTmp =stand.exposants[0]
                    var slog = slogTmp.replace('', '-')
                    console.log(slog);*/
                    var exp = L.polygon(dataPolygon, {
                        Name: stand.iId,
                        color: '',
                        fillColor: '',
                        fillOpacity: 0
                    }).addTo(myFeatureGroup).bindPopup(
                        "<div data-toggle='modal' data-target='#exampleModal'  class='popupContent' onclick=comment('"+stand.idExposant+"','"+stand.exposants[0]+"','"+stand.iId+"')>" +
                        "<div class='titleStand' style='clear:both;position: absolute;width: 100%;'>"+stand.vchName+"</div>" +
                        "<br><div class='popupContent' style='margin-top:11px;position: absolute;width: 100%;text-align: center;'>" +
                        "<div style='color:#e40e65;'>"+stand.exposants[0]+"</div></div><br class='clear: both;'/>" +
                        "<div style='color:#a0a8af;margin-top:35px;text-align: center;'>Ajouter un avis</div></div><br class='clear: both;'/>" +
                        "</div>", {
                            closeOnClick: true,
                            autoClose: false
                        }).on('click', onPolyClick);
                    exposantsList.push(exp);

            });

            //showAllpopups();

            //stands selectionné
            $collectionStand = $('div.standsclick');
            $collectionStand.data('stands').forEach(stand => {

                    var innovationHtml = "";
                    var exposants = stand.exposants;

                    var innovations = stand.innovations;
                    // console.log(exposants.length);
                    var exposantTitleWidth = '100%';
                    if (exposants.length > 14) {
                        exposantTitleWidth = '46%'
                    }
                    var exposantsHtml = "";
                    for (var k in exposants) {
                        element = exposants[k];
                        exposantsHtml += element;

                    }
                    innovationHtml = stand.innovations[0];

                    var poi = JSON.parse(stand.vchAreaposition);


                    var dataPolygon = [];
                    //Handle click on polygon
                    var onPolyClick = function (event) {
                        //callFancyboxIframe('flrs.html')
                        var stand = event.target.options.Name;
                        //console.log(event);
                        //console.log(enableTour);
                        if (!enableTour) {
                            //	map.closePopup();
                        } else {

                            addToCart(stand);
                        }
                    };
                    poi[0].forEach(element => {

                        dataPolygon.push([element.lat, element.lng]);
                    });
                console.log('stand '+stand.iId);
                console.log('idExposant '+stand.idExposant);
                console.log(stand.vchName);
                console.log(stand.exposants[0]);
                console.log(stand.comment);

                    /*var slogTmp =stand.exposants[0]
                    var slog = slogTmp.replace('', '-')
                    console.log(slog);*/
                    var exp = L.polygon(dataPolygon, {
                        Name: stand.iId,
                        color: '',
                        class:'maClass',
                        fillColor: '',
                        fillOpacity: 0
                    }).addTo(myFeatureGroup).bindPopup(
                        "<div data-toggle='modal' data-target='#exampleModal' class='popupContent'  onclick=comment('"+stand.idExposant+"','"+stand.exposants[0]+"','"+stand.iId+"','"+stand.comment+"')>" +
                        "<div class='titleStand' style='clear:both;position: absolute;width: 100%;'>"+stand.vchName+"</div>" +
                        "<br><div class='popupContent' style='margin-top:11px;position: absolute;width: 100%;text-align: center;\n'>" +
                        "<div style='color:#e40e65;'>"+stand.exposants[0]+"</div></div><br class='clear: both;'/>" +
                        "<div style='color:#a0a8af;margin-top:35px;text-align: center;'>Ajouter un avis</div></div><br class='clear: both;'/>" +
                        "</div>", {
                            closeOnClick: false,
                            autoClose: false
                        }).on('click', onPolyClick);
                exposant.push(exp);

            });
            showAllpopups();
        });
        var enableTour = false;
        var exposantsList = [];
        var exposant = [];
        var map = L.map('mapid', {
            minZoom: 1,
            maxZoom: 4,
            center: [-50, 135],
            zoom: 0.1,
            dragging: true,
            setMaxBounds: false,
            crs: L.CRS.Simple
        });
        // dimensions of the image
        path="{{ asset('images/plan-map.svg') }}";
        var w = 2154,
            h = 2160.7,
            url =path;
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.imageOverlay(url, bounds).addTo(map);
        map.setMaxBounds(bounds);


        var myFeatureGroup = new L.LayerGroup();
        map.addLayer(myFeatureGroup);


        //envoie de donnees par ajax
        function sendComment() {
            var testarea = document.getElementById("texttValue").value;
            data={
                'idexhebitor':idexhebitor,
                'idstand':idstand,
                'datatoken':datatoken,
                'commentaire':testarea,
            };
            console.log(data);
            $.ajax({
                type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                url: 'http://appsalon.napsy.com/paris-games-week/web/webservice/send-commentaire', // the url where we want to POST
                data: data, // our data object
                dataType: 'json', // what type of data do we expect back from the server
                encode: true,
                success: function (response) {

                },
                fail: function (xhr, status, error) {
                    print_debug("Ajax request failed to " + url + "<br>Status: " + xhr.status + " (" + status + "), Error: " + error);

                }
            });
            ///document.getElementById("idvalue").value ='';
            document.getElementById("texttValue").value ='';
            $('.modal-body').hide()
            $('.modal-footer').hide()
            $('.messagesucess').show();
            //window.location.reload(true);
        }

        function closeMessage() {
            window.location.reload(true);
        }
    </script>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="container messagesucess" style="display: none">
                    <p>Votre commentaire est envoyé</p>
                    <p onclick="closeMessage()">Fermer</p>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <span style="color: #e40e65;">Précédant commetaire</span><br/>
                        <div id="commentaire"></div>
                    </div>
                    <input name="id" value="" type="hidden" id="idvalue">
                    <textarea class="form-control animated" id="texttValue" placeholder="Merci de saisir votre commentaire"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="sendComment();">Enregistrez</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}