@extends('layouts.app')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
{{-- @include('layouts.datatables_css') --}}
<style>

    .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: 'Cambiar estatus';
    }

    .btn-nuevo-2 {
        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-nuevo-2:hover {
        color: #fff;
        width: 250px;
        overflow: hidden;
    }

    .btn-nuevo-2:hover::after {
        text-decoration: none !important;
        color: #fff;
        background: #0c5cd7;
        font-family: "SKFSans-Light";
        text-transform: uppercase;
        overflow: hidden;

    }


    .btn-nuevo-2:hover::after {
        content: 'Cambiar asignación';
    }
</style>
@endpush

@php
    $user =  Auth::user();
@endphp


@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-12 col-lg-12 col-xl-12">
                <h3 class="titulo-modulo texto-obscuro">Detalle de quejas
                    @if($user->perfil_quejas == "DER" || $user->perfil_quejas == "TER" || $user->perfil_quejas == "Administrador" || $user->perfil_quejas == "DER DCD" )
                        <a href="#" class="btn-nuevo-activo btn-cambiar-estatus">⬄ Cambiar estatus</a>
                    @endif
                    @if ($user->perfil_quejas == "SER")

                    {{-- @dd($user->perfil_quejas); --}}
                        @if ($quejaRespuesta->asignado_a == 'DER DCD' && ($quejaRespuesta->estatus == 'Si procede' || $quejaRespuesta->estatus == 'No procede pero se procesará NC'))
                        <a href="#" class="btn-nuevo-activo btn-cambiar-estatus">⬄ Agregar nota de Crédito</a>
                        @elseif ($quejaRespuesta->asignado_a == "TER" && ($quejaRespuesta->estatus == 'Si procede' || $quejaRespuesta->estatus == 'No procede pero se procesará NC'))
                            <a href="#" class="btn-nuevo-activo btn-cambiar-estatus">⬄ Agregar nota de Crédito</a>
                        @else
                            <a href="#" class="btn-nuevo-activo btn-cambiar-estatus">⬄ Cambiar estatus</a>
                        @endif
                    @endif
                </h3>
                <h3 class="titulo-modulo texto-obscuro float-right">
                    @if($user->perfil_quejas == "DER" || $user->perfil_quejas == "SER" || $user->perfil_quejas == "TER" || $user->perfil_quejas == "Administrador" || $user->perfil_quejas == "DER DCD" )
                        <a href="#" class="btn-nuevo-activo btn-cambiar-asignacion" style="margin-top: -50px;">⬌ Cambiar asignación</a>
                    @endif
                </h3>
                <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('quejaRespuestas') }}">Quejas</a><span
                        class="breadcrumb-item active">Detalle quejas</span></nav>
            </div>
        </div>
        <div class="row">
            <div class="empty-space-30"></div>
            @include('queja_respuestas.show_fields')
            <div class="empty-space-30"></div>
        </div>
        <div class="empty-space-50"></div>
        <hr>
        <div class="row">

            @if($quejaRespuesta->guia_envio_husillos != null)
            <!-- Tipo Error Field -->
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <div class="empty-space-20"></div>
                {!! Form::label('guia_envio_usillos', 'Guía de envío de usillos Cargada:') !!}
                <a href="{!! asset('/adjuntos/' . $quejaRespuesta->guia_envio_husillos) !!}">Guia Cargada</a>
            </div>
            @endif

            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                {!! Form::open(['route' => ['quejaRespuestas.subir_guia', $quejaRespuesta->id],'class' =>
                '','id' => 'form-asignacion',  'files' => 'true']) !!}
                @csrf

                    <label for="">Guía de envío de husillo</label>
                    <input type="file" name="guia_envio_husillos" id="guia_envio_husillos">
                    <div class="empty-space-30"></div>
                    {!! Form::submit('Subir Archivo', ['class' => 'btn-nuevo-activo']) !!}

                    {{-- <a href="#" class="btn-nuevo-activo btn-cambiar-estatus">⬄ Cambiar estatus</a> --}}

                {!! Form::close() !!}
            </div>

        </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">Volver <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

    @php
    if( Auth::user()->perfil_quejas == 'SER'){
        $estatus = ['Atendiendo','Si procede','No procede','Si procede pero no se procesará NC','No procede pero se procesará NC','Rechazada','Cerrada'];
    }else{
        $estatus = ['Atendiendo','Si procede','Si procede pero no se procesará NC','No procede','No procede pero se procesará NC', 'Rechazada',];
    }

    $asignacion = ['SER','DER','DER DCD','TER', 'perfil_quejas','Atención recibida','Servicio','Otro'];
    @endphp
    @section('modales')
    <div class="modal fade" id="modalCambioEstatus" tabindex="-1" role="dialog"
        aria-labelledby="modalCambioEstatusLabel" 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="modalCambioEstatusLabel">Cambio Estatus</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    {!! Form::open(['route' => ['quejaRespuestas.cambiar_estatus', $quejaRespuesta->id],'class' =>
                    '','id' => 'form-estatus', 'files' => 'true']) !!}
                    @csrf
                    <label class="pregunta">Selecciona el estatus de la queja.</label>
                    <select name="estatus" id="estatus" class="js-example-basic-single w-100 input_main">
                        <option value="">Selecciona el estatus</option>
                        @foreach ($estatus as $value)
                                @if ($quejaRespuesta->estatus == $value)
                                    <option value="{{ $value }}" selected>{{ $value }}</option>
                                @else
                                    <option value="{{ $value }}">{{ $value }}</option>
                                @endif
                        @endforeach
                    </select>


                    <div class="empty-space-10"></div>

                    <label class="CPP">CPP</label>
                    <input  type="text"
                            placeholder="Número queja interno"
                            class="form-control input_main"
                            name="CPP"
                            id="CPP"
                            value="{{  $quejaRespuesta->cpp != '' ? $quejaRespuesta->cpp: '' }}"
                            >
                    <span id="CPP-mensaje" class="invalid-feedback"></span>

                    @if (Auth::user()->perfil_quejas == 'SER')
                        <div class="empty-space-10"></div>
                        <div id="contenedor_nota_credito" style="display: none">
                            <label class="pregunta">Ingresa el número de nota de credito</label>
                            <input  type="text" class="form-control input_main"
                                    name="numero_nota_credito" id="numero_nota_credito"
                                    placeholder="Número de nota de crédito">
                            <span id="numero_nota_credito-mensaje" class="invalid-feedback"></span>
                            <div class="empty-space-10"></div>

                            <label class="pregunta">Adjunta la nota de crédito</label>
                            <input  type="file" class="form-control input_main"
                                    name="adjunto_nota_credito" id="adjunto_nota_credito"
                                    placeholder="Adjunta la nota de crédito">
                            <span id="adjunto_nota_credito-mensaje" class="invalid-feedback"></span>
                        </div>
                    @endif

                    <div id="contenedor_pod" style="display: none">
                        <label class="pregunta">Adjunta el POD</label>
                        <input type="file" class="form-control input_main"
                                    name="adjunto_pod" id="adjunto_pod"
                                    placeholder="Adjunta el POD">
                    </div>

                    <div class="empty-space-10"></div>
                    <div class="empty-space-10"></div>
                    <textarea name="comentario_cambio_estatus"
                        id="comentario_cambio_estatus"
                        cols="30"
                        rows="10"
                        class="form-control {{ $errors->has('comentarios')?'is-invalid':'' }} input_main"
                        placeholder="Descripción del Problema"
                        >{{  $quejaRespuesta->comentario_cambio_estatus != '' ? $quejaRespuesta->comentario_cambio_estatus: '' }}</textarea>

                    <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="" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span>
                                    <-</span> </a> <button type="submit" id="guardar-cambios-estatus"
                                        class="btn btn-principal ">Aceptar <span>-></span></button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>

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

    <div class="modal fade" id="modalCambioAsignacion" tabindex="-1" role="dialog"
        aria-labelledby="modalCambioAsignacionLabel" 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="modalCambioEstatusLabel">Cambio Asignación</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    {!! Form::open(['route' => ['quejaRespuestas.cambiar_asignacion', $quejaRespuesta->id],'class' =>
                    '','id' => 'form-asignacion']) !!}
                    @csrf
                    <select name="asignado_a" id="asignado_a" class="js-example-basic-single w-100 input_main">
                        <option value="">Selecciona una opción</option>
                        @foreach ($asignacion as $value)
                                @if ($quejaRespuesta->asignado_a == $value)
                                    <option value="{{ $value }}" select>{{ $value }}</option>
                                @else
                                    <option value="{{ $value }}">{{ $value }}</option>
                                @endif
                        @endforeach
                    </select>



                    <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="" class="btn btn-secundario text-white" data-dismiss="modal">Cancelar <span>
                                    <-</span> </a> <button type="submit" id="guardar-cambios-asignacion"
                                        class="btn btn-principal ">Aceptar <span>-></span></button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>

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


    @endsection

    @push('scripts')
    <script src="{{ asset('js/validaciones/validaciones.js') }}"></script>

    <script>

        let habilitados = 0;
        let tipo_usuario = "{{ Auth::user()->perfil_quejas }}";

        $(document).ready(function() {
            $(".btn-cambiar-estatus").click(function(){
                $("#modalCambioEstatus").modal();
                var nombre = $(this).data('name');
                var url = $(this).data('url');
                $("#nombre_modal").text(nombre);
                $("#form-eliminar").attr('action',url);
            })

            $(".btn-cambiar-asignacion").click(function(){
                $("#modalCambioAsignacion").modal();
                var nombre = $(this).data('name');
                var url = $(this).data('url');
                $("#nombre_modal").text(nombre);
                $("#form-asignacion").attr('action',url);
            })

            $('#estatus').on('change', function(){
                console.log($(this).val());
                let seleccion = $(this).val();
                if(tipo_usuario == 'SER' && (seleccion == 'No procede pero se procesará NC' || seleccion == 'Si procede')){
                    $('#contenedor_nota_credito').show();
                    habilitados = 1;
                }
                else{
                    $('#contenedor_nota_credito').hide();
                    habilitados = 0;
                }

                $('#contenedor_pod').hide();

                if( (tipo_usuario == 'SER' || tipo_usuario == 'DER') && (seleccion == 'No procede' || seleccion == 'Rechazada')){
                    $('#contenedor_pod').show();
                }

            });

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


            @if(Auth::user()->perfil_quejas == 'SER' && ($quejaRespuesta->estatus == 'Si procede' || $quejaRespuesta->estatus == 'No procede pero se procesará NC'))
                $('#contenedor_nota_credito').show();
                habilitados = 1;
            @endif

        });

        function aplicar_validaciones() {

            let validacion = true;

            if(!validar_texto('#CPP',0,1))
            {
                validacion = false;
                $("#CPP-mensaje").text('Debes agregar el número de queja interno.');
                $("#CPP-mensaje").slideDown();
                $("#CPP").addClass('is-invalid');
            }else{
                $("#CPP-mensaje").slideUp();
                $("#CPP-mensaje").text('');
                $("#CPP").removeClass('is-invalid');
            }

            if(habilitados)
            {
                if(!validar_texto('#adjunto_nota_credito',0,1))
                {
                    validacion = false;
                    $("#adjunto_nota_credito-mensaje").text('Debes adjuntar el archivo de la nota de crédito.');
                    $("#adjunto_nota_credito-mensaje").slideDown();
                    $("#djunto_nota_credito").addClass('is-invalid');
                }else{
                    $("#adjunto_nota_credito-mensaje").slideUp();
                    $("#adjunto_nota_credito-mensaje").text('');
                    $("#adjunto_nota_credito").removeClass('is-invalid');
                }

                if(!validar_texto('#numero_nota_credito',0,1))
                {
                    validacion = false;
                    $("#numero_nota_credito-mensaje").text('Debes agregar el número de la nota de crédito.');
                    $("#numero_nota_credito-mensaje").slideDown();
                    $("#numero_nota_credito").addClass('is-invalid');
                }else{
                    $("#numero_nota_credito-mensaje").slideUp();
                    $("#numero_nota_credito-mensaje").text('');
                    $("#numero_nota_credito").removeClass('is-invalid');
                }
            }

            console.log(validacion);
            if (validacion)
            {
                $("#form-estatus").submit();
            }
        }

        @foreach (session('flash_notification', collect())->toArray() as $message)
            @if($message["level"] == "success")
            toastr.success('{{ $message["message"] }}', {timeOut: 1000000})
            @else
            toastr.error('{{ $message["message"] }}', {timeOut: 10000})
            @endif
            {{ session()->forget('flash_notification') }}
        @endforeach
    </script>
    @endpush