@extends('adminlte::page')

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

@section('title', 'Intranet | Editar Kilometrajes')

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

    </div>
@stop


@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-11">

                <div class="card card-primary card-tabs">
                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Editar Kilometrajes</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <table id="tablaConExportacionConFiltradoEditar" class="table table-bordered nowrap"
                                    role="grid" aria-describedby="base-style_info">
                                    <thead>
                                        <tr>
                                            <th colspan="6" style="text-align: center;">Vehículos Seleccionados
                                            </th>
                                        </tr>
                                        <tr role="row">
                                            <th>Patente</th>
                                            <th>Centro De Costo</th>
                                            <th>Kilometraje Actual</th>
                                            <th>Nuevo Kilometraje</th>
                                            <th>Estado</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyConExportacionConFiltradoEditar">

                                    </tbody>
                                </table>
                                <div id="mensajeNoVehiculosSeleccionados" style="display: none;">
                                    No hay vehículos seleccionados
                                </div>
                                <br><br>
                                <div class="dt-responsive table-responsive">
                                    <form id="formBusqueda">
                                        <div class="form-group">
                                            <label for="inputBusqueda">Buscar:</label>
                                            <input type="text" class="form-control" id="inputBusqueda" placeholder="Ingrese la patente..." maxlength="6" oninput="this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '')">
                                        </div>
                                    </form>
                                    <form id="formularioDeEditarKilometraje" enctype="multipart/form-data">
                                        @csrf
                                        @method('put')
                                        @if ($listadoCamioneta && $totalDataRecord > 0)
                                            <table id="tablaConExportacionConFiltrado" class="table table-bordered nowrap"
                                                role="grid" aria-describedby="base-style_info">
                                                <thead>
                                                    <tr>
                                                        <th colspan="12" style="text-align: center;">Listado de Vehículos
                                                        </th>
                                                    </tr>
                                                    <tr role="row">
                                                        <th>#</th>
                                                        <th>Patente</th>
                                                        <th>Centro De Costo</th>
                                                        <th>Kilometraje</th>
                                                        <th>Estado</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tablaBodyConExportacionConFiltrado">
                                                    @foreach ($listadoCamioneta as $index => $camioneta)
                                                        <tr id="fila{{ $index }}" class="filaVehiculo">
                                                            <td>
                                                                <div class="custom-control custom-checkbox">
                                                                    <input class="custom-control-input" type="checkbox"
                                                                        id="checkbox{{ $camioneta->id }}"
                                                                        name="seleccionVehiculo"
                                                                        value="{{ $camioneta->id }}">
                                                                    <label for="checkbox{{ $camioneta->id }}"
                                                                        class="custom-control-label"></label>
                                                                </div>
                                                            </td>
                                                            <td>{{ $camioneta->patente }}</td>
                                                            <td>{{ $camioneta->centroDeCosto->centro_costo }}</td>
                                                            <td>
                                                                @if (!empty($camioneta->kilometraje))
                                                                    {{ $camioneta->kilometraje }}
                                                                @else
                                                                    SIN DATA
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @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
                                                </tbody>
                                            </table>
                                        @elseif ($totalDataRecord == 0)
                                            <p>No hay vehículos registrados.</p>
                                        @else
                                            <p>No tienes permisos para ver los vehículos.</p>
                                        @endif
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary" id="botonDeEdicion"
                                onclick="editarKilometrajeCamioneta()"><i class="fas fa-edit"
                                    style="margin-right: 2px;"></i>
                                Editar Kilometraje </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>
                </div>

            </div>
        </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;
        }

        .hide_column {
            display: none;
        }

        #tablaConExportacionConFiltrado {
            display: none;
        }
    </style>
@stop

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

    <script>
        $('#inputBusqueda').on('keyup', function() {
            var textoBusqueda = $(this).val().toLowerCase();
            var mostrandoResultados = false;

            if (textoBusqueda.length >= 5) {
                $('.filaVehiculo').each(function() {
                    var patente = $(this).find('td:nth-child(2)').text().toLowerCase();
                    if (patente.indexOf(textoBusqueda) === -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                        mostrandoResultados = true;
                    }
                });

                if (mostrandoResultados) {
                    $('#tablaConExportacionConFiltrado').show();
                } else {
                    $('#tablaConExportacionConFiltrado').hide();
                }
            } else {
                $('#tablaConExportacionConFiltrado').hide();
            }
        });

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        if (getParameterByName('tab') != null && getParameterByName('tab') != undefined && getParameterByName('tab') !=
            "") {
            document.getElementById(getParameterByName('tab')).click();
        }

        function actualizarTablaVehiculosSeleccionados() {
            var $tbody = $('#tbodyConExportacionConFiltradoEditar');
            var $mensajeNoVehiculosSeleccionados = $('#mensajeNoVehiculosSeleccionados');
            var vehiculosSeleccionados = $('input[name="seleccionVehiculo"]:checked');

            var vehiculosEnTabla = $tbody.find('input[name="kilometraje"]').map(function() {
                return $(this).attr('id').split('_')[1];
            }).get();

            if (vehiculosSeleccionados.length > 0) {
                $mensajeNoVehiculosSeleccionados.hide();

                vehiculosSeleccionados.each(function() {
                    var idVehiculo = $(this).val();

                    if (vehiculosEnTabla.indexOf(idVehiculo) === -1) {
                        var $row = $(this).closest('tr');
                        var patente = $row.find('td:eq(1)').text().trim();
                        var centroDeCosto = $row.find('td:eq(2)').text().trim();
                        var kilometraje = $row.find('td:eq(3)').text().trim();
                        var estado = $row.find('td:eq(4)').text().trim();

                        $tbody.append('<tr><td>' + patente +
                            '</td><td>' + centroDeCosto +
                            '</td><td>' + kilometraje +
                            '</td><td><input type="number" class="form-control" name="kilometraje" id="campoKilometrajeCamioneta_' +
                            idVehiculo + '"' +
                            ' onkeypress="return filtrarCamposParaQueSoloIngreseNumeros(event,this)"' +
                            ' onpaste="return false;" onCopy="return false" onCut="return false" value=""> ' +
                            '<input type="hidden" name="kilometraje_anterior[]" id="campoKilometrajeAnterior_' +
                            idVehiculo + '" value="' + kilometraje + '">' +
                            '<div class="invalid-feedback" id="validacionCampoKilometrajeCamioneta_' +
                            idVehiculo + '"></div></td><td>' +
                            (estado === 'Vigente' ? '<span class="badge badge-success">' + estado +
                                '</span>' :
                                (estado === 'Dado De Baja' ? '<span class="badge badge-danger">' +
                                    estado + '</span>' :
                                    '<span class="badge badge-secondary">' + estado + '</span>')) +
                            '</td><td><button type="button" class="btn btn-danger btn-sm eliminar-fila" data-id="' +
                            idVehiculo + '"><i class="fas fa-trash-alt"></i></button></td></tr>');
                    }
                });

                $tbody.find('input[name="kilometraje"]').each(function() {
                    var idVehiculo = $(this).attr('id').split('_')[1];
                    if (!vehiculosSeleccionados.is(':checked[value="' + idVehiculo + '"]')) {
                        $(this).closest('tr').remove();
                    }
                });
            } else {
                $tbody.empty();
                $mensajeNoVehiculosSeleccionados.show();
            }

            $('.eliminar-fila').click(function() {
                var idVehiculo = $(this).data('id');
                $(this).closest('tr').remove();
                $('input[name="seleccionVehiculo"][value="' + idVehiculo + '"]').prop('checked', false);
            });
        }

        actualizarTablaVehiculosSeleccionados();
        $('input[name="seleccionVehiculo"]').change(function() {
            actualizarTablaVehiculosSeleccionados();
        });

        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;
            }
        }

        function validarCampoDelFormularioDeKilometraje(data) {
            var vehiculosSeleccionados = $('input[name="seleccionVehiculo"]:checked');

            vehiculosSeleccionados.each(function() {
                var idVehiculo = $(this).val();
                var campoKilometraje = $('#campoKilometrajeCamioneta_' + idVehiculo);
                var validacionCampoKilometraje = $('#validacionCampoKilometrajeCamioneta_' + idVehiculo);

                if (data.responseJSON.errors && data.responseJSON.errors['kilometraje_' + idVehiculo]) {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje, data.responseJSON.errors[
                        'kilometraje_' + idVehiculo]);
                    campoKilometraje.addClass("is-invalid");
                } else {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje, "");
                    campoKilometraje.removeClass("is-invalid");
                    campoKilometraje.addClass("is-valid");
                }
            });
        }

        function mostrarErrorCampoKilometraje(elemento, mensaje) {
            if (mensaje !== "") {
                elemento.html(mensaje);
            } else {
                elemento.html("");
            }
        }

        function editarKilometrajeCamioneta() {
            var vehiculosSeleccionados = $('input[name="seleccionVehiculo"]:checked');
            if (vehiculosSeleccionados.length === 0) {
                Swal.fire({
                    icon: 'error',
                    title: '¡Error!',
                    text: 'Debe seleccionar al menos un vehículo para editar el kilometraje.',
                    confirmButtonColor: "#448aff",
                    confirmButtonText: "OK"
                });
                return;
            }

            var errorEnCampos = false;
            var datosCamionetas = [];

            vehiculosSeleccionados.each(function() {
                var idVehiculo = $(this).val();
                var campoKilometraje = $('#campoKilometrajeCamioneta_' + idVehiculo);
                var validacionCampoKilometraje = $('#validacionCampoKilometrajeCamioneta_' + idVehiculo);
                var kilometraje = campoKilometraje.val().trim();
                var kilometrajeAnterior = parseFloat($('#campoKilometrajeAnterior_' + idVehiculo).val());

                if (!kilometraje) {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje,
                        "El campo de kilometraje es requerido.");
                    campoKilometraje.addClass("is-invalid");
                    errorEnCampos = true;
                } else if (parseFloat(kilometraje) <= 0) {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje,
                        "El kilometraje debe ser mayor que 0.");
                    campoKilometraje.addClass("is-invalid");
                    errorEnCampos = true;
                } else if (parseFloat(kilometraje) < kilometrajeAnterior) {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje,
                        "El campo kilometraje de la camioneta debe ser mayor o igual al kilometraje anterior de la camioneta."
                    );
                    campoKilometraje.addClass("is-invalid");
                    errorEnCampos = true;
                } else {
                    mostrarErrorCampoKilometraje(validacionCampoKilometraje, "");
                    campoKilometraje.removeClass("is-invalid");
                    campoKilometraje.addClass("is-valid");

                    datosCamionetas.push({
                        id: idVehiculo,
                        kilometraje: kilometraje
                    });
                }
            });

            if (errorEnCampos) {
                return;
            }

            var formulario = document.getElementById("formularioDeEditarKilometraje");
            var formData = new FormData(formulario);
            datosCamionetas.forEach(function(camioneta) {
                formData.append('camionetas[' + camioneta.id + '][id]', camioneta.id);
                formData.append('camionetas[' + camioneta.id + '][kilometraje]', camioneta.kilometraje);
            });
            generarLoading('{{ asset('img/logo.png') }}');

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: '{{ route('camioneta.editar-kilometraje-camionetas') }}',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data);
                    Swal.fire({
                        icon: 'success',
                        title: '¡Kilometrajes Editado!',
                        text: 'Los kilometrajes de las camionetas se editaron exitosamente.',
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    }).then((result) => {
                        location.href = '{{ route('camioneta.registro-kilometraje') }}';
                    }).catch((error) => {
                        location.href = '{{ route('camioneta.registro-kilometraje') }}';
                    });
                    eliminarLoading();
                },
                error: function(data) {
                    console.log(data);
                    validarCampoDelFormularioDeKilometraje(data);
                    eliminarLoading();
                }
            });
        }
    </script>
@stop