{% 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;
        }
        /*th, td {*/
        /*white-space: nowrap;*/
        /*padding-left: 40px !important;*/
        /*padding-right: 40px !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  nowrap" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>COD. EMPLEADO</th>
                    <th>NOMBRES/APELLIDO</th>
                    <th>FECHA</th>
                    <th>ENTRADA</th>
                    <th>SALIDA</th>
                    <th>HRS. JORNADA</th>
                    <th>RESPONSABLE</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 Turnos Planeados.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: 'Turnos PLaneados',
                        orientation: 'landscape', //portrait
                        pageSize: 'letter', //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: 'Turnos Planeados',
                                        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: 'Turnos Planeados' + 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("supturnosTable") }}',
                    type: "POST",
                    data: {
                        startdate: start,
                        enddate: end,
                        personid: personid
                    },
                }),
                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);

        });
        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');
                }
            } );
        }


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