{# templates/superadmin/villes/sa_villes_list.html.twig #}
{% extends 'superadmin/superadmin.html.twig' %}

{% block title %}Artisans - {{ parent() }}{% endblock %}

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

    {{ include('superadmin/layout/sa_actions.html.twig') }}
    
    {{ include('superadmin/layout/sa_debug.html.twig') }}

    {{ include('superadmin/layout/sa_alert.html.twig') }}
    
    <table style="margin:1%;padding:0;width:98%;text-align:center;" class="table-striped table-condensed">	
      <tbody>
        <tr style="background-color:#eeeeee;border:0px solid #eeeeee;">
            <td style="text-align:left;padding-left:0px;color:#303030;width:45%;border-right:2px solid #ffffff;">
                <form class="form-horizontal" name="s_departement_form" id="s_departement_form" method="get" action="">
                    <div class="form-group" style="padding-top:5px;margin-bottom:5px;">
                        <label for="s_departement" class="col-sm-4 control-label right">Département</label>
                        <div class="col-sm-6 right" style="padding-left:0;padding-right:0;margin-left:0;margin-right:0;">
                            <select id="s_departement" onchange="window.location.href='{{ path('superadmin_villes_list') }}{{ getLinkFilter('departement') }}' + $(this).val();" class="form-control" style="margin-top:1px;">
                                <option value="all">Tous</option>
                                {% for row in list_departements %}
                                <option value="{{ row.codeDepartement }}"{% if departement is defined and departement is not empty and departement == row.codeDepartement %} selected{% endif %}>{{ row.codeDepartement }} - {{ row.departement }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-2"></div>
                    </div>
                </form>
            </td>
            <td style="text-align:left;padding-left:0px;color:#303030;">
                <form class="form-horizontal" name="recherche_ville_form" id="recherche_ville_form" method="post" action="{{ path('superadmin_villes_list') }}">
                    <div class="form-group" style="padding-top:5px;margin-bottom:5px;">
                        <label for="q" class="col-sm-3 control-label right">Recherche</label>
                        <div class="col-sm-5 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="{% if q is not empty %}{{ q }}{% endif %}" autocomplete="off">
                        </div>
                        <div class="col-sm-2 left">
                            <button type="button" class="btn btn-primary" name="recherche_ville_submit" id="recherche_ville_submit">Rechercher</button>
                        </div>
                        <div class="col-sm-2">
                          {% if remote_addr == mon_ip %}
                            <button type="button" class="btn btn-success" id="add_ville" data-toggle="modal" data-target="#villes_modal"><i class="fa fa-plus fawesome" aria-hidden="true"></i> Ajouter</button>
                          {% endif %}
                        </div>
                    </div>
                </form>
            </td>
        <tr>
      </tbody>
    </table>
  
    {% if link_google %}
    <table style="margin:1%;padding:0;width:98%;text-align:center;" class="table-striped table-condensed">	
      <tbody>
        <tr style="background-color:#eeeeee;line-height:32px;">
            <td style="text-align:left;padding-left:10px;color:#303030;"><a target="_blank" href="{{ link_google }}">{{ link_google }}</a></td>
        <tr>
      </tbody>
    </table>
    {% endif %}
    
    {{ include('superadmin/layout/sa_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);">ID</a></th>
            <th class="width-25"><a href="javascript:void(0);">Ville</a></th>
            <th class="width-10"><a href="javascript:void(0);">Code postal</a></th>
            <th class="width-20"><a href="javascript:void(0);">Département</a></th>
            <th class="width-10"><a href="javascript:void(0);">Code département</a></th>
            <th class="width-15"><a href="javascript:void(0);">Nbr habitants</a></th>
            <th class="width-10"><a href="javascript:void(0);">Actions</a></th>
        </tr>
      </thead>
      <tbody>
        {% for k,row in listing %}
        <tr id="row-{{ row.id }}" class="bgc-{% if k is odd %}ddd{% else %}eee{% endif %}">
            <td class="center">{{ row.id }}</td>
            <td class="left">{{ row.ville }}</td>
            <td class="center">{{ row.cp }}</td>
            <td class="left">{{ row.departement }}</td>
            <td class="center">{{ row.codeDepartement }}</td>
            <td class="left">{{ row.nbrHabitants }}</td>
            <td class="center">
                {% if remote_addr == mon_ip %}
                <div id="pencil_{{ row.id }}" style="float:left;padding-right:8px;">  
                    <a title="Modifier" href="javascript:void(0);" class="btn btn-primary" onclick="editVilleForm({{ row.id }});" data-toggle="modal" data-target="#villes_modal">
                        <i class="fa fa-pencil" aria-hidden="true" style="font-size:12px;"></i>
                    </a>
                </div>  
                
                <a title="Supprimer" href="javascript:void(0);" onclick="remove({{ row.id }});" class="btn btn-danger">
                    <i class="fa fa-trash" aria-hidden="true" style="font-size:12px;"></i>
                </a>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {{ include('superadmin/layout/sa_pagination.html.twig') }}
    {% endif %}
    <div class="modal fade" id="villes_modal"></div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $('form#add_ville_form input#ville').focus();
        
        $(document).on('click', 'form#recherche_ville_form #recherche_ville_submit', function(){
            if ($('form#recherche_ville_form input#q').val().length > 1) {	
                $('form#recherche_ville_form').submit();
                return true;
            }
            return false;
        });

        $(document).on('click', '#add_ville', function(){
            $('#villes_modal').html('<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body"></div></div></div>');
            var q = '{{ q }}';
            $.ajax({
                url : "{{ path('superadmin_villes_add_form') }}",
                type : 'POST',
                data : {q:q},
                dataType : 'json',
                success : function(response){
                    if (response.code == 200) {
                        $('#villes_modal').html(response.html);
                        $('form#add_ville_form input#ville').focus();
                    }
                },
                error : function(e){
                }
            });
        });
        
        $(document).on('click', 'form#add_ville_form #add_ville_submit', function(){
            var ckeck = 0;
            
            if ($('form#add_ville_form input#ville').val().length == 0) {	
                ckeck += 1;
                $('form#add_ville_form input#ville').css({'border':'1px solid #ff0000'});
                $('div#ville-error').html("Veuillez saisir la ville");
                $('form#add_ville_form input#ville').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#ville-error').html('');
                });            
            }
            
            if ($('form#add_ville_form input#cp').val().length != 5) {	
                ckeck += 1;
                $('form#add_ville_form input#cp').css({'border':'1px solid #ff0000'});
                $('div#cp-error').html("Veuillez saisir le codepostal");
                $('form#add_ville_form input#cp').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#cp-error').html('');
                });            
            }
            
            if ($('form#add_ville_form select#departement').val() == 0) {	
                ckeck += 1;
                $('form#add_ville_form select#departement').css({'border':'1px solid #ff0000'});
                $('div#departement-error').html("Veuillez choisir un département");
                $('form#add_ville_form select#departement').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#departement-error').html('');
                });            
            }
            
            if (ckeck == 0) {
                $('form#add_ville_form').submit();
                return true;
            } else {
                return false;
            }
        });
        
        $(document).on('click', 'form#edit_ville_form #edit_ville_submit', function(){
            var ckeck = 0;
            
            if ($('form#edit_ville_form input#ville').val().length == 0) {	
                ckeck += 1;
                $('form#edit_ville_form input#ville').css({'border':'1px solid #ff0000'});
                $('div#ville-error').html("Veuillez saisir la ville");
                $('form#edit_ville_form input#ville').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#ville-error').html('');
                });            
            }
            
            if ($('form#edit_ville_form input#cp').val().length != 5) {	
                ckeck += 1;
                $('form#edit_ville_form input#cp').css({'border':'1px solid #ff0000'});
                $('div#cp-error').html("Veuillez saisir le codepostal");
                $('form#edit_ville_form input#cp').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#cp-error').html('');
                });            
            }
            
            if ($('form#edit_ville_form select#departement').val() == 0) {	
                ckeck += 1;
                $('form#edit_ville_form select#departement').css({'border':'1px solid #ff0000'});
                $('div#departement-error').html("Veuillez choisir un département");
                $('form#edit_ville_form select#departement').focus(function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('div#departement-error').html('');
                });            
            }
            
            if (ckeck == 0) {
                $('form#edit_ville_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>

    function editVilleForm(id){
        $('#villes_modal').html('<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body"></div></div></div>');
        $.ajax({
            url : "{{ path('superadmin_villes_list') }}/"+ id +"/edit-form",
            dataType : 'json',
            success : function(response){
                if (response.code == 200) {
                    $('#villes_modal').html(response.html);
                }
            },
            error : function(e){
            }
        });
    }
    
    function remove(id){
        if (confirm("Êtes-vous sûr ?")) {
            $.ajax({
                url : "{{ path('superadmin_villes_list') }}/"+ id +"/supprimer",
                dataType : 'json',
                success : function(response){
                    if (response.message === 'success') {
                        $('tr#row-' + id).remove();
                    }
                },
                error : function(e){
                }
            });
        }
    }
    </script>
{% endblock %}