@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />


<style>
    .pregunta{
        color: #0b5cd7 !important;
        font-family: "SKFSans-Light" !important;
    }

    .tooltip {
        display: inline-block;
        cursor: pointer;
        opacity: 1 !important;
        width: 30px; /* Ajusta el tamaño del botón */
        height: 30px; /* Ajusta el tamaño del botón */
        border-radius: 50%; /* Hace que el botón sea circular */
        background-color: black; /* Color de fondo del botón */
        color: transparent; /* Color del ícono */
    }

        .descripcion {
        visibility: hidden;
        width: 200px;
        background-color: white;
        font-size: 15px;
        color: black;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        left: 100%;
        margin-left: 15px;
        opacity: 0;
        transition: opacity 0.3s;
        margin-top: -10px;
    }

    .tooltip .icono-info {
        font-size: 18px;
        color: #ececec;
        font-size: 24px;
        margin-left: 5px;
    }

    .tooltip:hover .descripcion {
        visibility: visible;
        opacity: 1;
    }


</style>

@endpush

@section('content')
<div class="container ml-0 mr-0 pl-0 pr-0 row">
    <div
        class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
        <div class="row row-bottom">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <h3 class="texto-obscuro">Creación de queja</h3>
                <nav class="breadcrumb"><a class="breadcrumb-item"
                        href="{{ route('quejaRespuestas.index')  }}">Quejas</a><span
                        class="breadcrumb-item active">Creación de queja</span></nav>
            </div>
        </div>
        <div class="row">
            {!! Form::open(['route' => 'quejaRespuestas.create_filtrado','class' => 'formulario-principal
            col-12','files' => true]) !!}
            <div class="empty-space-30"></div>
            @include('queja_respuestas.fields')
            <div class="empty-space-30"></div>
            {!! Form::close() !!}
        </div>
        <div class="empty-space-50"></div>
        <div class="row botonera-inferior">
            <div class="col-12 p-0 m-0 text-right botonera-formulario">
                <a href="{{ url('quejaRespuestas') }}" class="btn btn-secundario text-white width-250">Cancelar <span>
                        <-</span> </a> <button type="button" id="guardar-cambios" class="btn btn-principal width-250">
                            Continuar<span>-></span></button>
            </div>
        </div>
        <div class="empty-space-50"></div>
    </div>
</div>
@endsection

@section('modales')

<div class="modal fade" id="modalFecha" tabindex="-1" role="dialog" aria-labelledby="modalFechaLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFechaLabel">Fecha fuera de tiempo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h3>¡Advertencia!</h3>
                <p>La colocación de la queja excede los 30 días que SKF brinda para el registro de queja por lo cual ya no es posible el registro. En caso de duda consultar a su representante de atención a cliente o Ingeniero de Ventas.</p>
            </div>
            <div class="empty-space-50"></div>
                {{-- <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('users') }}" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span><-</span></a>
                    <button type="submit" id="aceptar-fecha" class="btn btn-principal ">Aceptar <span>-></span></button>
                </div> --}}

        </div>
    </div>
</div>


<div class="modal fade" id="modalFechaSecundario" tabindex="-1" role="dialog" aria-labelledby="modalFechaSecundarioLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFechaSecundarioLabel">El producto se encuentra fuera de garantía</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Puede proceder su queja si aún lo desea, sin embargo, su fecha de factura es mayor al periodo establecido para su garantía.</p>
            </div>
            <div class="empty-space-50"></div>
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <button type="submit" id="aceptar-fecha-secundario" class="btn btn-principal ">Aceptar <span>-></span></button>
                </div>

        </div>
    </div>
</div>


@endsection


@push('scripts')
<script src="{{ asset('js/select2/select2.min.js') }}"></script>
<script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
<script>
    var fecha_fuera_rango_aceptado = false;
    var fecha_fuera_rango = false;
    var facturaInput = false;

    const url = "{{ url('/') }}";
    const descripciones_quejas =  {!!  $quejas !!};
    const descripciones_quejas_problemas =  {!! $quejasProblemas !!};
    const ser = `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                <option value="2" data-select2-id="select2-data-19-wxaf">Cantidad de producto</option>
                <option value="3" data-select2-id="select2-data-20-dv97">Empaque unitario</option>
                <option value="5" data-select2-id="select2-data-22-qxdo">Entrega de Material</option>
                <option value="6" data-select2-id="select2-data-23-4385">Facturación</option>
                <option value="7" data-select2-id="select2-data-24-uay2">Producto</option>`;

    const der = `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                <option value="2" data-select2-id="select2-data-19-wxaf">Cantidad de Material</option>
                <option value="4" data-select2-id="select2-data-21-5st6">Empaque- Embalaje</option>
                <option value="5" data-select2-id="select2-data-22-qxdo">Entrega de Material</option>
                <option value="9" data-select2-id="select2-data-26-ls68">Otro</option>`;

    const  ter =    `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                    <option value="7" data-select2-id="select2-data-18-p9yi" selected>Producto</option>
                    <option value="8" data-select2-id="select2-data-18-p9yi" selected>Servicio</option>`;

    const empaque_unitrario  = `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                                <option value="6" data-select2-id="select2-data-18-p9yi" selected>El material llegó en bolsa</option>`;

    const producto_ser  =   `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                            <option value="21" data-select2-id="select2-data-50-hupw">Producto Equivocado</option>`;


    const todo_si  =   `<option value="" data-select2-id="select2-data-8-db05">Selecciona una opción</option>
                        <option value="1" data-select2-id="select2-data-50-hupw">Atención recibida</option>
                        <option value="8" data-select2-id="select2-data-50-hupw">Servicio</option>
                        <option value="9" data-select2-id="select2-data-50-hupw">Otro</option>`;


        $( document ).ready(function() {

            $("#aceptar-fecha-secundario").click(function(){
                $('#modalFechaSecundario').modal('hide');
            });

            $("#facturaInput").hide();
            $("#pregunta1").hide();
            $("#pregunta2").hide();
            $("#pregunta3").hide();
            $("#pregunta4").hide();
            $("#pregunta5").hide();

            var pregunta5 = 0;
            var mayor = 0;

            $('#factura-fecha').on('focusout', function(){
               
                validacionFechaMenor('#factura-fecha', 30);
            });

            $('.date').datetimepicker({
                format: 'DD-MM-YYYY',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true,
                maxDate: moment(),
            })

            // $('#aceptar-fecha').on('click', function(){
            //     fecha_fuera_rango_aceptado = true;
            //     $('#modalValidarFecha').modal('hide');
            // });

            $('.js-example-basic-single').select2({});

            $('.js-example-basic-single').on('change', function() {
                if($(this).attr('id') == 'queja_id' && $(this).val() != ''){
                    let queja_id = $(this).val();

                    // if(queja_id == 1 || queja_id == 8 || queja_id == 9)
                    // {
                    //     // if($('#facturado_coincide').val() == 'Si' && $('#material_recibido_coincide').val() == 'Si' && $('#cumple_especificaciones_tecnicas').val() == 'Si'){
                    //     //     $("#pregunta1").hide();
                    //     //     $("#pregunta2").hide();
                    //     //     $("#pregunta3").hide();
                    //     // }else   if($('#facturado_coincide').val() == 'Si' && $('#material_recibido_coincide').val() == 'No' && ($('#cumple_especificaciones_tecnicas').val() == 'Si' || $('#cumple_especificaciones_tecnicas').val() == '') ){
                    //     //     $("#pregunta1").show();
                    //     //     $("#pregunta2").show();
                    //     //     $("#pregunta3").hide();
                    //     // }else{
                    //     //     $("#pregunta1").show();
                    //     //     $("#pregunta2").show();
                    //     //     $("#pregunta3").show();
                    //     // }
                    // }
                    $("#pregunta4").hide();
                    $("#pregunta5").hide();
                    pregunta5 = 0;


                    if(queja_id != 10 && queja_id != 9){
                        $("#facturaInput").show();
                    }else{
                        $("#facturaInput").hide();
                    }

                    if(queja_id == 2){
                        $("#pregunta5").show();
                        pregunta5 = 1;
                    }else{
                        $("#pregunta5").hide();
                    }


                    // if($('#facturado_coincide').val() == 'Si' && $('#material_recibido_coincide').val() == 'No' && queja_id == 2){
                    //     $('#descripcion').html('Cantidad de Material');
                    // }else{
                    //     $('#descripcion').html(descripciones_quejas[queja_id-1].nombre);
                    // }



                    let url_api  =  url + '/api/get_problemas_quejas/'+ queja_id;


                    if( 3 == queja_id){


                        jQuery('#queja_problema_id').html(empaque_unitrario);
                        $('.js-example-basic-single').select2({});

                    }
                    else if ( 7 == queja_id )
                    {
                        // jQuery('#queja_problema_id').html(producto_ser);

                        $.get( url_api, function(data) {
                            const filteredData = data.data.filter(item => item.id !== 22);

                            jQuery('#queja_problema_id').html(buildProblemas(filteredData));
                            $('.js-example-basic-single').select2({});
                        })
                        $('.js-example-basic-single').select2({});

                        console.log($('#facturado_coincide').val() == 'Si' && $('#material_recibido_coincide').val() == 'No');
                    }
                    else{
                        $.get( url_api, function(data) {
                            jQuery('#queja_problema_id').html(buildProblemas(data.data));
                            $('.js-example-basic-single').select2({});
                        })
                        .done(function() {})
                        .fail(function() {})
                        .always(function() {});
                    }



                }
                else if(($(this).attr('id') == 'facturado_coincide')|| ($(this).attr('id') == 'facturado_coincide2')  && $(this).val() != '')
                {
                    if($(this).val() == 'No')
                    {
                        $("#pregunta2").hide();
                        $("#pregunta3").hide();
                        $("#pregunta4").hide();

                        // hablitarOpciones();
                        if(pregunta5 == 0){
                           agregarOpciones(ser);
                        }
                        //
                    }
                    else
                    {
                        if(pregunta5 == 1){
                            $("#pregunta4").show();
                        }else{ 
                            $("#pregunta2").show();
                            $("#pregunta3").show();
                            // hablitarOpciones();
                            agregarOpciones(ser);
                            validarSis()? agregarOpciones(todo_si):'';
                        }



                    }
                }
                else if($(this).attr('id') == 'material_recibido_coincide' && $(this).val() != '')
                {
                    if($(this).val() == 'No')
                    {
                        $("#pregunta3").hide();
                        $('#queja_id option[value="6"]').attr('disabled','disabled')
                        $('#queja_id option[value="8"]').attr('disabled','disabled')
                        agregarOpciones(der);
                    }
                    else
                    {
                        $("#pregunta3").show();
                        //hablitarOpciones();
                        validarSis()? agregarOpciones(todo_si):'';
                    }
                }
                else if($(this).attr('id') == 'cumple_especificaciones_tecnicas' && $(this).val() != '')
                {
                    let url_api  =  url + '/api/get_problemas_quejas/7';

                    if($(this).val() == 'No')
                    {
                        agregarOpciones(ter);

                        $.get( url_api, function(data) {
                            jQuery('#queja_problema_id').html(buildProblemas(data.data));
                            $('.js-example-basic-single').select2({});
                        })
                        .done(function() {})
                        .fail(function() {})
                        .always(function() {});
                    }
                    else
                    {
                        //$("#pregunta3").show();
                        //hablitarOpciones();
                        validarSis()? agregarOpciones(todo_si):'';
                    }
                }
                else if($(this).attr('id') == 'queja_problema_id' && $(this).val() != ''){
                    let queja_id = $(this).val();
                    console.log(queja_id);
                    const quejaObjeto = descripciones_quejas_problemas.find(item => item.id == queja_id);
                    console.log(quejaObjeto);

                    if (quejaObjeto && quejaObjeto.descripcion !== null) {
                        console.log(quejaObjeto.descripcion);
                        $('#descripcion').html(quejaObjeto.descripcion);
                        if(queja_id == 3) {
                            $("#mayor").show();
                            $("#menor").hide();
                        }else{
                            $("#menor").show();
                            $("#mayor").hide();
                        }
                    }else{
                        $('#descripcion').html(quejaObjeto.nombre);

                    }

                }
            });

            $('#guardar-cambios').on('click',function(event){
                event.preventDefault();
                aplicar_validaciones();
                console.log('vamos a guardar');

            });

        });

        function validarSis(){
            if($('#facturado_coincide').val() == 'Si' && $('#material_recibido_coincide').val() == 'Si' && $('#cumple_especificaciones_tecnicas').val() == 'Si' )
                return true;
            return false;
        }

        function hablitarOpciones(){
            $("#queja_id option:selected").siblings().removeAttr('disabled');
        }

        function agregarOpciones(opciones){
            $("#queja_id").html(opciones);
            $('.js-example-basic-single').select2({});
        }

        function buildProblemas(data)
        {
            console.log(data);
            let problemas = `<option>¿Tipo de problema?</option>`;

            jQuery.each(data, function(key, value) {
                problemas += `<option value="${value.id}">${value.nombre}</option>`;
            });

            return problemas;
        }


        function aplicar_validaciones() {

            let validacion = true;

            const complementos = $('#queja_id').val();
            const problemaID = $('#queja_problema_id').val();

            console.log('problema id:',problemaID);

            if(complementos != 10 && complementos != 9){
                    if(!validar_texto('#factura-fecha',0,1)){
                    $("#factura-fecha-mensaje").text('Debes ingresar una fecha válida.');
                    $("#factura-fecha-mensaje").slideDown();
                    validacion = false;
                    $("#factura-fecha").addClass('is-invalid');
                    $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important'); 
                }else{
                    $("#factura-fecha-mensaje").slideUp();
                    $("#factura-fecha-mensaje").text('');
                    $("#factura-fecha").removeClass('is-invalid');
                    $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
                }
            }


           

            if(fecha_fuera_rango && problemaID != 19){
                $('#modalFecha').modal('show');
                validacion = false;
            }

            if(pregunta5 == 1){
                if($('#facturado_coincide2').select2('data')[0].id == 0)
                {
                    $("#facturado_coincide-mensaje").text('Debes seleccionar una opción valida.');
                    $("#facturado_coincide-mensaje").slideDown();
                    validacion = false;
                    $("#facturado_coincide").addClass('is-invalid');
                    $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
                }else{
                    $("#facturado_coincide-mensaje").slideUp();
                    $("#facturado_coincide-mensaje").text('');
                    $("#facturado_coincide").removeClass('is-invalid');
                    $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
                }

                if($('#cantidad_menor').select2('data')[0].id == 0)
                {
                    $("#cantidad_menor-mensaje").text('Debes seleccionar una opción valida.');
                    $("#cantidad_menor-mensaje").slideDown();
                    validacion = false;
                    $("#cantidad_menor").addClass('is-invalid');
                    $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
                }else{
                    $("#cantidad_menor-mensaje").slideUp();
                    $("#cantidad_menor-mensaje").text('');
                    $("#cantidad_menor").removeClass('is-invalid');
                    $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
                }
            }



            // if($('#facturado_coincide').select2('data')[0].id == 0)
            // {
            //     $("#facturado_coincide-mensaje").text('Debes seleccionar una opción valida.');
            //     $("#facturado_coincide-mensaje").slideDown();
            //     validacion = false;
            //     $("#facturado_coincide").addClass('is-invalid');
            //     $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
            // }else{
            //     $("#facturado_coincide-mensaje").slideUp();
            //     $("#facturado_coincide-mensaje").text('');
            //     $("#facturado_coincide").removeClass('is-invalid');
            //     $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
            // }

            if($('#queja_id').select2('data')[0].id == 0)
            {
                $("#queja_id-mensaje").text('Debes seleccionar una opción valida.');
                $("#queja_id-mensaje").slideDown();
                validacion = false;
                $("#queja_id").addClass('is-invalid');
                $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
            }else{
                $("#queja_id-mensaje").slideUp();
                $("#queja_id-mensaje").text('');
                $("#queja_id").removeClass('is-invalid');
                $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
            }

            if($('#queja_problema_id').select2('data')[0].id == 0)
            {
                $("#queja_problema_id-mensaje").text('Debes seleccionar una opción valida.');
                $("#queja_problema_id-mensaje").slideDown();
                validacion = false;
                $("#queja_problema_id").addClass('is-invalid');
                $(".select2-container--default.select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
            }else{
                $("#queja_problema_id-mensaje").slideUp();
                $("#queja_problema_id-mensaje").text('');
                $("#queja_problema_id").removeClass('is-invalid');
                $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
            }

            console.log(validacion);
            if (validacion) {
                $(".formulario-principal").submit();
            }
        }


        function validacionFechaMenor(picker, indicador){

                let fecha_seleccionada = $(picker).val();
                fecha_seleccionada = moment(fecha_seleccionada, 'DD-MM-YYYY');
                let fecha_actual = moment();

                const queja = $('#queja_problema_id').val();
                console.log('queja', queja);
                
                if( queja == 19){
                    indicadorSecundario = 360;
                }

                let diferencia = fecha_actual.diff(fecha_seleccionada, 'days');

                console.log('indicador', indicador)
                console.log('diferencia', diferencia);
                if(diferencia > indicador && queja != 19){
                    $('#modalFecha').modal('show');
                    fecha_fuera_rango = true;
                }else{
                    fecha_fuera_rango = false;
                }

                if(diferencia > indicadorSecundario){
                    $('#modalFechaSecundario').modal();
                }
        }

</script>
@endpush