@extends('layouts.menu')

@section('tittle')
    GESTIÓN TICKETS COMUNES
@endsection

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

            <div class="crearTicketComunSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS COMUNES</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                                <a href="#" type="button" class="btn btn-primary" id="btnNuevo" title="Crear Nuevo"
                                    alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                                <a href="#" type="button" class="btn btn-danger" id="btnAcciones"
                                    title="Añadir/Eliminar Usuario a Todos mis Tickets Comunes"
                                    alt="Añadir/Eliminar Usuario a Todos mis Tickets Comunes"><i
                                        class="fas fa-user"></i></a>
                                <a href="#" type="button" class="btn btn-warning" id="btnTiposComentarios"
                                    title="Tipos Comentarios Calificacione" data-bs-toggle="modal"
                                    data-bs-target="#modalComentarios"><i class="fas fa-comment text-black"></i></a>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="">Clasificación Ticket:</label>
                                    <select type="text" class="form-select form-select-sm" name="allClasificaciones"
                                        id="allClasificaciones">

                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <label for="" class="form-label">Área Resuelve</label>
                                <select class="form-select form-select-sm" name="filterAreaResuelveTable"
                                    id="filterAreaResuelveTable">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposDataAll as $resuelve)
                                        <option value="{{ $resuelve->id_grupo }}">{{ $resuelve->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="ticketComunTable" 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">Ticket Comun</th>
                                        <th class="text-center">Descripcion</th>
                                        <th class="text-center text-wrap">Posible Error Usuario</th>
                                        <th class="text-center text-wrap">Desc. Posible Error Usuario</th>
                                        <th class="text-center text-wrap">Autoriza Directo</th>
                                        <th class="text-center">Geolocalización</th>
                                        <th class="text-center text-wrap">Tipo Autorización/Finalizacion</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Requisitos</th>
                                        <th class="text-center text-wrap">Pueden Resolverlo/Finalizarlo</th>
                                        <th class="text-center text-wrap">Escala Autoriza</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center text-wrap">Cant. Solicitado</th>
                                        <th class="text-center">Clasificación</th>
                                        <th class="text-center">ID Grupo</th>
                                        <th class="text-center text-wrap">Disponible Solicitar</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

        </div>
    </div>


    {{-- MODAL GESTIONAR TICKET --}}
    <div class="modal fade" id="modalTicketComun" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <div class="row">

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="">Asunto Ticket Común: </label>
                                <input type="text" name="manual" class="form-control-sm form-control inputControls"
                                    id="txtTicketComun">
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <div class="form-group">
                                <label for="">Min Promedio: </label>
                                <input type="number" step="0.01" name="minPromedioResolver"
                                    class="form-control-sm form-control inputControls" id="minPromedioResolver">
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="">Prioridad:</label>
                                <select type="text" class="form-select form-select-sm selectControls" name="prioridad"
                                    id="prioridad">
                                    <option value="0">Seleccione una opción</option>
                                    @foreach ($prioridadesData as $prioridad)
                                        <option value="{{ $prioridad->id_prioridad }}">{{ $prioridad->prioridad }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="">Tipo Autorización/Finalización:</label>
                                <select type="text" class="form-select form-select-sm" name="tipoTicket"
                                    id="tipoTicket">
                                    <option value="0">Seleccione una opción</option>
                                    @foreach ($tiposData as $tipo)
                                        <option value="{{ $tipo->pk_tipo }}">{{ $tipo->descripcion_tipo }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="">Grupo:</label>
                                <select type="text" class="form-select form-select-sm" name="grupoSelect"
                                    id="grupoSelect">
                                    <option value="0">Seleccione una opción</option>
                                    @foreach ($gruposData as $grupo)
                                        <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="">Clasificación Ticket:</label>
                                <select type="text" class="form-select form-select-sm" name="clasificacionSelect"
                                    id="clasificacionSelect">
                                    <option value="0">Seleccione una opción</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="text-right d-flex justify-content-end">
                        <label><b>Día a Crear Automaticamente:</b></label>
                        <input class="form-control form-control-sm" type="number" value="0" id="diaCrear"
                            style="width: 80px; margin-right: 2%;">

                        <input class="form-check-input" type="checkbox" value="0" id="geolocalizacionCheck">
                        <label class="form-check-label" for="geolocalizacionCheck" style="margin-right: 2%">
                            <b> Obtener Geolocalización </b>
                        </label>

                        <input class="form-check-input" type="checkbox" value="0" id="necesitaAprobarCheck"
                            disabled>
                        <label class="form-check-label" for="necesitaAprobarCheck" style="margin-right: 2%">
                            <b> Aprobación Directa </b>
                        </label>
                    </div>


                    <hr>

                    <div class="row">
                        <div class="col-lg-6 rightBorderStyle">
                            <label id="lbl_requisitos">Requisitos del Ticket Común</label>
                            <div class="table-responsive">
                                <table id="requisitosTable"
                                    class="table table-hover table-center table-bordered table-striped table-v1"
                                    style="width:100%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th class="text-center">Requisito</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="requisitosSection">
                                            <td><input class="form-control-sm form-control txtRequisito requisito"
                                                    id="requisito1" type="text"></input></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <br>
                            <button type="button" class="btn btn-sm btn-dark" onclick="addRow()">Añadir
                                Requisito</button>
                            <br>
                        </div>

                        <div class="col-lg-6">
                            <label>Seleccione quienes pueden resolver este Ticket Comun</label>
                            <div class="table-responsive">
                                <table id="usersTable"
                                    class="table table-hover table-center table-bordered table-striped table-v2"
                                    style="width:100%">
                                    <tfoot class="table-active" style="display: table-header-group;">
                                        <tr>
                                            <th class="text-center"></th>
                                            <th class="text-center"></th>
                                            <th>
                                                <div class="form-group">
                                                    <button type="submit"class="btn btn-sm btn-warning"
                                                        id="markAllUsers">Todos/Ninguno</button>
                                                </div>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                    <thead class="thead-light">
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Marcar</th>
                                            <th class="text-center">Value 0</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                    <br>
                    <hr>
                    <div class="usuariosEscalaSection">
                        <div class="row">
                            <div class="col-lg-6">
                                <label>Listado de Usuarios</label>
                                <div class="table-responsive">
                                    <table id="allUsersTable"
                                        class="table table-hover table-center table-bordered table-striped table-v2"
                                        style="width:100%">
                                        <thead class="thead-light">
                                            <tr>
                                                <th class="text-center">#</th>
                                                <th class="text-center">Nombre</th>
                                                <th class="text-center">Cargo</th>
                                                <th class="text-center">Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody>

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

                            <div class="col-lg-6">
                                <label id="lbl_resolver_finalizar">Usuarios Autorizan y Orden de Escala</label>
                                <div class="table-responsive">
                                    <table id="escalaAddedTable"
                                        class="table table-hover table-center table-bordered table-striped table-v2"
                                        style="width:100%">
                                        <thead class="thead-light">
                                            <tr>
                                                <th class="text-center">ID</th>
                                                <th class="text-center">Nombre</th>
                                                <th class="text-center">Cargo</th>
                                                <th class="text-center">Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody>

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

                    <div class="row">
                        <div class="mb-3">
                            <label for="" class="form-label">Descripcion Posible Error de Usuario</label>
                            <textarea class="form-control form-control-sm" name="descripcionPosibleErrorTicket" id="descripcionPosibleErrorTicket" rows="3"
                                required>.</textarea>
                            <div class="text-right d-flex justify-content-end">
                                <input class="form-check-input" type="checkbox" value="0" id="posibleErrorCheck">
                                <label class="form-check-label" for="posibleErrorCheck" style="margin-right: 2%">
                                    <b> Posible Error Usuario </b>
                                </label>
                            </div>
                        </div>
                    </div>

                    <br>

                    <div class="row">
                        <div class="mb-3">
                            <label for="" class="form-label">Descripcion del Ticket</label>
                            <textarea class="form-control form-control-sm" name="descripcionTicket" id="descripcionTicket" rows="3"
                                required></textarea>
                        </div>
                    </div>

                    <br>

                    <div class="row">
                        <div class="mb-3">
                            <label for="" class="form-label">Pasos para Resolver</label>
                            <div class="form-control form-control-sm quill-editor" name="pasosResolver" id="pasosResolver" rows="3">.</div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-secondary" id="btnCancelar">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL CREAR CLASIFICACION --}}
    <div class="modal fade" id="modalClasificacion" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header headerClasificacionTitle">
                    <h5 class="modal-title mdClasificacionTitle" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">
                    <form id="formFirstCall">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Clasificación:</label>
                                    <input class="form-control-sm form-control txtClasificacion" id="txtClasificacion"
                                        type="text"></input>
                                </div>
                                <div class="text-right d-flex justify-content-end">
                                    <label class="form-check-label" for="geolocalizacionCheck" style="margin-right: 2%">
                                        <b> Ejemplo: </b> Ticket para Área 1, Área 2, etc.
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="btnGuardarClasificacion" class="btn btn-success">Guardar</button>
                            <button type="button" class="btn btn-danger" id="btnCancelarNuevaClasificacion"
                                data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL ADD DELETE USER FROM TICKET --}}
    <div class="modal fade" id="modalADTickets" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header headerADTitle">
                    <h5 class="modal-title ADTitle" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">
                    <form id="formAddDelete">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="col-form-label">Grupo:</label>
                                    <select type="text" class="form-select form-select-sm" name="accion_grupo"
                                        id="accion_grupo">
                                        <option value="0">Seleccione una opción</option>
                                        @foreach ($gruposData as $grupo)
                                            <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="col-form-label">Acción:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="accion_tickets" name="accion_tickets" style="width: 100%">
                                        <option selected value="0">Seleccione una opción</option>
                                        <option value="1">AÑADIR</option>
                                        <option value="3">ELIMINAR</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="col-form-label">Usuario:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="accion_usuario" name="accion_usuario" style="width: 100%">
                                        <option selected value="0">Seleccione un Usuario</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <span><b>Nota:</b>Utiliza esta opción solo si quieres añadir o eliminar al usuario de todos los
                            Ticket Comúnes del Área Seleccionada!</span>
                        <br>
                        <div class="modal-footer">
                            <button type="submit" id="btnAccion" class="btn btn-success">Guardar</button>
                            <button type="button" class="btn btn-danger" id="btnCancelarAccion"
                                data-dismiss="modal">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal HTML -->
    <div id="modalComentarios" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalComentariosLabel"
        aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header" style="background-color: #007bff; color: white;">
                    <h5 class="modal-title" id="modalComentariosLabel">GESTION TIPOS COMENTARIOS DE CALIFICACION</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <form id="formComentario">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="tipoComentario">Tipo Comentario</label>
                                        <input type="text" class="form-control form-control-sm" id="tipoComentario"
                                            name="tipoComentario">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="grupoComentario">Area</label>
                                        <select class="form-select form-select-sm" id="grupoComentario"
                                            name="grupoComentario">
                                            <option value="#">Seleccione un Area</option>
                                            @foreach ($gruposData as $grupo)
                                                <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">Guardar</button>
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                            </div>
                        </form>
                    </div>

                    <hr>

                    <div class="row">
                        <h4 class="text-center">Listado de Tipos de Comentarios</h4>
                    </div>
                    <div class="row">
                        <div class="table-responsive">
                            <table id="tiposComentariosTable"
                                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">Tipo Comentario</th>
                                        <th class="text-center">ID Area</th>
                                        <th class="text-center">Area</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var count = 1;

        function addRow() {
            var table = document.getElementById("requisitosTable");

            count += 1;

            var rowCount = table.rows.length;
            var addRow = table.insertRow(rowCount);
            addRow.className = "requisitosSection";

            var cell2 = addRow.insertCell(0);
            var cell3 = addRow.insertCell(1);

            var element2 = document.createElement("input");

            element2.type = "text";
            element2.className = "form-control form-control-sm txtRequisito requisito";
            element2.id = "requisito" + count;
            element2.name = "taxtbox";

            /* 
            var element3 = document.createElement("button");
            element3.type = "button";
            element3.className = "btn btn-sm btn-danger btnRemoveRequisito";
            element3.title = "Quitar Requisito";
            element3.innerHTML = "<i class='material-icons'>delete</i>"; 
            */

            var element3 = document.createElement("div");

            element3.className = "text-center";
            element3.innerHTML =
                "<div class='btn-group'><button class='btn btn-danger btn-sm btnDeleteRequisito' data-aos='fade-in' type='button' title='Quitar Requisito' alt='Quitar Requisito'><i class='material-icons'>delete</i></button></div>";

            cell2.appendChild(element2);
            cell3.append(element3);
        }

        /* JQUERY DOC READY */
        $(document).ready(function() {
            var buttons = "Brftlip";

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

            var editors = {};

            $('.quill-editor').each(function () {
                var editorId = $(this).attr('id'); // Obtener el ID del editor
                editors[editorId] = new Quill(`#${editorId}`, {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            [{ 'header': [1, 2, false] }],
                            ['bold', 'italic', 'underline'],
                            ['link', 'blockquote', 'code-block'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'align': [] }],
                            ['clean']
                        ]
                    }
                });

                // Ajustar la altura automáticamente al contenido
                editors[editorId].on('text-change', function () {
                    var editor = document.querySelector(`#${editorId} .ql-editor`);
                    editor.style.height = 'auto'; // Resetear la altura
                    editor.style.height = editor.scrollHeight + 'px'; // Ajustar a la altura del contenido
                });
            });

            

            // Guardar la variable 'editors' para usarla en otro evento
            window.quillEditors = editors;

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

            /* AD EVENTS START */
            $('#btnAcciones').click(function(e) {
                e.preventDefault();

                $('#formAddDelete').trigger('reset');
                $(".headerADTitle").css("background-color", "#8a9134");
                $(".ADTitle").css({
                    "color": "black",
                    "font-weight": "900",
                });
                $(".ADTitle").text("Añadir/Eliminar Usuario a Todos mis Tickets Comunes");
                $("#modalADTickets").modal("show");
            });

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

                $('#formAddDelete').trigger('reset');
                $("#modalADTickets").modal("hide");
            });
            /* AD EVENTS END */

            function fillSelectUsers() {

                group_id = $('#accion_grupo').val();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "GET",
                    url: "{{ url('/api/fill/users/nvl4/ticket/comun') }}" + "/" + group_id,
                    success: function(data) {
                        $('#accion_usuario').html(data);
                    }
                });
            }

            fillSelectUsers();

            $('#accion_grupo').change(function(e) {
                e.preventDefault();

                fillSelectUsers();
            });

            $('#formAddDelete').submit(function(e) {
                e.preventDefault();

                accion_grupo = $('#accion_grupo').val();
                accion_grupo_select = $("#accion_grupo option:selected").text();
                accion_tickets = $('#accion_tickets').val();
                accion_tickets_select = $("#accion_tickets option:selected").text();
                accion_usuario = $('#accion_usuario').val();
                accion_usuario_select = $("#accion_usuario option:selected").text();


                if (accion_grupo == 0 || accion_tickets == 0 || accion_usuario == 0) {
                    Swal.fire("", "Debes Seleccionar Todas las Opciones Primero!", "warning");
                } else {
                    try {

                        Swal.fire({
                            title: "Estás SEGURO de " + accion_tickets_select + " al usuario " +
                                accion_usuario_select + " a Todos los Tickets Comúnes del Área " +
                                accion_grupo_select + "?",
                            text: "",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Confirmar!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader('X-CSRF-Token', $(
                                                'meta[name="csrf-token"]').attr(
                                                'content'));
                                        }
                                    },
                                    url: "{{ url('/api/add/delete/user/tickets/comunes') }}",
                                    type: "POST",
                                    datatype: "json",
                                    data: {
                                        accion_grupo: accion_grupo,
                                        accion_grupo_select: accion_grupo_select,
                                        accion_tickets: accion_tickets,
                                        accion_tickets_select: accion_tickets_select,
                                        accion_usuario: accion_usuario,
                                        accion_usuario_select: accion_usuario_select
                                    },
                                    success: function(data) {
                                        if (data.save == 1) {
                                            Swal.fire("", "Acción Realizada",
                                                "success");
                                        } else {
                                            Swal.fire("", "Error L: " + data.error,
                                                "error");
                                        }

                                        $('#formAddDelete').trigger('reset');
                                        $("#modalADTickets").modal("hide");
                                        ticketComunTable.ajax.reload(null, false);
                                    },
                                });
                            } else {
                                $('#formAddDelete').trigger('reset');
                                $("#modalADTickets").modal("hide");
                            }
                        });


                    } catch (error) {
                        Swal.fire("", "Error A: " + error, "error");
                    }
                }



                //  $('#formAddDelete').trigger('reset');
            });

            $(".requisito").prop('maxLength', 30);

            $(document).on("click", ".btnDeleteRequisito", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                $(this).closest("tr").remove();
            });

            $('.usuariosEscalaSection').css('display', 'none');

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

            $("#necesitaAprobarCheck").click(function() {
                var x = $("#necesitaAprobarCheck").is(":checked");

                if (x == true) {
                    $("#necesitaAprobarCheck").val(1);
                } else if (x == false) {
                    $("#necesitaAprobarCheck").val(0);
                }
            });

            $("#posibleErrorCheck").click(function() {
                var x = $("#posibleErrorCheck").is(":checked");

                if (x == true) {
                    $("#posibleErrorCheck").val(1);
                } else if (x == false) {
                    $("#posibleErrorCheck").val(0);
                }
            });

            $("#geolocalizacionCheck").click(function() {
                var x = $("#geolocalizacionCheck").is(":checked");

                if (x == true) {
                    $("#geolocalizacionCheck").val(1);
                } else if (x == false) {
                    $("#geolocalizacionCheck").val(0);
                }
            });

            $('#tipoTicket').change(function(e) {
                e.preventDefault();

                if ($(this).val() == 19) {
                    $('.usuariosEscalaSection').css('display', 'none');
                    $('#necesitaAprobarCheck').val(0);
                    $('#diaCrear').prop('disabled', true);
                    $('#necesitaAprobarCheck').prop('checked', false);
                    $('#necesitaAprobarCheck').prop('disabled', false);
                } else if ($(this).val() == 20) {
                    $('.usuariosEscalaSection').css('display', 'contents');
                    $('#diaCrear').prop('disabled', true);
                    $('#necesitaAprobarCheck').prop('disabled', true);
                    $('#necesitaAprobarCheck').prop('checked', false);
                    $('#necesitaAprobarCheck').val(1);
                    $('#lbl_resolver_finalizar').text('Usuarios Autorizan y Orden de Escala');
                } else if ($(this).val() == 30) {
                    $('.usuariosEscalaSection').css('display', 'contents');
                    $('#diaCrear').prop('disabled', false);
                    $('#necesitaAprobarCheck').prop('disabled', true);
                    $('#necesitaAprobarCheck').prop('checked', true);
                    $('#necesitaAprobarCheck').val(1);
                    $('#lbl_resolver_finalizar').text('Usuarios Finalizan y Orden de Escala por Finalizar');
                }
            });

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

                $('#txtFx').val(0);
                $('#varTicketComunID').val(0);

                var editors = window.quillEditors;
                editors['pasosResolver'].enable(true);

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Crear Nuevo Ticket Común");
                $("#modalTicketComun").modal("show");
            });


            /* HIDE MODAL */
            $('#btnCancelar').click(function(e) {
                e.preventDefault();
                $('.inputControls').val('');
                $('.inputControlsTXT').val('')
                $("#modalTicketComun").modal("hide");
            });


            $('#clasificacionSelect').prop('disabled', true);

            $('#grupoSelect').change(function(e) {
                e.preventDefault();

                var group_id = $.trim($('#grupoSelect').val());

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

                usersTable = $("#usersTable").DataTable({
                    initComplete: function() {
                        console.log('table created');

                        $('#markedUsers').on('change', function() {
                            usersTable.column(3).search(this.value).draw();
                        });
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    ajax: {
                        url: "{{ url('/api/users/nvl4/ticket/comun') }}" + "/" + group_id,
                    },
                    dom: buttons,
                    buttons: [{
                        text: '<select class="form-select form-select-sm" name="markedAnuncios" id="markedUsers"><option value="">Ver Todos</option><option value="0">Sin Marcar</option><option value="1">Marcados</option></select>',
                        className: 'btn btn-info',
                    }],
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "PKUsuario"
                        },
                        {
                            data: "Nombre"
                        },
                        {
                            data: 'programado',
                            width: '15%',
                            className: 'text-center',
                            render: function(data, type, row) {
                                var badge = "";

                                if (data == 1) {
                                    badge +=
                                        '<input class="form-check-input checkOptionUser" id="checkOption" type="checkbox" value="' +
                                        data + '" checked>';
                                } else {
                                    badge +=
                                        '<input class="form-check-input checkOptionUser" id="checkOption" type="checkbox" value="0">';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "value0"
                        },
                    ],
                    columnDefs: [{
                        targets: [3],
                        visible: false,
                        searchable: true,
                    }],
                    order: [
                        [1, "asc"]
                    ]
                });

                fillSelectClasificaciones();
            });

            function fillSelectClasificaciones() {
                var group_id = $.trim($('#grupoSelect').val());

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/fill/select/clasificaciones/por') }}",
                    async: false,
                    data: {
                        group_id: group_id

                    },
                    success: function(data) {
                        $('#clasificacionSelect').html(data);
                        $('#clasificacionSelect').prop('disabled', false);
                    }
                });
            }

            /* FILL ALL CLASIFICACIONES */
            $.ajax({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $(
                                'meta[name="csrf-token"]')
                            .attr(
                                'content'));
                    }
                },
                type: "GET",
                url: "{{ url('/api/get/select/clasificaciones') }}",
                success: function(data) {
                    $('#allClasificaciones').html(data);
                }
            });

            $('#clasificacionSelect').change(function(e) {
                e.preventDefault();

                var clasificacionValue = $(this).val();

                if (clasificacionValue == 'new') {
                    $(".headerClasificacionTitle").css("background-color", "#f44336");
                    $(".headerClasificacionTitle").css({
                        color: "white",
                        "font-weight": "900",
                    });
                    $(".mdClasificacionTitle").text("Nueva Clasificación");
                    $('#modalClasificacion').modal('show');
                }
            });

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

                $('#txtClasificacion').val('');
                $('#modalClasificacion').modal('hide');
            });

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

                group_id = $.trim($('#grupoSelect').val());
                txtClasificacion = $.trim($('#txtClasificacion').val());

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/save/new/clasificacion') }}",
                    async: false,
                    data: {
                        group_id: group_id,
                        clasificacion: txtClasificacion,
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            if (data.last_id != 0) {
                                fillSelectClasificaciones();
                            }

                            $('#txtClasificacion').val('');
                            $('#modalClasificacion').modal('hide');
                            $('#clasificacionSelect').val(data.last_id).val();
                        }
                    }
                });
            });

            allUsersTable = $("#allUsersTable").DataTable({
                initComplete: function() {
                    console.log('table created');
                },
                pageLength: 5,
                lengthMenu: [
                    [5, 10, 20, -1],
                    [5, 10, 20, 'Todos']
                ],
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                            .attr(
                                'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/all/users/module') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "PKUsuario"
                    },
                    {
                        data: "fullName",
                        className: "text-wrap"
                    },
                    {
                        data: "cargoPerfil"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnAdd' data-aos='fade-in' type='button' title='Añadir Usuario' alt='Añadir Usuario'><i class='material-icons'>add</i></button></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ]
            });

            $(document).on("click", "#markAllUsers", function(e) {
                e.preventDefault();

                const idTable = $('#usersTable').DataTable().column(0).data();

                for (var i = 0; i < idTable.length; i++) {
                    var data = $("#usersTable").DataTable().row(i).data();

                    if (data['value0'] == 0) {
                        $("#usersTable").DataTable().cell(i, 2).data("1");
                        $("#usersTable").DataTable().cell(i, 3).data("1");
                    } else if (data['value0'] == 1) {
                        $("#usersTable").DataTable().cell(i, 2).data("0");
                        $("#usersTable").DataTable().cell(i, 3).data("0");
                    }

                }
            });

            $(document).on("change", ".checkOptionUser", function() {
                fila = $(this).closest("tr");

                table = $("#usersTable").DataTable();

                var one = fila.find('.checkOptionUser').is(":checked");
                if (one == true) {
                    fila.find('.checkOptionUser').val(1);
                    table.cell(fila, 2).data(1);
                    table.cell(fila, 3).data(1);
                } else if (one == false) {
                    fila.find('.checkOptionUser').val(0);
                    table.cell(fila, 2).data(0);
                    table.cell(fila, 3).data(0);
                }
            });

            $(document).on("click", ".btnAdd", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                PKUsuario = $.trim(fila.find("td:eq(0)").text());
                fullName = $.trim(fila.find("td:eq(1)").text());
                cargo = $.trim(fila.find("td:eq(2)").text());

                var validateDuplicate = 0;

                $("#escalaAddedTable > tbody > tr").each(function() {
                    var user_escala_id = $(this).find('td').eq(0).text();
                    var user_escala_name = $(this).find('td').eq(1).text();
                    var cargo = $(this).find('td').eq(2).text();

                    if (user_escala_id == PKUsuario) {
                        validateDuplicate += 1;
                    }
                });

                if (validateDuplicate == 0) {
                    var data = "<tr><td>" + PKUsuario + "</td><td>" + fullName + "</td><td>" + cargo +
                        "</td><td><div class='text-center'><div class='btn-group'><button class='btn btn-danger btn-sm btnDelete' data-aos='fade-in' type='button' title='Quitar Usuario' alt='Quitar Usuario'><i class='material-icons'>delete</i></button></div></div></td></tr>";

                    $("#escalaAddedTable tbody").append(data);
                } else {
                    Swal.fire("", "Ya seleccionaste este Usuario!", "warning");
                }

            });

            $(document).on("click", ".btnDelete", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                $(this).closest("tr").remove();
            });

            // Ajustar la altura del editor cuando se redimensiona el contenedor
            $('.resizable').on('mouseup', function () {
                var editorId = $(this).find('.quill-editor').attr('id');
                var editor = document.querySelector(`#${editorId} .ql-editor`);
                editor.style.height = this.clientHeight + 'px';
            });

            /* SAVE TICKET COMUN */
            $('#btnGuardar').click(function(e) {
                e.preventDefault();

                var ticket = $('#txtTicketComun').val();
                var tipoTicket = $('#tipoTicket').val();
                var grupoSelect = $('#grupoSelect').val();
                var locationCheck = $('#geolocalizacionCheck').val();
                var aprobarCheck = $('#necesitaAprobarCheck').val();
                var clasificacionSelect = $('#clasificacionSelect').val();

                //var pasosResolver = tinymce.activeEditor.getContent();
                var editors = window.quillEditors;
                var pasosResolver = editors['pasosResolver'].root.innerHTML;

                console.log(pasosResolver);
                

                var descripcionTicket = $('#descripcionTicket').val();
                
                var minPromedioResolver = $('#minPromedioResolver').val();
                var prioridad = $('#prioridad').val();
                var diaCrear = $('#diaCrear').val();
                
                var posibleErrorCheck = $('#posibleErrorCheck').val();
                var descripcionPosibleErrorTicket = $('#descripcionPosibleErrorTicket').val();


                function assignRequisito(requisito) {
                    return {
                        requisito: requisito
                    }
                }

                function assignResuelve(id_usuario_resuelve, nombre) {

                    return {
                        id_usuario_resuelve: id_usuario_resuelve,
                        nombre: nombre
                    }
                }

                function assignEscala(id_usuario_escala, nombre, cargo) {

                    return {
                        id_usuario_escala: id_usuario_escala,
                        nombre: nombre,
                        cargo: cargo
                    }
                }

                var conteoAsignados = 0,
                    conteoRequisitos = 0;

                var assignedResuelven = [],
                    assignedRequisitos = [],
                    assignedEscala = [];

                const listUsuarios = $('#usersTable').DataTable().column(0).data();

                var count = 0;
                var count_requisito_vacio = 0;

                $('.txtRequisito').each(function() {
                    count += 1;
                    if (!$(this).val()) {
                        count_requisito_vacio += 1;
                    }
                });


                if (!$('#txtTicketComun').val() || !$('#descripcionTicket').val() || !$('#grupoSelect').val() || !$('#tipoTicket').val() || !$('.txtRequisito').val() || listUsuarios.length <= 0 || count_requisito_vacio >= 1 || clasificacionSelect == 0 || clasificacionSelect == 'new' || pasosResolver == '' || pasosResolver == null || !$('#minPromedioResolver').val() || $('#minPromedioResolver').val() == 0) {
                    Swal.fire("", "Debe llenar o seleccionar todos los campos!", "warning");
                    
                    return false;
                }
                
                if ((tipoTicket == 20 || tipoTicket == 30) && ($('table#escalaAddedTable tr:last').index()) == 0) {
                    Swal.fire("", "Debe llenar o seleccionar todos los campos!", "warning");
                } else if (tipoTicket == 30 && (diaCrear == 0 || !$('#diaCrear').val())) {
                    Swal.fire("", "Debe definir el dia por crear automaticamente!", "warning");
                } else {

                    if (tipoTicket == 20) {
                        aprobarCheck = 0;
                    } else if (tipoTicket == 30) {
                        aprobarCheck = 1;
                    }

                    for (let j = 0; j < listUsuarios.length; j++) {
                        var dataUsuarios = $("#usersTable").DataTable().row(j).data();

                        if (dataUsuarios['value0'] == 1) {
                            conteoAsignados += 1;

                            assignedResuelven.push(assignResuelve(dataUsuarios['PKUsuario'], dataUsuarios[
                                'Nombre']));
                        }
                    }

                    /* OBTAIN DATA TO SAVE */
                    if ((tipoTicket != 30 && conteoAsignados >= 1) || (tipoTicket == 30)) {
                        var count = 0;

                        $('.txtRequisito').each(function() {
                            count += 1;

                            var requisito = $(this).val();

                            assignedRequisitos.push(assignRequisito(requisito));
                        });

                        $("#escalaAddedTable > tbody > tr").each(function() {
                            var user_escala_id = $(this).find('td').eq(0).text();
                            var user_escala_name = $(this).find('td').eq(1).text();
                            var cargo = $(this).find('td').eq(2).text();

                            assignedEscala.push(assignEscala(user_escala_id, user_escala_name,
                                cargo));
                        });


                        Swal.fire({
                            title: "Estás seguro de Guardar este Ticket Común?",
                            text: "Al darle Confirmar por favor espera el mensaje de Finalizado!",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Confirmar!'
                        }).then((result) => {
                            if (result.isConfirmed) {

                                try {
                                    $.ajax({
                                        beforeSend: function(xhr, type) {
                                            if (!type.crossDomain) {
                                                xhr.setRequestHeader('X-CSRF-Token',
                                                    $(
                                                        'meta[name="csrf-token"]'
                                                    ).attr('content'));
                                            }
                                        },
                                        url: "{{ url('/api/save/new/ticket/comun') }}",
                                        method: "POST",
                                        data: {
                                            ticket: ticket,
                                            tipoTicket: tipoTicket,
                                            grupoSelect: grupoSelect,
                                            locationCheck: locationCheck,
                                            aprobarCheck: aprobarCheck,
                                            clasificacionSelect: clasificacionSelect,
                                            assignedEscala: assignedEscala,
                                            assignedResuelven: assignedResuelven,
                                            assignedRequisitos: assignedRequisitos,
                                            pasosResolver: pasosResolver,
                                            minPromedioResolver: minPromedioResolver,
                                            prioridad: prioridad,
                                            diaCrear: diaCrear,
                                            descripcionTicket: descripcionTicket,
                                            posibleErrorCheck: posibleErrorCheck,
                                            descripcionPosibleErrorTicket: descripcionPosibleErrorTicket
                                        },
                                        method: "POST",
                                        async: false,
                                        success: function(data) {
                                            if (data.save == 1) {
                                                Swal.fire("", "Ticket Común Creado!",
                                                    "success");
                                                location.reload();
                                            }
                                        }
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }

                            }
                        });

                    } else {
                        Swal.fire("", "Debe Seleccionar uno o varios Usuarios!", "warning");
                    }

                }

            });


            /* FILL TICKET COMUNES TABLE */
            ticketComunTable = $("#ticketComunTable").DataTable({
                initComplete: function() {
                    ticketComunTable.columns.adjust()
                        .draw(); // Ajuste de columnas al completar la inicialización
                },
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                            .attr(
                                'content'));
                    }
                },
                scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                fixedColumns: {
                    left: 2,
                    right: 2
                },
                ajax: {
                    url: "{{ url('/api/list/created/ticket/comunes') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_ticket_comun"
                    },
                    {
                        data: "nombre_ticket_comun",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion_ticket",
                        className: "text-wrap",
                        width: "20%"
                    },
                    {
                        data: "posible_error_usuario",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">NO</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SI</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "descripcion_posible_error_usuario",
                        className: "text-wrap",
                        width: "10%"
                    },
                    {
                        data: "autorizable",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">NECESITA AUTORIZACIÓN</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">AUTORIZA DIRECTO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "geolocalizacion",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">DESACTIVADO</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipoTicket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == "ESCALA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "SIN ESCALA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">FINALIZA POR ESCALA</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "nombre_grupo",
                        className: "text-wrap",
                    },
                    {
                        data: "requisitos",
                        className: "text-wrap"
                    },
                    {
                        data: "encargado",
                        className: "text-wrap"
                    },
                    {
                        data: "escala",
                        className: "text-wrap"
                    },
                    {
                        data: "estado",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "2") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "3") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">ANULADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "cantidad_solicitado",
                        className: "text-center font-weight-bold"
                    },
                    {
                        data: "clasificacion",
                        className: "text-center text-wrap font-weight-bold"
                    },
                    {
                        data: "grupo",
                        className: "text-wrap"
                    },
                    {
                        data: "disponibilidad_solicitar_value",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">NO</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SI</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: null,
                        className: "text-wrap",
                        render: function(data, type, row) {
                            var badge = "";

                            badge +=
                                "<div class='text-center'><div class='btn-group d-flex flex-wrap justify-content-center'><button class='btn btn-success btn-sm btnDisponibilidad' data-aos='fade-in' type='button' title='Cambiar Disponiblidad de Solicitar'><i class='material-icons'>check</i></button><button class='btn btn-primary btn-sm btnEditar' data-aos='fade-in' type='button' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnAnular' data-aos='fade-in' type='button' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button></div></div>";

                            return badge;
                        }
                    },
                ],
                order: [
                    [11, "desc"]
                ],
            });


            $('#allClasificaciones').change(function() {
                ticketComunTable.column(12).search(this.value, true, false).draw();
            });
            $('#filterAreaResuelveTable').change(function() {
                ticketComunTable.column(13).search(this.value, true, false).draw();
            });

            /* ANULAR TICKET COMUN */


            /* EDITAR TICKET COMUN CREADO */
            $(document).on("click", ".btnEditar", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                id_ticket = $.trim(fila.find("td:eq(0)").text());

                window.location = "{{ url('admin/gestion/tickets/comunes/editar') }}" + "/" + id_ticket;

            });

            /* CAMBIAR DISPONIBLIDAD SOLICITAR TICKET COMUN */
            $(document).on("click", ".btnDisponibilidad", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                varID = $.trim(fila.find("td:eq(0)").text());
                ticketComun = $.trim(fila.find("td:eq(1)").text());
                disponiblidad = $.trim(fila.find("td:eq(12)").text());

                Swal.fire({
                    title: "Estás Seguro de Cambiar la DISPONIBLIDAD de solicitar el Ticket Común: " +
                        ticketComun +
                        "?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/disponiblidad/ticket/comun') }}",
                                data: {
                                    varID: varID
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("",
                                            "Disponiblidad Cambiada de Solicitar del Ticket Común" +
                                            ticketComun + "!", "success");
                                        ticketComunTable.ajax.reload(null, false);
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });

            /* CAMBIAR ESTADO TICKET COMUN */
            $(document).on("click", ".btnAnular", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                varID = $.trim(fila.find("td:eq(0)").text());
                ticketComun = $.trim(fila.find("td:eq(1)").text());

                Swal.fire({
                    title: "Estás Seguro de Cambiar el Estado del Ticket Común: " + ticketComun +
                        "?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/anular/ticket/comun') }}",
                                data: {
                                    varID: varID
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("",
                                            "Estado Cambiado del Ticket Común" +
                                            ticketComun + "!", "success");
                                        ticketComunTable.ajax.reload(null, false);
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });




            tiposComentariosTable = $("#tiposComentariosTable").DataTable({
                //scrollCollapse: true,
                //scrollY: '50%',
                //pageLength: 50,
                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/list/table/tipos/comentarios') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_tipo_comentario_calificacion"
                    },
                    {
                        data: "tipo_comentario_calificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "id_grupo",
                        className: "text-center"
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "estado",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == "1" || data == "2") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">ANULADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'>    <button class='btn btn-warning btn-sm btnEditTipo text-white' title='Editar'><i class='material-icons'>edit</i></button> <button class='btn btn-danger btn-sm btnAnularTipo text-white' title='Cambiar Estado'><i class='material-icons'>change_circle</i></button> </div></div>"
                    },
                ]
            });

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

                $('#formComentario').trigger('reset');
                id_tipo_comentario = null;
                opcion_comentario = 1;
            });

            $(document).on('click', '.btnEditTipo', function() {
                fila = $(this).closest("tr");
                $('#formComentario').trigger('reset');

                id_tipo_comentario = $.trim(fila.find("td:eq(0)").text());
                tipoComentario = $.trim(fila.find("td:eq(1)").text());
                grupoComentario = $.trim(fila.find("td:eq(2)").text());
                opcion_comentario = 2;

                $('#tipoComentario').val(tipoComentario);
                $('#grupoComentario').val(grupoComentario).change();

                $('#modalComentarios').modal('show');
            });

            $(document).on('click', '.btnAnularTipo', function() {
                fila = $(this).closest("tr");

                id_tipo_comentario = $.trim(fila.find("td:eq(0)").text());
                estado = $.trim(fila.find("td:eq(4)").text());

                if (estado == "ACTIVO") {
                    estado_text = "Anulado!";
                } else {
                    estado_text = "Habilitad!";
                }

                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/status/update/tipos/comentarios') }}",
                        data: {
                            id_tipo_comentario: id_tipo_comentario
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.save == 1) {
                                toastMixin.fire({
                                    icon: 'success',
                                    animation: true,
                                    title: 'Tipo de Comentario ' + estado_text
                                });

                                tiposComentariosTable.ajax.reload(null, false);
                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error");
                }
            });

            $(document).on('click', '.btnEditTipo', function() {
                fila = $(this).closest("tr");
                $('#formComentario').trigger('reset');

                id_tipo_comentario = $.trim(fila.find("td:eq(0)").text());
                tipoComentario = $.trim(fila.find("td:eq(1)").text());
                grupoComentario = $.trim(fila.find("td:eq(2)").text());
                opcion_comentario = 2;

                $('#tipoComentario').val(tipoComentario);
                $('#grupoComentario').val(grupoComentario).change();

                $('#modalComentarios').modal('show');
            });

            $('#formComentario').submit(function(e) {
                e.preventDefault();


                tipoComentario = $('#tipoComentario').val();
                grupoComentario = $('#grupoComentario').val();

                if (!$('#tipoComentario').val() || grupoComentario == '#') {
                    Swal.fire("", "Debes llenar y/o seleccionar TODOS los campos!", "warning");
                } else {
                    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/insert/update/tipos/comentarios') }}",
                            data: {
                                id_tipo_comentario: id_tipo_comentario,
                                tipoComentario: tipoComentario,
                                grupoComentario: grupoComentario,
                                opcion: opcion_comentario,
                            },
                            dataType: "json",
                            success: function(data) {
                                if (data.save == 1) {
                                    if (opcion_comentario == 1) {
                                        toastMixin.fire({
                                            icon: 'success',
                                            animation: true,
                                            title: 'Tipo Comentario Creado!'
                                        });
                                    } else {
                                        toastMixin.fire({
                                            icon: 'success',
                                            animation: true,
                                            title: 'Tipo Comentario Editado!'
                                        });
                                    }

                                    $('#formComentario').trigger('reset');
                                    id_tipo_comentario = null;
                                    tiposComentariosTable.ajax.reload(null, false);
                                } else {
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            }
                        });
                    } catch (error) {
                        Swal.fire("", "Error A: " + error, "error");
                    }
                }

            });



            /* END DOCUMENTOR READY */
        });
    </script>
@endsection