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

{% block title %}
    {{ 'menu.profil.editTitle'| trans }}

{% endblock %}

{% block body %}

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    {{ include("layouts/Flash/_flash.html.twig") }}
    <div class="container mt-5" style="margin-top: 80px">


        <div class="row">
            <div class="col-md-4 col-sm-12">

                <div id="map" style="height: 400px!important; display: none"></div>

                {{ include('user/_sidebar.html.twig') }}
            </div>
            <div class="col-xs-12 col-sm-12 col-md-8"  style="background-color: #FFFFFF; padding-top: 10px">

                <h4>{{ 'menu.profil.editTitle'| trans }}</h4>


                {% if not form.vars.valid %}
                    <div class="alert alert-danger" role="alert">
                        erreur de merde
                    </div>
                {%  endif %}

                <div class="alert alert-danger message error" id="error-msg" style="display: none">

                </div>
                <hr class="colorgraph">

                {{ form_start(form,{ "attr": { 'id': 'form-registration', 'class': 'xs-campaign', 'autocomplete': 'nofill' }}) }}

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <b><label >{{ 'banlal.add.label.category'| trans}}</label></b>
                        {{ form_row(form.category, {'attr' : { 'placeholder' : 'banlal.add.label.category'| trans  }}) }}
                    </div>

                    <div class="form-group col-md-6">
                        <b><label for="logo">{{ 'banlal.add.label.type'| trans  }}</label></b>
                        {{ form_row(form.type, {'attr' : { 'placeholder' : 'banlal.add.label.type'| trans , "class": 'js-type'}}) }}
                    </div>

                </div>




                <div class="form-row js-mobilisation-date"  style="{{ form.vars.value.type.id is defined and form.vars.value.type.id==2 ? 'display:block;': 'display: none;' }}">
                    <div class="form-group col-md-12">
                        <b>  <label >La date de la mobilisation </label></b>
                        {{ form_row(form.mobilization_at, {'attr' : { 'placeholder' : 'nom de mon pays', 'class': 'js-mobilisation'  }}) }}
                    </div>
                </div>


                <div class="form-row js-mobilisation-date"  style="{{ form.vars.value.type.id is defined and  form.vars.value.type.id==2 ? 'display:block;': 'display: none;' }}">
                    <div class="form-group col-md-12">
                        <b><label for="contentl">{{ 'banlal.add.label.place'| trans }} :</label></b>
                        {{ form_row(form.place, {'attr' : { 'placeholder' : 'banlal.add.label.place'| trans, 'class': 'js-lieu'  }}) }}
                    </div>
                </div>




                <div class="form-row">
                    <div class="form-group col-md-6">
                        <b><label >{{ 'banlal.add.label.public'| trans  }} ?</label></b>
                        {{ form_row(form.is_public, {'attr' : { 'placeholder' : 'banlal.add.label.public'| trans  }}) }}
                    </div>

                    <div class="form-group col-md-6">
                        <b><label >{{ 'banlal.add.label.endDate'| trans  }}?</label></b>
                        {{ form_row(form.end_at, {'attr' : { 'placeholder' : 'banlal.add.label.endDate'| trans , "class": 'js-endAt'  }}) }}

                    </div>
{#                    <div class="form-group col-md-6">#}
{#                        <b><label >Votre Cagnotte est active ?</label></b>#}
{#                        {{ form_row(form.is_active, {'attr' : { 'placeholder' : 'nom de la categorie en En'  }}) }}#}

{#                    </div>#}
                </div>


                <div class="form-row">
                    <div class="form-group col-md-6">
                        <b><label >{{ 'banlal.add.label.amount'| trans }}</label></b>
                        {{ form_row(form.amount, {'attr' : { 'placeholder' : 'banlal.add.label.amount'| trans   }}) }}
                    </div>

                    <div class="form-group col-md-6">
                        <b><label for="logo">{{ 'banlal.add.label.currency'| trans }}</label></b>
                        {{ form_row(form.currency, {'attr' : { 'placeholder' : 'banlal.add.label.currency'| trans  }}) }}
                    </div>
                </div>


                <div class="form-row">
                    <div class="form-group col-md-12">
                        <b><label for="nom_banlal">{{ 'banlal.add.label.name'| trans }} :</label></b>
                        {{ form_row(form.name, {'attr' : { 'placeholder': 'banlal.add.label.name'| trans }}) }}

                    </div>

                </div>



                <div class="form-row">

                    <div class="form-group col-md-6">
                        <b><label for="nom_banlal">{{'banlal.add.label.city'| trans }} :</label></b>
                        {{ form_row(form.city, {'attr' : { 'placeholder': 'banlal.add.label.city'| trans, 'class': 'js-ville'  }}) }}
                    </div>
                    <div class="form-group col-md-6">
                        <b><label for="contentl">{{ 'banlal.add.label.country'| trans }} :</label></b>
                        {{ form_row(form.country, {'attr' : { 'placeholder': 'banlal.add.label.country'| trans, 'class': 'js-pays'  }}) }}
                    </div>
                </div>






                <div class="form-row">
                    <div class="form-group col-md-6">
                        <b><label for="logo">Mettre une photo de couverture</label></b>
                        {{ form_row(form.logoFile, {'attr' : { 'placeholder' : 'nom de la categorie en En'  }}) }}
                    </div>

                    <div class="form-group col-md-6">

                    </div>

                </div>




                <div class="form-row">
                    <div class="form-group col-md-12">
                        <b><label for="contentl">{{ 'banlal.add.label.content'| trans }} :</label></b>
                        {{ form_row(form.content, {'attr' : { 'placeholder': 'banlal.add.label.content'| trans  }}) }}
                    </div>
                </div>




                <div class="xs-submit-wraper content-center">
                    <input type="submit" name="submit" value="{{ 'menu.profil.editTitle'| trans }}" id="btn-submit" class="xs-submit-btn">
                </div>


                {{ form_end(form) }}

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

{% endblock %}


{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
{% endblock %}
{% block javascripts %}

    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script>

        $(document).ready(function() {



            if(document.querySelector('.js-type')!=null){
                $('.js-type').on('change',function (e) {
                    $('.js-mobilisation-lieu').hide();
                    $('.js-mobilisation-date').hide();
                    var id = $(this).val();
                    if (id == 2)
                    {

                        console.log(e);

                        $('#map').show();
                        $('.js-mobilisation-lieu').show();
                        $('.js-mobilisation-date').show();

                    }else if(id==1){
                        $('#map').hide();
                    }

                });
            }


            if(document.querySelector('.js-mobilisation')!=null ){
                var today = new Date();
                var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                var dateTime = date+' '+time;
                 jQuery.datetimepicker.setLocale('fr');
                $( ".js-mobilisation" ).datetimepicker({
                    format:'Y-m-d H:i',
                    minDate: "{{ 'now' | date_modify('+7 days') | date('Y-m-d H:i') }}" ,
                    maxDate: "{{ 'now' | date_modify('+100 days') | date('Y-m-d H:i') }}" ,
                    onShow:function( ct ){
                        this.setOptions({
                            minDate:dateTime ?dateTime:false
                        })
                    },
                    timepicker:true
                });


            }


            if(document.querySelector('.js-endAt')!=null ){
                var today = new Date();
                var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                var dateTime = date;
                jQuery.datetimepicker.setLocale('fr');
                $( ".js-endAt" ).datetimepicker({

                    format:'Y-m-d',
                    minDate: "{{ 'now' | date_modify('+7 days') | date('Y-m-d') }}" ,
                    maxDate: "{{ 'now' | date_modify('+100 days') | date('Y-m-d') }}" ,
                    onShow:function( ct ){
                        this.setOptions({
                            minDate:dateTime ? dateTime : false
                        })
                    },
                    timepicker:false
                });
            }

        });
    </script>


    <?=  $this->Html->script('editor/tinymce.min'); ?>


    <script src="{{ asset('js/editor/tinymce.min.js') }}"></script>
<script>

    tinymce.init({
        selector: 'textarea',
        height: 300,
        resize:false,
        language: 'fr_FR',
        plugins: [
            'advlist autolink lists link charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
        content_css: [
            '//www.tinymce.com/css/codepen.min.css'
        ]
    });

</script>



    <script src="https://cdn.jsdelivr.net/npm/places.js@1.17.1"></script>
    <script>
        (function() {
            var lat = 9.5569043;
            var lon = -13.6387412;
            var map = null;
            var placesAutocomplete = places({
                appId: 'pl7M3LWQA79B',
                apiKey: 'cdf5a1e2f3cacc829c003d885a55f1ad',
                container: document.querySelector('.js-lieu'),
                templates: {
                    value: function(suggestion) {
                        return suggestion.name;
                    }
                }
            }).configure({
                type: 'address',
                language: "{{ app.request.locale }}",
                // countries: ['gn'],
            });

            var markers = [];

            map = L.map('map').setView([lat, lon],11);

            // 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(map);
            map.attributionControl.setPrefix(false);

            placesAutocomplete.on('change', function resultSelected(e) {
                console.log(e);


                document.querySelector('.js-lieu-lat').value = e.suggestion.latlng.lat || '';
                document.querySelector('.js-lieu-lng').value = e.suggestion.latlng.lng || '';
            });

            placesAutocomplete.on('suggestions', handleOnSuggestions);
            placesAutocomplete.on('cursorchanged', handleOnCursorchanged);
            placesAutocomplete.on('change', handleOnChange);
            placesAutocomplete.on('clear', handleOnClear);

            function handleOnSuggestions(e) {
                markers.forEach(removeMarker);
                markers = [];

                if (e.suggestions.length === 0) {
                    map.setView(new L.LatLng(0, 0), 1);
                    return;
                }

                e.suggestions.forEach(addMarker);
                findBestZoom();
            }

            function handleOnChange(e) {

                markers
                    .forEach(function(marker, markerIndex) {
                        if (markerIndex === e.suggestionIndex) {
                            markers = [marker];
                            marker.setOpacity(1);
                            findBestZoom();
                        } else {
                            removeMarker(marker);
                        }
                    });
            }

            function handleOnClear() {
                map.setView(new L.LatLng(0, 0), 1);
                markers.forEach(removeMarker);
            }

            function handleOnCursorchanged(e) {
                markers
                    .forEach(function(marker, markerIndex) {
                        if (markerIndex === e.suggestionIndex) {
                            marker.setOpacity(1);
                            marker.setZIndexOffset(1000);
                        } else {
                            marker.setZIndexOffset(0);
                            marker.setOpacity(0.5);
                        }
                    });
            }

            function addMarker(suggestion) {
                var marker = L.marker(suggestion.latlng, {
                    opacity: .4,
                    draggable: 'true'
                });
                //a modifier
                marker.on('dragend', function(event) {
                    var position = marker.getLatLng();
                    marker.setLatLng(position, {
                        draggable: 'true'
                    }).bindPopup(position).update();
                    $(".js-lieu-lat").val(position.lat);
                    $(".js-lieu-lng").val(position.lng).keyup();
                });

                //fin modif
                marker.addTo(map);
                markers.push(marker);
            }

            function removeMarker(marker) {
                map.removeLayer(marker);
            }

            function findBestZoom() {
                var featureGroup = L.featureGroup(markers);
                map.fitBounds(featureGroup.getBounds().pad(0.5), {animate: false});
            }

            //pour pays et ville
            var CountryAutocomplete = places({
                appId: 'pl7M3LWQA79B',
                apiKey: 'cdf5a1e2f3cacc829c003d885a55f1ad',
                container: document.querySelector('.js-pays'),
                templates: {
                    value: function(suggestion) {
                        return suggestion.name;
                    }
                }
            }).configure({
                type: 'country',
                language: 'fr', // Receives results in German
                // countries: ['gn'], // Search in the United States of America and in the Russian Federation
            });

            var CityAutocomplete = places({
                appId: 'pl7M3LWQA79B',
                apiKey: 'cdf5a1e2f3cacc829c003d885a55f1ad',
                container: document.querySelector('.js-ville'),
                templates: {
                    value: function(suggestion) {
                        return suggestion.name;
                    }
                }
            }).configure({
                type: 'city',
                language: 'fr', // Receives results in German
                // countries: ['gn'], // Search in the United States of America and in the Russian Federation
            });



            CityAutocomplete.on('change', function setCountryValue(e) {
                document.querySelector('.js-pays').value = e.suggestion.country || '';

            });

            CountryAutocomplete.configure({
                type: 'country',
                language: "{{ app.request.locale }}",
            });

        })();
    </script>

    <script>

        $(document).ready(function () {

            if ($(".telIput") != null) {

                var telInput = $(".telIput");
                var errorMsg = $('#error-msg');
                var errorMap = ["{% trans %} invalid.mobile.number {% endtrans %}", "{% trans %} invalid.country.code {% endtrans %}", "{% trans %} invalid.mobile.number.short {% endtrans %}", "{% trans %} invalid.mobile.number.long {% endtrans %}", "{% trans %} invalid.mobile.number {% endtrans %}"];

                var iti = $('.telIput').intlTelInput({
                    autoHideDialCode: false,
                    ///   autoPlaceholder: "on",
                    dropdownContainer: "body",
                    //  formatOnDisplay: false,
                    geoIpLookup: function (success, failure) {
                        $.get("http://ipinfo.io", function () {
                        }, "jsonp").always(function (resp) {
                            var countryCode = (resp && resp.country) ? resp.country : "gn";
                            success(countryCode);
                        });
                    },
                    // hiddenInput: "full_number",
                    initialCountry: "auto",
                    // nationalMode: false,
                    //onlyCountries: ['fr', 'gb', 'ch', 'ca', 'do'],
                    placeholderNumberType: "MOBILE",
                    // preferredCountries: ['cn', 'jp'],
                    separateDialCode: true,
                    autoPlaceholder: "aggressive",
                    formatOnDisplay: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js"
                });


                var reset = function () {
                    telInput.removeClass("is-invalid");
                    errorMsg.text("");
                    errorMsg.hide();
                    $("#btn-submit").prop('disabled', false);
                };


                telInput.on('blur', function () {
                    reset();
                    if (telInput.val().trim()) {
                        if (!$('.telIput').intlTelInput("isValidNumber")) {

                            telInput.addClass("is-invalid");
                            var errorCode = telInput.intlTelInput("getValidationError");

                            errorMsg.text(errorMap[errorCode]);
                            errorMsg.show();
                            $("#btn-submit").prop('disabled', true);
                        }
                    }
                });

// on keyup / change flag: reset
                telInput.on('change', reset);
                telInput.on('keyup', reset);


                $("#form-registration").submit(function () {
                    $("#full_fone_number").val(telInput.intlTelInput("getNumber"));
                    $("#js-country-code").val(telInput.intlTelInput("getSelectedCountryData").iso2);
                });
            }

        });

    </script>


{% endblock %}