{% extends 'base.html.twig' %}

{% block title %} {{ banlal.name }}{% endblock %}

{% block body %}

    {% set currentPath = url(app.request.attributes.get('_route'),
        app.request.attributes.get('_route_params')) %}


    <main class="xs-all-content-wrapper">
        <!-- fund details -->
        <section class="xs-content-section-padding xs-fund-details fundpress-fund-details">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-lg-7">
                        <div class="xs-sync-slider-wraper xs-mb-50">
                            <div class="owl-carousel xs-sync-slider-preview xs-mb-10">
                                <div class="xs-sync-slider-preview-content">
                                    {%  if banlal.logo is not null  %}
                                        <img src="{{ vich_uploader_asset(banlal, 'logoFile') | imagine_filter('show') }}" alt="{{ banlal.name }}" >
                                    {%  else %}
                                        <img src="{{ vich_uploader_asset(banlal.category, 'iconFile') | imagine_filter('show') }}" alt="{{ banlal.name }}" >
                                    {%  endif %}
                                </div>

                                                           <div class="xs-sync-slider-preview-content">-->
                                                                <iframe class="xs-youtube-iframe" src="https://www.youtube.com/watch?v=hj" allowfullscreen></iframe>-->
                                                           </div>

                            </div><!-- xs-sync-slider-preview -->

                            <div class="owl-carousel xs-sync-slider-thumb">
                                <div class="xs-sync-slider-thumb-content">
{#                                    {%  if banlal.logo is not null  %}#}
{#                                        <img src="{{ vich_uploader_asset(banlal, 'logoFile') | imagine_filter('showCover') }}" alt="{{ banlal.name }}" >#}
{#                                    {%  else %}#}
{#                                        <img src="{{ vich_uploader_asset(banlal.category, 'iconFile') | imagine_filter('showCover') }}" alt="{{ banlal.name }}" >#}
{#                                    {%  endif %}#}
                                </div>
{#                                <div class="xs-sync-slider-thumb-content">#}
{#                                    <?php $this->Html->image($banlal['thumb']) ?>#}
{#                                </div>#}
{#                                <div class="xs-sync-slider-thumb-content">#}
{#                                    <?php $this->Html->image($banlal['thumb']) ?>#}
{#                                    <div class="xs-sync-slider icon-position-center">#}
{#                                        <a href="" class="full-round icon-identify-btn blue-btn opacity-btn xs-box-shadow"><i class="fa fa-play"></i></a>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div class="xs-sync-slider-thumb-content">#}
{#                                    <?php $this->Html->image($banlal['thumb']) ?>#}
{#                                </div>#}
{#                                <div class="xs-sync-slider-thumb-content">#}
{#                                    <?php $this->Html->image($banlal['thumb']) ?>#}
{#                                </div>#}
                            </div>
                        </div><!-- xs-sync-slider-wraper -->
                        <div class="xs-text-content-tab">
                            <!-- Nav tabs -->
                            <h1>{{ banlal.name }}</h1>
                            <div class="xs-tab-nav fundpress-tab-nav-v2 xs-mb-30">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#description" role="tab" data-toggle="tab">
                                            {{ 'banlal.show.section.description' | trans }}
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#comments_panel" role="tab" data-toggle="tab">
                                            {{ 'banlal.show.section.commentaire' | trans }}
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#backers" role="tab" data-toggle="tab" id="don">
                                            {{ 'banlal.show.section.donnateur' | trans }}
                                        </a>
                                    </li>
                                   {%  if banlal.type.id==2 %}
                                    <li class="nav-item">
                                        <a class="nav-link" href="#mobilisation" role="tab" data-toggle="tab" id="mob">
                                            {{ 'banlal.show.section.mobilisation' | trans }}
                                        </a>
                                    </li>
                                    {%  endif %}
                                </ul>
                            </div><!-- xs-tab-nav fundpress-tab-nav-v2 xs-mb-30 -->
                            <!-- Tab panes -->
                            <div class="tab-content xs-text-tab-content">
                                <div role="tabpanel" class="tab-pane fadeInRights show fade in active" id="description">
                                    <h1 class="color-navy-blue xs-mb-30"><?= $banlal['name'] ?></h1>
                                    <p class="xs-content-description fundpress-content-description xs-mb-30">
                                       {{ banlal.content | raw | nl2br }}
                                    </p>
                                </div><!-- tab-pane fadeInRights -->
                                <!-- ici les commentaires -->
                                <div role="tabpanel" class="tab-pane fadeInRights fade" id="comments_panel">
                                    <div class="xs-blog-post-comment border xs-content-padding">
                                        <div id="disqus_thread"></div>
{#                                        <script>#}

{#                                            (function() { // DON'T EDIT BELOW THIS LINE#}
{#                                                var d = document, s = d.createElement('script');#}
{#                                                s.src = 'https://banlal-com.disqus.com/embed.js';#}
{#                                                s.setAttribute('data-timestamp', +new Date());#}
{#                                                (d.head || d.body).appendChild(s);#}
{#                                            })();#}
{#                                        </script>#}
{#                                        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>#}

                                    </div>
                                </div>
                                <!-- fin commentaires -->
                                <!--Les Participants ici  -->
                                <div role="tabpanel" class="tab-pane fadeInRights fade" id="backers">
                                    <div class="xs-backers-lsit-wraprer">
                                        <ul class="fundpress-backer-lsit">
                                            <li class="row xs-margin-0">
                                                <div id="donateurs" class="row xs-margin-0 col-md-12 text-left">
                                                    <div id="ajax-loader" style="display: none"> </div>
                                                    <!-- ici les donateurs -->
                                                </div>

                                            </li>

                                        </ul>
                                    </div>
                                </div> <!-- fin participants -->

                                <!--Les Participants à la mobilisation ici  -->
                                <div role="tabpanel" class="tab-pane fadeInRights fade" id="mobilisation">
                                    <div class="xs-backers-lsit-wraprer">
                                        <ul class="fundpress-backer-lsit">
                                            <li class="row xs-margin-0">
                                                <div id="mobilisateur" class="row xs-margin-0 col-md-12 text-left">
                                                    <div id="ajax-loader" style="display: none"> </div>
                                                    <!-- ici les donateurs -->
                                                </div>

                                            </li>

                                        </ul>
                                    </div>
                                </div> <!-- fin participants -->
                            </div>
                        </div><!-- xs-text-content-tab -->
                    </div>
                    <div class="col-md-12 col-sm-12 col-lg-5">
                        <div class="xs-sidebar-wraper">

                            <div class="xs-single-sidebar xs-mb-20">
                                <div class="xs-pie-chart-wraper fundpress-pie-chart-wraper">
                                    <div class="xs-pie-chart" data-percent="{{ banlal.percentProgress }}">
                                        <div class="xs-pie-chart-percent-wraper icon-position-center bold color-navy-blue xs-spilit-container">
                                            <div class="xs-pie-chart-percent"></div>
                                            <span>%</span>
                                        </div>
                                    </div>
{#                                    <div class="xs-pie-chart-label">Fund Raised</div>#}
                                </div><!-- xs-pie-chart-wraper -->
                            </div>


                            <?php foreach($p as $k): ?>
                            <div class="xs-single-sidebar xs-mb-20">

                            </div>
                            <?php endforeach; ?>
                            <div class="xs-single-sidebar xs-mb-30">
                                <ul class="xs-list-with-content fundpress-simple-list-content">
                                    {% if banlal.isPublic == false  %}
                                    <li class="color-navy-blue bold xs-mb-20">Privé</li>
                                    {%  else  %}

                                        {# ici on affiche les sommes collectée #}
                                        {% if TotalAmountByCurrency is not empty %}
                                            {% for somme in TotalAmountByCurrency %}
                                             <li class="color-navy-blue bold xs-mb-20">{{ somme.AmountTotal | format_currency(somme.currency_code, locale=app.request.locale) }}</li>
                                            {% endfor %}

                                        {%  else  %}
                                            <li class="color-navy-blue bold xs-mb-20">0</li>
                                        {% endif %}
{#                                    <li class="color-navy-blue bold xs-mb-20">5 000<span class="color-semi-black regular"> Eur</span></li>#}

                                    {% endif %}
                                    <li class="color-green bold xs-mb-20">{{ banlal.amount | format_currency(banlal.currency.currencyCode , locale=app.request.locale) }}<span class="color-semi-black regular">Objectif </span></li>

                                    <li class="color-brick-light-2 bold">
                                        {{ TotalParticipant }}
                                        <span class="color-semi-black regular">Banlô</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="xs-single-sidebar xs-mb-40">
                                <div class="xs-countdown-timer-wraper">
                                    <div class="countdown-container xs-countdown-timer-v2" data-countdown="{{ banlal.endAt | date("m/d/Y") }}"></div>
                                </div>
                            </div>

                            <div class="xs-single-sidebar xs-mb-50">
                                <div class="xs-spilit-container">
                                    <div class="xs-btn-wraper mb-2">

                                        <a href="{{ url("donation.infos",{ slug: banlal.slug , id: banlal.id}) }}" class="icon-btn xs-btn radius-btn green-btn xs-btn-medium">
                                            <i class="fa fa-heart"></i>{{ 'banlal.show.btn.donate' | trans }}
                                        </a>
                                    </div>
                                    {% if banlal.type.id==2 %}
                                    <div class="xs-btn-wraper">
                                        <a href="/ici-url-vers-participation-mobilisation" class="icon-btn xs-btn radius-btn green-btn xs-btn-medium"><i class="fa fa-users"></i>{{ 'banlal.show.btn.participate' | trans }}</a>
                                    </div>
                                    {% endif %}
                                    <div class="xs-single-album-details-section pt-2">
                                        <ul class="xs-social-list fundpress-social-list fundpress-social-list-v2">
                                            <li class="xs-text-content">{{ 'banlal.show.share' | trans}}</li>
                                            <li><a href="#" class="color-facebook full-round share_facebook" data-url ="{{ currentPath }}" id="share_facebook"><i class="fa fa-facebook"></i></a></li>
                                            <li><a href="#" class="color-twitter full-round share_twitter"><i class="fa fa-twitter" data-url ="{{ currentPath }}"></i></a></li>
                                            <li><a href="#" class="color-instagram full-round "><i class="fa fa-instagram" data-url ="{{ currentPath }}"></i></a></li>
                                            <li><a href="https://www.linkedin.com/shareArticle?mini=true&url={{ currentPath }}&title={{ banlal.name }}&summary=walitime.com&source={{ siteName }}" onclick="window.open(this.href, 'mywin',
'left=50,top=50,width=500,height=500,toolbar=1,resizable=0'); return false;" class="color-facebook xs-box-shadow full-round share-linkedin share_linkedin"><i class="fa fa-linkedin"></i>
                                                </a>
                                            </li>
                                            <li><a href="whatsapp://send?text={{ banlal.name~ " "~ currentPath }}" data-action="share/whatsapp/share" class="color-whatsapp xs-box-shadow full-round"><i class="fa fa-whatsapp"></i> </a>

                                                <?php if($Android): ?>
                                            </li> <li><a href="sms:?body={{ banlal.name~ " "~ currentPath }}" class="color-whatsapp xs-box-shadow full-round"><i class="fa fa-envelope"></i> </a>
                                            </li>
                                            <?php elseif ($iPhone) : ?>
                                            </li> <li><a href="sms:;body={{ banlal.name~ " "~ currentPath }}" class="color-whatsapp xs-box-shadow full-round"><i class="fa fa-envelope"></i> </a>
                                            </li>
                                            <?php endif; ?>
                                        </ul>
                                    </div>

                                </div>
                            </div>


                            <div class="xs-single-sidebar xs-mb-50">
                                <div class="xs-spilit-container xs-spilit-container-v2">
                                    <div class="xs-avatar xs-avatar-big full-round fundpress-avatar">
                                       <img src="{{ asset('img/default.png') | imagine_filter('avatar') }}">

                                    </div>
                                    <div class="xs-avatar-title fundpress-avatar-title fundpress-avatar-title-v2">
                                        <a href="#" class="xs-mb-10">
                                            {{ banlal.user.fullName }}
                                        </a>

                                        <!-- ici mettre si profil verifie     -->
                                        <p class="xs-content-description fundpress-content-description xs-mb-20"><?= $banlal['user']['profession'] ?? $banlal['user']['profession'] ?? "" ?></p>
                                        <ul class="xs-list-item-icon-text">
                                            <li class="xs-mb-0">
                                                <p class="xs-content-description fundpress-content-description">
                                                    <i class="fa fa-map-marker color-green"></i>
                                                    {{ banlal.place ~ " " ~ banlal.country }}
{#                                                    <?= $banlal['city']." ". $banlal['country'] ?? "" ?>#}
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--ici mettre le sideBar apres -->
                            {% if banlal.type.id==2 %}
                            <div class="xs-single-sidebar">
                                <div class="xs-sidebar-title fundpress-sidebar-title xs-mb-30">
                                    <h3 class="color-navy-blue">{{ 'banlal.show.section.mobilisation' | trans}}: {{ banlal.place }}</h3>
                                    <h4>Participant: <?=  $banlal->nombre_participant(); ?></h4>
                                </div>
                                <div class="xs-info-card  fundpress-info-card xs-box-shadow xs-mb-30 color-blue-v2" id="basicMap" style="height: 400px !important;">

                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
{% endblock %}

{% block stylesheets %}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/frontEnd/jquery.easypiechart.min.js') }}"></script>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

<script>
    $("#don").on("click",function (e) {
        $.ajax({
            type:'GET',
            dataType: "json",
            url: "{{ url('donation.participation',{ banlal_id: banlal.id }) }}",

            beforeSend: function(xhr)
            {
                $("#ajax-loader").show();

            },

            success: function(data)
            {     $("#ajax-loader").hide();
                var users = JSON.parse(data.data);

                maDiv = $('#donateurs').empty();
                $.each(users, function(index, v){
                    {% if app.request.locale== "fr" %}
                     {% set currencyFormat="fr-FR" %}
                    {% else %}
                    {% set currencyFormat="en-US" %}
                    {% endif %}


                    const formatter = new Intl.NumberFormat("{{ currencyFormat }}", {
                        style: 'currency',
                        currency: v.currency.currency_code,
                        minimumFractionDigits: 2
                    });


                    maDiv.append(
                        `<div class="xs-avatar full-round">
                          <img src="{{ asset('img/default.png') | imagine_filter('icon') }}">
                    </div>
                    <div class="fundpress-backer-info">
                        <h5 class="color-navy-blue semi-bold"> ${v.name} ${v.lastname} </h5>
                        <h6 class="color-navy-blue semi-bold"> ${formatter.format(v.amount)} </h6>
                    </div>`
                    );
                });
            },

            error: function(e)
            {

                alert("impossible de récuperer les infos")
            }
        });
    });

    $("#mob").on("click",function (e) {

        $.ajax({
            type:'GET',
            dataType: "json",
            url: "{{ url('donation.mobilisation',{ banlal_id: banlal.id }) }}",

            beforeSend: function(xhr)
            {
                $("#ajax-loader").show();

            },

            success: function(data)
            {

                ///$("#ajax-loader").hide();
                maDiv = $('#mobilisateur').empty();

                $.each(JSON.parse(data.data), function(index, v){
                    console.log(v);
                    maDiv.append(
                        `<div class="xs-avatar full-round">
                          <img src="{{ asset('img/default.png') | imagine_filter('avatar') }}">
                    </div>
                    <div class="fundpress-backer-info">
                        <h5 class="color-navy-blue semi-bold">${v.lastname} ${v.name}</h5>
                    </div>`
                    );
                });
            },

            error: function(e)
            {

                alert("impossible de récuperer les infos")
            }
        });
    });
</script>

<script id="dsq-count-scr" src="//banlal-com.disqus.com/count.js" async></script>

{%  if banlal.type.id==2 %}

<script>
    // function init() {
    //     map = new OpenLayers.Map("");
    //     var mapnik = new OpenLayers.Layer.OSM();
    //     map.addLayer(mapnik);
    //     map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Centre de la carte
    //         .transform(
    //             new OpenLayers.Projection("EPSG:4326"), // transformation de WGS 1984
    //             new OpenLayers.Projection("EPSG:900913") // en projection Mercator sphérique
    //         ), 15 // Zoom level
    //     );
    // }

    function initMap() {

        var titre = "{{ banlal.name }}"
        var lat = "{{ banlal.placeLat ? banlal.placeLat : 9.5569043 }}"
        var lon = "{{ banlal.placeLng ? banlal.placeLng : -13.6387412 }}"
        var macarte = null;

        // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
        macarte = L.map('basicMap').setView([lat, lon],14);

        // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            // Il est toujours bien de laisser le lien vers la source des données
            //center:[lat, lon],
            minZoom: 13,
            maxZoom: 20
        }).addTo(macarte);
        // Nous parcourons la liste des villes

        var marker = L.marker([lat, lon]).addTo(macarte);
        marker.bindPopup(titre);


    }

    window.onload = function(){
        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
        initMap();
    };
</script>
{%  endif %}
{% endblock %}