@extends('layouts.panel')
@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">

                <div class="card-body text-center mt-2">
                    <h2 class="text-center fw-bolder">GESTIONAR TURNO</h2>


                    <div class="d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-relief-info btn-lg text-center round btn-nombres-atencion">MUNI
                            DEV - 00XXX</button>

                    </div>
                    <div class="d-flex justify-content-center align-items-center">


                        <h1 class="ticket-numero-servicio">XXXXXX</h1>
                    </div>
                    <hr>

                    <div class="mt-3">
                        <h6 class="fw-bolder mt-1">DOCUMENTO: <span class="texto-documento">SIN INFORMACIÓN</span></h6>
                        <h6 class="fw-bolder mt-1">NOMBRES: <span class="texto-nombres">SIN INFORMACIÓN</span></h6>
                        <h6 class="fw-bolder mt-1">APELLIDOS: <span class="texto-apellidos">SIN INFORMACIÓN</span>
                        </h6>
                    </div>

                    <div class="d-flex justify-content-center align-items-center mt-2">

                        <button type="button" class="btn btn-relief-warning btn-lg text-center m-1 llamar-rellamar"
                            id="" data-servicio-id="" >RELLAMAR
                            <i data-feather='clock'></i>                        
                        
                        </button>

                        {{-- <form action="{{ route('ticket-atender.reesperaTicket') }}" method="POST">
                            @csrf
                            @method('PUT')

                            <input type="hidden" name="id_ticket_reespera" class="id-ticket-espera">


                            <button type="submit" class="btn btn-relief-warning btn-lg text-center btn-ticket-espera">
                                <i data-feather='clock'></i>

                                EN ESPERA</button>
                        </form> --}}

                        <button type="button" class="btn btn-relief-success btn-lg text-center m-1 llamar-siguiente"
                            id="" data-servicio-id="" @if ($tickets_no_atendidos) disabled @endif>SIGUIENTE
                            <i data-feather='arrow-right-circle'></i></button>





                        <input type="hidden" id="servicio_siguiente" class="servicio_siguiente" value="">
                        <div>
                            <input type="hidden" id="servicio_siguiente_tipo" class="servicio_siguiente_tipo"
                                value="">

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-center align-items-center">
                        <span class="badge bg-success">{{ auth()->user()->plataformas->pisos->nombre }}</span>
                    </div>


                    <div class="d-flex justify-content-center align-items-center">
                        <img src="/images/perfil.png" class="imagen-persona" width="150px" height="150px" alt=""
                            class="avatar avatar-xl">
                    </div>
                    <h3 class="text-center fw-bolder mt-1 texto-servicio-llamado">SERVICIO: <span
                            class="badge badge-glow bg-warning">LLAMAR SERVICIO </span>
                        <h3>
                            <p class="text-center fw-bolder mt-2">{{ auth()->user()->plataformas->nombre }} </p>

                            <div class="d-flex justify-content-center align-items-center mt-2">

                                <form action="{{ route('ticket-atender.atencionTicket') }}" class="formulario-atender"
                                    method="POST">

                                    @csrf

                                    @method('PUT')
                                    <input type="hidden" name="id_ticket_atendido" class="id-ticket-atendido"
                                        value="{{ $tickets_no_atendidos->id ?? '' }}">
                                    <button type="submit"
                                        class="btn btn-relief-success btn-lg text-center m-1 btn-atendido">ATENDIDO</button>


                                </form>

                                <form action="{{ route('ticket-atender.noAtendidoTicket') }}" class="formulario-no-atender"
                                    method="POST">
                                    @csrf

                                    @method('PUT')
                                    <input type="hidden" name="id_ticket_no_atendido" class="id-ticket-no-atendido"
                                        value="{{ $tickets_no_atendidos->id ?? '' }}">

                                    <button type="submit"
                                        class="btn btn-relief-danger btn-lg text-center m-1 btn-no-atendido">NO
                                        ATENDIDO</button>

                                </form>

                                <form action="#">
                                    <input type="hidden" name="id_ticket_derivar" class="id-ticket-derivar"
                                        value="{{ $tickets_no_atendidos->id ?? '' }}">

                                    {{-- <button type="button" class="btn btn-relief-info btn-lg text-center m-1 btn-derivar">DERIVAR</button> --}}

                                    <button type="button" class="btn btn-relief-info btn-lg text-center m-1 btn-derivar"
                                        data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
                                        DERIVAR

                                    </button>
                                </form>

                            </div>



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

    <div class="row">
        <div class="col-md-12">

            @if ($tickets_no_atendidos)
                <div class="card">
                    <div class="card-body">


                        <h3 class="fw-bolder text-danger text-center"> Termine de Atender sus demás Tickets Porfavor.</h3>

                    </div>
                </div>
            @else
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                    aria-selected="true">SERVICIOS</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-profile" type="button" role="tab"
                                    aria-controls="pills-profile" aria-selected="false">DERIVADOS</button>
                            </li>

                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                aria-labelledby="pills-home-tab">


                                <table class="table table-responsive  datatables-basic dtr-column collapsed">
                                    <thead>
                                        <tr>
                                            <th>
                                                SERVICIO
                                            </th>

                                            <th>
                                                CANTIDAD
                                            </th>
                                        </tr>

                                    </thead>
                                    <tbody id="result-table-servicios">
                                        @foreach ($servicios_usuarios as $servicios_usuario)
                                            <tr class="fila-servicio" data-servicio-id="{{ $servicios_usuario->id }}">
                                                <td>{{ $servicios_usuario->nombre }}</td>
                                                <td>{{ $servicios_usuario->cantidad_tickets_en_espera }}</td>

                                            </tr>
                                        @endforeach

                                    </tbody>

                                </table>


                            </div>
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                aria-labelledby="pills-profile-tab">


                                <table class="table table-responsive  datatables-basic dtr-column collapsed ">
                                    <thead>
                                        <tr>
                                            <th>
                                                SERVICIO
                                            </th>

                                            <th>
                                                CANTIDAD
                                            </th>
                                        </tr>

                                    </thead>

                                    <tbody id="result-table-derivados">
                                        @foreach ($servicios_usuarios_derivados as $servicios_usuarios_derivado)
                                            <tr class="fila-servicio-derivado"
                                                data-servicio-id-derivado="{{ $servicios_usuarios_derivado->id }}">
                                                <td>{{ $servicios_usuarios_derivado->nombre }}</td>
                                                <td>{{ $servicios_usuarios_derivado->cantidad_tickets_en_espera }}</td>

                                            </tr>
                                        @endforeach

                                    </tbody>

                                </table>






                            </div>
                        </div>
                    </div>
                </div>
            @endif



        </div>
    </div>


    {{--    --}}
    <div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLiveLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">


            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLiveLabel">DERIVAR TICKET
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>


                <form action="{{ route('ticket-atender.derivarTicketLlamado') }}" class="formulario-derivar"
                    method="POST">

                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="card">

                            <div class="card-body">
                                <input type="hidden" name="derivar_ticket_id"
                                    value="{{ $tickets_no_atendidos->id ?? '' }}" class="input-derivar-ticket-id">

                                <div class="col-md-12 mt-1">
                                    <label for="" class="form-label">PISO</label>
                                    <select name="derivar_piso_id" id="derivar_piso_id" class="form-select" required
                                        style="width: 100%">
                                        <option value="">SELECCIONE UN PISO</option>
                                        @foreach ($pisos as $piso)
                                            <option value="{{ $piso->id }}">
                                                {{ $piso->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tipo_servicio_id')
                                        <strong class="text-sm text-red-600" style="color: red">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-12 mt-1">
                                    <label for="" class="form-label">SERVICIO</label>
                                    <select name="derivar_servicio_id" id="derivar_servicio_id" class="form-select"
                                        required style="width: 100%">
                                        <option value="">SELECCIONE UN SERVICIO</option>

                                    </select>
                                </div>


                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">PROCEDER A DERIVAR</button>


                    </div>

                </form>


            </div>


        </div>
    </div>
@endsection

@section('css')
    <style>
        /* Ajusta este estilo según tus necesidades */
        .fila-seleccionada {
            background-color: #c1e6f7;
            /* Cambia el color de fondo según tus preferencias */
        }
    </style>
@endsection

@section('scripts')
    <!-- Pie Chart Script -->
    @vite('resources/js/app.js')


    {{-- <script>
        setTimeout(() => {

            window.Echo.channel('items')
                .listen('.App\\Events\\RegistrarTicketEvento', (event) => {

                    console.log('Evento recibido:', event);
                    $.ajax({
                        url: '{{ route('ticket-atender.listarServicios') }}',
                        method: 'GET',
                        success: function(data) {
                            // Actualiza el contenido de la tabla
                            $('#result-table-servicios').html(data);
                        },
                        error: function(error) {
                            console.error('Error al obtener nuevos datos:', error);
                        }
                    });

                });
        }, 1000);
    </script>

    <script>
        $(document).ready(function() {

            // Agrega un evento click a las filas de la tabla
            $('.fila-servicio').on('click', function() {
                // Quita la clase de todas las filas
                $('.fila-servicio').removeClass('fila-seleccionada');

                // Obtiene el ID del servicio seleccionado
                var servicioId = $(this).data('servicio-id');

                // Agrega la clase a la fila seleccionada
                $(this).addClass('fila-seleccionada');

                console.log('Servicio seleccionado:', servicioId);

                // Actualiza el atributo data-servicio-id del botón "SIGUIENTE"
                $('.llamar-siguiente').attr('data-servicio-id', servicioId);
                console.log(servicioId)
            });

            // Agrega un evento click al botón "SIGUIENTE" en la segunda tarjeta
            $('.llamar-siguiente').on('click', function() {
                // Obtiene el ID del servicio almacenado en el botón "SIGUIENTE"
                var servicioSeleccionadoId = $(this).data('servicio-id');

                if (servicioSeleccionadoId) {
                    // Hacer una solicitud AJAX al servidor con el ID del servicio
                    var token = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('ticket-atender.llamarTicket') }}',
                        method: 'POST',
                        data: {
                            servicio_id: servicioSeleccionadoId,
                            _token: token
                        },
                        dataType: 'json',
                        success: function(response) {
                            console.log('Respuesta del servidor:', response);

                            // Actualizar la interfaz de usuario según sea necesario

                            // Restaura la selección después de la actualización
                            $('.fila-servicio[data-servicio-id="' + servicioSeleccionadoId +
                                '"]').addClass(
                                'fila-seleccionada');
                        },
                        error: function(error) {
                            console.error('Error al llamar al siguiente:', error);
                        }
                    });
                } else {
                    console.log('Ningún servicio seleccionado.');
                }
            });



        });
    </script> --}}
    <script>
        $(".btn-derivar").on("click", function() {
            // Obtén el valor del input
            var ticket_deriva = $('.id-ticket-derivar').val();

            $('.input-derivar-ticket-id').val(ticket_deriva)

        });
    </script>

    <script>
        $(document).ready(function() {

            $('.btn-atendido').attr('disabled', true)
            $('.btn-no-atendido').attr('disabled', true)
            $('.btn-derivar').attr('disabled', true)

            // Función para configurar eventos
            // Agrega un evento click a las filas de la tabla
            $('.fila-servicio').on('click', function() {
                // Quita la clase de todas las filas
                $('.fila-servicio').removeClass('fila-seleccionada');

                // Obtiene el ID del servicio seleccionado
                var servicioId = $(this).data('servicio-id');
                $('.servicio_siguiente').val(servicioId);



                $('.servicio_siguiente_tipo').val(1); /// SETEA 1 CUANDO ES NORMAL OSEA SIN DERIVACION

                // Agrega la clase a la fila seleccionada
                $(this).addClass('fila-seleccionada');

                // Actualiza el atributo data-servicio-id del botón "SIGUIENTE"
                $('.llamar-siguiente').attr('data-servicio-id', servicioId);
                console.log('PRIMERA INSTANCIOA  ' + servicioId);
            });


            $('.fila-servicio-derivado').on('click', function() {
                // Quita la clase de todas las filas
                $('.fila-servicio-derivado').removeClass('fila-seleccionada');

                // Obtiene el ID del servicio seleccionado
                var servicioId = $(this).data('servicio-id-derivado');
                $('.servicio_siguiente').val(servicioId);
                $('.servicio_siguiente_tipo').val(2); /// SETEA 2 CUANDO ES NORMAL OSEA CON DERIVACION

                // Agrega la clase a la fila seleccionada
                $(this).addClass('fila-seleccionada');

                // Actualiza el atributo data-servicio-id del botón "SIGUIENTE"
                $('.llamar-siguiente').attr('data-servicio-id', servicioId);
                console.log('PRIMERA INSTANCIOA DERIVADO ' + servicioId);
            });
            // Agrega un evento click al botón "SIGUIENTE" en la segunda tarjeta

            $('.llamar-siguiente').on('click', function() {
                // Obtiene el ID del servicio almacenado en el botón "SIGUIENTE"
                var servicioSeleccionadoId = $(this).data('servicio-id');
                var servicioInput = $('.servicio_siguiente').val();
                var servicioTipoInput = $('.servicio_siguiente_tipo').val();

                if (servicioInput) {
                    // Hacer una solicitud AJAX al servidor con el ID del servicio
                    var token = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('ticket-atender.llamarTicket') }}',
                        method: 'POST',
                        data: {
                            // servicio_id: servicioSeleccionadoId,
                            servicio_id: servicioInput,
                            servicio_siguiente_tipo: servicioTipoInput,
                            _token: token
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.respuesta === true) {
                                // //valor del servicio serleccionado
                                // var valor_servicio_id = $('.servicio_siguiente').val();
                                ///DATOS DE TICKET
                                var data_ticket = response.ticket;
                                var id_ticket = data_ticket.id;
                                var correlativo_ticket = data_ticket.correlativo;
                                var servicios_siglas = response.servicios_siglas;

                                console.log(servicios_siglas)

                                //DATA DEL AREA
                                var data_area = response.area;
                                var nombre_area = data_area.nombre;
                                ///DATA DE LAS PERSONAS
                                var data_personas = response.persona;
                                var persona_numero_documento = data_personas.numero_documento;
                                var persona_nombres = data_personas.nombres;

                                var persona_apellido_paterno = data_personas.apellido_paterno ??
                                    '';
                                var persona_apellido_materno = data_personas.apellido_materno ??
                                    '';





                                var persona_apellidos = persona_apellido_paterno + ' ' +
                                    persona_apellido_materno;
                                var persona_foto = data_personas.foto;

                                ///INICIALES DE NOMBRES COMPLETOS DE LA PERSONA
                                var caracteres_persona_nombres = persona_nombres.substring(0,
                                        10) ??
                                    '';

                                var caracteres_persona_apellido_paterno =
                                    persona_apellido_paterno
                                    .substring(0, 6) ?? '';

                                var caracteres_persona_apellido_materno =
                                    persona_apellido_materno
                                    .substring(0, 6) ?? '';

                                var btn_nombres_apellidos = caracteres_persona_nombres +
                                    ' ' + caracteres_persona_apellido_paterno + ' ' +
                                    caracteres_persona_apellido_materno + ' - ' +
                                    correlativo_ticket



                                // DATA DEL TIPO DE DOCUMENTO DE LA PERSONA
                                var data_tipo_documento_persona = response.persona
                                    .tipo_documentos;
                                //data del nombre del tipo documento
                                var tipo_documento_nombre = data_tipo_documento_persona.nombre;
                                var tipo_documento_siglas = data_tipo_documento_persona.siglas;


                                $('.btn-nombres-atencion').text(btn_nombres_apellidos);


                                console.log('Respuesta del servidor:', response);

                                $('.servicio_siguiente').val(servicioInput);
                                // Actualizar la interfaz de usuario según sea necesario
                                // Restaura la selección después de la actualización
                                $('.fila-servicio[data-servicio-id="' + servicioInput +
                                    '"]').addClass(
                                    'fila-seleccionada');
                                console.log('LLAMAR PROCESO  ' + servicioInput)

                                ///////////////////////////////// SETEAO DE DATOS EN CAJAS DE TEXTOS /////////////////////////////////////
                                var texto_documento = $('.texto-documento');
                                texto_documento.text(tipo_documento_siglas + ' - ' +
                                    persona_numero_documento);

                                var texto_nombres = $('.texto-nombres');
                                texto_nombres.text(persona_nombres);

                                var texto_apellidos = $('.texto-apellidos');
                                texto_apellidos.text(persona_apellidos);



                                var imagen_persona = $('.imagen-persona');

                                if (persona_foto == null) {
                                    imagen_persona.attr('src', 'imagen_sin_foto.png');
                                } else {
                                    imagen_persona.attr('src', 'data:image/png;base64,' +
                                        persona_foto);
                                }

                                var texto_servicio_llamado = $('.texto-servicio-llamado');
                                //SETEAR DATOS EN TEXTO
                                texto_servicio_llamado.text('SERVICIO - ' + nombre_area);




                                //SETEAR DATOS EN INPUTS DE BOTONES DE ATENCION

                                var id_ticket_atendido = $('.id-ticket-atendido');
                                var id_ticket_no_atendido = $('.id-ticket-no-atendido');
                                var id_ticket_derivar = $('.id-ticket-derivar');
                                // var id_ticket_espera = $('.id-ticket-espera');
                                var texto_ticket_servicio = $('.ticket-numero-servicio');

                                //SETEAR DATOS
                                id_ticket_derivar.val(id_ticket);
                                id_ticket_no_atendido.val(id_ticket);
                                id_ticket_atendido.val(id_ticket);
                                // id_ticket_espera.val(id_ticket);
                                texto_ticket_servicio.text(servicios_siglas + '-' +
                                    correlativo_ticket);



                                $('.btn-atendido').attr('disabled', false)
                                $('.btn-no-atendido').attr('disabled', false)
                                $('.btn-derivar').attr('disabled', false)

                                ///PONER BOTON EN DISABLED CUANDO LLAMAS

                                var btn_llamar_siguiente = $('.llamar-siguiente').attr(
                                    'disabled',
                                    true)
                            } else {


                                Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    text: "NO HAY TICKETS",
                                });
                            }





















                        },
                        error: function(error) {
                            console.error('Error al llamar al siguiente:', error);
                        }
                    });
                } else {
                    console.log('Ningún servicio seleccionado.');
                }
            });


            $('.llamar-rellamar').on('click', function() {
                // Obtiene el ID del servicio almacenado en el botón "SIGUIENTE"
                var servicioSeleccionadoId = $(this).data('servicio-id');
                var servicioInput = $('.servicio_siguiente').val();
                var servicioTipoInput = $('.servicio_siguiente_tipo').val();

                if (servicioInput) {
                    // Hacer una solicitud AJAX al servidor con el ID del servicio
                    var token = '{{ csrf_token() }}';

                    $.ajax({
                        url: '{{ route('ticket-atender.llamarTicket') }}',
                        method: 'POST',
                        data: {
                            // servicio_id: servicioSeleccionadoId,
                            servicio_id: servicioInput,
                            servicio_siguiente_tipo: servicioTipoInput,
                            _token: token
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.respuesta === true) {
                                // //valor del servicio serleccionado
                                // var valor_servicio_id = $('.servicio_siguiente').val();
                                ///DATOS DE TICKET
                                var data_ticket = response.ticket;
                                var id_ticket = data_ticket.id;
                                var correlativo_ticket = data_ticket.correlativo;
                                var servicios_siglas = response.servicios_siglas;

                                console.log(servicios_siglas)

                                //DATA DEL AREA
                                var data_area = response.area;
                                var nombre_area = data_area.nombre;
                                ///DATA DE LAS PERSONAS
                                var data_personas = response.persona;
                                var persona_numero_documento = data_personas.numero_documento;
                                var persona_nombres = data_personas.nombres;

                                var persona_apellido_paterno = data_personas.apellido_paterno ??
                                    '';
                                var persona_apellido_materno = data_personas.apellido_materno ??
                                    '';





                                var persona_apellidos = persona_apellido_paterno + ' ' +
                                    persona_apellido_materno;
                                var persona_foto = data_personas.foto;

                                ///INICIALES DE NOMBRES COMPLETOS DE LA PERSONA
                                var caracteres_persona_nombres = persona_nombres.substring(0,
                                        10) ??
                                    '';

                                var caracteres_persona_apellido_paterno =
                                    persona_apellido_paterno
                                    .substring(0, 6) ?? '';

                                var caracteres_persona_apellido_materno =
                                    persona_apellido_materno
                                    .substring(0, 6) ?? '';

                                var btn_nombres_apellidos = caracteres_persona_nombres +
                                    ' ' + caracteres_persona_apellido_paterno + ' ' +
                                    caracteres_persona_apellido_materno + ' - ' +
                                    correlativo_ticket



                                // DATA DEL TIPO DE DOCUMENTO DE LA PERSONA
                                var data_tipo_documento_persona = response.persona
                                    .tipo_documentos;
                                //data del nombre del tipo documento
                                var tipo_documento_nombre = data_tipo_documento_persona.nombre;
                                var tipo_documento_siglas = data_tipo_documento_persona.siglas;


                                $('.btn-nombres-atencion').text(btn_nombres_apellidos);


                                console.log('Respuesta del servidor:', response);

                                $('.servicio_siguiente').val(servicioInput);
                                // Actualizar la interfaz de usuario según sea necesario
                                // Restaura la selección después de la actualización
                                $('.fila-servicio[data-servicio-id="' + servicioInput +
                                    '"]').addClass(
                                    'fila-seleccionada');
                                console.log('LLAMAR PROCESO  ' + servicioInput)

                                ///////////////////////////////// SETEAO DE DATOS EN CAJAS DE TEXTOS /////////////////////////////////////
                                var texto_documento = $('.texto-documento');
                                texto_documento.text(tipo_documento_siglas + ' - ' +
                                    persona_numero_documento);

                                var texto_nombres = $('.texto-nombres');
                                texto_nombres.text(persona_nombres);

                                var texto_apellidos = $('.texto-apellidos');
                                texto_apellidos.text(persona_apellidos);



                                var imagen_persona = $('.imagen-persona');

                                if (persona_foto == null) {
                                    imagen_persona.attr('src', 'imagen_sin_foto.png');
                                } else {
                                    imagen_persona.attr('src', 'data:image/png;base64,' +
                                        persona_foto);
                                }

                                var texto_servicio_llamado = $('.texto-servicio-llamado');
                                //SETEAR DATOS EN TEXTO
                                texto_servicio_llamado.text('SERVICIO - ' + nombre_area);




                                //SETEAR DATOS EN INPUTS DE BOTONES DE ATENCION

                                var id_ticket_atendido = $('.id-ticket-atendido');
                                var id_ticket_no_atendido = $('.id-ticket-no-atendido');
                                var id_ticket_derivar = $('.id-ticket-derivar');
                                // var id_ticket_espera = $('.id-ticket-espera');
                                var texto_ticket_servicio = $('.ticket-numero-servicio');

                                //SETEAR DATOS
                                id_ticket_derivar.val(id_ticket);
                                id_ticket_no_atendido.val(id_ticket);
                                id_ticket_atendido.val(id_ticket);
                                // id_ticket_espera.val(id_ticket);
                                texto_ticket_servicio.text(servicios_siglas + '-' +
                                    correlativo_ticket);



                                $('.btn-atendido').attr('disabled', false)
                                $('.btn-no-atendido').attr('disabled', false)
                                $('.btn-derivar').attr('disabled', false)

                                ///PONER BOTON EN DISABLED CUANDO LLAMAS

                                var btn_llamar_siguiente = $('.llamar-siguiente').attr(
                                    'disabled',
                                    true)
                            } else {


                                Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    text: "NO HAY TICKETS",
                                });
                            }





















                        },
                        error: function(error) {
                            console.error('Error al llamar al siguiente:', error);
                        }
                    });
                } else {
                    console.log('Ningún servicio seleccionado.');
                }
            });

            function clases() {
                $('.fila-servicio').on('click', function() {


                    // Quita la clase de todas las filas

                    $('.fila-servicio').removeClass('fila-seleccionada');
                    var servicioInput = $('.servicio_siguiente').val();

                    // Obtiene el ID del servicio seleccionado
                    var servicioId = $(this).data('servicio-id');
                    // // Obtiene el ID del servicio seleccionado
                    // var servicioId = $(this).data('servicio-id');
                    $('.servicio_siguiente').val(servicioId);
                    $('.servicio_siguiente_tipo').val(1); /// SETEA 1 CUANDO ES NORMAL OSEA SIN DERIVACION

                    // Agrega la clase a la fila seleccionada
                    $(this).addClass('fila-seleccionada');

                    // // Actualiza el atributo data-servicio-id del botón "SIGUIENTE"
                    // $('.llamar-siguiente').attr('data-servicio-id', servicioId);
                    $('.llamar-siguiente').attr('data-servicio-id', servicioInput);



                    console.log('ERRORES CREO clase: ' + servicioInput);


                });

                $('.fila-servicio-derivado').on('click', function() {
                    // Quita la clase de todas las filas
                    $('.fila-servicio-derivado').removeClass('fila-seleccionada');

                    // Obtiene el ID del servicio seleccionado
                    var servicioId = $(this).data('servicio-id-derivado');
                    $('.servicio_siguiente').val(servicioId);
                    $('.servicio_siguiente_tipo').val(2); /// SETEA 2 CUANDO ES NORMAL OSEA CON DERIVACION

                    // Agrega la clase a la fila seleccionada
                    $(this).addClass('fila-seleccionada');

                    // Actualiza el atributo data-servicio-id del botón "SIGUIENTE"
                    $('.llamar-siguiente').attr('data-servicio-id', servicioId);
                    console.log('PRIMERA INSTANCIOA DERIVADO ' + servicioId);
                });

            }









            setTimeout(() => {
                window.Echo.channel('items')
                    .listen('.App\\Events\\RegistrarTicketEvento', (event) => {
                        console.log('Evento recibido:', event);
                        $.ajax({
                            url: '{{ route('ticket-atender.listarServicios') }}',
                            method: 'GET',
                            success: function(data) {
                                // Actualiza el contenido de la tabla
                                $('#result-table-servicios').html(data);
                                // Vuelve a configurar los eventos después de actualizar la tabla
                                // configurarEvento();
                                // Restaura la selección después de la actualización
                                var peruano = $('.servicio_siguiente').val();
                                var peru = $('.llamar-siguiente').data('servicio-id');

                                console.log(' JOAN ROY CARLOS' + peru)
                                clases();
                                console.log(' peruano' + peruano)
                                clases();

                                $('.fila-servicio[data-servicio-id="' +
                                    peruano +
                                    '"]').addClass(
                                    'fila-seleccionada');
                            },
                            error: function(error) {
                                console.error('Error al obtener nuevos datos:', error);
                            }
                        });




                    });
            }, 1000);



            setTimeout(() => {
                window.Echo.channel('items')
                    .listen('.App\\Events\\RegistrarTicketEvento', (event) => {

                        $.ajax({
                            url: '{{ route('ticket-atender.listarServiciosDerivados') }}',
                            method: 'GET',
                            success: function(data) {
                                console.log(data)
                                // Actualiza el contenido de la tabla
                                $('#result-table-derivados').html(data);
                                // Vuelve a configurar los eventos después de actualizar la tabla
                                // configurarEvento();
                                // Restaura la selección después de la actualización
                                var peruano = $('.servicio_siguiente').val();
                                var peru = $('.llamar-siguiente').data('servicio-id');

                                // console.log(' JOAN ROY CARLOS' + peru)
                                // clases();
                                // console.log(' peruano' + peruano)
                                clases();

                                $('.fila-servicio-derivado[data-servicio-id-derivado="' +
                                    peruano +
                                    '"]').addClass(
                                    'fila-seleccionada');
                            },
                            error: function(error) {
                                console.error('Error al obtener nuevos datos:', error);
                            }
                        });


                    });
            }, 1000);


        });
    </script>

    {{-- SCRIPT PARA FILTRAR POR PISO SERVICIO --}}
    <script>
        $(document).ready(function() {
            $('#derivar_piso_id').on('change', function() {
                var piso_id = this.value;
                $('#derivar_servicio_id').html('');

                if (piso_id) {
                    $.ajax({
                        url: '{{ route('ticket-atender.obtenerServicios') }}?id=' + piso_id,
                        type: 'get',
                        success: function(res) {

                            console.log(res)

                            $('#derivar_servicio_id').html(
                                '<option value="" selected　@if (old('servicio_id') == '3') selected @endif>Seleccione una Sub Area.....</option>'
                            );

                            $.each(res, function(key, value) {
                                $('#derivar_servicio_id').append('<option value="' +
                                    value
                                    .id + '"       >' + value.nombre + '</option>');
                            });
                            // $('#city').html('<option value="">Select City</option>');
                        }
                    });
                } else {
                    $('#derivar_servicio_id').html(
                        '<option value="" selected　@if (old('servicio_id') == '3') selected @endif>Seleccione una Sub Area.....</option>'
                    );
                }
            });

        });
    </script>





    {{-- BOTON ATENTIDO CONFIRMAR OPERACIÓN --}}
    @if (session('atender-ticket'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 6000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Atendio!! Ticket Satisfactoriamente!!'
            })
        </script>
    @endif

    <script>
        $('.formulario-atender').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Dar Como Atendido?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Dar Como Atendido!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>



    {{-- BOTON  DERIVAR CONFIRMAR OPERACION --}}
    @if (session('deriva-ticket'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 10000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Derivo Ticket Satisfactoriamente!!'
            })
        </script>
    @endif

    <script>
        $('.formulario-derivar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Derivar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Derivar Al Area!!!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    {{-- BOTON NO ATENDIDO CONFIRMAR OPERACION --}}


    @if (session('no-atender-ticket'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 6000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'warning',
                title: 'Se Guardo el Ticket No Atendio!!'
            })
        </script>
    @endif

    <script>
        $('.formulario-no-atender').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de No Atenderlo?',
                text: "¡No podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, No Atenderlo!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>
    <script>
        $(document).ready(function() {
            // Obtén la información de $tickets_no_atendidos desde tu backend o Blade
            var tieneTicketsNoAtendidos = {!! json_encode($tickets_no_atendidos->id ?? null) !!};

            var tiene_personas_numero_documento = {!! json_encode($tickets_no_atendidos->personas->numero_documento ?? null) !!};

            var tiene_personas_nombres = {!! json_encode($tickets_no_atendidos->personas->nombres ?? null) !!};
            var tiene_personas_apellido_paterno = {!! json_encode($tickets_no_atendidos->personas->apellido_paterno ?? null) !!};
            var tiene_personas_apellido_materno = {!! json_encode($tickets_no_atendidos->personas->apellido_materno ?? null) !!};
            var tiene_personas_servicio = {!! json_encode($tickets_no_atendidos->servicios->nombre ?? null) !!};
            var tiene_personas_foto = {!! json_encode($tickets_no_atendidos->personas->foto ?? null) !!};

            var tiene_corrrelativo_ticket = {!! json_encode($tickets_no_atendidos->correlativo ?? null) !!};
            var tiene_servicios_siglas = {!! json_encode($tickets_no_atendidos->servicios->siglas ?? null) !!};

            // Habilita el botón si hay tickets no atendidos
            if (tieneTicketsNoAtendidos) {
                $('.btn-atendido').removeAttr('disabled');
                $('.btn-no-atendido').removeAttr('disabled');
                $('.btn-derivar').removeAttr('disabled');
                $('.texto-documento').text(tiene_personas_numero_documento);
                $('.texto-nombres').text(tiene_personas_nombres);
                $('.texto-apellidos').text(tiene_personas_apellido_paterno + ' ' + tiene_personas_apellido_materno);

                $('.texto-servicio-llamado').text('SERVICIO: ' + tiene_personas_servicio);

                $('.imagen-persona').attr('src', 'data:image/png;base64,' +
                    tiene_personas_foto);

                var caracteres_persona_nombres_btn = tiene_personas_nombres.substring(0,
                        10) ??
                    '';

                var caracteres_persona_apellido_paterno_btn =
                    tiene_personas_apellido_paterno
                    .substring(0, 6) ?? '';

                var caracteres_persona_apellido_materno_btn =
                    tiene_personas_apellido_materno
                    .substring(0, 6) ?? '';

                var btn_nombres_apellidos = caracteres_persona_nombres_btn +
                    ' ' + caracteres_persona_apellido_paterno_btn + ' ' +
                    caracteres_persona_apellido_materno_btn + ' - ' +
                    tiene_corrrelativo_ticket


                $('.ticket-numero-servicio').text(tiene_servicios_siglas + '-' + tiene_corrrelativo_ticket);
                $('.btn-nombres-atencion').text(btn_nombres_apellidos);

            }
        });
    </script>
@endsection