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

{% block title %}
    PARIS GAMES WEEK - La liste de vos exposants
{% endblock %}

{% block body %}
    <!-- Button trigger modal -->
    <div class="container-fluid" style="height: 500px;padding: 0px;margin: 0px">
        <div class="header" style="width: 100%;height: 70px;">
            <img src="{{ asset('images/pub/pub_.gif') }}" class="img-fluid" alt="Responsive image">
        </div>
        <div class="container" style="height: 370px;padding: 0px;margin: 0px">
            <div id="mapid" style=""></div>
        </div>
        <div class="footer" style="text-align: center">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
                La liste des conférences du jour
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalLongTitle" aria-hidden="true" >
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle" style="width: 100%">Conférences du jour</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 | date('d-m-y h:m') }}</p>
                                        <h2 class="title"
                                            style="margin: 0px;font-size: 1rem;">{{ conference.titre|e }}</h2>
                                        <p class="footer" style="margin: 0px"> SOCIETE: <span
                                                    style="color: #9f191f">{{ conference.societe|e }}</span></p>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

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

        function showAllpopups() {
            for (var i in exposant) {
                exposant[i].openPopup();
                console.log(exposant[i]);
            }
            $('a.leaflet-popup-close-button').css('display','none');
        }
        $(document).ready(function () {
            $collectionStandHolder = $('div.standsList');
            $collectionStandHolder.data('stands').forEach(stand => {
                    var innovationHtml = "";
                    var exposants = stand.exposants;

                    var innovations = stand.innovations;
                    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 = [];
                    var onPolyClick = function (event) {
                        var stand = event.target.options.Name;
                        if (!enableTour) {
                        } else {
                            addToCart(stand);
                        }
                    };
                    poi[0].forEach(element => {

                        dataPolygon.push([element.lat, element.lng]);
                    });

                    var exp = L.polygon(dataPolygon, {
                        Name: stand.iId,
                        color: '',
                        fillColor: '',
                        fillOpacity: 0
                    }).addTo(myFeatureGroup).addTo(myFeatureGroup).bindPopup(
                        '<div class="popupContent"><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>", {
                            closeOnClick: false,
                            autoClose: false
                        }).on('click', onPolyClick);
                    exposantsList.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/planOK.svg') }}";
        var w = 2154,
            h = 893.2,
            url = path;
        // calculate the edges of the image, in coordinate space
        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);
    </script>
{% endblock %}