{% extends 'base.html.twig' %}
{% block subreport_title %}| Ideal{% endblock %}


{% block page_content %}
    <style>
        th { font-size: 12px; }
        td { font-size: 12px; }
        th { font-size: 12px; }
        td { font-size: 12px; }
        .table-cell-edit{
            background-color: #e9f0f3;
            text-align: center;
        }
        .table-cell-edit1{
            background-color: #ecf3e9;
            text-align: center;

        }
        .box .box-header {
            padding: 10px !important;
        }
        div.dataTables_wrapper {
            /*width: 800px;*/
            margin: 0 auto;
        }

    </style>

    {% include 'Filtros/filtroPeriodo.html.twig' %}

    <div class="clearfix"></div>
    <div class="box-header with-border">

        <div class="col-lg-12">
            <div class="form-horizontal pull-right">
                <div class="input-group">
                    <label for="reservationtime" class="col-md-3 control-label">Intervalo de Fechas</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control pull-right" id="reservationtime">
                    </div>
                    <div class="col-xs-3">
                        <button class="btn btn-success btn-xs" type="button" id="aplicar" >VER</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

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

        <table id="hojaasist" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Codigo</th>
                    <th>Descripcion</th>
                    <th>Cantidad</th>
                    <th>Unidad</th>
                </tr>
                </thead>
        </table>
    </div>

    <script>

        $(document).ready(function() {
            $("[data-toogle='tooltip']").tooltip({"delay": 0, "track": true, "fade": 250});

            var startDate = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var endDate = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');

            var nomuser = document.getElementById("nomuser").innerHTML;
            var puesto = document.getElementById("cargo").innerHTML;
            var rut = document.getElementById("rut").innerHTML;
            var email = document.getElementById("email").innerHTML;
            var sucursal = document.getElementById("sucursal").innerHTML;
            var depto = document.getElementById("depto").innerHTML;

            drawTable(startDate,endDate);


            function drawTable(start,end) {

                var oTable = $('#hojaasist').DataTable({
                    processing: true,
                    serverSide: true,
                    dom: 'Bt',
                    buttons: [
                        {
                            text: 'Exportar PDF',
                            extend: 'pdfHtml5',
                            filename: 'Conceptos de Pago',
                            orientation: 'letter', //portrait
                            pageSize: 'legal', //A3 , A5 , A6 , legal , letter
                            exportOptions: {
                                columns: ':visible',
                                search: 'applied',
                                order: 'applied'
                            },
                            customize: function (doc, page, pages) {
                                var colHead = [];
                                var now = new Date();
                                var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();
                                {% include 'js/logo_ideal.js' %}
                                var elements = document.getElementsByClassName("total");
                                headDefinition = {
                                    columns: [
                                        {
                                            image: logo,
                                            width: 60,
                                            margin: [35,10]

                                        },
                                        {
                                            alignment: 'center',
                                            italics: true,
                                            text: 'Conceptos de Pago',
                                            fontSize: 18,
                                            margin: [35,10]

                                        },
                                        {
                                            stack: [
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: nomuser,
                                                    fontSize: 10,
                                                    margin: [35,15]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: sucursal,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: depto,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },

                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: puesto,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: rut,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: email,
                                                    fontSize: 8,
                                                    margin: [35,20]
                                                }

                                            ]
                                        }
                                    ]};
                                doc['header']= headDefinition;

                                doc.content.splice(0, 1);
                                doc.pageMargins = [35,85];

                                doc.defaultStyle.fontSize = 9;
                                doc.styles.tableHeader.fontSize = 10;
                                doc.styles.tableHeader.headerRows = 2;
                                doc.styles.subheader = { fonsize: 10};

                                doc['footer'] = (function (page, pages) {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: ['Creado el: ', {text: jsDate.toString()}]
                                            },
//                                        {
//                                            alignment: 'center',
//                                            text: 'Firma Jefe: ___________________________________',
//
//                                        },
//                                        {
//                                            alignment: 'center',
//                                            text: 'Firma Empleado: ___________________________________'
//                                        },

                                            {
                                                alignment: 'right',
                                                text: ['Pag. ', {text: page.toString()}, ' de ', {text: pages.toString()}]
                                            }
                                        ],
                                        margin: 40
                                    }
                                });
                                var objLayout = {};
                                objLayout['hLineWidth'] = function (i) {
                                    return .5;
                                };
                                objLayout['vLineWidth'] = function (i) {
                                    return .5;
                                };
                                objLayout['hLineColor'] = function (i) {
                                    return '#aaa';
                                };
                                objLayout['vLineColor'] = function (i) {
                                    return '#aaa';
                                };
                                objLayout['paddingLeft'] = function (i) {
                                    return 4;
                                };
                                objLayout['paddingRight'] = function (i) {
                                    return 4;
                                };
                                doc.content[0].layout = objLayout;
                            }
                        },

                        {
                            extend: 'excelHtml5',
                            filename: 'Conceptos Pago_' + moment().format('YYYYMMDD'),
                            exportOptions: {
                                modifier: {
                                    search: 'applied',
                                    order: 'applied',
                                    columns: ':visible',
                                }
                            },
                            autoFilter: true,
                        },
                    ],
                    language: {
                        "lengthMenu": "Ver _MENU_ Registros",
                        "zeroRecords": "No se encontraron datos",
                        "info": "Mostrando pagina: _PAGE_ de _PAGES_",
                        "infoEmpty": "Ningun registro disponible",
                        "infoFiltered": "(filtrado de _MAX_ registros totales)",
                        "search": "Buscar",
                        "processing": "Procesando",//"<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span>",
                        "paginate": {
                            "first": "Primera",
                            "last": "Ultima",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                    contentType: "application/json",
                    destroy: true,
                    order: [1, 'asc'],
                    ajax: ({
                        url: '{{ url("conceptosTable") }}',
                        type: "POST",
                        data: {
                            startdate: start,
                            enddate: end
                        },
                    }),
                    scrollY: 500,
                    scrollX: true,
                    scroller: true,
                    scrollCollapse: true,
                });
            }

            $('#aplicar').on('click', function () {

                var startDate = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var endDate = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');
                drawTable(startDate,endDate);

            });

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