@extends('adminlte::page')

@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Registros de Puntos de Medición Sin Orden de Trabajo | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="card card-aspen">
        <div class="card-header">
            <h3 class="card-title">Registros de Puntos de Medición Sin Orden de Trabajo</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="datatable">
                    <thead>
                        <tr>
                            <th>Acción</th>
                            <th>Nombre del Punto</th>
                            <th>Área/Sector</th>
                            <th>Este</th>
                            <th>Norte</th>
                            <th>Cota</th>
                            <th>Azimut</th>
                            <th>Inclinación</th>
                            <th>Fecha de Creación</th>
                            <th>Estado</th>
                            <th>Orden de Trabajo</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.card-body -->
    </div>

    <div class="modal fade" id="modalImportacionDePuntos" tabindex="-1" aria-labelledby="LabelModalImportacionDeArticulos" aria-hidden="true">
        <form enctype="multipart/form-data" id="formularioModalImportacionDePuntos">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title" id="LabelModalImportacionDePuntos">Importar Puntos</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Seleccionar Archivos</label>
                            <input type="file" class="form-control-file" id="campoSeleccionarArchivoExcelParaImportacion" accept=".xlsx">
                            <div class="invalid-feedback" id="validacionCampoSeleccionarArchivoExcelParaImportacion">

                            </div>
                        </div>

                        <div id="contenedorDeErroresDeLaImportacion" style="display:none;">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Fila</th>
                                            <th>Nombre_Propuesto</th>
                                            <th>Campana</th>
                                            <th>ESTE_VULCAN</th>
                                            <th>NORTE_VULCAN</th>
                                            <th>ELEV_VULCAN</th>
                                            <th>AZIMUTH_VULCAN</th>
                                            <th>INCLINACION_VULCAN</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registrosDeErroresDeImportacionDePuntos">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" id="botonImportacionDePuntos" onclick="importarPuntos()">Importar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
    <style>
        div.dt-button-collection {
            position: absolute;
            z-index: 2001;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            padding: 0.5rem;
            width: 140px;
        }

        div.dt-button-collection .dt-button:not(.dt-btn-split-drop) {
            min-width: 130px;
        }
    </style>
@stop

@section('js')
@if (Gate::check('puntos.importar'))
    <script>
        let botonesDatatable = [{
            extend: 'collection',
            text: '<i class="fas fa-file-excel"></i> &nbsp; Importar/Planilla &nbsp;',
            className: "btn btn-excel-en-datatable",
            buttons: [{
                    text: '<i class="fas fa-upload"></i> &nbsp; Importar',
                    action: function(e, dt, node, config) {
                        abrirModalImportarPuntos();
                    }
                },
                {
                    text: '<i class="fas fa-table"></i> &nbsp; Planilla',
                    action: function(e, dt, node, config) {
                        window.location = '{{route('puntos-orden-trabajo.descarga-planilla-importacion')}}';
                    }
                },
            ]
        },{
            text: '<i class="fas fa-table"></i> &nbsp; Vista de Puntos',
            className: "btn",
            action: function(e, dt, node, config) {
                location.href = "{{ route('puntos-orden-trabajo.index') }}"
            }
        },];
    </script>
@else
    <script>
        var botonesDatatable = [{
            text: '<i class="fas fa-table""></i> &nbsp; Vista de Puntos',
            className: "btn",
            action: function(e, dt, node, config) {
                location.href = "{{ route('puntos-orden-trabajo.index') }}"
            }
        }, ];
    </script>
@endif

<script>
    let datatable = $("#datatable").DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('puntos-orden-trabajo.obtener-registros-sin-orden-tabajo-datatable') }}',
            dataType: "json",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
        },
        columns: [{
            "data": "accion",
            "name": "accion",
        }, {
            "data": "punto",
            "name": "punto"
        },{
            "data": "area",
            "name": "area"
        },{
            "data": "este",
            "name": "este"
        }, {
            "data": "norte",
            "name": "norte"
        }, {
            "data": "cota",
            "name": "cota"
        },{
            "data": "azimut",
            "name": "azimut"
        },{
            "data": "inclinacion",
            "name": "inclinacion"
        }, {
            "data": "fecha_creacion",
            "name": "fecha_creacion"
        },{
            "data": "estado",
            "name": "estado"
        },  {
            "data": "orden_trabajo",
            "name": "orden_trabajo"
        }, ],
        orderCellsTop: true,
        ordering: true,
        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "Todos"],
        ],
        language: {
            processing: "Procesando...",
            search: "Buscar",
            lengthMenu: "Mostrar _MENU_ Registros",
            info: "Mostrando _START_ al _END_ de _TOTAL_ registros",
            infoEmpty: "Opcion no disponible",
            infoFiltered: "",
            infoPostFix: "",
            loadingRecords: "Cargandos registros",
            zeroRecords: "No hay datos disponibles en la tabla",
            emptyTable: "No hay datos disponibles en la tabla",
            paginate: {
                first: "Primero",
                previous: "Anterior",
                next: "Siguiente",
                last: "Ultimo",
            },
            aria: {
                sortAscending: ": Activar orden de columna ascendente",
                sortDescending: ": Activar orden de columna desendente"
            }
        },
        dom: "<'row'<'col-sm-4'B><'col-sm-4 d-flex justify-content-center' l><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
        buttons: botonesDatatable,
    });
</script>

<script>
    function abrirModalImportarPuntos(){
        document.getElementById("formularioModalImportacionDePuntos").reset();
        document.getElementById("contenedorDeErroresDeLaImportacion").style.display="none";
        $("#modalImportacionDePuntos").modal("show");
    }

    function importarPuntos() {
            document.getElementById("botonImportacionDePuntos").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";

            let campoArchivo = document.getElementById("campoSeleccionarArchivoExcelParaImportacion").value;
            if (campoArchivo.length > 0) {
                extension = campoArchivo.substring(campoArchivo.lastIndexOf('.'), campoArchivo.length);
                if (document.getElementById('campoSeleccionarArchivoExcelParaImportacion').getAttribute('accept').split(',').indexOf(extension) < 0) {
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").style.display = "block";
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").innerHTML = "El campo seleccionar archivos debe ser un archivo de tipo: xlsx";
                    document.getElementById("botonImportacionDePuntos").removeAttribute("disabled");
                    document.getElementById("preloader").style.height = "0px";
                    document.getElementById("img-preloader").style.display = "none";
                } else {
                    let formData = new FormData();
                    formData.append('archivo_importacion',  document.getElementById("campoSeleccionarArchivoExcelParaImportacion").files[0]);
                    let csrf = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('puntos-orden-trabajo.importar') }}',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            document.getElementById("preloader").style.height = "0px";
                            document.getElementById("img-preloader").style.display = "none";
                            Swal.fire({
                                icon: 'success',
                                title: '¡Puntos Importados!',
                                text: 'Puntos importados con éxito',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });
                        },
                        error: function(data) {
                            console.log(data)
                            document.getElementById("contenedorDeErroresDeLaImportacion").style.display="block";
                            let fila="<td>0</td>";
                            let nombrePropuesto="<td>campo valido</td>";
                            let campana="<td>campo valido</td>";
                            let esteVulcan="<td>campo valido</td>";
                            let norteVulcan="<td>campo valido</td>";
                            let elevVulcan="<td>campo valido</td>";
                            let azimuthVulcan="<td>campo valido</td>";
                            let inclinacioVulcan="<td>campo valido</td>";
                            data.responseJSON.forEach((elemento) => {
                                fila="<td>"+elemento['row']+"</td>";
                                if(elemento['attribute']=="nombre_propuesto"){
                                    nombrePropuesto="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }

                                if(elemento['attribute']=="campana"){
                                    campana="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }
                                
                                if(elemento['attribute']=="este_vulcan"){
                                    esteVulcan="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }
                                
                                if(elemento['attribute']=="norte_vulcan"){
                                    norteVulcan="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }
                                
                                if(elemento['attribute']=="elev_vulcan"){
                                    elevVulcan="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }

                                if(elemento['attribute']=="azimuth_vulcan"){
                                    azimuthVulcan="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }

                                if(elemento['attribute']=="inclinacion_vulcan"){
                                    inclinacioVulcan="<td style='background-color:#E8C3C6;'>"+elemento['errors'][0]+"</td>";
                                }
                            });                                
                            
                            document.getElementById("registrosDeErroresDeImportacionDePuntos").innerHTML=
                            '<tr>'+
                                fila+
                                nombrePropuesto+
                                campana+
                                esteVulcan+
                                norteVulcan+
                                elevVulcan+
                                azimuthVulcan+
                                inclinacioVulcan+
                            '</tr>';
                            document.getElementById("botonImportacionDePuntos").removeAttribute("disabled");
                            document.getElementById("preloader").style.height = "0px";
                            document.getElementById("img-preloader").style.display = "none";
                        }
                    })
                }
            } else {
                if (campoArchivo.length > 0) {
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").style.display = "none";
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").innerHTML = "";
                } else {
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").style.display = "block";
                    document.getElementById("validacionCampoSeleccionarArchivoExcelParaImportacion").innerHTML = "El campo seleccionar archivos es obligatorio";
                }
                document.getElementById("botonImportacionDePuntos").removeAttribute("disabled");
                document.getElementById("preloader").style.height = "0px";
                document.getElementById("img-preloader").style.display = "none";
            }
        }
</script>

<script>
    function alertaDeConfirmarParaEliminarUnPunto(idPunto, filaPunto) {
        Swal.fire({
            title: '¿Esta seguro?',
            text: "Este punto se eliminará definitivamente de la plataforma",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '¡Si, eliminar!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                eliminarPunto(idPunto, filaPunto);
            }
        })
    }

    function eliminarPunto(idPunto, filaPunto) {
        document.getElementById("preloader").removeAttribute("style");
        document.getElementById("img-preloader").style.display = "block";

        var url = '{{ route('puntos-orden-trabajo.destroy', [':idPunto']) }}';
        url = url.replace(':idPunto', idPunto);
        var csrf = '{{ csrf_token() }}';

        $.ajax({
            type: 'DELETE',
            datatype: 'json',
            url: url,
            headers: {
                'X-CSRF-TOKEN': csrf
            },
            success: function(data) {
                document.getElementById("preloader").style.height = "0px";
                document.getElementById("img-preloader").style.display = "none";

                if (data.estado == "eliminado") {
                    datatable.row(filaPunto).remove().draw(false);
                    Swal.fire({
                        icon: 'success',
                        title: '¡Punto Eliminado!',
                        text: 'El punto ' + data.nombre + ' se elimino con éxito',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                }

                if (data.estado == "no-eliminado") {
                    Swal.fire({
                        icon: 'error',
                        title: '¡Problemas con la Eliminación!',
                        text: 'El punto ' + data.nombre + ' no puede ser eliminado, tiene asociaciones que complican la operación',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                }
            },
            error: function(data) {
                console.log(data)
                document.getElementById("preloader").style.height = "0px";
                document.getElementById("img-preloader").style.display = "none";
            }
        })
    }
</script>
@stop