{% extends "layoutBack.html.twig" %}

{% block title "Gestion des congés" %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/bootstrap-datepicker.css') }}" />

    <!-- Switch Buttons  -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/switch-buttons/switch-buttons.css') }}" />

    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload.css') }}" />
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload-ui.css') }}" />
{% endblock %}
{% block body %}
<div class="warper container-fluid">

    <div class="panel panel-primary">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-7">
                        <span class="btn btn-success" id="js-add">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Ajouter un congé</span>
                        </span>
                    </div>
                </div>
            </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">Liste des congés <span id="js-type-user"></span></div>
        <div class="panel-body">
            <div class="row hide-print">

                <div class="col-md-12">

                    <div class="col-md-3 form-group">
                        <div class="input-group">
                            <label>Date début du :</label>
                            <input type="text"  class="col-sm-12 form-control datetimepicker" data-provide="datetimepicker" data-date-format="DD-MM-YYYY" id="js-beginDate" name="beginDate" placeholder="Date début du..." style="border-radius: 5px;">
                        </div>
                    </div>

                    <div class="col-md-3 form-group">
                        <div class="input-group">
                            <label>Date début au :</label>
                            <input type="text"  class="col-sm-12 form-control datetimepicker" data-provide="datetimepicker" data-date-format="DD-MM-YYYY" id="js-endDate" name="endDate" placeholder="Date début au ..." style="border-radius: 5px;">
                        </div>
                    </div>

                    <div class="col-md-3 form-group">
                        <div class="input-group">
                            <label>Utilisateur :</label>
                            <select id="js-id-user" class="form-control">
                            <option value="0">Tous</option>
                                {% if users is defined %}
                                    {% for us in users %}
                                        <option value="{{ us.id }}">{{ us.firstname }} {{ us.lastname }}</option>
                                    {% endfor %}
                                {% endif %}

                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label>Nombre des pages :</label>
                        <select id="js-perpage" class="form-control">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>

                </div>

            </div>
            <div  id="dataContainer">
                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
            </div>

            <div class="modal fade" id="js-add-holiday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
                            <h4 class="modal-title" id="myModalLabel">Ajouter un congé</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row" id="js-add-content">
                                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="js-update-holiday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modifier un congé</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row" id="js-update-content">
                                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    <!-- InputMask -->
    <script src="{{ asset('backEnd/assets/js/plugins/inputmask/jquery.inputmask.bundle.js') }}" type="text/javascript"></script>

    <!-- moment -->
    <script src="{{ asset('backEnd/assets/js/moment/moment.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backEnd/assets/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backEnd/assets/js/bootstrap-datetimepicker.js') }}" type="text/javascript"></script>


    <script>

    var holidayId = 0;
        function refreshList() {
            var dataContainer = $('#dataContainer');
            dataContainer.html('<img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">');

            var beginDate = $('#js-beginDate').val();
            var endDate = $('#js-endDate').val();
            var userId = $('#js-id-user').val();
            var npg = $('#js-perpage').val();
            npg = typeof npg !== 'undefined' ? npg : 10;
            var param = 'limit=' + npg;
            if(userId != "")
            {
                param+= "&userId="+encodeURIComponent(userId);
            }
            if(beginDate != "")
            {
                param+= "&beginDate="+encodeURIComponent(beginDate);
            }
            if(endDate != "")
            {
                param+= "&endDate="+encodeURIComponent(endDate);
            }
            $.ajax({
                url: "{{  path('admin_list_holidays_ajax')}}",
                type: "GET",
                data : param,
                dataType: "html",
                success: function (data) {
                    dataContainer.html(data);
                    $('.datetimepicker').datetimepicker({
                        format: "DD-MM-YYYY HH:mm"
                    });
                    $('#dataTableHoliday').DataTable(
                            settingsDataTable()
                    );
                }
            });
        }


        function formHoliday() {
            $.ajax({
                url: "{{  path('admin_add_holiday_ajax')}}",
                type: "POST",
                dataType: "html",
                success: function (data) {
                    $('#js-add-content').html(data);
                    $('.datetimepicker').datetimepicker({
                        format: "DD-MM-YYYY HH:mm"
                    });
                    $('.chosen-select').select2({allowClear: true});

                }
            });
        }
        function updateHoliday(id) {
            holidayId = id;
            $.ajax({
                url: Routing.generate('admin_update_holiday_ajax', { id: id }),
                type: "POST",
                dataType: "html",
                success: function (data) {
                    $('#js-update-content').html(data);
                    $('.datetimepicker').datetimepicker({
                        format: "DD-MM-YYYY HH:mm"
                    });
                    $('.chosen-select').select2({allowClear: true});
                    $('#js-update-holiday').modal('show');
                }
            });
        }

        function removeHoliday(id){
            bootbox.confirm({
                title: "Suppression période de congé",
                message: "Voulez vous Supprimer cette période de congé ? Cette action ne peut pas être annulée.",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Annuler'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirmer'
                    }
                },
                callback: function (result) {
                    if (result)
                    {
                        $.post(Routing.generate('admin_remove_holiday', { id: id }),
                                function(response){
                                    if(response.code == 200 && response.success){
                                        refreshList();
                                        toastr.success('Période de congé supprimée avec succès');
                                    }else{
                                        bootbox.alert("problème de mise à jour");
                                    }

                                }, "json");
                    }
                }
            });
        }


        $(function(){

            $('.datetimepicker').datetimepicker({
                format: "DD-MM-YYYY HH:mm"
            });

            refreshList();
            $('#dataContainer').on('click', "ul.pagination a" , function(e){
                var url = $(this).attr('href');
                $.ajax({
                    type: "GET",
                    url: url
                })
                    .done(function( msg ) {
                        $('#dataContainer').html(msg);
                        $('#dataTableHoliday').DataTable(
                                settingsDataTable()
                        );
                    });
                e.preventDefault();
            });
            $('#js-perpage').change(function(e){
                refreshList();
            });

            $('#js-id-user').change(function(e){
                refreshList();
            });

            $('#js-beginDate').change(function(e){
                refreshList();
            });

            $('#js-endDate').change(function(e){
                refreshList();
            });


            $('#js-add').click(function(e){
                formHoliday();
                $('#js-add-holiday').modal('show');
                $('.chosen-select').select2({allowClear: true});
            })
            $('#js-add-holiday').on('submit', "form[name=dev_freelancebundle_holidays]", function (e) {
                e.preventDefault();
                $('#js-add-holiday').modal('hide');
                var dialog = bootbox.dialog({
                    message: '<p class="text-center">En cours...</p><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% Complete</span> </div> </div>',
                    closeButton: false
                });
                $.ajax({
                    type: "POST",
                    url: "{{  path('admin_add_holiday_ajax')}}",
                    data: new FormData($(this)[0]),
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        dialog.modal('hide');
                        if(data == "success")
                        {
                            toastr.success('Congé ajouté avec succès');
                            refreshList();
                        }else {
                            $('#js-add-content').html(data);
                            $('.datetimepicker').datetimepicker({
                                format: "DD-MM-YYYY HH:mm"
                            });
                            $('#js-add-holiday').modal('show');
                        }
                    }
                });
            });

            $('#js-update-holiday').on('submit', "form[name=dev_freelancebundle_holidays]", function (e) {
                e.preventDefault();
                $('#js-update-holiday').modal('hide');
                var dialog = bootbox.dialog({
                    message: '<p class="text-center">En cours...</p><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% Complete</span> </div> </div>',
                    closeButton: false
                });
                $.ajax({
                    type: "POST",
                    url: Routing.generate('admin_update_holiday_ajax', { id: holidayId }),
                    data: new FormData($(this)[0]),
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        dialog.modal('hide');
                        if(data == "success")
                        {
                            toastr.success('Congé modifié avec succès');
                            refreshList();
                        }else {
                            $('#js-update-content').html(data);
                            $('.datetimepicker').datetimepicker({
                                format: "DD-MM-YYYY HH:mm"
                            });
                            $('#js-update-holiday').modal('show');
                        }
                    }
                });
            });

        });
    </script>
{% endblock %}