@extends('layouts.menu')

@section('tittle')
    CALIFICAR TICKETS
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="page-sub-header">
                <ul class="breadcrumb">


                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsSinCalificarMenu"><span
                                class="badge badge-pill badge-warning text-black" style="margin-right: 5px">SIN
                                CALIFICAR</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsCalificadosMenu"><span
                                class="badge badge-pill badge-success text-white"
                                style="margin-right: 5px">CALIFICADOS</span></b></li>


                </ul>

            </div>

            <div class="ticketsSinCalificarSection">
                <div class="card card-table comman-shadow shadow-lg">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">CALIFICAR TICKETS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                                <button type="button" class="btn btn-success" id="btnGuardar" title="Guardar">Guardar
                                    Calificaciones <i class="fas fa-save"></i></button>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>

                                        <th class="text-center">Calificacion</th>
                                        <th class="text-center">Tipo Comentario</th>
                                        <th class="text-center">Comentario</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>
                                        <th class="text-center">Dias en Aprobar</th>
                                        <th class="text-center">Minutos en Resolver</th>
                                        <th class="text-center">Minutos Promedios de Gestion</th>

                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Aprobado Por</th>
                                        <th class="text-center">Fecha Asignada</th>
                                        <th class="text-center">Fecha Proceso</th>
                                        <th class="text-center">Fecha Pausa</th>
                                        <th class="text-center">Comentario Pausa</th>
                                        <th class="text-center">Fecha Reanudado</th>
                                        <th class="text-center">Fecha Estimada</th>
                                        <th class="text-center">Fecha Finalizada</th>
                                        <th class="text-center">Comentario Finalizado</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div class="ticketsCalificadosSection">
                <div class="card card-table comman-shadow shadow-lg">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">MIS TICKETS CALIFICADOS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                    value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                    value="{{ $date }}">
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsCalificadosTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>

                                        <th class="text-center">Calificacion</th>
                                        <th class="text-center">Comentario</th>
                                        <th class="text-center">Tipo Comentario</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>
                                        <th class="text-center">Dias en Aprobar</th>
                                        <th class="text-center">Minutos en Resolver</th>
                                        <th class="text-center">Minutos Promedios de Gestion</th>

                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Aprobado Por</th>
                                        <th class="text-center">Fecha Asignada</th>
                                        <th class="text-center">Fecha Proceso</th>
                                        <th class="text-center">Fecha Pausa</th>
                                        <th class="text-center">Comentario Pausa</th>
                                        <th class="text-center">Fecha Reanudado</th>
                                        <th class="text-center">Fecha Estimada</th>
                                        <th class="text-center">Fecha Finalizada</th>
                                        <th class="text-center">Comentario Finalizado</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";

            if ("{{ $existe != 0 }}") {
                Swal.fire("", "Para poder Abrir otro Ticket Debes Calificar los ya Finalizados!", "warning");
            }

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: false,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: false,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            $('#ticketComunMenu, #calificarTicketsComunes').addClass('active');



            $(".ticketsSinCalificarSection").css('visibility', 'visible');
            $(".ticketsSinCalificarSection").css('height', 'auto');

            $(".ticketsCalificadosSection").css('visibility', 'hidden');
            $(".ticketsCalificadosSection").css('height', '0');

            $('#ticketsSinCalificarMenu').click(function(e) {
                e.preventDefault();

                $(".ticketsSinCalificarSection").css('visibility', 'visible');
                $(".ticketsSinCalificarSection").css('height', 'auto');

                $(".ticketsCalificadosSection").css('visibility', 'hidden');
                $(".ticketsCalificadosSection").css('height', '0');
            });
            $('#ticketsCalificadosMenu').click(function(e) {
                e.preventDefault();

                $(".ticketsCalificadosSection").css('visibility', 'visible');
                $(".ticketsCalificadosSection").css('height', 'auto');

                $(".ticketsSinCalificarSection").css('visibility', 'hidden');
                $(".ticketsSinCalificarSection").css('height', '0');
            });

            function fillCalificados() {
                periodoInicio = $('#periodoInicio').val();
                periodoFinal = $('#periodoFinal').val();

                $("#ticketsCalificadosTable").DataTable().clear().destroy();

                ticketsCalificadosTable = $("#ticketsCalificadosTable").DataTable({
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '410px',
                    pageLength: 50,
                    fixedColumns: {
                        left: 2,
                        right: 1
                    },
                    ordering: false,
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    initComplete: function() {
                        var api = this.api();
                    },
                    dom: 'frtlip',
                    ajax: {
                        method: "GET",
                        url: "{{ url('/api/fill/table/tickets/calificar/') }}" + "/1/" +
                            periodoInicio + "/" + periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "justificacion",
                            className: "text-wrap"
                        },

                        {
                            data: 'calificacion',
                            className: 'text-center'
                        },
                        {
                            data: 'comentario_calificacion',
                            className: "text-wrap"
                        },
                        {
                            data: 'tipo_comentario_calificacion',
                            className: "text-wrap"
                        },

                        {
                            data: "fecha_hora_creado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_aceptado_rechazado",
                            className: "text-wrap"
                        },
                        {
                            data: "dias_en_aprobar",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo_en_resolver",
                            className: "text-wrap"
                        },
                        {
                            data: "min_resolucion_promedio",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_asignado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_aprueba",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_asignado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_proceso",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_pausa",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_pausa",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_reanudado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_espera_finalizado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_finalizado",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_finalizado",
                            className: "text-wrap"
                        },
                    ]
                });
            }

            $('.pickedDate').change(function(e) {
                e.preventDefault();

                fillCalificados();

            });

            fillCalificados();

            var windowSize = $(window).width();

            if (windowSize <= 960) {
                leftColumns = 0;
            } else if (windowSize >= 960) {
                leftColumns = 2;
            }

            ticketsTable = $("#ticketsTable").DataTable({
                scrollX: true,
                scrollCollapse: true,
                scrollY: '410px',
                pageLength: 50,
                fixedColumns: {
                    left: leftColumns,
                    //right: 1
                },
                ordering: false,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                initComplete: function() {
                    var api = this.api();
                },
                dom: 'frtlip',
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/fill/table/tickets/calificar/') }}" + "/0/A/A",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: 'calificacion',
                        className: 'text-nowrap',
                        width: '20%',
                        createdCell: function(td, cellData, rowData, row, col) {
                            $(td).addClass('calificacion-cell-blue');
                        },
                        render: function(data, type, row) {
                            let selectOptions = '';
                            for (let i = 0; i <= 10; i++) {
                                selectOptions +=
                                    `<option value="${i}" ${data == i ? 'selected' : ''}>${i}</option>`;
                            }
                            return `<select class="calificacion_table form-select form-select-sm calificacion-blue" data-id="${row.id_secuencia}">
                            ${selectOptions}
                        </select>`;
                        }
                    },
                    {
                        data: 'id_tipo_comentario_calificacion',
                        width: '20%',
                        render: function(data, type, row) {
                            return `<select class="tipo_comentario_table form-select form-select-sm" data-id="${row.id_secuencia}" disabled>
                            <option value="#">Seleccione un Tipo Comentario</option>
                        </select>`;
                        }
                    },
                    {
                        data: 'comentario_calificacion',
                        width: '20%',
                        render: function(data, type, row) {
                            return `<textarea class="comentario_table form-control-sm" data-id="${row.id_secuencia}"></textarea>`;
                        }
                    },


                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado_rechazado",
                        className: "text-wrap"
                    },
                    {
                        data: "dias_en_aprobar",
                        className: "text-wrap"
                    },
                    {
                        data: "tiempo_en_resolver",
                        className: "text-wrap"
                    },
                    {
                        data: "min_resolucion_promedio",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_asignado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_proceso",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_reanudado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_espera_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_finalizado",
                        className: "text-nowrap",
                        width: '10% !important'
                    },
                ],
                rowCallback: function(row, data, index) {
                    // Llenar el select de tipos de comentarios basado en el área
                    if (data.calificacion < 7) {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr(
                                        'content'));
                                }
                            },
                            url: "{{ url('/api/list/tipos/comentarios/calificar/') }}" + "/" +
                                `${data.fk_grupo_a_solicitar}`,
                            method: 'GET',
                            success: function(response) {
                                if (response.success && Array.isArray(response.data)) {
                                    var select = $(row).find('.tipo_comentario_table');
                                    select.empty();
                                    select.append(
                                        '<option selected value="0">Seleccione un Tipo de Comentario</option>'
                                    );
                                    response.data.forEach(function(tipo) {
                                        select.append(
                                            `<option value="${tipo.id_tipo_comentario_calificacion}">${tipo.tipo_comentario_calificacion}</option>`
                                        );
                                    });
                                } else {
                                    console.error(
                                        'La respuesta no es un array o no es exitosa:',
                                        response);
                                }
                            }
                        });
                    }
                }
            });


            $('#ticketsTable').on('change', '.calificacion_table', function() {
                var id = $(this).data('id');
                var calificacion = $(this).val();
                var comentario = $(`.comentario_table[data-id="${id}"]`);
                var tipoComentario = $(`.tipo_comentario_table[data-id="${id}"]`);

                if (calificacion < 7) {
                    comentario.prop('disabled', false);
                    tipoComentario.prop('disabled', false).val('0').change();
                } else {
                    tipoComentario.prop('disabled', true).val('0');
                }
            });


            // Función para crear un objeto con los datos de un ticket
            function assignTicket(id_secuencia, calificacion, comentario, tipo_comentario) {
                return {
                    id_secuencia: id_secuencia,
                    calificacion: calificacion,
                    comentario: comentario,
                    tipo_comentario: tipo_comentario
                };
            }

            var assignedTickets = [];


            $('#btnGuardar').click(function(e) {
                e.preventDefault();
                assignedTickets = [];
                var modals = [];
                var validationFailed = false;
                var incompleteTickets = false;


                // Recorre cada fila de la tabla
                $('#ticketsTable tbody tr').each(function() {
                    var row = $(this);
                    var id_secuencia = row.find('.calificacion_table').data('id');
                    var calificacion = row.find('.calificacion_table').val();
                    var comentario = row.find('.comentario_table').val();
                    var tipo_comentario = row.find('.tipo_comentario_table').val();

                    // Resetea el fondo de la fila
                    row.removeClass('row-yellow row-red');

                    if (calificacion == 0) {
                        incompleteTickets = true;
                        // Marca la fila en amarillo claro
                        row.addClass('row-yellow');
                    } else if (calificacion > 0) {
                        // Validar si la calificación es menor a 7 y faltan comentarios o tipo de comentarios
                        if (calificacion < 7 && (tipo_comentario === '0' || comentario == '' ||
                                comentario == ' ' || comentario == '.' || !row.find(
                                    '.comentario_table').val())) {
                            validationFailed = true;
                            // Marca la fila en rojo claro
                            row.addClass('row-red');
                        } else if (calificacion >= 7 && (comentario == '' || comentario == ' ' ||
                                comentario == '.' || !row.find('.comentario_table').val())) {
                            incompleteTickets = true;
                            // Marca la fila en rojo claro
                            row.addClass('row-yellow');
                        } else {
                            // Agrega el ticket al array
                            assignedTickets.push(assignTicket(id_secuencia, calificacion,
                                comentario, tipo_comentario));
                        }
                    }

                });

                if (incompleteTickets) {
                    //modals.push({title:"Marcados en Amarillo", text: "Te faltan Calificar algunos Tickets!", icon: "warning"});
                    Swal.fire("Marcados en Amarillo", "Te faltan Calificar algunos Tickets o Comentar algunos tickets con calificaciones igual o mayor a 7!",
                        "warning");
                }

                if (validationFailed) {
                    //modals.push({title:"Marcados en Rojo", text: "Te faltan Comentar y/o Seleccionar el Tipo de Comentario para algunas calificaciones menores a 7!", icon: "warning"});
                    Swal.fire("Marcados en Rojo",
                        "Te faltan Comentar y/o Seleccionar el Tipo de Comentario para algunas calificaciones menores a 7!",
                        "warning");
                }

                if (assignedTickets.length > 0) {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                            'meta[name="csrf-token"]')
                                        .attr(
                                            'content'));
                                }
                            },
                            type: "POST",
                            url: "{{ url('/api/calificar/tickets/finalizados') }}",
                            data: {
                                assignedTickets: assignedTickets
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data.save == 1) {
                                    //Swal.close();
                                    toastMixin.fire({
                                        icon: 'success',
                                        animation: true,
                                        title: 'Tickets Calificados'
                                    });

                                    $('#ticketsTable tbody tr').each(function() {
                                        var row = $(this);
                                        var id_secuencia = row.find(
                                            '.calificacion_table').data('id');
                                        if (assignedTickets.some(ticket => ticket
                                                .id_secuencia == id_secuencia)) {
                                            row.remove();
                                        }
                                    });
                                    fillCalificados();

                                    if ($('#ticketsTable tbody tr').length === 0) {
                                        // Redirigir a otra ubicación
                                        window.location.href =
                                            "{{ url('/admin/abrir/tickets/comunes') }}";
                                    }
                                } else {
                                    Swal.close();
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            }
                        });
                    } catch (error) {
                        Swal.close();
                        Swal.fire("", "Error A: " + error, "error");
                    }
                }


            });
        });
    </script>
@endsection