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


{% block page_content %}
    <style>
        th { font-size: 10px; }
        td { font-size: 10px; }
        .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 {
            margin: 0 auto;
        }
        #events {
            margin-bottom: 1em;
            padding: 1em;
            background-color: #f6f6f6;
            border: 1px solid #999;
            border-radius: 3px;
            height: 10px;
            overflow: 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="selectednom" class="col-md-3 control-label"></label>#}
                    {#<div class="col-md-3">#}
                        {#<input type="text" class="form-control pull-left" id="selectednom">#}
                    {#</div>>#}
                    <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  order-column" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th rowspan="2">DIA</th>
                <th></th>
                <th colspan="2" class="table-cell-edit">Horario</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th colspan="3" class="table-cell-edit1">Tiempo Extra Aprobado</th>
                <th colspan="3" class="table-cell-edit">Bonificaciones</th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>FECHA</th>
                <th class="table-cell-edit">H.Ent</th>
                <th class="table-cell-edit">H.Sal</th>
                <th>Entra</th>
                <th>Sale</th>
                <th>Sal. Colacion</th>
                <th>Ent. Colacion</th>
                <th>T. Asignado</th>
                <th>T. Trabajado</th>
                <th>T. Asistencia Jornada</th>
                <th class="table-cell-edit1">TE-50</th>
                <th class="table-cell-edit1">TE-100</th>
                <th class="table-cell-edit1">TE-250</th>
                <th class="table-cell-edit">Prima Dom.</th>
                <th class="table-cell-edit">Bono Rem.</th>
                <th class="table-cell-edit">7a Noche</th>
                <th>Festivo</th>
                <th>Permisos</th>
                {#<th>D. Trab.</th>#}
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
    <div>
        <input type="hidden" id="personid" value="">
        <input type="hidden" id="puesto">
        {#<input type="hidden" id="rut">#}
        <input type="hidden" id="email">
        <input type="hidden" id="sucursal">
        <input type="hidden" id="depto">
    </div>

    <script>
        $(document).ready(function() {
            drawLista();

            function drawTable() {
                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 Jornada.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);                        }
                    });

                };


                function secondsToTime(seconds) {
                    const arr = new Date(seconds * 1000).toISOString().substr(11, 5).split(':');

                    const days = Math.floor(seconds / 86400);
                    arr[0] = parseInt(arr[0], 10) + days * 24;

                    return arr.join(':');
                }
                {#function pdfAction(start,end) {#}
                    {#{% include 'js/asistenciaPDF.js' %}#}
                    {#{% include 'js/logo_ideal.js' %}#}

                    {#$.ajax ({#}
                        {#url: '{{ url("asistenciaTable") }}',#}
                        {#type: "POST",#}
                        {#dataType: 'json',#}
                        {#data: {#}
                            {#startdate: startDate,#}
                            {#enddate: endDate,#}
                            {#personid: personid#}
                        {#},#}
                        {#success: function( result ) {#}
                            {#{% include 'js/test.js' %}#}
                            {#pdfMake.createPdf(dd).download();#}
                        {#},#}
                    {#});#}
                {#}#}

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

                        {
                            text: 'Exportar PDF',
                            extend: 'pdfHtml5',
                            filename: 'Reporte Jornada',
                            orientation: 'landscape', //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");
                                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 personid = document.getElementById("personid").value;

                                headDefinition = {
                                    columns: [
                                        {
                                            image: logo,
                                            width: 60,
                                            margin: [35,10]

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

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

                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: 'CARGO: ' + puesto,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: 'RUT: ' + rut,
                                                    fontSize: 8,
                                                    margin: [35,0]
                                                },
                                                {
                                                    alignment: 'left',
                                                    italics: true,
                                                    text: 'EMAIL' + 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: 'Hoja_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("supasistTable") }}',
                        type: "POST",
                        data: {
                            startdate: startDate,
                            enddate: endDate,
                            personid: personid

                        },
                    }),
                    scrollY: 500,
                    scrollX: true,
                    scroller: true,
                    scrollCollapse: true,
                    columnDefs: [
                        {className: "table-cell-edit1", "targets": [11, 12, 13], width: 40},
                        {className: "table-cell-edit", "targets": [2, 3, 14, 15, 16]},
                        {targets: [19,20,21], visible: false},
                        {
                            targets: [8, 9, 10,11,12,13,14,15,16],
                            render: function (data, type, row, meta) {
                                if (data) {
                                    return secondsToTime(data);
                                } else {
                                    return secondsToTime(0);
                                }
                            }
                        },

                    ],
                    rowGroup: {
                        startRender: null,
                        endRender: function (rows, group) {

                            var tpoTrab = rows
                                    .data()
                                    .pluck(8)
                                    .reduce(function (a, b) {
                                        return a + b * 1;
                                    }, 0);
                            var tpoCol = rows
                                    .data()
                                    .pluck(9)
                                    .reduce(function (a, b) {
                                        return a + b * 1;
                                    }, 0);
                            var tpoAtr = rows
                                    .data()
                                    .pluck(10)
                                    .reduce(function (a, b) {
                                        return a + b * 1;
                                    }, 0);

                            var hoursTpoTrab = secondsToTime(tpoTrab);
                            var hoursTpoCol = secondsToTime(tpoCol);
                            var hoursTpoAtr = secondsToTime(tpoAtr);

                            return $('<tr/>')
                                    .append('<td class="semana" colspan="8">Total Semana ' + group.substring(group.length - 2, group.length) + '</td>')
                                    .append('<td class="total">' + hoursTpoTrab + '</td>')
                                    .append('<td class="total">' + hoursTpoCol + '</td>')
                                    .append('<td class="total">' + hoursTpoAtr + '</td>')

                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
                                    .append('<td/>')
//                                    .append('<td/>')

                        },
                        dataSrc: 19
                    },
                    footerCallback:  function ( row, data, start, end, display ) {
                        var api = this.api(), data;

                        var intVal = function ( i ) {
                            return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                                    typeof i === 'number' ?
                                            i : 0;
                        };
                        var totTrab = api
                                .column( 8 )
                                .data()
                                .reduce( function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0 );
                        var totCol = api
                                .column( 9 )
                                .data()
                                .reduce( function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0 );
                        var totAtr = api
                                .column( 10 )
                                .data()
                                .reduce( function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0 );


                        var hoursTotTrab = secondsToTime(totTrab);
                        var hoursTotCol = secondsToTime(totCol);
                        var hoursTotAtr = secondsToTime(totAtr);

                        $( api.column( 0 ).footer() ).html('Total Periodo');
                        $( api.column( 8 ).footer() ).html(hoursTotTrab);
                        $( api.column( 9 ).footer() ).html(hoursTotCol);
                        $( api.column( 10 ).footer() ).html(hoursTotAtr);

                    },
                    "initComplete": function (settings) {
                        $('#hojaasist thead th').each(function () {
                            var $td = $(this);
                            $td.attr('title', $td.attr('custom-title'));
                        });

                        /* Apply the tooltips */
                        $('#hojaasist thead th[title]').tooltip(
                                {
                                    "container": 'body'
                                });
                    }

                });
            }

            $('#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);

            });
            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").click(function(){
                drawTable();
            });


        } );
    </script>

{% endblock page_content%}