@extends('layouts.app', ['page' => 'Sincronizacion', 'pageSlug' => 'sincronizacion'])

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <sincronizacion></sincronizacion>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <div>
                        <table class="table tablesorter" id="table_tareo_app" style="width: 100%">
                            <thead class=" text-primary">
                                <tr>
                                    <th class="text-center" style="display:none;">CodTarea</th>
                                    <th class="text-center" style="display:none;">CodLote</th>
                                    <th class="text-center" style="display:none;">Dni</th>
                                    <th class="text-center" style="display:none;">FechaProg</th>
                                    <th class="text-center" style="display:none;">Id</th>
                                    <th class="text-center"><input type="checkbox" onclick="seleccionaTodos()"></input>
                                    </th>
                                    <th class="text-center" style="width: 80px">Etapa</th>
                                    <th class="text-center" style="width: 250px">Tarea</th>
                                    <th class="text-center">Lote</th>
                                    <th class="text-center" style="width: 250px">Trabajador</th>
                                    <th class="text-center">Horas</th>
                                    <th class="text-center" style="width: 300px">Detalle</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="text-center" style="white-space: normal">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" role="dialog" aria-labelledby="modalEditarLabel" aria-hidden="true" id="modalEditar"
        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 Tarea</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_fecha" hidden></label>
                    <label class="col-sm-9 col-form-label" id="t_id" hidden></label>
                    <label class="col-sm-9 col-form-label" id="t_proyecto" hidden></label>
                    <div class="row">
                        <label class="col-sm-2 col-form-label text-center"> Etapa </label>
                        <div class="col-md-2">
                            <select class="form-control" id="cboEtapa"></select>
                        </div>
                        <label class="col-sm-2 col-form-label text-center"> Lote </label>
                        <div class="col-md-2">
                            <select class="form-control" id="cboLote"></select>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-sm-2 col-form-label text-center">Tarea</label>
                        <div class="col-md-9">
                            <select class="form-control" id="cboTarea" name="cboTarea"></select>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-sm-2 col-form-label text-center">Descrip.</label>
                        <div class="col-md-9">
                            <label class="col-form-label" id="t_descripcion"></label>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-sm-2 col-form-label text-center">Trabajador</label>
                        <div class="col-md-9">
                            <select class="form-control" id="cboTrabajador" name="cboTrabajador"></select>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <label class="col-sm-2 col-form-label text-center">Horas</label>
                        <div class="col-md-2">
                            <input class="form-control" id="t_horas" type='number' aria-required='true'></input>
                        </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>

    <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-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="tim-icons icon-simple-remove"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <label class="col-sm-9 col-form-label" id="t_id_e" hidden></label>
                    <br>
                    <p class="text-center"><b>¿Esta seguro de eliminar la tarea?</b></p>
                    <br>
                </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_eliminar" onclick="eliminar()"
                        data-alerta='1'>Aceptar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit All -->
    <div class="modal fade" id="editAllModal" tabindex="-1" role="dialog" aria-labelledby="editAllModalLabel"
        aria-hidden="true" style="overflow-y:auto;">
        <div class="modal-dialog modal-lg" role="document" style=" transform:translate(10, 0%)">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editAllModalLabel">Modificar Tarea</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="tim-icons icon-simple-remove"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <sincronizacion-edit-all></sincronizacion-edit-all>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="edit_all_tasks()">Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('add_js')
    <script>
        function edit_all_tasks() {
            let datos = [];

            let table = $('#table_tareo_app').DataTable();
            let data_row = $(table.rows({
                page: 'all'
            }).nodes()).filter(':has(:checkbox:checked:enabled)');

            data_row.each(function(index, elem) {
                let data = table.row(elem).data();
                datos.push('(' + data[4] + ')');
            });

            if (data_row.length > 0) {
                let stage = document.getElementById('etapaPartida').value;
                let task = document.getElementById('tarea').value;
                let lot = document.getElementById('lote').value;

                axios.post("update-all-task", {
                        datos,
                        stage,
                        task,
                        lot
                    })
                    .then((response) => {
                        demo.showNotification('bottom',
                            'right',
                            "Se actualizaron las tareas seleccionadas.",
                            'success');
                    })
                    .catch(error => {
                        demo.showNotification('bottom',
                            'right',
                            'Hubo un error, actualice la página o contacte con el administrador',
                            'danger');
                    });
            } else {
                demo.showNotification('bottom',
                    'right',
                    'Seleccione al menos un tareo.',
                    'danger');
            }
        }

        function seleccionaTodos() {
            let table = $('#table_tareo_app').dataTable();
            let allPages = table.fnGetNodes();
            $(".chkTareo", allPages).prop("checked", !$(".chkTareo").prop("checked")).change();
        };

        function showEtapa(proyecto, etapa) {
            let opciones = '<option value=""> Etapa </option>';
            axios.post("listar-etapa", {
                proyecto
            }).then((response) => {
                let datos = response.data;
                datos.forEach(function(item) {
                    opciones += '<option value="' + item["cod_etapa"] + '">' + item["cod_etapa"] +
                        '</option>';
                });
                document.getElementById("cboEtapa").innerHTML = opciones;
                if (etapa !== null) {
                    $("#cboEtapa").val(etapa);
                }
            });
        }

        function showLote(proyecto, etapa, lote) {
            let opciones = '<option value=""> Lote </option>';
            axios.post("listar-lote", {
                proyecto,
                etapa
            }).then((response) => {
                let datos = response.data;
                datos.forEach(function(item) {
                    opciones += '<option value="' + item["cod_lote"] + '">' + item["num_lote"] +
                        '</option>';
                });
                document.getElementById("cboLote").innerHTML = opciones;
                if (lote !== null) {
                    $("#cboLote").val(lote);
                }
            });
        }

        function obtenerTarea(lote, tarea) {
            let opciones = '<option value=""> Seleccione Tarea </option> ';
            axios.post("listar-tarea", {
                lote
            }).then((response) => {
                let datos = response.data;
                datos.forEach(function(item) {
                    opciones += '<option value="' + item["cod_tarea"] + '">' + item["insumo"] + '</option>';
                });
                document.getElementById("cboTarea").innerHTML = opciones;
                if (tarea !== null) {
                    $("#cboTarea").val(tarea);
                }
                $("#cboTarea").select2();
            });
        }

        function obtenerTrabajador(dni) {
            let opciones = '<option value=""> Seleccione Trabajador </option> ';
            axios.post("listar-trabajador").then((response) => {
                let datos = response.data;
                datos.forEach(function(item) {
                    opciones += '<option value="' + item["dni"] + '">' + item["nombre"] + '</option>';
                });
                document.getElementById("cboTrabajador").innerHTML = opciones;
                if (dni !== null) {
                    $("#cboTrabajador").val(dni);
                }
                $("#cboTrabajador").select2();
            });
        }

        function showEditar(tarea, lote, dni, proyecto, etapa, descripcion, horas, fecha, id) {
            showEtapa(proyecto, etapa);
            showLote(proyecto, etapa, lote);
            obtenerTrabajador(dni);
            obtenerTarea(lote, tarea);
            document.getElementById('t_descripcion').innerHTML = descripcion;
            document.getElementById('t_horas').value = horas;
            document.getElementById('t_fecha').innerHTML = fecha;
            document.getElementById('t_id').innerHTML = id;
            document.getElementById('t_proyecto').innerHTML = proyecto;
        }

        function showEliminar(id) {
            document.getElementById('t_id_e').innerHTML = id;
        }

        function cargarTable() {
            let b_proyecto = document.getElementById('cboProyecto').value;
            let b_fecha_inicio = document.getElementById('t_fecha_inicio').value;

            axios.get("lista-tareo-app/" + b_proyecto + "/" + b_fecha_inicio)
                .then((response) => {
                    $("#table_tareo_app").DataTable().rows().remove().draw();
                    let cantidad = response.data.length;
                    if (cantidad == 0) {
                        demo.showNotification("bottom",
                            "right",
                            "No hay tareo registrado en la fecha indicada.",
                            "success");
                    }

                    for (let index = 0; index < response.data.length; index++) {
                        const element = response.data[index];
                        let btn_estado = "";
                        let input_check = "";
                        let btn_editar = "";

                        if (element["t_estado"] == 1) {
                            btn_estado =
                                "<button class ='btn btn-success btn-round btn-icon'><i class='fas fa-check'></i></button>";
                            input_check =
                                "<input type='checkbox' class='chkTareo' name='checkTareo[]' id='check_tareo'></input>";
                            btn_editar =
                                "<button class='btn btn-info btn-round btn-icon modificar' \
                                                                                                                                                                                                                                                                                                                                             data-tarea='" +
                                element[
                                    "t_cod_tarea"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-lote='" +
                                element[
                                    "t_cod_lote"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-dni='" +
                                element[
                                    "t_dni"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-proyecto='" +
                                element[
                                    "t_cod_proyecto"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-descripcion='" +
                                element[
                                    "t_descripcion"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-horas='" +
                                element[
                                    "t_horas"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-fecha='" +
                                element[
                                    "t_fecha"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                element[
                                    "t_id"] +
                                "' \
                                                                                                                                                                                                                                                                                                                                             data-etapa='" +
                                element[
                                    "t_etapa"] +
                                "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-pen'></i></button> \
                                                                                                                                                                                                                                                                                                                                      <button class='btn btn-warning btn-round btn-icon eliminar' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                element[
                                    "t_id"] +
                                "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-trash'></i></button>";
                        } else {
                            if (element["t_estado"] == 0) {
                                btn_estado = " ";
                                input_check =
                                    "<input type='checkbox' class='chkTareo' name='checkTareo[]' id='check_tareo'></input>";
                                btn_editar =
                                    "<button class='btn btn-info btn-round btn-icon modificar' \
                                                                                                                                                                                                                                                                                                                                             data-tarea='" +
                                    element[
                                        "t_cod_tarea"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-lote='" +
                                    element[
                                        "t_cod_lote"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-dni='" +
                                    element[
                                        "t_dni"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-proyecto='" +
                                    element[
                                        "t_cod_proyecto"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-descripcion='" +
                                    element[
                                        "t_descripcion"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-horas='" +
                                    element[
                                        "t_horas"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-fecha='" +
                                    element[
                                        "t_fecha"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                    element[
                                        "t_id"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-etapa='" +
                                    element[
                                        "t_etapa"] +
                                    "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-pen'></i></button> \
                                                                                                                                                                                                                                                                                                                                      <button class='btn btn-warning btn-round btn-icon eliminar' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                    element[
                                        "t_id"] +
                                    "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-trash'></i></button>";
                            } else {
                                btn_estado =
                                    "<button class ='btn btn-danger btn-round btn-icon'><i class='fas fa-exclamation'></i></button>";
                                input_check =
                                    "<input type='checkbox' class='chkTareo' name='checkTareo[]' id='check_tareo'></input>";
                                btn_editar =
                                    "<button class='btn btn-info btn-round btn-icon modificar' \
                                                                                                                                                                                                                                                                                                                                             data-tarea='" +
                                    element[
                                        "t_cod_tarea"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-lote='" +
                                    element[
                                        "t_cod_lote"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-dni='" +
                                    element[
                                        "t_dni"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-proyecto='" +
                                    element[
                                        "t_cod_proyecto"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-descripcion='" +
                                    element[
                                        "t_descripcion"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-horas='" +
                                    element[
                                        "t_horas"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-fecha='" +
                                    element[
                                        "t_fecha"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                    element[
                                        "t_id"] +
                                    "' \
                                                                                                                                                                                                                                                                                                                                             data-etapa='" +
                                    element[
                                        "t_etapa"] +
                                    "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-pen'></i></button> \
                                                                                                                                                                                                                                                                                                                                      <button class='btn btn-warning btn-round btn-icon eliminar' \
                                                                                                                                                                                                                                                                                                                                             data-id='" +
                                    element[
                                        "t_id"] +
                                    "'> \
                                                                                                                                                                                                                                                                                                                                            <i class='fas fa-trash'></i></button>";
                            }
                        }

                        $("#table_tareo_app")
                            .DataTable()
                            .row.add([
                                element["t_cod_tarea"],
                                element["t_cod_lote"],
                                element["t_dni"],
                                element["t_fecha_programacion"],
                                element["t_id"],
                                input_check,
                                element["t_etapa"],
                                element["t_tarea"],
                                element["t_lote"],
                                element["t_trabajador"],
                                element["t_horas"],
                                element["t_detalle"],
                                btn_estado,
                                btn_editar
                            ]).draw();
                        $("#table_tareo_app").DataTable().columns(0).visible(false);
                        $("#table_tareo_app").DataTable().columns(1).visible(false);
                        $("#table_tareo_app").DataTable().columns(2).visible(false);
                        $("#table_tareo_app").DataTable().columns(3).visible(false);
                        $("#table_tareo_app").DataTable().columns(4).visible(false);
                    }
                });
        }

        function guardar() {
            let lote = document.getElementById('cboLote').value;
            console.log(lote);
            let tarea = document.getElementById('cboTarea').value;
            let descripcion = $("#t_descripcion").text();
            let trabajador = document.getElementById('cboTrabajador').value;
            let horas = document.getElementById('t_horas').value;
            let fecha = $("#t_fecha").text();
            let id = $("#t_id").text();

            if (lote == "") {
                demo.showNotification('bottom', 'right', 'Seleccione un lote', 'danger');
            } else {
                if (tarea == "") {
                    demo.showNotification('bottom', 'right', 'Seleccine una tarea', 'danger');
                } else {
                    axios.post("actualizar-tarea", {
                            lote,
                            tarea,
                            descripcion,
                            trabajador,
                            horas,
                            fecha,
                            id
                        })
                        .then((response) => {
                            demo.showNotification('bottom',
                                'right',
                                'Se actualizo correctamente',
                                'success');
                            $('#modalEditar').modal('hide');
                            cargarTable();
                        })
                        .catch(error => {
                            demo.showNotification('bottom',
                                'right',
                                'Hubo un error, actualice la página o contacte con el administrador',
                                'danger');
                        });
                }
            }
        }

        function eliminar() {
            let id = $("#t_id_e").text();
            axios.post("eliminar-tarea", {
                    id
                })
                .then((response) => {
                    demo.showNotification('bottom',
                        'right',
                        'Se elimino tarea',
                        'success');
                    $('#modalAdvertencia').modal('hide');
                    cargarTable();
                })
                .catch(error => {
                    demo.showNotification('bottom',
                        'right',
                        'Hubo un error, actualice la página o contacte con el administrador',
                        'danger');
                });
        }

        function generar_tareo() {
            let b_fecha_inicio = document.getElementById('t_fecha_inicio').value;
            let tareo = [];
            let table = $('#table_tareo_app').DataTable();
            let rows = $(table.rows({
                page: 'all'
            }).nodes()).filter(':has(:checkbox:checked:enabled)');

            rows.each(function(index, elem) {
                let data = table.row(elem).data()
                tareo.push('(' + data[0] + ',' + data[1] + ',\'' + data[2] + '\',\'' + data[3] + '\',' + data[10] +
                    ',' + data[4] + ')')
            });

            if (tareo.length > 0) {
                axios.post("generar-tareo", {
                        tareo,
                        b_fecha_inicio
                    })
                    .then((response) => {
                        let datos = response.data[0];
                        let respuesta = datos['fn_sincronizar_tareo_app'];
                        demo.showNotification('bottom',
                            'right',
                            respuesta,
                            'success');
                        cargarTable();
                    })
                    .catch(error => {
                        demo.showNotification('bottom',
                            'right',
                            'Hubo un error, actualice la página o contacte con el administrador',
                            'danger');
                    });
            } else {
                demo.showNotification('bottom',
                    'right',
                    'Seleccione al menos un tareo.',
                    'danger');
            }
        }

        function editar_tareo_masivo() {
            $('#editAllModal').modal('show');
        }

        $(document).on('click', '.modificar', function(event) {
            document.getElementById('t_descripcion').innerHTML = null;
            document.getElementById('t_proyecto').innerHTML = null;
            document.getElementById('t_horas').value = null;
            document.getElementById('t_fecha').innerHTML = null;
            document.getElementById('t_id').innerHTML = null;
            document.getElementById('cboEtapa').innerHTML = null;
            document.getElementById('cboLote').innerHTML = null;
            document.getElementById('cboTarea').innerHTML = null;
            document.getElementById('cboTrabajador').innerHTML = null;

            let tarea = $(this).data("tarea");
            let lote = $(this).data("lote");
            let dni = $(this).data("dni");
            let proyecto = $(this).data("proyecto");
            let etapa = $(this).data("etapa");
            let descripcion = $(this).data("descripcion");
            let horas = $(this).data("horas");
            let fecha = $(this).data("fecha");
            let id = $(this).data("id");

            showEditar(tarea, lote, dni, proyecto, etapa, descripcion, horas, fecha, id);
            $('#modalEditar').modal('show');
        });

        $(document).on('click', '.eliminar', function(event) {
            document.getElementById('t_id_e').innerHTML = null;
            let id = $(this).data("id");
            showEliminar(id);
            $('#modalAdvertencia').modal('show');
        });

        $("#cboEtapa").change(function() {
            let proyecto = $("#t_proyecto").text();
            let etapa = $("#cboEtapa").val();
            showLote(proyecto, etapa, null);
            obtenerTarea(null, null);
        });

        $("#cboLote").change(function() {
            let lote = $("#cboLote").val();
            obtenerTarea(lote, 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 + "/tareo-laravel/public/";
            }

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