@extends('layout.publico')
@section('content')
    @if($noExiste ?? false == true)
        <h1>la calificación que intentas buscar no existe</h1>
    @else
        <div class="container">
            <div class="card">
                @include('page.publico.calificacion.actualizar_detalle.resumen')
            </div>
            <div class="card">
                @include('page.publico.calificacion.actualizar_detalle.formulario')
            </div>
        </div>
        @include('page.publico.popup.forma_foto_calificacion')
    @endif
    <script>
        jQuery('select').each(function () {
            const isNivelDeRuido = jQuery(this).attr('id') === 'nivel_de_ruido';

            for (let i = 10; i >= 1; i--) {
                jQuery(this).append(jQuery('<option>', {
                    value: i,
                    text: isNivelDeRuido
                        ? (i === 10 ? `${i} (Menos ruidosa)` : i === 1 ? `${i} (Muy ruidosa)` : i)
                        : i
                }));
            }
        });

        let contadorImagenes = 0;
        const maxImagenes = 5;
        // Función para agregar imagen
        $('#agregarImagen').click(function () {
            if (contadorImagenes < maxImagenes) {
                let clase = 'col-md-4 mb-3';
                if (contadorImagenes === 3) {
                    clase = 'col-md-4 mb-3 offset-md-2';
                }
                const inputImagen = `
                    <div class="${clase}">
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="archivo[${contadorImagenes}]" accept="image/*,video/*">
                        </div>
                    </div>
                `;
                $('#contenedorImagenes').append(inputImagen);
                contadorImagenes++;

                if (contadorImagenes >= maxImagenes) {
                    $(this).hide();
                }
            }
        });

        jQuery('#enviarActualizacion').on('click', function () {
            if (system_validarcampos("formDetalle")) {
                if (!$('#autorizacion').is(':checked')) {
                    Swal.fire({
                        title: 'Debes aceptar los términos y condiciones.',
                        icon: 'error',
                        confirmButtonText: 'Aceptar'
                    });
                } else {
                    MostrarLoader()
                    let formData = new FormData(document.getElementById('formDetalle'));
                    axios.post('/calificacion/llanta/crear/detalle', formData, {}).then(function (resp) {
                        OcultarLoader()
                        if (resp.data.error === 0) {
                            Swal.fire("Calificación editada.", '', 'success').then(function () {
                                window.location.reload();
                            });
                        } else {
                            notificarUsuario(resp.data.mensaje);
                        }
                    })
                }
            }
        });

        $(document).ready(function(){
            // Cuando se hace clic en el botón con clase "barra-boton"
            $(".barra-boton").click(function(){
                // Muestra el modal con id "popup-forma-foto-calificacion"
                $("#popup-forma-foto-calificacion").modal('show');
            });
        });
    </script>

    <style>
        .barra-progresiva {
            width: 60px;
            background-color: #989898;
            margin-bottom: 10px;
            display: inline-block;
            height: 13px;
            margin-top: 4px;
        }

        .barra-progresiva-color {
            background-color: #f53636;
            height: 13px;
        }

        .label-formulario {
            font-size: 17px !important;
            margin-left: 13%;
        }

        .resumenParrafo {
            font-size: 16px !important;
        }

        .tituloPromedio {
            font-size: 17px;
        }

        .numeroPromedio {
            font-size: 16px;
        }

        .barra-contenedor {
            background-color: #E6E6E6;
            border-radius: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            max-width: 100%;
            margin: 20px auto;
        }

        .barra-texto {
            font-size: 25px;
        }

        .barra-boton {
            background-color: #EF132E;
            color: white;
            border: none;
            padding: 8px 30px 8px 30px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 18px;
        }

        .barra-boton:hover {
            background-color: #d23935;
        }

        @media (max-width: 768px) {
            .barra-boton {
                font-size: 12px;
            }

            .barra-texto {
                font-size: 17px;
            }
        }
    </style>
@endsection