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

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

{% block body %}
    {{ render(controller('App\\Controller\\Artisan\\ArLayoutController::arServiceClient' )) }}

    {{ render(controller('App\\Controller\\Artisan\\ArLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

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

        {{ include('artisan_v2/layout/ar_alert.html.twig') }}

        <div class="alert alert-info" role="alert">
            Merci de préciser vos villes et/ou département où vous pouvez intervenir.
        </div>

        <div class="container-fluid">
            <div class="row">
                
                <table class="table table-borderless table-striped table-earning">
                    <tbody>
                        <tr>
                            <td>
                                <form class="form-horizontal" name="add_ville_form" id="add_ville_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
                                    <div class="row form-group fg-m-bottom" style="margin:6px 0!important;">
                                        <div class="col-12 col-md-4 spa-col-label fg-m-bottom">
                                            <label class="form-control-label spa-label">Intervention sur toute la France </label>
                                        </div>
                                        <div class="col-12 col-md-1">
                                            <div class="form-check">
                                                <div class="radio">
                                                    <label for="toute_la_france_oui" class="form-check-label">
                                                        <input type="radio" class="form-check-input" id="toute_la_france_oui" name="toute_la_france" value="1"{% if toute_la_france == 1 %} checked{% endif %}> Oui
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-1">
                                            <div class="form-check">
                                                <div class="radio">
                                                    <label for="toute_la_france_non" class="form-check-label">
                                                        <input type="radio" class="form-check-input" id="toute_la_france_non" name="toute_la_france" value="0"{% if toute_la_france == 0 %} checked{% endif %}> Non
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-2">
                                            <button type="submit" id="toute_la_france_submit" class="btn btn-info btn-sm btn-block">Modifier</button>
                                            <input type="hidden" id="toute_la_france_edit" name="toute_la_france_edit" value="toute_la_france_edit">
                                        </div>
                                        <div class="col-12 col-md-4"></div>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>

                {% if toute_la_france == 0 %}
                <div class="table-data__tool" style="width:100%;">
                    <div class="table-data__tool-left col-lg-6">

                        <form class="form-horizontal" name="add_ville_form" id="add_ville_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
                        <div class="row form-group fg-m-bottom" style="margin:8px 0 0!important;">
                            <div class="col col-md-3 spa-col-label fg-m-bottom">
                                <label for="s_departement" class="form-control-label spa-label">Ajouter une ville</label>
                            </div>
                            <div class="col-12 col-md-5 fg-m-bottom">
                                <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" style="width:96%;"></div>
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                <button type="button" id="add_ville_submit" class="btn btn-info btn-sm btn-block">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="offset-md-3 col-md-8 fm-error" id="error-add-ville"></div>
                        </div>
                        </form>

                    </div>
                    <div class="table-data__tool-right col-lg-6">

                        <form class="form-horizontal" name="add_departement_form" id="add_departement_form" method="post" action="{{ path('artisan_villes_intervention_list') }}">
                        <div class="row form-group fg-m-bottom" style="margin:8px 0 0!important;">
                            <div for="q" class="col col-md-4 spa-col-label fg-m-bottom">
                                <label for="departement" class="form-control-label spa-label">Ajouter un département</label>
                            </div>
                            <div class="col-12 col-md-5 fg-m-bottom">
                                <select class="form-control" name="departement" id="departement">
                                    <option value="0">Choisir</option>
                                    {% for row in list_departements %}
                                    <option value="{{ row.codeDepartement }}">{{ row.codeDepartement }} - {% if row.codeDepartement == 20 %}Corse{% else  %}{{ row.departement }}{% endif %}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                <button type="button" id="add_departement_submit" class="btn btn-info btn-sm btn-block">Ajouter</button>
                                <input type="hidden" name="add_departement" id="add_departement" value="add_departement">
                            </div>
                            <div class="offset-md-4 col-md-8 fm-error" id="error-add-departement"></div>
                        </div>
                        </form>

                    </div>
                </div>

                {{ include('artisan_v2/layout/ar_paginator.html.twig') }}

                {% if listing|length > 0 %}
                <div class="col-12 col-md-12 text-right" style="margin-bottom:10px;padding-right:0;">
                    <button type="button" id="delete_all_villes_btn" onclick="deleteAllVillesIntervention();" class="btn btn-danger btn-sm">
                        <i class="zmdi zmdi-delete"></i> Supprimer toutes les villes d'intervention
                    </button>
                </div>
                {% endif %}

                <div class="table-responsive table--no-card m-b-30">
                    {% if nb_pages >= page %}
                    <table class="table table-borderless table-striped table-earning">
                        <thead>
                            <tr>
                                <th class="width-5">#</th>
                                <th class="width-15">Code postal</th>
                                <th>Ville</th>
                                <th class="width-10">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for key,row in listing %}
                            <tr id="row-{{ row.idVilleArtisan }}" class="tr_ville_artisan_art">
                                <td class="text-center"><b>{{ (((page -1) * nb_per_page) + key + 1) }}</b></td>
                                <td class="text-center">{{ row.cp }}</td>
                                <td>{{ row.ville }}</td>
                                <td class="text-center">
                                    <div class="table-data-feature">
                                        <button class="item danger" onclick="deleteVille({{ row.idVilleArtisan }});">
                                            <i class="zmdi zmdi-delete"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>

                {% if nb_pages >= page %}{{ include('artisan_v2/layout/ar_paginator.html.twig') }}{% endif %}
                {% endif %}
            </div>

            {{ include('artisan_v2/layout/ar_footer.html.twig') }}
        </div>
    </div>
{% 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) {	
                $('#error-add-ville').html('Veuillez choisir une ville');
                $('form#add_ville_form input#q').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-add-ville').html('');
                });
            } else {
                $('form#add_ville_form').submit();
                return true;
            }
            return false;
        });
        
        $(document).on('click', 'form#add_departement_form #add_departement_submit', function(){
            if ($('form#add_departement_form select#departement').val() == 0) {	
                $('#error-add-departement').html('Veuillez choisir un département');
                $('form#add_departement_form select#departement').addClass('is-invalid').on('change', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-add-departement').html('');
                });
            } else {
                $('form#add_departement_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){
        if (confirm("Êtes-vous sûr ?")) {
            $.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){
                }
            });
        }
    }

    function deleteAllVillesIntervention(){
        if (confirm("Êtes-vous sûr ?")) {
            $.ajax({
                url : "{{ path('artisan_villes_intervention_remove_all_villes_intervention') }}",
                dataType : 'json',
                success : function(response){
                    $('tr.tr_ville_artisan_art').remove();
                },
                error : function(e){
                }
            });
        }
    }
    </script>
{% endblock %}