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

{% block title %}Services - {{ 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;font-weight:bold;">Merci de cocher les services que vous proposez, puis validez. Vous pourrez à tout moment mettre à jour ces services</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="services_form" name="services_form" method="post" action="{{ path('artisan_services') }}">
        <div class="row">
            <div class="col-sm-4">
                {% for key,val in nos_services %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label for="form_{{ key }}">
                                <input type="checkbox" id="form_{{ key }}" name="form[{{ key }}]" value="{{ key }}"{% if key in services %} checked{% endif %}> {{ val }}
                            </label>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="col-sm-4">
                {% for key,val in nos_depannages %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label for="form_{{ key }}">
                                <input type="checkbox" id="form_{{ key }}" name="form[{{ key }}]" value="{{ key }}"{% if key in services %} checked{% endif %}> {{ val }}
                            </label>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="col-sm-4">
                {% for key,val in nos_traitements %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label for="form_{{ key }}">
                                <input type="checkbox" id="form_{{ key }}" name="form[{{ key }}]" value="{{ key }}"{% if key in services %} checked{% endif %}> {{ val }}
                            </label>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="form-group" style="margin-top:45px;">
            <div class="col-sm-offset-4 col-sm-3">
                <button type="button" class="btn btn-primary btn-block" id="services_edit_submit">Valider</button>
            </div><div class="col-sm-5"></div>
        </div>
    </form>

    <div class="alert alert-info" role="alert" style="margin-top:30px;text-align:center;font-weight:bold;">Vous proposez des services que vous n'avez pas trouvé dans la liste, merci de les renseigner dans le champ suivant :</div>
    
    <div class="form-group fg-m-bottom">
        <div class="col-sm-offset-3 col-sm-3">
            <input type="text" class="form-control" name="suggestion_service_field" id="suggestion_service_field" placeholder="Suggestion de Service" value="">
        </div>
        <div class="col-sm-2">
            <button type="button" class="btn btn-primary btn-block" id="suggestion_service_submit"><i class="fa fa-send fawesome"></i> Envoyer</button>
        </div><div class="col-sm-4"></div>
        <div style="clear:both;"></div>
        <div class="col-sm-offset-4 col-sm-8 fm-error" id="suggestion_service-error" style="text-align:left;"></div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $(document).on('click', '#services_edit_submit', function(){
            $('form#services_form').submit();
        });

        $(document).on('click', '#suggestion_service_submit', function(){
            if ($('input#suggestion_service_field').val().length == 0) {
                $('#suggestion_service-error').html('Veuillez insérer votre suggestion de service !');
                $('input#suggestion_service_field').css({'border':'1px solid #ff0000'}).on('focus', function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('#suggestion_service-error').html('');
                });
            } else {
                var suggestion = $('input#suggestion_service_field').val();
                $.ajax({
                    url : '{{ path("artisan_suggestion_service") }}',
                    type : 'POST',
                    data : {suggestion:suggestion},
                    dataType : 'json',
                    success : function(response){
                        if (response.result) {
                            $('input#suggestion_service_field').val('');
                            $('#suggestion_service-error').html('<span style="color:green;">Votre suggestion a été envoyée avec succès.</span>');
                        } else {
                            $('#suggestion_service-error').html('Erreur !');
                        }
                    },
                    error : function(e){
                    }
                });
            }
        });
    });
    // ]]>
    </script>
{% endblock %}