@extends('adminlte::page')

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

@section('title', 'Intranet | Edición Masiva de Kilometrajes')

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

    </div>
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">Edición Masiva de Kilometrajes</h3>
        </div>
        <div class="card-body">
            <div id="scroll-header-table" style="display: none;">
                <div style="color:white; visibility:hidden; font-size: 1px;">s</div>
            </div>
            <div class="table-responsive" id="table-responsive" style="margin-bottom: 20px; ">
                <table class="table table-bordered nowrap" id="datatable">
                    <thead>
                        <tr>
                            <th style="display: none;">Id Vehiculo</th>
                            <th>Patente</th>
                            <th>Centro De Costo</th>
                            <th>Nuevo Kilometraje</th>
                            <th>Kilometraje</th>
                            <th>Observación</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($listadoCamioneta)>0)
                            @foreach ($listadoCamioneta as $camioneta)
                                <tr>
                                    <td class="id-vehiculo" style="display: none;">{{ $camioneta->id }}</td>
                                    <td class="patante-vehiculo">{{ $camioneta->patente }}</td>
                                    <td class="centro-costo-vehiculo">{{ $camioneta->centroDeCosto->centro_costo}}</td>
                                    <td class="kilometraje-vehiculo">
                                        <input type="number" class="form-control" id="campoKilometrajeVehiculo_{{ $camioneta->id }}" onkeypress="return filtrarCamposParaQueSoloIngreseNumeros(event,this)" onpaste="return false;" oncopy="return false" oncut="return false" value="">
                                    </td>
                                    <td class="kilometraje-actual-vehiculo">
                                        @if (!empty($camioneta->kilometraje))
                                            {{ $camioneta->kilometraje }}
                                        @else
                                            SIN DATA
                                        @endif
                                    </td>
                                    <td class="observacion-vehiculo"></td>
                                    <td class="estado-vehiculo">
                                        @if ($camioneta->estado == 'Vigente')
                                            <span class="badge badge-success">{{ $camioneta->estado }}</span>
                                        @elseif ($camioneta->estado == 'Dado De Baja')
                                            <span class="badge badge-danger">{{ $camioneta->estado }}</span>
                                        @else
                                            <span class="badge badge-secondary">SIN DATA</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4">No hay vehículos registrados</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <button type="button" class="btn btn-primary" id="botonDeEdicion" onclick="editarKilometrajesDeVehiculos()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Kilometrajes </button>
            <a href="{{ route('camioneta.registro-kilometraje') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
        </div>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        table>tbody>tr>td {
            vertical-align: middle !important;
        }

        .mh .dropdown-menu {
            max-height: 120px;
        }

        .red-row {
            background-color: #D31225 !important;
            color: white !important;
        }

        tr.red-row td.dtfc-fixed-left {
            background-color: #D31225 !important;
        }

        #scroll-header-table {
            display: block;
            width: 100%;
            overflow-x: auto;
            margin-bottom: 20px;
        }

        #validarModalDelFormularioSubirDocumento {
            display: none;
        }

        .fila-error {
            background-color: #FFCDD2;
        }

        .fila-exito {
            background-color: #d4edda;
        }

        .item-error-rojo {
            font-weight: 700;
            color: #dc3545;
        }

        .item-error-verde {
            font-weight: 700;
            color: #28a745;
        }

        .item-error-amarillo {
            font-weight: 700;
            color: #ffc107;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        function filtrarCamposParaQueSoloIngreseNumeros(event, cantidad) {
            if (event.key != 1 && event.key != 2 && event.key != 3 && event.key != 4 && event.key != 5 && event
                .key != 6 &&
                event.key != 7 && event.key != 8 && event.key != 9 && event.key != 0) {
                return false;
            } else {
                return true;
            }
        }

        var botonesDatatable = [];

        var datatable = $("#datatable").DataTable({
            orderCellsTop: true,
            ordering: true,
            order: [
                [0, "desc"]
            ],
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Traitement en cours...",
                search: "Buscar",
                lengthMenu: "Mostrar_MENU_ Registros",
                info: "Mostrar desde _START_ hasta _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",
                },
            },
            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,
            drawCallback: function(settings) {
                var tablaResponsive=document.getElementById("table-responsive");
                if(tablaResponsive.scrollWidth>tablaResponsive.clientWidth){
                    document.querySelector("#scroll-header-table").style.display="block";
                    document.querySelector("#scroll-header-table div").style.width=tablaResponsive.scrollWidth+"px";
                }else{
                    document.querySelector("#scroll-header-table").style.display="none";
                    document.querySelector("#scroll-header-table div").style.width="0px";
                }
            },
        });
    </script>

    <script>
        function sincronizacionDeScrollerDeLaTabla(event){
            const scrollInferior = document.getElementById("table-responsive");
            const scrollSuperior = document.getElementById("scroll-header-table");
        
            const otherContainer = event.target === scrollInferior ? scrollSuperior : scrollInferior;
            otherContainer.scrollTop = event.target.scrollTop;
            otherContainer.scrollLeft = event.target.scrollLeft;
        }
        
        if(document.getElementById("table-responsive") && document.getElementById("scroll-header-table")){
            document.getElementById("table-responsive").addEventListener('scroll', sincronizacionDeScrollerDeLaTabla);
            document.getElementById("scroll-header-table").addEventListener('scroll', sincronizacionDeScrollerDeLaTabla);
            
            window.addEventListener('resize', ()=>{
                var tablaResponsive=document.getElementById("table-responsive");
                if(tablaResponsive.scrollWidth>tablaResponsive.clientWidth){
                    document.querySelector("#scroll-header-table").style.display="block";
                    document.querySelector("#scroll-header-table div").style.width=tablaResponsive.scrollWidth+"px";
                }else{
                    document.querySelector("#scroll-header-table").style.display="none";
                    document.querySelector("#scroll-header-table div").style.width="0px";
                }
            });
        }
    </script>

    <script>
        function validarLosNuevosKilometrajesDeLosVehiculos(){
            let error=false;
            let tipoDeError="Valido";
            let hayKilometrajeEditado=false;
            let listadoDeVehiculos=[];

            var allRows = datatable.rows({ search: 'none' }).nodes();
            if(allRows.length>0){
                Array.from(allRows).forEach(elemento => {
                    if(elemento.querySelector(".patante-vehiculo")){
                        let idVehiculo=elemento.querySelector(".id-vehiculo").innerHTML.trim();
                        let patente=elemento.querySelector(".patante-vehiculo").innerHTML.trim();
                        let centroDeCosto=elemento.querySelector(".centro-costo-vehiculo").innerHTML.trim();
                        let kilometrajeActual=elemento.querySelector(".kilometraje-actual-vehiculo").innerHTML.trim();
                        let kilometraje=elemento.querySelector(".kilometraje-vehiculo input").value.trim();
                        let observacion=elemento.querySelector(".observacion-vehiculo").innerHTML.trim();
                        let estado=elemento.querySelector(".estado-vehiculo").innerHTML.trim();

                        if(kilometraje.length>0){
                            hayKilometrajeEditado=true;
                            if(parseInt(kilometraje)>0){
                                if(kilometrajeActual!="SIN DATA" && kilometrajeActual!=""){
                                    if(parseInt(kilometrajeActual)>parseInt(kilometraje)){
                                        error=true;
                                        tipoDeError="datos_invalidos";
                                        elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-rojo'>El nuevo kilometraje debe mayor o igual que el kilometraje anterior</span>";
                                    }else{
                                        elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                                        let vehiculo={
                                            idVehiculo:idVehiculo,
                                            patente:patente,
                                            centroDeCosto:centroDeCosto,
                                            kilometrajeActual:kilometrajeActual,
                                            kilometraje:kilometraje,
                                            observacion:observacion,
                                            estado:estado
                                        };
                                        
                                        listadoDeVehiculos.push(vehiculo);
                                    }
                                }else{
                                    elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                                    let vehiculo={
                                        idVehiculo:idVehiculo,
                                        patente:patente,
                                        centroDeCosto:centroDeCosto,
                                        kilometrajeActual:kilometrajeActual,
                                        kilometraje:kilometraje,
                                        observacion:observacion,
                                        estado:estado
                                    };
                                    
                                    listadoDeVehiculos.push(vehiculo);
                                }
                            }else{
                                error=true;
                                tipoDeError="datos_invalidos";
                                elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-rojo'>El nuevo kilometraje debe mayor que 0</span>";
                            }
                        }else{
                            elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                        }
                    }
                });
            }else{
                error=true;
                tipoDeError="sin_registros";
            }

            /*let filas = document.getElementById('datatable').tBodies[0].querySelectorAll("tr");
            if(filas.length>0){
                filas.forEach(elemento => {  
                    if(elemento.querySelector(".patante-vehiculo")){
                        let idVehiculo=elemento.querySelector(".id-vehiculo").innerHTML.trim();
                        let patente=elemento.querySelector(".patante-vehiculo").innerHTML.trim();
                        let centroDeCosto=elemento.querySelector(".centro-costo-vehiculo").innerHTML.trim();
                        let kilometrajeActual=elemento.querySelector(".kilometraje-actual-vehiculo").innerHTML.trim();
                        let kilometraje=elemento.querySelector(".kilometraje-vehiculo input").value.trim();
                        let observacion=elemento.querySelector(".observacion-vehiculo").innerHTML.trim();
                        let estado=elemento.querySelector(".estado-vehiculo").innerHTML.trim();

                        if(kilometraje.length>0){
                            hayKilometrajeEditado=true;
                            if(parseInt(kilometraje)>0){
                                if(kilometrajeActual!="SIN DATA" && kilometrajeActual!=""){
                                    if(parseInt(kilometrajeActual)>parseInt(kilometraje)){
                                        error=true;
                                        tipoDeError="datos_invalidos";
                                        elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-rojo'>El nuevo kilometraje debe mayor o igual que el kilometraje anterior</span>";
                                    }else{
                                        elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                                        let vehiculo={
                                            idVehiculo:idVehiculo,
                                            patente:patente,
                                            centroDeCosto:centroDeCosto,
                                            kilometrajeActual:kilometrajeActual,
                                            kilometraje:kilometraje,
                                            observacion:observacion,
                                            estado:estado
                                        };
                                        
                                        listadoDeVehiculos.push(vehiculo);
                                    }
                                }else{
                                    elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                                    let vehiculo={
                                        idVehiculo:idVehiculo,
                                        patente:patente,
                                        centroDeCosto:centroDeCosto,
                                        kilometrajeActual:kilometrajeActual,
                                        kilometraje:kilometraje,
                                        observacion:observacion,
                                        estado:estado
                                    };
                                    
                                    listadoDeVehiculos.push(vehiculo);
                                }
                            }else{
                                error=true;
                                tipoDeError="datos_invalidos";
                                elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-rojo'>El nuevo kilometraje debe mayor que 0</span>";
                            }
                        }else{
                            elemento.querySelector(".observacion-vehiculo").innerHTML="<span class='item-error-verde'>Valido</span>";
                        }
                    }
                });
            }else{
                error=true;
                tipoDeError="sin_registros";
            }*/

            if(hayKilometrajeEditado==false){
                error=true;
                tipoDeError="sin_edicion";
            }

            return {error:error,tipoDeError:tipoDeError,listadoDeVehiculos:listadoDeVehiculos};
        }

        function editarKilometrajesDeVehiculos(){
            generarLoading('{{ asset('img/logo.png') }}')
            document.getElementById("botonDeEdicion").setAttribute("disabled", true);

            let error=validarLosNuevosKilometrajesDeLosVehiculos();
            if(error.error==false){
                var formData = new FormData();
                formData.append('listadoDeVehiculos', JSON.stringify(error.listadoDeVehiculos));
                var csrf = '{{ csrf_token() }}';

                $.ajax({
                    url: '{{ route('camioneta.editar-masiva-kilometraje') }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    success: function(data) {
                        eliminarLoading()
                        Swal.fire({
                                icon: 'success',
                                title: '¡Editados!',
                                text: 'Se editó el kilometraje de los vehículos',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            }).then((result) => {
                                location.reload();
                            })
                            .catch((error) => {
                                location.reload();
                            });
                    },
                    error: function(data) {
                        console.log(data)
                        document.getElementById("botonDeEdicion").removeAttribute("disabled");
                        eliminarLoading();
                    }
                })
            }else{
                if(error.tipoDeError=="sin_registros"){
                    Swal.fire({
                        icon: 'error',
                        title: '¡No Editado!',
                        text: 'No es posible editar los kilometrajes de los vehículos, no hay registros para editar',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                }else if(error.tipoDeError=="sin_edicion"){
                    Swal.fire({
                        icon: 'error',
                        title: '¡No Editado!',
                        text: 'No es posible editar los kilometrajes de los vehículos, no se ha realizado ninguna edición',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                }else if(error.tipoDeError=="datos_invalidos"){
                    Swal.fire({
                        icon: 'error',
                        title: '¡No Editado!',
                        text: 'No es posible editar los kilometrajes de los vehículos, hay datos que son invalidados o incorrectos.',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })
                }

                document.getElementById("botonDeEdicion").removeAttribute("disabled");
                eliminarLoading();
            }
        }
    </script>
@stop