@extends('layouts.app')

@push('css')
    <link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
    <link type="text/css" href="{!! asset('css/dropify.min.css') !!}" rel="stylesheet">
    <style type="text/css">
        .btn-nuevo-activo{
            color: #fff;
            width: 250px;
            overflow: hidden;
            border: none;
            background: #0c5cd7;
            color: #fff;
            padding: 10px 0px;
            margin: 0px;
            text-align: center;
            font-family: "SKFSans-Light";
            content: '+';
            text-decoration: none !important;
            font-size: 12px !important;
            height: 35px;
            /* transition: width .5s; */
        }

        .btn-nuevo-activo:hover{
            color: #fff !important;
        }
         .btn-nuevo:hover::after{
            content: 'Agregar imagen';
        }
        .btn-designacion{
            border: none;
            background: #0c5cd7;
            color: #fff;
            padding: 10px 0px;
            margin: 0px;
            text-align: center;
            font-family: "SKFSans-Light";
            content: '+';
            text-decoration: none !important;
            font-size: 10px !important;
            width: 35px;
            height: 35px;
            transition: width .5s;
            overflow: hidden;
        }

        .btn-designacion:hover{
            color: #fff;
            width: 250px;
            overflow: hidden;
        }

        .btn-designacion:hover::after{
            text-decoration: none !important;
            color: #fff;
            background: #0c5cd7;
            font-family: "SKFSans-Light";
            text-transform: uppercase;
            overflow: hidden;
        }
        .btn-designacion:hover::after{
            content: 'Agregar designación';
        }
    </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::model($quejaRespuesta, ['route' => ['quejaRespuestas.update', $quejaRespuesta->id], 'method' => 'patch', 'files' => true, 'class' => 'formulario-principal col-12']) !!}
                    <div class="empty-space-30"></div>
                    @if ($input->queja_id == 1 && $input->queja_problema_id == 1 )
                        @include('queja_respuestas.fields01')
                    @elseif ($input->queja_id == 2 && $input->queja_problema_id == 2 )
                        @include('queja_respuestas.fields02')
                    @elseif ($input->queja_id == 2 && $input->queja_problema_id == 3 )
                        @include('queja_respuestas.fields03')
                    @elseif ($input->queja_id == 3 && $input->queja_problema_id == 4 )
                        @include('queja_respuestas.fields04')
                    @elseif ($input->queja_id == 3 && $input->queja_problema_id == 5 )
                        @include('queja_respuestas.fields05')
                    @elseif ($input->queja_id == 3 && $input->queja_problema_id == 6 )
                        @include('queja_respuestas.fields06')
                    @elseif ($input->queja_id == 3 && $input->queja_problema_id == 7 )
                        @include('queja_respuestas.fields07')
                    @elseif ($input->queja_id == 4 && $input->queja_problema_id == 8 )
                        @include('queja_respuestas.fields08')
                    @elseif ($input->queja_id == 4 && $input->queja_problema_id == 9 )
                        @include('queja_respuestas.fields09')
                    @elseif ($input->queja_id == 4 && $input->queja_problema_id == 10 )
                        @include('queja_respuestas.fields10')
                    @elseif ($input->queja_id == 5 && $input->queja_problema_id == 11 )
                        @include('queja_respuestas.fields11')
                    @elseif ($input->queja_id == 5 && $input->queja_problema_id == 12 )
                        @include('queja_respuestas.fields12')
                    @elseif ($input->queja_id == 5 && $input->queja_problema_id == 13 )
                        @include('queja_respuestas.fields13')
                    @elseif ($input->queja_id == 5 && $input->queja_problema_id == 14 )
                        @include('queja_respuestas.fields14')
                    @elseif ($input->queja_id == 5 && $input->queja_problema_id == 15 )
                        @include('queja_respuestas.fields15')
                    @elseif ($input->queja_id == 6 && $input->queja_problema_id == 16 )
                        @include('queja_respuestas.fields16')
                    @elseif ($input->queja_id == 6 && $input->queja_problema_id == 17 )
                        @include('queja_respuestas.fields17')
                    @elseif ($input->queja_id == 6 && $input->queja_problema_id == 18 )
                        @include('queja_respuestas.fields18')
                    @elseif ($input->queja_id == 7 && $input->queja_problema_id == 19 )
                        @include('queja_respuestas.fields19')
                    @elseif ($input->queja_id == 7 && $input->queja_problema_id == 20)
                        @include('queja_respuestas.fields20')
                    @elseif ($input->queja_id == 7 && $input->queja_problema_id == 21 )
                        @include('queja_respuestas.fields21')
                    @elseif ($input->queja_id == 7 && $input->queja_problema_id == 22 )
                        @include('queja_respuestas.fields22')
                    @elseif ($input->queja_id == 8 && $input->queja_problema_id == 23 )
                        @include('queja_respuestas.fields23')
                    @elseif ($input->queja_id == 8 && $input->queja_problema_id == 24 )
                        @include('queja_respuestas.fields24')
                    @elseif ($input->queja_id == 8 && $input->queja_problema_id == 25 )
                        @include('queja_respuestas.fields25')
                    @elseif ($input->queja_id == 8 && $input->queja_problema_id == 26 )
                        @include('queja_respuestas.fields26')
                    @elseif ($input->queja_id == 9 && $input->queja_problema_id == 27 )
                        @include('queja_respuestas.fields27')
                    @endif

                    <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">Guardar cambios <span>-></span></button>
                </div>
            </div>
           <div class="empty-space-50"></div>
       </div>
    </div>
@endsection

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

        $( document ).ready(function() {
            $('.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();
                    let url_api  =  url + '/api/get_problemas_quejas/'+ queja_id;

                    $.get( url_api, function(data) {
                        jQuery('#queja_problema_id').html(buildProblemas(data.data));
                        $('.js-example-basic-single').select2({});
                    })
                    .done(function() {})
                    .fail(function() {})
                    .always(function() {});
                }
            });

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

            $('.dropify').dropify({
                messages: {
                    'default': 'Arrastrar o click',
                    'replace': 'Arrastra o da click en remplazar',
                    'remove':  'Eliminar',
                    'error':   '¡Ooops, algo no esta funcionando!'
                }
            });

            $('.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(),
            })

            $('#fecha_factura').on('focusout', function(){
                validacionFechaMenor('#fecha_factura',30);
            });

            $('#addImagen').on('click',function(){
                let inputfile =  `<div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                        <div class="empty-space-50"></div>
                        {!! Form::label('fotos_adjuntas', 'Archivo adjunto') !!}
                        <input type="file"
                            class="form-control input_main dropify"
                            name="fotos_adjuntas[]"
                            placeholder="Favor de adjuntar su factura">
                        </div> `;


                $('#contenedorIamgenes').append(inputfile);

                $('.dropify').dropify({
                    messages: {
                        'default': 'Arrastrar o click',
                        'replace': 'Arrastra o da click en remplazar',
                        'remove':  'Eliminar',
                        'error':   '¡Ooops, algo no esta funcionando!'
                    }
                });
            });


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

            $('#guardar-cambios-validacion-Envio').on('click', function(){
                $(".formulario-principal").submit();
            });

            @if ($input->queja_problema_id == 2 ||  $input->queja_problema_id == 3 )
                $('#addDesignacion').on('click',function(){
                    let inputfile =  `<!-- Numero Caja Field -->
                                    <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                        <div class="empty-space-50"></div>
                                        <label class="pregunta">Colocar número de caja*</label>
                                        <input type="text" class="form-control {{ $errors->has('numero_caja')?'is-invalid':'' }} input_main"
                                            name="numero_caja[]" id="numero_caja"
                                            value="{!! empty($quejaRespuesta)? '': $quejaRespuesta->numero_caja !!}"
                                            placeholder="Colocar número de caja*">
                                        <span id="numero_caja-mensaje" class="invalid-feedback"></span>
                                        @if ($errors->has('numero_caja'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('numero_caja') }}</strong>
                                        </span>
                                        @endif
                                    </div>

                                    <!-- Designación Producto Field -->
                                    <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                                        <div class="empty-space-50"></div>
                                        <label class="pregunta">Designación del producto*</label>
                                        <input type="text"
                                            class="form-control {{ $errors->has('designacion_producto')?'is-invalid':'' }} input_main"
                                            name="designacion_producto[]" id="designacion_producto"
                                            value="{!! empty($quejaRespuesta)? '': $quejaRespuesta->designacion_producto !!}"
                                            placeholder="Designación del producto*">
                                        <span id="designacion_producto-mensaje" class="invalid-feedback"></span>
                                        @if ($errors->has('designacion_producto'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('designacion_producto') }}</strong>
                                        </span>
                                        @endif
                                    </div>

                                    <!-- Cantidad Facturada Field -->
                                    <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                                        <div class="empty-space-50"></div>
                                        <label class="pregunta">Cantidad Facturada*</label>
                                        <input type="number"
                                            class="form-control {{ $errors->has('cantidad_facturada')?'is-invalid':'' }} input_main"
                                            name="cantidad_facturada[]" id="cantidad_facturada"
                                            value="{!! empty($quejaRespuesta)? '': $quejaRespuesta->cantidad_facturada !!}"
                                            placeholder="Cantidad Facturada*">
                                        <span id="cantidad_facturada-mensaje" class="invalid-feedback"></span>
                                        @if ($errors->has('cantidad_facturada'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('cantidad_facturada') }}</strong>
                                        </span>
                                        @endif
                                    </div>

                                    <!-- Cantidad Recibida Field -->
                                    <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                                        <div class="empty-space-50"></div>
                                        <label class="pregunta">Cantidad recibida*</label>
                                        <input type="number"
                                            class="form-control {{ $errors->has('cantidad_recibida')?'is-invalid':'' }} input_main"
                                            name="cantidad_recibida[]" id="cantidad_recibida"
                                            value="{!! empty($quejaRespuesta)? '': $quejaRespuesta->cantidad_recibida !!}"
                                            placeholder="Cantidad recibida*">
                                        <span id="cantidad_recibida-mensaje" class="invalid-feedback"></span>
                                        @if ($errors->has('cantidad_recibida'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('cantidad_recibida') }}</strong>
                                        </span>
                                        @endif
                                    </div>

                                    <!-- Cantidad Afectada Field -->
                                    <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                                        <div class="empty-space-50"></div>
                                        <label class="pregunta">Cantidad Afectada*</label>
                                        <input type="number"
                                            class="form-control {{ $errors->has('cantidad_esperada')?'is-invalid':'' }} input_main"
                                            name="cantidad_esperada[]" id="cantidad_esperada"
                                            value="{!! empty($quejaRespuesta)? '': $quejaRespuesta->cantidad_esperada !!}"
                                            placeholder="Cantidad Afectada*">
                                        <span id="cantidad_esperada-mensaje" class="invalid-feedback"></span>
                                        @if ($errors->has('cantidad_esperada'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('cantidad_esperada') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                    <div class="col-12" style="border-bottom: 1px solid #6c6c6c; margin-top: 25px;"></div>
                                    `;


                    $('#nuevo_registro').append(inputfile);
                });
            @endif

        });

        function aplicar_validaciones() {

            let validacion = true;

            @include('queja_respuestas.validaciones.campos_iguales_validacion')

            @if ($input->queja_problema_id != 20 && $input->queja_problema_id != 25 && $input->queja_problema_id != 18 && $input->queja_problema_id != 17 && $input->queja_problema_id != 27)
                @include('queja_respuestas.validaciones.fields_adjunto_factura_comentario_validacion')
            @endif


            @if ($input->queja_id == 1 && $input->queja_problema_id == 1 )


            @elseif ($input->queja_id == 2 && $input->queja_problema_id == 2 )


            @elseif ($input->queja_id == 2 && $input->queja_problema_id == 3 )


            @elseif ($input->queja_id == 3 && $input->queja_problema_id == 4 )


            @elseif ($input->queja_id == 3 && $input->queja_problema_id == 5 )


            @elseif ($input->queja_id == 3 && $input->queja_problema_id == 6 )


            @elseif ($input->queja_id == 3 && $input->queja_problema_id == 7 )


            @elseif ($input->queja_id == 4 && $input->queja_problema_id == 8 )


            @elseif ($input->queja_id == 4 && $input->queja_problema_id == 9 )


            @elseif ($input->queja_id == 4 && $input->queja_problema_id == 10 )


            @elseif ($input->queja_id == 5 && $input->queja_problema_id == 11 )


            @elseif ($input->queja_id == 5 && $input->queja_problema_id == 12 )


            @elseif ($input->queja_id == 5 && $input->queja_problema_id == 13 )


            @elseif ($input->queja_id == 5 && $input->queja_problema_id == 14 )


            @elseif ($input->queja_id == 5 && $input->queja_problema_id == 15 )


            @elseif ($input->queja_id == 6 && $input->queja_problema_id == 16 )


            @elseif ($input->queja_id == 6 && $input->queja_problema_id == 17 )


            @elseif ($input->queja_id == 6 && $input->queja_problema_id == 18 )


            @elseif ($input->queja_id == 7 && $input->queja_problema_id == 19 )


            @elseif ($input->queja_id == 7 && $input->queja_problema_id == 20)
                @include('queja_respuestas.validaciones.comentario')
            @elseif ($input->queja_id == 7 && $input->queja_problema_id == 21 )


            @elseif ($input->queja_id == 7 && $input->queja_problema_id == 22 )


            @elseif ($input->queja_id == 8 && $input->queja_problema_id == 23 )


            @elseif ($input->queja_id == 8 && $input->queja_problema_id == 24 )


            @elseif ($input->queja_id == 8 && $input->queja_problema_id == 25 )
                @include('queja_respuestas.validaciones.comentario')
            @elseif ($input->queja_id == 8 && $input->queja_problema_id == 26 )


            @elseif ($input->queja_id == 9 && $input->queja_problema_id == 27 )


            @endif


            if (validacion) {

                if(fecha_fuera_rango){
                    if(fecha_fuera_rango_aceptado){
                        $('#modalValidarEnvio').modal('show');
                    }else{
                        $('#modalValidarFecha').modal('show');
                    }
                }
                else{
                    $('#modalValidarEnvio').modal('show');
                }
            }
        }

        function validacionFechaMenor(picker, indicador){

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

            console.log(diferencia);
            if(diferencia > indicador){
                if(!fecha_fuera_rango_aceptado){
                    $('#modalValidarFecha').modal('show');
                }

                fecha_fuera_rango = true;
            }
        }

    </script>
@endpush