{% extends 'base.html.twig' %}
{% block subreport_title %}| Resumen Chat{% 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 {
            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  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>
            {#<tfoot>#}
            {#<tr>#}
                {#<th></th>#}
                {#<th></th>#}
                {#<th></th>#}
                {#<th></th>#}
            {#</tr>#}
            {#</tfoot>#}
        </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) {
                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' %}
                    console.log(logo);

                    $.ajax ({
                        url: '{{ url("asistenciaTable") }}',
                        type: "POST",
                        dataType: 'json',
                        data: {
                            startdate: start,
                            enddate: end
                        },
                        success: function( result ) {
//                            row1 = result.data.map(function(val, i) {
//                                return val === '' ? ' - ' : val;
//                            });

                            {% include 'js/test.js' %}
//                            var res = DataGrouper.sum(result, ["NUM_SEMANA"]);
//                            var tot = DataGrouper.sum(result, ["PERSONID"]);
                            console.log(result.data);

                            pdfMake.createPdf(dd).download();
                        },
                    });
                }

                var oTable = $('#hojaasist').DataTable({
                    processing: true,
                    serverSide: true,
                    dom: 'Bt',
                    buttons: [
                        {
                            text: 'Exportar PDF',
                            extend: 'pdfHtml5',
                            filename: 'Reporte de 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");
//                                for (var i = 0; i < elements.length; i++) console.log(elements[i]);
//                                console.log(doc.content.table);

                                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,
                                                    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: '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("asistenciaTable") }}',
                        type: "POST",
                        data: {
                            startdate: start,
                            enddate: end
                        },
                    }),
                    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], visible: false},
                        {
                            targets: [8, 9, 10],
                            render: function (data, type, row, meta) {
                                return secondsToTime(data);
                            }
                        },

                    ],
                    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);
                            // console.log(secondsToTime(tpoTrab));
                            // console.log(tpoTrab);

                            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);
                        // console.log(totTrab);
                        // console.log(hoursTotCol);
                        // console.log(hoursTotAtr);

                        $( 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');
                // console.log(startDate,endDate)
                drawTable(startDate,endDate);

            });

        } );
</script>

{% endblock page_content%}