{% 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/filtroPeriodoLista.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>NOMBRES/APELLIDOS</th>
                    <th>FECHA</th>
                    <th>DIA SEMANA</th>
                    <th>HORARIO ENTRADA</th>
                    <th>HORARIO SALIDA</th>
                    <th>ASISTENCIA</th>
                    <th>PERMISO/JUSTIFICACION</th>
                    {#<th>HRS. PERMISO</th>#}
                </tr>
                </thead>
        </table>
    </div>

    <script>

        $(document).ready(function() {
            drawLista();

            function drawTable(start,end) {
                var startDate = $('#reservationtime').data('daterangepicker').startDate.format('YYYY-MM-DD');
                var endDate = $('#reservationtime').data('daterangepicker').endDate.format('YYYY-MM-DD');
                var personid = document.getElementById("personid").value;

                var xmlExport = function () {
                    var data = oTable.rows().data().toArray();
                    var nomuser = document.getElementById("nomuser").innerHTML;
                    var puesto = document.getElementById("puesto").value;
                    var rut = document.getElementById("rut").value;
                    var email = document.getElementById("email").value;
                    var sucursal = document.getElementById("sucursal").value;
                    var depto = document.getElementById("depto").value;
                    var filename = "Reporte de Asistencia.xml";

                    $.ajax({
                        url: '{{ url("downXML") }}',
                        type: "POST",
                        data: {
                            data: data,
                            nomuser : nomuser,
                            puesto : puesto,
                            rut : rut,
                            email : email,
                            sucursal : sucursal,
                            depto : depto
                        },
                        success: function (data) {
                            var element = document.createElement('a');
                            element.setAttribute('href', 'data:text/xml;charset=utf-8,' + encodeURIComponent(data));
                            element.setAttribute('download', filename);

                            element.style.display = 'none';
                            document.body.appendChild(element);

                            element.click();

                            document.body.removeChild(element);                        }
                    });

                };


                var oTable = $('#hojaasist').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: false,
                    dom: 'Bt',
                    buttons: [
                        {
                            text: 'XML',
                            action: xmlExport,
                        },

                        {
                            text: 'Exportar PDF',
                            extend: 'pdfHtml5',
                            filename: 'Reporte de Asistencia',
                            orientation: 'portrait', //portrait
                            pageSize: 'legal', //A3 , A5 , A6 , legal , letter
                            exportOptions: {
                                columns: ':visible',
                                search: 'applied',
                                order: 'applied'
                            },
                            customize: function (doc, page, pages) {
                                var nomuser = document.getElementById("nomuser").innerHTML;
                                var puesto = document.getElementById("puesto").value;
                                var rut = document.getElementById("rut").value;
                                var email = document.getElementById("email").value;
                                var sucursal = document.getElementById("sucursal").value;
                                var depto = document.getElementById("depto").value;

                                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: 'Reporte de Asistencia',
                                            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: '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: 'Reporte_Asistencia_' + 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("supmarcajeTable") }}',
                        type: "POST",
                        data: {
                            startdate: start,
                            enddate: end,
                            personid: personid

                        },
                    }),
                    scrollY: 500,
                    scrollX: true,
                    scroller: true,
                    scrollCollapse: true,
                });
            }
            function drawLista() {
                var personid = document.getElementById("personid").value;
                $('#listaemp tfoot th').each( function () {
                    var title = $(this).text();
                    $(this).html( '<input type="text" placeholder="Buscar por '+title+'" />' );
                } );
                var lTable = $('#listaemp').DataTable({
                    dom: 'Btr',
                    select: true,
                    scrollY: 300,
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    processing: 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": "Cargando Lista de Empleados",
                        "paginate": {
                            "first": "Primera",
                            "last": "Ultima",
                            "next": "Siguiente",
                            "previous": "Anterior"
                        }
                    },
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            filename: 'Listado_de_Trabajadores_' + moment().format('YYYYMMDD'),
                            exportOptions: {
                                modifier: {
                                    search: 'applied',
                                    order: 'applied',
                                    columns: 'all',
                                }
                            },
                            autoFilter: true,
                        },

                        {
                            text: 'Seleccionar', className: 'btn btn-success',
                            action: function ( e, dt, node, config ) {
                                var idx = lTable.cell('.selected', 0).index();
                                var data = lTable.row( idx.row ).data();
                                document.getElementById("nomuser").innerHTML = data[2];
                                document.getElementById("personid").value = data[3];
                                document.getElementById("puesto").value = data[4];
                                document.getElementById("sucursal").value = data[5];
                                document.getElementById("depto").value = data[6];
                                document.getElementById("rut").value = data[1];
                                document.getElementById("btnColap").click();
                            }
                        }
                    ],
                    contentType: "application/json",
                    destroy: true,
                    order: [1, 'asc'],
                    ajax: ({
                        url: '{{ url("trabajadorList") }}',
                        type: "POST",
                        data: {
                            personid: personid
                        },
                    }),
                    columnDefs: [
                        {
                            targets: [3,4,6,7],
                            visible: false
                        },
                        { width: 300, targets: [2,5] },
                        { width: 100, targets: [0,1] },
                        { width: 0, targets: [3,4,6,7] }


                    ],
                    initComplete: function () {
                        // Apply the search
                        this.api().columns().every( function () {
                            var that = this;

                            $( 'input', this.footer() ).on( 'keyup change clear', function () {
                                if ( that.search() !== this.value ) {
                                    that
                                            .search( this.value )
                                            .draw();
                                }
                            } );
                        } );
                    }
                });
                $('#listaemp tbody').on( 'click', 'tr', function () {
                    var idx = lTable.cell('.selected', 0).index();
                    var data = lTable.row( idx.row ).data();
                    document.getElementById("nomuser").innerHTML = data[2];
                    document.getElementById("personid").value = data[3];
                    document.getElementById("puesto").value = data[4];
                    document.getElementById("sucursal").value = data[5];
                    document.getElementById("depto").value = data[6];
                    document.getElementById("rut").value = data[1];
                    document.getElementById("btnColap").click();

                    if ( $(this).hasClass('selected') ) {
                        $(this).removeClass('selected');
                    }
                    else {
                        lTable.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                } );
            }


            $('#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%}