@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.momentJs', true)

@section('title', 'Intranet | Editar Kilometraje Del Vehículo')

@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-9">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Editar Kilometraje Del Vehículo</h3>
                    </div>

                    <form id="formularioDeCamioneta">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="contenedorDosCamposPorFilaEnLosFormulario">
                                <div class="form-group">
                                    <label for="nombre">Patente</label>
                                    <input type="text" class="form-control" id="campoPatenteCamioneta" value="{{ $camioneta->patente }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Límite Del Kilometraje</label>
                                    <input type="number" class="form-control" id="campoLimitekilometrajeCamioneta" value="{{ $camioneta->limite_kilometraje }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Kilometraje Última Mantención</label>
                                    <input type="number" class="form-control" id="campoKilometrajeUltimaMantencionCamioneta" value="{{ $camioneta->kilometraje_ultima_mantencion }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Kilometraje Proxima Mantención</label>
                                    <input type="number" class="form-control" id="campoKilometrajeProximaMantencionCamioneta" value="{{ $camioneta->kilometraje_proxima_mantencion }}" disabled="true">
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Kilometraje Estimado Diario</label>
                                    <input type="number" class="form-control" id="campoKilometrajeEstimadoDiarioCamioneta" value="{{ $camioneta->kilometraje_estimado_diario }}" readonly="true">
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Fecha Estimada De Mantención</label>
                                    <input type="date" class="form-control" id="campoFechaEstimadaProximaMantencionCamioneta" name="kilometraje_fecha_estimada_proxima_mantencion" value="{{ old('kilometraje_fecha_estimada_proxima_mantencion', $camioneta->kilometraje_fecha_estimada_proxima_mantencion) }}" readonly="true">
                                </div>

                                @if (isset($camioneta->kilometraje))
                                    <div class="form-group">
                                        <label for="nombre">Kilometraje Anterior De La Camioneta</label>
                                        <input type="number" class="form-control" id="campoAnteriorKilometrajeCamioneta" value="{{ $camioneta->kilometraje }}" readonly="true">
                                    </div>
                                @else
                                    <div class="form-group">
                                        <label for="nombre">Kilometraje Anterior De La Camioneta</label>
                                        <input type="number" class="form-control" id="campoAnteriorKilometrajeCamioneta" value="0" readonly="true">
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label for="nombre">Kilometraje De La Camioneta</label>
                                    <input type="number" class="form-control" id="campoKilometrajeCamioneta" name="kilometraje" value="{{ old('kilometraje') }}" onblur="establecerValorKilometrajeDiasRestante()" onkeypress="return filtrarCamposParaQueSoloIngreseNumeros(event,this)" onpaste="return false;" onCopy="return false" onCut="return false">
                                    <div class="invalid-feedback" id="validacionCampoKilometrajeCamioneta">

                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="nombre">Kilometraje Restantes</label>
                                    <input type="number" class="form-control" id="campoDiasRestantesCamioneta" name="kilometraje_restante" value="{{ old('kilometraje_restante', $camioneta->dias_restante) }}" readonly="true">
                                </div>
                                <input type="hidden" name="accio_modificacion" value="accionModificacionKilometraje">
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-warning" id="botonDeEdicion" onclick="editarKilometrajeCamioneta()"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Kilometraje </button>
                        </div>
                    </form>
                </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') }}">
@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;
            }
        }

        function establecerValorKilometrajeDiasRestante() {
            let proximaMantencion = document.getElementById("campoKilometrajeProximaMantencionCamioneta");
            let kilometraje = document.getElementById("campoKilometrajeCamioneta");

            if (proximaMantencion.value.trim() != "" && kilometraje.value.trim() != "") {
                document.getElementById("campoDiasRestantesCamioneta").value = parseInt(proximaMantencion.value) - parseInt(kilometraje.value);
                establecerFechaEstimadaDeMantencion()
            } else {
                document.getElementById("campoDiasRestantesCamioneta").value = "";
            }
        }

        function establecerFechaEstimadaDeMantencion() {
            let proximaMantencion = document.getElementById("campoKilometrajeProximaMantencionCamioneta").value;
            let kilometraje = document.getElementById("campoKilometrajeCamioneta").value;
            let kilometrajeEstimadaDiario = document.getElementById("campoKilometrajeEstimadoDiarioCamioneta").value;

            let dias = 0;
            if (proximaMantencion.trim() != "" && kilometraje.trim() != "" && kilometrajeEstimadaDiario.trim() != "") {
                for (let i = parseInt(kilometraje); i < parseInt(proximaMantencion); i += parseInt(kilometrajeEstimadaDiario)) {
                    dias++;
                }
                dias = dias - 1;

                let fecha = moment().add(dias, 'days');
                document.getElementById("campoFechaEstimadaProximaMantencionCamioneta").value = fecha.format('YYYY-MM-DD');
            }
        }
    </script>

    <script>
        function limpiarCamposDelFormularioDeCamioneta() {
            document.getElementById("campoKilometrajeCamioneta").value = "";
            document.getElementById("validacionCampoKilometrajeCamioneta").innerHTML = "";
            document.getElementById("campoKilometrajeCamioneta").setAttribute("class", "form-control");
        }

        function editarKilometrajeCamioneta() {
            document.getElementById("botonDeEdicion").setAttribute("disabled", true);
            var datosFormulario = $("#formularioDeCamioneta").serialize();
            generarLoading('{{asset('img/logo.png')}}')

            let campoKilometrajeCamioneta = document.getElementById("campoKilometrajeCamioneta").value;
            let campoAnteriorKilometrajeCamioneta = document.getElementById("campoAnteriorKilometrajeCamioneta").value;
            if (campoKilometrajeCamioneta.trim() != "") {
                if (parseInt(campoKilometrajeCamioneta.trim()) > 0) {
                    if (parseInt(campoKilometrajeCamioneta.trim()) >= parseInt(campoAnteriorKilometrajeCamioneta.trim())) {
                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: '{{ route('camioneta.update-sin-validacion', $camioneta) }}',
                            data: datosFormulario,
                            success: function(data) {
                                console.log(data)
                                limpiarCamposDelFormularioDeCamioneta();

                                Swal.fire({
                                        icon: 'success',
                                        title: '¡Camioneta Editada!',
                                        text: 'El kilometraje de la camioneta con la patente ' + data.patente + ' se edito con éxito',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        location.href = '{{ route('camioneta.index') }}';
                                    })
                                    .catch((error) => {
                                        location.href = '{{ route('camioneta.index') }}';
                                    });

                                document.getElementById("botonDeEdicion").removeAttribute("disabled");
                                eliminarLoading()
                            },
                            error: function(data) {
                                console.log(data)
                                document.getElementById("botonDeEdicion").removeAttribute("disabled");
                                eliminarLoading()
                            }
                        })
                    } else {
                        document.getElementById("campoKilometrajeCamioneta").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoKilometrajeCamioneta").innerHTML = "El campo kilometraje de la camioneta debe ser mayor o igual al kilometraje anterior de la camioneta.";
                        document.getElementById("botonDeEdicion").removeAttribute("disabled");
                        eliminarLoading()
                    }
                } else {
                    document.getElementById("campoKilometrajeCamioneta").setAttribute("class", "form-control is-invalid");
                    document.getElementById("validacionCampoKilometrajeCamioneta").innerHTML = "El campo kilometraje de la camioneta debe ser mayor que 0.";
                    document.getElementById("botonDeEdicion").removeAttribute("disabled");
                    eliminarLoading()
                }
            } else {
                document.getElementById("campoKilometrajeCamioneta").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoKilometrajeCamioneta").innerHTML = "El campo kilometraje de la camioneta es obligatorio.";
                document.getElementById("botonDeEdicion").removeAttribute("disabled");
                eliminarLoading()
            }
        }
    </script>
@stop