{# templates/artisan/configuration/ar_villes_intervention.html.twig #}
{% extends 'artisan/artisan.html.twig' %}

{% block title %}Villes d'intervention - {{ parent() }}{% endblock %}

{% block body %}
    
    {{ render(controller( 'App\\Controller\\Artisan\\ArLayoutController::filAriane', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    <div class="alert alert-info" role="alert" style="text-align:center;">Merci de préciser vos villes et/ou département où vous pouvez intervenir.</div>
    {# { include('artisan/layout/ar_actions.html.twig') } #}

    {{ include('artisan/layout/ar_debug.html.twig') }}

    {{ include('artisan/layout/ar_alert.html.twig') }}
    
    <form class="form-horizontal" id="toute_la_france_form" name="toute_la_france_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
        <div class="form-group fg-m-bottom" style="margin:0 15px;padding:10px 0;border:1px solid #93c00e;">
            <label for="current_password" class="col-sm-4 control-label">Intervention sur toute la France</label>
            <div class="col-sm-2">
                <div class="radio">
                    <label for="toute_la_france_oui">
                        <input type="radio" id="toute_la_france_oui" name="toute_la_france" value="1"{% if toute_la_france == 1 %} checked{% endif %}> Oui
                    </label>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="radio">
                    <label for="toute_la_france_non">
                        <input type="radio" id="toute_la_france_non" name="toute_la_france" value="0"{% if toute_la_france == 0 %} checked{% endif %}> Non
                    </label>
                </div>
            </div>
            <div class="col-sm-4">
                <button type="submit" class="btn btn-primary" id="toute_la_france_submit">Modifier</button>
                <input type="hidden" id="toute_la_france_edit" name="toute_la_france_edit" value="toute_la_france_edit">
            </div>
        </div>
    </form>

    {% if toute_la_france == 0 %}
    <table class="table-striped table-condensed table-add-ville">	
      <tbody>
        <tr style="background-color:#eeeeee;border:0px solid #eeeeee;">
            <td style="width:50%;border-right:2px solid #ffffff;">
                <form class="form-horizontal" name="add_ville_form" id="add_ville_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
                    <div class="form-group" style="padding-top:5px;margin-bottom:5px;">
                        <label for="q" class="col-sm-4 control-label">Ajouter une ville</label>
                        <div class="col-sm-4 right" style="padding-left:0;padding-right:0;margin-left:0;margin-right:0;">
                            <input type="text" class="form-control" name="q" id="q" placeholder="Nom de la ville ou le code postal" value="" autocomplete="off">
                            <div id="listing_villes_box" class="col-sm-5 left" style="width:350px;"></div>
                        </div>
                        <div class="col-sm-3 left">
                            <button type="button" class="btn btn-primary" name="add_ville_submit" id="add_ville_submit">Ajouter</button>
                            <input type="hidden" name="id_ville" id="id_ville" value="0">
                            <input type="hidden" name="add_ville" id="add_ville" value="add_ville">
                        </div>
                        <div class="col-sm-1"></div>
                        <div class="col-sm-12 fm-error"></div>
                    </div>
                </form>
            </td>
            <td>
                <form class="form-horizontal" name="add_departement_form" id="add_departement_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
                    <div class="form-group" style="padding-top:5px;margin-bottom:5px;">
                        <label for="departement" class="col-sm-4 control-label">Ajouter un département</label>
                        <div class="col-sm-4 right" style="padding-left:0;padding-right:0;margin-left:0;margin-right:0;">
                            <select class="form-control" name="departement" id="departement">
                                <option value="0">Choisir</option>
                                {% for row in list_departements %}
                                <option value="{{ row.codeDepartement }}">{{ row.codeDepartement }} - {{ row.departement }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-3 left">
                            <button type="submit" class="btn btn-primary" name="add_departement_submit" id="add_departement_submit">Ajouter</button>
                            <input type="hidden" name="add_departement" id="add_departement" value="add_departement">
                        </div>
                        <div class="col-sm-1"></div>
                    </div>
                </form>
            </td>
        <tr>
      </tbody>
    </table>
    
    {{ include('artisan/layout/ar_pagination.html.twig') }}

    {% if page <= nb_pages %}
    <table class="table table-bordered table-condensed superadmin-listing">	
      <thead>
        <tr>
            <th class="width-5"><a href="javascript:void(0);">#</a></th>
            <th class="width-15"><a href="javascript:void(0);">Code postal</a></th>
            <th><a href="javascript:void(0);">Ville</a></th>
            <th class="width-10" colspan="2"><a href="javascript:void(0);">Actions</a></th>
        </tr>
      </thead>
      <tbody>
        {% for key, row in listing %}
        <tr id="row-{{ row.idVilleArtisan }}" class="bgc-hidden">
            <td class="center"><b>{{ (((page -1) * nb_per_page) + key + 1) }}</b></td>
            <td class="center">{{ row.cp }}</td>
            <td class="left">{{ row.ville }}</td>
            <td class="width-5 center">
                {# % if row.published == 1 %} 
                <a href="javascript:void(0);" onclick="publish({{ row.idVilleArtisan }});" class="btn btn-success">
                    <span class="glyphicon glyphicon-eye-open" aria-hidden="true" style="font-size:12px;"></span>
                </a>
                {% else %} 
                <a href="javascript:void(0);" onclick="publish({{ row.idVilleArtisan }});" class="btn btn-danger">
                    <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="font-size:12px;"></span>
                </a>
                {% endif % #} 
            </td>
            <td class="width-5 center">
                <a href="javascript:void(0);" onclick="deleteVille({{ row.idVilleArtisan }});" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true" style="font-size:12px;"></span>
                </a>
            </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {{ include('artisan/layout/ar_pagination.html.twig') }}
    {% endif %}
    
    {% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $(document).on('keyup', 'form#add_ville_form input#q', function(){
            $('form#add_ville_form input#id_ville').val('0'); 
            var q_ville = $('form#add_ville_form input#q').val();
            if (q_ville.length > 0) {
                $.ajax({
                    url : '{{ path("artisan_villes_intervention_rechercher") }}',
                    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">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;
                                ville = ville.replace(/'/g, "\\'");
                                //var departement = obj.departement;
                                //departement = departement.replace(/'/g, "\\'");

                                lines += '<div class="line_ville" onclick="selectVille(' + obj.id + ', \'' + obj.cp + '\', \'' + ville + '\');" style="background-color:rgb(' + bg + ');">';
                                lines += '<div class="detail_ville">' + obj.cp + ' - ' + obj.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_ville_form input#q').val('');
            $('form#add_ville_form input#id_ville').val('0'); 
        });
        
        $(document).on('click', 'form#add_ville_form #add_ville_submit', function(){
            if ($('form#add_ville_form input#id_ville').val() == 0) {	
                $('.fm-error').html('Veuillez choisir une ville');
                $('form#add_ville_form input#q').css({'border':'1px solid #ff0000'}).on('focus', function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('.fm-error').html('');
                });
            } else {
                $('form#add_ville_form').submit();
                return true;
            }
            return false;
        });
    });
    // ]]>
    
    function selectVille(id, cp, ville){
        $('#listing_villes_box').hide().html('');
        
        $('form#add_ville_form input#q').val(cp + ' ' + ville); 
        $('form#add_ville_form input#id_ville').val(id); 
    }
    
    function deleteVille(id){
        //alert(id);
        $.ajax({
            url : "{{ path('artisan_villes_intervention_list') }}/"+ id +"/delete",
            dataType : 'json',
            success : function(response){
                if (response.message === 'success') {
                    $('tr#row-' + id).remove();
                } else if (response.message === 'error') {
                    $('#spr-alert').html('<div class="alert alert-danger" role="alert">Erreur !</div>');
                }
            },
            error : function(e){
            }
        });
    }
    </script>
{% endblock %}