{# templates/superadmin/configuration/sa_mots_cles.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block title %}Mots clés - {{ parent() }}{% endblock %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    {{ include('superadmin_v2/layout/sa_tab.html.twig') }}

    <div class="section__content section__content--p30">
        {{ include('superadmin_v2/layout/sa_debug.html.twig') }}

        {{ include('superadmin_v2/layout/sa_alert.html.twig') }}
        <div class="container-fluid">
            <div class="row">
                <h5>Ajouter / Mettre à jour :</h5>
                <div class="table-data__tool" style="width:100%;margin-top:6px;padding-top:12px;margin-bottom:28px;">
                    <div class="table-data__tool-right col-lg-12">
                      <form class="form-horizontal" name="add_mots_cles_form" id="add_mots_cles_form" method="post" action="{{ path('superadmin_mots_cles') }}">
                        <div class="row form-group fg-m-bottom" style="margin:6px 0 0!important;">
                            <div class="col col-md-1 spa-col-label fg-m-bottom">
                                <label class="form-control-label spa-label">Ville</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <input type="text" class="form-control" name="q_ville" id="q_ville" placeholder=" - Ville / CP - " autocomplete="off">
                                <div id="listing_villes_box"></div>
                            </div>
                            <div class="col col-md-1 spa-col-label fg-m-bottom">
                                <label class="form-control-label spa-label">Service</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <select class="form-control" name="form[service]" id="service">
                                    <option value="0"> - Choisir - </option>
                                    <optgroup label="Nettoyage">
                                        <option value="societe_nettoyage">Société de nettoyage</option>
                                      {% for key,val in nos_services %}
                                        <option value="{{ key }}">{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                    <optgroup label="Dépannage">
                                        <option value="prestation_depannage">Société de dépannage</option>
                                      {% for key,val in nos_depannages %}
                                        <option value="{{ key }}">{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                    <optgroup label="Nuisible">
                                        <option value="nuisible">Société anti nuisible</option>
                                      {% for key,val in nos_traitements %}
                                        <option value="{{ key }}">{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <label for="fileToUpload" class="btn btn-warning btn-sm btn-block" id="excel_mots_cles_btn">Excel Mots clés ...</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom" id="excel_mots_cles_name" style="padding-top:6px;">

                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <button type="button" id="add_mots_cles_submit" class="btn btn-success btn-sm btn-block">Envoyer</button>
                                <input type="hidden" name="form[id_ville]" id="id_ville" value="0">
                                <input type="file" class="form-control" name="fileToUpload" id="fileToUpload" value="" onchange="return saveExcelMotsCles();" style="opacity:0;height:1px;width:1px;">
                                <input type="hidden" name="form[excel_mots_cles]" id="excel_mots_cles" value="">
                                <input type="hidden" name="add_mots_cles" id="add_mots_cles" value="add_mots_cles">
                            </div>
                        </div>
                      </form>
                    </div>
                </div>
            </div>

            <div class="row">
                <h5>Filtrer :</h5>
                <div class="table-data__tool" style="width:100%;margin-top:6px;margin-bottom:12px;padding-top:6px;padding-bottom:6px;">
                    <div class="table-data__tool-right col-lg-12">
                      <form class="form-horizontal" name="filtrer_mots_cles_form" id="filtrer_mots_cles_form" method="post" action="{{ path('superadmin_mots_cles') }}">
                        <div class="row form-group fg-m-bottom" style="margin:6px 0 0!important;">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                <label class="form-control-label spa-label">Ville</label>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <input type="text" class="form-control" name="form[ville]" id="qf_ville" value="{% if ville is defined and ville is not empty %}{{ ville }}{% endif %}" placeholder=" - Ville / CP - " autocomplete="off">
                                <div id="listing_villes_box_f"></div>
                            </div>
                            <div class="col col-md-1 spa-col-label fg-m-bottom">
                                <label class="form-control-label spa-label">Service</label>
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                <select class="form-control" name="form[service]" id="service">
                                    <option value="0"> - Choisir - </option>
                                    <optgroup label="Nettoyage">
                                        <option value="societe_nettoyage">Société de nettoyage</option>
                                      {% for key,val in nos_services %}
                                        <option value="{{ key }}"{% if service is defined and service is not empty and service == key %} selected{% endif %}>{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                    <optgroup label="Dépannage">
                                        <option value="prestation_depannage">Société de dépannage</option>
                                      {% for key,val in nos_depannages %}
                                        <option value="{{ key }}"{% if service is defined and service is not empty and service == key %} selected{% endif %}>{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                    <optgroup label="Nuisible">
                                        <option value="nuisible">Société anti nuisible</option>
                                      {% for key,val in nos_traitements %}
                                        <option value="{{ key }}"{% if service is defined and service is not empty and service == key %} selected{% endif %}>{{ val }}</option>
                                      {% endfor %}
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                <button type="button" id="filtrer_mots_cles_submit" class="btn btn-info btn-sm btn-block">Rechercher</button>
                                <input type="hidden" name="form[id_ville]" id="id_ville" value="{% if id_ville is defined and id_ville is not empty %}{{ id_ville }}{% else %}0{% endif %}">
                                <input type="hidden" name="filtrer_mots_cles" id="filtrer_mots_cles" value="filtrer_mots_cles">
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom text-center">
                                {% if list_mots_cles|length > 0  and id_ville is defined and id_ville is not empty and service is defined and service is not empty %}
                                    <button type="button" onclick="downloadFileMotsCles({{ id_ville }}, '{{ service }}');" class="btn btn-warning btn-sm btn-block">
                                        <i class="zmdi zmdi-download"></i> Télécharger
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                      </form>
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="table-responsive table--no-card m-b-30">
                    {% if list_mots_cles|length > 0 %}
                    <table class="table table-borderless table-striped table-earning">
                        <thead>
                            <tr>
                                <th class="width-5">#</th>
                                <th class="width-25">Mot clé</th>
                                <th>Description</th>
                                <th class="width-10">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for k,row in list_mots_cles %}
                            <tr>
                                <td class="text-center"><b>{{ k+1 }}</b></td>
                                <td>{{ row.tag }}</td>
                                <td>{{ row.description }}</td>
                                <td>
                                    <div class="table-data-feature">
                                        <button 
                                          id="published_{{ row.id }}" 
                                          onclick="publish({{ row.id }});" 
                                          class="item {% if row.published == 1 %}success{% else %}danger{% endif %}">
                                            <i class="zmdi {% if row.published == 1 %}zmdi-lock-open{% else %}zmdi-lock{% endif %}"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
            </div>

            {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $(document).on('keyup', 'form#add_mots_cles_form input#q_ville', function(){
            $('form#add_mots_cles_form input#id_ville').val('0'); 
            var q_ville = $('form#add_mots_cles_form input#q_ville').val();

            if (q_ville.length > 0) {
                $.ajax({
                    url : '{{ path("rechercher_ville_cp") }}',
                    type : 'POST',
                    data : {q:q_ville},
                    dataType : 'json',
                    success : function(response){
                        if (response.num_rows > 0) {  
                            var listing = response.listing;
                            var lines = '<div class="close_search_ville" id="close_search_ville">X</div>';
                            for (var key in listing) {
                                var obj = listing[key];
                                var bg = (key%2 == 0) ? '248, 248, 255' : '255, 255, 255';
                                var ville = obj.ville;
                                var ville_replace = ville.replace(/'/g, "\\'");

                                lines += '<div class="line_ville" onclick="selectVille(' + obj.id + ', \'' + obj.cp + '\', \'' + ville_replace + '\');" style="background-color:rgb(' + bg + ');">';
                                lines += '<div class="detail_ville">' + obj.cp + ' - ' + ville + '</div>';
                                lines += '</div>';
                            }
                            $('#listing_villes_box').html(lines).show();
                        } else {
                            $('#listing_villes_box').hide().html('');
                        }
                    },
                    error : function(e){
                    }
                });
            } else {
                $('#listing_villes_box').hide().html('');
            }
        });

        $(document).on('click', '#close_search_ville', function(){
            $('#listing_villes_box').hide().html('');
            $('form#add_mots_cles_form input#q_ville').val('');
            $('form#add_mots_cles_form input#id_ville').val('0'); 
        });

        $(document).on('click', 'button#add_mots_cles_submit', function(){
            var ckeck = 0;

            if ($('form#add_mots_cles_form #id_ville').val() == 0) {	
                if (confirm("Injecter des mots clé sans ville ?")) {
                    //alert('a');
                } else {
                    ckeck += 1;
                    $('form#add_mots_cles_form #q_ville').addClass('is-invalid').focus(function(){
                        $(this).removeClass('is-invalid');
                    });         
                }
            }
            if ($('form#add_mots_cles_form #service').val() == 0) {	
                ckeck += 1;
                $('form#add_mots_cles_form #service').addClass('is-invalid').change(function(){
                    $(this).removeClass('is-invalid');
                });            
            }
            if ($('form#add_mots_cles_form #excel_mots_cles').val().length == 0) {	
                ckeck += 1;
                $('#excel_mots_cles_name').html('<span style="color:red;">Veuillez insérer un fichier excel<span>');
            }

            if (ckeck == 0) {
                $('form#add_mots_cles_form').submit();
                return true;
            } else {
                return false;
            }
        });

        $(document).on('keyup', 'form#filtrer_mots_cles_form input#qf_ville', function(){
            $('form#filtrer_mots_cles_form input#id_ville').val('0'); 
            var qf_ville = $('form#filtrer_mots_cles_form input#qf_ville').val();

            if (qf_ville.length > 0) {
                $.ajax({
                    url : '{{ path("rechercher_ville_cp") }}',
                    type : 'POST',
                    data : {q:qf_ville},
                    dataType : 'json',
                    success : function(response){
                        if (response.num_rows > 0) {  
                            var listing = response.listing;
                            var lines = '<div class="close_search_ville" id="close_search_ville_f">X</div>';
                            for (var key in listing) {
                                var obj = listing[key];
                                var bg = (key%2 == 0) ? '248, 248, 255' : '255, 255, 255';
                                var ville = obj.ville;
                                var ville_replace = ville.replace(/'/g, "\\'");

                                lines += '<div class="line_ville" onclick="selectVilleF(' + obj.id + ', \'' + obj.cp + '\', \'' + ville_replace + '\');" style="background-color:rgb(' + bg + ');">';
                                lines += '<div class="detail_ville">' + obj.cp + ' - ' + ville + '</div>';
                                lines += '</div>';
                            }
                            $('#listing_villes_box_f').html(lines).show();
                        } else {
                            $('#listing_villes_box_f').hide().html('');
                        }
                    },
                    error : function(e){
                    }
                });
            } else {
                $('#listing_villes_box_f').hide().html('');
            }
        });

        $(document).on('click', '#close_search_ville_f', function(){
            $('#listing_villes_box_f').hide().html('');
            $('form#filtrer_mots_cles_form input#qf_ville').val('');
            $('form#filtrer_mots_cles_form input#id_ville').val('0'); 
        });

        $(document).on('click', 'button#filtrer_mots_cles_submit', function(){
            var ckeck = 0;

            /* if ($('form#filtrer_mots_cles_form #id_ville').val() == 0) {	
                ckeck += 1;
                $('form#filtrer_mots_cles_form #qf_ville').addClass('is-invalid').focus(function(){
                    $(this).removeClass('is-invalid');
                });            
            } */
            if ($('form#filtrer_mots_cles_form #service').val() == 0) {	
                ckeck += 1;
                $('form#filtrer_mots_cles_form #service').addClass('is-invalid').change(function(){
                    $(this).removeClass('is-invalid');
                });            
            }

            if (ckeck == 0) {
                $('form#filtrer_mots_cles_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>

    window.downloadFile = function (sUrl) {

        //iOS devices do not support downloading. We have to inform user about this.
        if (/(iP)/g.test(navigator.userAgent)) {
           //alert('Your device does not support files downloading. Please try again in desktop browser.');
           window.open(sUrl, '_blank');
           return false;
        }

        //If in Chrome or Safari - download via virtual link click
        if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
            //Creating new link node.
            var link = document.createElement('a');
            link.href = sUrl;
            link.setAttribute('target','_blank');

            if (link.download !== undefined) {
                //Set HTML5 download attribute. This will prevent file from opening if supported.
                var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
                link.download = fileName;
            }

            //Dispatching click event.
            if (document.createEvent) {
                var e = document.createEvent('MouseEvents');
                e.initEvent('click', true, true);
                link.dispatchEvent(e);
                return true;
            }
        }

        // Force file download (whether supported by server).
        if (sUrl.indexOf('?') === -1) {
            sUrl += '?download';
        }

        window.open(sUrl, '_blank');
        return true;
    }

    function selectVille(id, cp, ville){
        $('#listing_villes_box').hide().html('');

        $('form#add_mots_cles_form input#q_ville').val(cp + ' ' + ville); 
        $('form#add_mots_cles_form input#id_ville').val(id); 
    }

    function selectVilleF(id, cp, ville){
        $('#listing_villes_box_f').hide().html('');

        $('form#filtrer_mots_cles_form input#qf_ville').val(cp + ' ' + ville); 
        $('form#filtrer_mots_cles_form input#id_ville').val(id); 
    }

    function saveExcelMotsCles(){
        var inputFile = document.getElementById('fileToUpload');
        var file = inputFile.files[0];
        var data = new FormData();
        data.append('doc', file, file.name);
        $.ajax({
            url: "{{ path('superadmin_save_excel_mots_cles') }}",
            type: "POST",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            success : function(response){
				if (response.error != '') {
					$('#excel_mots_cles_name').html(response.error);
				} else {
                    $('#excel_mots_cles_btn').hide();
                    $('input#excel_mots_cles').val(response.name);
                    //$('#excel_mots_cles_name').html(response.tmp_name + " [<a href=\"javascript:void(0);\" onclick=\"removeExcelMotsCles('" + response.name + "');\">Supprimer</a>]");
                    $('#excel_mots_cles_name').html(response.tmp_name);
				}
            },
            error : function(e){
            }
        });
    }

    function removeExcelMotsCles(tmp_file){
        if (confirm("Êtes-vous sûr ?")) {
            /*$.ajax({
                url: "{# { path('artisan_devis_en_attente_remove_pj_devis') } #}",
                type : 'POST',
                data : {tmp_file:tmp_file},
                dataType : 'json',
                success : function(response){
                    if (response.result) {
                        $('input#pjDevis').val('');
                        $('#pj_devis_name').html('');
                        $('#joindre_devis_btn').show();
                    }
                },
                error : function(e){
                }
            });*/
        }
    }

    function publish(id){
        $.ajax({
            url : "{{ path('superadmin_mots_cles') }}/" + id + "/publier",
            dataType : 'json',
            success : function(response){
                if (response.code == 200) {
                    if (response.message === 'published') {
                        $('button#published_' + id).removeClass('danger').addClass('success');
                        $('button#published_' + id + ' i').removeClass('zmdi-lock').addClass('zmdi-lock-open');
                    } else if (response.message === 'unpublished') {
                        $('button#published_' + id).removeClass('success').addClass('danger');
                        $('button#published_' + id + ' i').removeClass('zmdi-lock-open').addClass('zmdi-lock');
                    }
                }
            },
            error : function(e){
            }
        });
    }

    function downloadFileMotsCles(id_ville, service){
        $.ajax({
            url : "{{ path('superadmin_mots_cles_download_file_mots_cles') }}",
            type : 'POST',
            data : {id_ville:id_ville,service:service},
            dataType : 'json',
            success : function(response){
                if (response.result == true) {
                    var my_url = 'https://www.cleanolia.fr/public/to_excel/' + response.file;
                    downloadFile(my_url);
                } else {
                    alert('Erreur');
                }
            },
            error : function(e){
            }
        });
    }
    </script>
{% endblock %}