@extends('layouts.app', ['page' => 'Aprobacion Inasistencia', 'pageSlug' => 'aprobacion'])

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <approbation></approbation>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table tablesorter" id="table_example" style="width: 100%">
                            <thead class=" text-primary">
                                <tr>
                                    <th class="text-center" style="display:none;">FechaI</th>
                                    <th class="text-center" style="display:none;">FechaF</th>
                                    <th class="text-center" style="display:none;">IdMotivo</th>
                                    <th class="text-center" style="display:none;">CodProyecto</th>
                                    <th class="text-center">Proyecto</th>
                                    <th class="text-center">DNI</th>
                                    <th class="text-center">Trabajador</th>
                                    <th class="text-center">Lun</th>
                                    <th class="text-center">Mar</th>
                                    <th class="text-center">Mie</th>
                                    <th class="text-center">Jue</th>
                                    <th class="text-center">Vie</th>
                                    <th class="text-center">Sab</th>
                                    <th class="text-center">Dom</th>
                                    <th class="text-center">Motivo</th>
                                    <th class="text-center">Comentario</th>
                                    <th class="text-center">Archivo</th>
                                    <th class="text-center"><input type="checkbox" onclick="seleccionaTodos()"></input>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="text-center" style="white-space: normal">
                            </tbody>
                        </table>
                    </div>
                    <div class="center" style="align-self: auto; text-align: center;">
                        <div class="form-group">
                            <button id="boton_rechazar_trabajador" style="white-space: normal;"
                                class="btn btn-danger rechazar-trabajador" onclick="rechazar_trabajador()">Rechazar</button>
                            <button id="boton_guarda_trabajador" style="white-space: normal;" class="btn btn-success"
                                onclick="guardar_trabajador()">Aprobar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalComentario" tabindex="-1" role="dialog" aria-labelledby="modalComentario"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
                            class="tim-icons icon-simple-remove"></i></button>
                    <h4 class="modal-title" id="modalComentarioLabel"> Historial Comentario</h4>
                </div>
                <div class="modal-body">
                    <p><label id="t_comentario"></label></p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalAdvertencia" tabindex="-1" role="dialog" aria-labelledby="modalAdvertencia"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <p class="text-center">¿Esta seguro de rechazar las solicitudes de aprobacion?</p>
                    <p class="text-center">Recuerde que se eliminara todos los tareos del trabajador registrados para
                        esos dias.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger" id="btn_rechazar_trabajador"
                        onclick="rechazar_trabajador()" data-alerta='1'>Aceptar</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalCerrarProyectos" tabindex="-1" role="dialog" aria-labelledby="modalCerrarProyectos"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-center">¿Esta seguro de hacer el cierre masivo de todos los proyectos pendientes?</p>
                    <p><label id="t_cierre_proyectos"></label></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger" id="btn_cerrar_proyectos" onclick="cerrar_proyectos()"
                        data-alerta='1'>Aceptar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('add_js')
    <script>
        function seleccionaTodos() {
            let table = $('#table_example').dataTable();
            let allPages = table.fnGetNodes();
            $(".chkTrabajador", allPages).prop("checked", !$(".chkTrabajador").prop("checked")).change();
        };

        function guardar_trabajador() {
            var trabajador = new Array();
            var table = $('#table_example').DataTable();
            var rows = $(table.rows({
                page: 'all'
            }).nodes()).filter(':has(:checkbox:checked:enabled)');
            rows.each(function(index, elem) {
                var data = table.row(elem).data()
                trabajador.push(data[2] + ',' + data[3] + ',' + data[5] + ',\'' + data[0] + '\'' + ',\'' + data[1] +
                    '\'');
            });
            axios.post("aprobar", {
                trabajador
            }).then((response) => {
                var datos = response.data;
                if (datos == 1) {
                    demo.showNotification('bottom', 'right', 'Trabajador/es aprobados correctamente', 'success');
                    $('#table_example').DataTable().clear().draw();

                } else if (datos == 2) {
                    demo.showNotification('bottom', 'right', 'Seleccione al menos un trabajador', 'danger');
                } else if (datos == 4) {
                    demo.showNotification('bottom', 'right', 'Falta Ingresar el Motivo de la Inasistencia',
                        'danger');
                } else {
                    demo.showNotification('bottom', 'right', 'Usted no tiene Permisos para Aprobar', 'danger');
                }

            })
        };

        function rechazar_trabajador() {
            var trabajador = new Array();
            var table = $('#table_example').DataTable();
            var rows = $(table.rows({
                page: 'all'
            }).nodes()).filter(':has(:checkbox:checked:enabled)');
            rows.each(function(index, elem) {
                var data = table.row(elem).data()
                trabajador.push(data[2] + ',' + data[3] + ',' + data[5] + ',\'' + data[0] + '\'' + ',\'' + data[1] +
                    '\'');
            });
            axios.post("rechazar", {
                trabajador
            }).then((response) => {
                demo.showNotification('bottom', 'right',
                    'Se ha eliminado el tareo y aprobacion de los trabajadores correctamente', 'success');
                $('#table_example').DataTable().clear().draw();
                $('#modalAdvertencia').modal('hide')
            })
        };

        function showComentario(dni, fecha_i, fecha_f) {
            axios.post("comentario", {
                dni,
                fecha_i,
                fecha_f
            }).then((response) => {
                let datos = response.data[0];
                let comentario = datos['comentariostsa'];
                document.getElementById('t_comentario').innerHTML = comentario;
            })
        }

        function validad_permisos() {
            var table = $('#table_example').DataTable();
            var rows = $(table.rows({
                page: 'all'
            }).nodes()).filter(':has(:checkbox:checked:enabled)');
            var number_rows = rows.length;

            if (number_rows == 0) {
                demo.showNotification('bottom', 'right', 'Seleccione al menos un trabajador', 'danger');
            } else {
                axios.get("validar-permiso").then((response) => {
                    var datos = response.data;
                    if (datos == 1) {
                        $('#modalAdvertencia').modal('show');
                    } else {
                        demo.showNotification('bottom', 'right',
                            'Usted no tiene permisos para realizar la funcion.', 'danger');
                    }
                })
            }
        }

        function showfile(dni, fecha_ini, fecha_fin, motivo, proyecto) {
            axios.post("nombres-archivos", {
                dni,
                fecha_ini,
                fecha_fin,
                motivo
            }).then((response) => {
                let datos = response.data;
                let archivo = new Array();

                for (var i = 0; i < datos.length; i++) {
                    let row = datos[i];
                    let nombre = row['ruta'];
                    if (nombre != null) {
                        archivo.push(nombre);
                    }
                }

                axios.post("generar-zip", {
                    archivo,
                    dni,
                    fecha_ini,
                    fecha_fin,
                    proyecto,
                    motivo
                }).then((response) => {
                    let archivo = response.data
                    let link_file = "descargar-archivo/" + archivo;
                    let btn_descarga = document.getElementById("btn_descarga-" + dni + "-" + motivo + "-" +
                        proyecto);

                    btn_descarga.setAttribute("download", archivo);
                    btn_descarga.setAttribute("href", link_file);

                });
            });
        }

        function on_cerrar_proyectos() {
            let fecha_fin = document.getElementById('t_fecha_fin').value;
            document.getElementById('t_cierre_proyectos').innerHTML = 'La fecha cierre de los proyectos pendientes sera: ' +
                fecha_fin;
            $('#modalCerrarProyectos').modal('show');
        }

        function cerrar_proyectos() {
            let fecha_fin = document.getElementById('t_fecha_fin').value;
            axios.post("cerrar-proyectos", {
                fecha_fin
            }).then((response) => {
                var datos = response.data;
                if (datos == 1) {
                    demo.showNotification('bottom', 'right', 'Se cerraron los proyectos pendientes.', 'success');
                    $('#modalCerrarProyectos').modal('hide');
                } else {
                    demo.showNotification('bottom', 'right', 'Usted no tiene permisos para realizar la funcion.',
                        'danger');
                }
            })
        }

        $(document).on('click', '.link', function(event) {
            document.getElementById('t_comentario').innerHTML = null;
            let dni = event.target.getAttribute("data-dni");
            let fecha_i = event.target.getAttribute("data-fecha-inicio");
            let fecha_f = event.target.getAttribute("data-fecha-fin");
            console.log(dni);
            showComentario(dni, fecha_i, fecha_f);
            $('#modalComentario').modal('show');
        });

        $(document).on('click', '.descarga-archivos', function() {
            let dni = $(this).data("dni");
            let fecha_inicio = $(this).data("fecha-inicio");
            let fecha_fin = $(this).data("fecha-fin");
            let id_motivo = $(this).data("id-motivo");
            let proyecto = $(this).data("proyecto");
            showfile(dni, fecha_inicio, fecha_fin, id_motivo, proyecto);

        });

        $(document).ready(function() {
            var uri = "52.21.217.224";
            var url_redirect;
            var http = "http://";

            if (uri == 'localhost') {
                url_redirect = http + uri + ":8000/";
            } else {
                url_redirect = http + uri + "/opera-laravel/public/";
            }

            //recargar pagina al recibir post
            if ("") {
                window.location.href = url_redirect + "aprobacion";
            }
        });
    </script>
@endpush