{% extends "ChakaProblemesBundle:Problemes:layout.html.twig" %}
{% block title %}{{ parent() }}{% endblock %}
{% block pagetitle %}Problèmes posés{% endblock %}
{% block breadcrumb %}
    {{ parent() }}
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-9">
                            <h3 class="panel-title">Ajouter / modifier un probleme posé</h3>
                        </div>
                        <div class="col-md-3">
                            <a href="#" class="clearForm btn btn-warning btn-xs pull-right">
                                <span class="glyphicon glyphicon-trash"></span> Vider
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-body" id="panel-form">
                    <div id="form-content">
                        {% include "ChakaProblemesBundle:Problemes:form_pbm.html.twig" %}
                    </div>
                    <div class="clear clearfix"></div>
                    <div id="formResponse" class="alert alert-dismissable alert-success">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div id="delResponse" class="alert alert-dismissable alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <p></p>
            </div>
            <div  id="tabListPbm">
                {% include "ChakaProblemesBundle:Problemes:tab_list_pbm.html.twig" %}
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_js %}
    <script>
        $(function(){
            $(document.body).on('click','.del',function(){
                var confirmation = confirm("Voulez vous vraiment supprimer le probleme posé ?");
                if(confirmation == false){
                    return false;
                }else{
                    return true;
                }
            });
        });
    </script>
    <script type="text/javascript">
        function effacer (form) {
            $(':input',form)
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            $(':input[name="id"]',form)
                    .val('0');
        }


        //soumission formulaire
        $('#formResponse').hide();
        $(document.body).on("submit","#form-pbm",function () {
            $('#btn-save').html('<img src={{ asset("img/preloader_small.GIF") }}> Patienter ...');
            var urlSubmit = $(this).attr('action');
            //alert(urlSubmit);

            $.ajax({
                type: "POST",
                url: urlSubmit,
                data: $(this).serialize(),
                success: function (data) {
                    $('#btn-save').html('<span class="glyphicon glyphicon-save"></span> Enregistrer');
                    $('#formResponse p').html(data);
                    $(document.body).find('#formResponse').show('slow');
                    effacer('#form-pbm');

                    //Chargement contenu du formulaire
                    var src = '{{ path("chaka_problemes_form") }}';
                    $( "#panel-form #form-content" ).load(src, function( response, status, xhr ) {
                        if ( status == "success" ) {
                            $(this).html(response);
                        }
                        else if ( status == "error" ) {
                            alert( xhr.status + " " + xhr.statusText );
                        }
                    });


                    //Chargement du tableau
                    var src = '{{ path("chaka_problemes_list") }}';
                    $( "#tabListPbm" ).load(src, function( response, status, xhr ) {
                        if ( status == "success" ) {
                            $(this).html(response);
                        }
                        else if ( status == "error" ) {
                            alert( xhr.status + " " + xhr.statusText );
                            $('#btn-save').html('<span class="glyphicon glyphicon-save"></span> Enregistrer');
                            $('#formResponse p').html( xhr.status + " " + xhr.statusText );
                            $('#formResponse').removeClass('alert-success').addClass('alert-danger').show('fast');
                        }
                    });


                },
                error: function (event, xhr, ajaxOptions, thrownError) {
                    $('#btn-save').html('<span class="glyphicon glyphicon-save"></span> Enregistrer');
                }
            });
            return false;
        });


        $(document.body).on('click','a.update', function (e) {
            var link = $(this);
            var src = $(this).attr('href');
            $(this).html('<img src={{ asset("img/preloader_small.GIF") }} style="width:95%">');
            $( "#panel-form #form-content" ).load(src, function( response, status, xhr ) {
                if ( status == "success" ) {
                    $(this).html(response);
                    link.html('<span class="glyphicon glyphicon-pencil"></span>');
                }
                else if ( status == "error" ) {
                    alert( xhr.status + " " + xhr.statusText );
                }
            });
            return false;
        });

        $('#delResponse').hide();
        $(document.body).on('click','a.remove', function (e) {
            var link = $(this);
            var src = $(this).attr('href');
            $(this).html('<img src={{ asset("img/preloader_small.GIF") }} style="width:100%">');
            $.ajax({
                type: "GET",
                url: src,
                data: $(this).serialize(),
                success: function (data) {
                    $('#delResponse p').html(data);
                    //Chargement du tableau
                    var src = '{{ path("chaka_problemes_list") }}';
                    $( "#tabListPbm" ).load(src, function( response, status, xhr ) {
                        if ( status == "success" ) {
                            $(this).html(response);
                            $('#delResponse').show('fast');
                        }
                        else if ( status == "error" ) {
                            alert( xhr.status + " " + xhr.statusText );
                        }
                    });
                },
                error: function (event, xhr, ajaxOptions, thrownError) {
                    link.html('<span class="glyphicon glyphicon-trash"></span>');
                }
            });
            return false;
        });


        $('.clearForm').click(function () {
            effacer('#form-pbm');
            return false;
        });
    </script>
{% endblock %}