@extends('layouts.app', ['page' => 'Carga de Archivos', 'pageSlug' => 'archivos'])

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <files></files>
                </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_archivos" style="width: 100%">
                            <thead class=" text-primary">
                                <tr>
                                    <th class="text-center" style="width: 100px">Proyecto</th>
                                    <th class="text-center">DNI</th>
                                    <th class="text-center" style="width: 300px">Trabajador</th>
                                    <th class="text-center" style="width: 150px">Fecha Inasist.</th>
                                    <th class="text-center">Archivo</th>
                                    <th class="text-center" style="width: 280px">Comentario</th>
                                    <th class="text-center">Motivo</th>
                                    <th class="text-center" style="width: 130px">Editar</th>
                                </tr>
                            </thead>
                            <tbody class="text-center" style="white-space: normal">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" aria-hidden="true"
        id="modalEdit" style="overflow-y:auto;">
        <div class="modal-dialog modal-lg" role="document" style=" transform:translate(0, 0%)">
            <div class="modal-content">
                <div class="modal-header" style="display: grid;>">
                    <h4 class="modal-title">Editar Inasistencia</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="tim-icons icon-simple-remove"></i>
                    </button>
                    <label style="margin-bottom: auto;" id="asistenciaLabel"
                        style="margin-bottom: auto; color: crimson;"></label>
                </div>
                <div class="modal-body">
                    <label class="col-sm-9 col-form-label" id="t_dni" hidden></label>
                    <label class="col-sm-9 col-form-label" id="t_proyecto" hidden></label>
                    <label class="col-sm-9 col-form-label" id="t_fecha" hidden></label>
                    <div class="row">
                        <label class="col-sm-3 col-form-label">Trabajador</label>
                        <label class="col-sm-9 col-form-label" id="t_nombre"></label>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label">Archivo</label>
                        <a class="col-sm-9" target="_blank" rel="noopener noreferrer" id="t_ruta"></a>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label">Actualizar Archivo</label>
                        <div class="col-md-6">
                            <div class="form-group"> 
                                <label for="archivo-trabajador" class="btn btn-info btn-fab btn-icon btn-round" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Subir"> 
                                        <i class='fas fa-upload'></i> 
                                </label> 
                                <input class="form-control" type="file" onchange="load_file(this)" style="width: -webkit-fill-available; visibility: hidden;" id="archivo-trabajador"> 
                                        <a class = "btn btn-success btn-fab btn-icon btn-round" id = "btn_descarga" download data-bs-toggle="tooltip" data-bs-placement="bottom" title="Descargar"> 
                                            <i class="fas fa-download"> </i> 
                                        </a>
                                        <label id="t_archivo"></label>
                            </div>
                            
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label"> Comentario</label>
                        <div class="col-md-9">
                            <textarea class="form-control" id="t_comentario" rows="5"></textarea>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-sm-3 col-form-label"> Motivo</label>
                        <div class="col-md-3">
                            <select class='form-control' id ='cboMotivo' name="cboMotivo">
                                <option value="2">PROBL. BIOM.</option>
                                <option value="3">COMP. HORAS</option>
                                <option value="1">NO MARCO</option>
                                <option value="4">NO REGISTRADO EN CA</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="guardar()" id="boton_guardar">Guardar</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('add_js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
            }
        });
        
        function load_file(obj) {
            let archivo = obj;
            let name_file = obj.files[0].name;
            let name_tmp = name_file;
            let btn_descarga = document.getElementById("btn_descarga");
            
            if (obj.files[0].size > 407200) {
                demo.showNotification('bottom', 'right', "El peso del máximo del archivo debe ser de 400KB",
                    'danger')
                obj.value = "";
                btn_descarga.setAttribute("disabled", true);
            } else {
                var blob = new Blob([archivo.files[0]]);
                var url = URL.createObjectURL(blob);

                btn_descarga.setAttribute("download", name_tmp);
                btn_descarga.setAttribute("href", url);
                btn_descarga.removeAttribute("disabled");
                document.getElementById("t_archivo").innerHTML = name_tmp;
                name_tmp = "";
            }
        }
        
        function showPermiso(proyecto,dni,fecha){
            axios.post("editar-permiso", {
                proyecto,
                dni,
                fecha
            }).then((response) => {
                let datos = response.data[0];
                let nombre = datos['t_nombre'];
                let comentario = datos['t_comentario'];
                let motivo = datos['t_cod_motivo'];
                let fecha_con = datos['t_fecha'];
                let ruta = datos['t_ruta'];
                
                document.getElementById('t_nombre').innerHTML = nombre;
                document.getElementById('t_comentario').value = comentario;
                document.getElementById('t_proyecto').innerHTML = proyecto;
                document.getElementById('t_dni').innerHTML = dni;
                document.getElementById('t_fecha').innerHTML = fecha_con;
                $("#cboMotivo").val(motivo);
                
                ruta_href = ""
                ruta_href = document.getElementById('t_ruta');
                
                if ( ruta == null){
                    ruta_href.removeAttribute("href");
                    document.getElementById('t_ruta').innerHTML = 'No tiene Documento cargado';
                } else {
                    ruta_href.setAttribute("href","http://52.21.217.224/opera-laravel/storage/app/" + ruta);
                    document.getElementById('t_ruta').innerHTML = ruta;
                }
            })
        }
        
        function cargarTable(){
            let b_proyecto = document.getElementById('cboProyecto').value;
            let b_fecha_inicio = document.getElementById('t_fecha_inicio').value;
            let b_fecha_fin = document.getElementById('t_fecha_fin').value;
            
            axios.get("listTrabajadores/" + b_proyecto + "/" + b_fecha_inicio + "/" + b_fecha_fin)
                .then((response) => {
                    $("#table_archivos").DataTable().rows().remove().draw();
                    let cantidad = response.data.length;
                    if (cantidad == 0) {
                        demo.showNotification("bottom",
                                              "right",
                                              "No existen trabajadores pendientes de aprobación para el rango de fecha ingresado",
                                              "success"
                        );
                    }
                    for (let index = 0; index < response.data.length; index++) {
                        const element = response.data[index];
                        $("#table_archivos")
                          .DataTable()
                          .row.add([
                            element["t_proyecto"],
                            element["t_dni"],
                            element["t_nombre"],                  
                            element["t_fecha"],
                            element["t_archivo"],
                            element["t_comentario"],
                            element["t_motivo"],
                            "<button class='btn btn-info btn-round btn-icon modificar' \
                                     data-proyecto='" + element["t_cod_proyecto"] + "' \
                                     data-dni='" + element["t_dni"] + "' \
                                     data-fecha='" + element["t_fecha"] + "'> \
                                     <i class='fas fa-pen'></i></button>"
                          ])
                          .draw();
                    }
                });
        }
        
        function guardar() {
            let comentario = document.getElementById('t_comentario').value;
            let motivo = $("#cboMotivo").val();
            let proyecto = $("#t_proyecto").text();
            let fecha = $("#t_fecha").text();
            let dni = $("#t_dni").text();
            let ruta = $("#t_ruta").text();
            
            nombre_archivo = "";
            extraer_nombre = "";
            archivo = "";
            
            archivo = document.getElementById("archivo-trabajador");
            nombre_archivo = document.getElementById("btn_descarga").getAttribute("download");
            
            if (archivo.files.length > 0) {
                archivos = archivo.files[0];
                nombre_archivo = archivos.name;
                datos_archivo = new FormData();

                datos_archivo.append('file', archivos);

                axios.post("subir-archivo/" + proyecto + "/" + dni + "/" + fecha, datos_archivo, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((response) => {}).catch(error => {
                    demo.showNotification(
                        'bottom',
                        'right',
                        'Hubo un error, actualice la página o contacte con el administrador',
                        'danger');
                });
            }

            if (!nombre_archivo) {
                if( ruta == 'No tiene Documento cargado' ){
                    nombre_archivo = null;
                } else {
                    nombre_archivo = ruta;
                }
            } else {
                if (nombre_archivo.indexOf(proyecto + "-" + dni + "-" + fecha) !== -1) {
                    extraer_nombre = nombre_archivo.substring(nombre_archivo.indexOf(fecha + "-") + fecha.length + 1)
                    nombre_archivo = proyecto + "-" + dni + "-" + fecha + "-" + extraer_nombre;
                } else {
                    nombre_archivo = proyecto + "-" + dni + "-" + fecha + "-" + nombre_archivo;
                }
            }
            
            axios.post("actualizar-permiso", {proyecto,dni,fecha,comentario,motivo,nombre_archivo})
                    .then((response) =>{
                        demo.showNotification('bottom',
                                              'right',
                                              'Se actualizo correctamente',
                                              'success');
                        $('#modalEdit').modal('hide');
                        cargarTable();
            })
            .catch(error => {demo.showNotification('bottom',
                                                    'right',
                                                    'Hubo un error, actualice la página o contacte con el administrador',
                                                    'danger');
             });
        }
        
        $(document).on('click', '.modificar', function(event) {
            document.getElementById('t_nombre').innerHTML = null;
            document.getElementById('t_comentario').value = null;
            document.getElementById('t_ruta').innerHTML = null;
            document.getElementById('t_archivo').innerHTML = null;
            
            $("#cboMotivo").val(null);
            let proyecto = $(this).data("proyecto");
            let dni = $(this).data("dni");
            let fecha = $(this).data("fecha");
            showPermiso(proyecto,dni,fecha);
            $('#modalEdit').modal('show');
            
            document.getElementById("btn_descarga").removeAttribute("download");
            document.getElementById("btn_descarga").removeAttribute("href");
            document.getElementById("btn_descarga").setAttribute("disabled", true);
            
            archivo = document.getElementById("archivo-trabajador");
            archivo.value = null;
        });

        $(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 + "archivos";
            }

        });
    </script>
@endpush