@extends('layouts.menu')

@section('tittle')
    EDIT TICKET COMUN # {{ $id }}
@endsection

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



            <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">EDITAR TICKET COMUN</h3>
                        </div>
                    </div>
                    <br>
                    @foreach ($headerData as $header)
                        <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"
                                            value="{{ $header->nombre_ticket_comun }}">
                                    </div>
                                </div>
                                <div class="col-lg-1">
                                    <div class="form-group">
                                        <label for="">Min Promedio: </label>
                                        <input type="number" step="0.01" name="minPromedioResolver"
                                            value="{{ $header->min_resolucion_promedio }}"
                                            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)
                                                @if ($header->id_prioridad == $prioridad->id_prioridad)
                                                    <option value="{{ $prioridad->id_prioridad }}" selected>
                                                        {{ $prioridad->prioridad }}</option>
                                                @else
                                                    <option value="{{ $prioridad->id_prioridad }}">
                                                        {{ $prioridad->prioridad }}</option>
                                                @endif
                                            @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">
                                            @foreach ($tiposData as $tipo)
                                                @if ($header->con_escala == $tipo->pk_tipo)
                                                    <option selected value="{{ $tipo->pk_tipo }}">
                                                        {{ $tipo->descripcion_tipo }}</option>
                                                @else
                                                    <option value="{{ $tipo->pk_tipo }}">{{ $tipo->descripcion_tipo }}
                                                    </option>
                                                @endif
                                            @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)
                                                @if ($header->grupo == $grupo->id_grupo)
                                                    <option selected value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}
                                                    </option>
                                                @else
                                                    <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                                @endif
                                            @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 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>

                                <input type="hidden" id="hidden_clasificacion_anterior"
                                    value="{{ $header->id_clasificacion }}">
                            </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="{{ $header->dia_mes_creacion_automatica }}" id="diaCrear"
                                    style="width: 80px; margin-right: 2%;">

                                @if ($header->geolocalizacion == 1)
                                    <input class="form-check-input" type="checkbox" value="1" id="geolocalizacionCheck"
                                        checked>
                                @else
                                    <input class="form-check-input" type="checkbox" value="0"
                                        id="geolocalizacionCheck">
                                @endif

                                <label class="form-check-label" for="geolocalizacionCheck" style="margin-right: 2%">
                                    <b> Obtener Geolocalización </b>
                                </label>

                                @if ($header->con_escala == 19 or $header->con_escala == 30)
                                    @if ($header->autorizable == 1)
                                        <input class="form-check-input" type="checkbox" value="1"
                                            id="necesitaAprobarCheck" checked>
                                    @else
                                        <input class="form-check-input" type="checkbox" value="0"
                                            id="necesitaAprobarCheck">
                                    @endif
                                @else
                                    <input class="form-check-input" type="checkbox" value="0" id="necesitaAprobarCheck"
                                        disabled>
                                @endif

                                <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>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>
                                                {{-- <div class="requisitosTXT"></div> --}}
                                            </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">
                                            @if ($header->con_escala == 30)
                                                Usuarios Finalizan y Orden de Escala
                                            @else
                                                Usuarios Autorizan y Orden de Escala
                                            @endif
                                        </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>{{$header->descripcion_posible_error_usuario}}</textarea>
                                    <div class="text-right d-flex justify-content-end">
                                        <input class="form-check-input" type="checkbox" id="posibleErrorCheck"
                                            @if ($header->posible_error_usuario == 1) value="1" checked
                                        @else
                                            value="0" @endif>
                                        <label class="form-check-label" for="posibleErrorCheck" style="margin-right: 2%">
                                            <b> Posible Error Usuario </b>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <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">{{ $header->descripcion_ticket }}</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" data-content="{{ $header->pasos_resolver }}"></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"
                                    data-dismiss="modal">Cancelar</button>
                            </div>

                        </div>
                    @endforeach
                </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>
                <form id="formFirstCall">
                    <div class="modal-body">
                        <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>
                    </div>
                </form>
            </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("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);
        }

        $(document).ready(function() {
            var buttons = "Brtlip";

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

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

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

            var editors = {};

            // Inicializar los editores Quill
            $('.quill-editor').each(function () {
                var editorId = $(this).attr('id');
                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']
                        ]
                    }
                });

                // Obtener el contenido del atributo data-content y establecerlo en Quill
                var content = $(this).data('content');
                if (content) {
                    editors[editorId].clipboard.dangerouslyPasteHTML(content);
                }
            });


            

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

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

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

                var count = 0;
                $("#requisitosTable > tbody > tr").each(function() {
                    count += 1;
                });

                if (count <= 1) {
                    Swal.fire("", "No Puedes dejar este Ticket Común sin Ningun Requisito!", "warning");
                } else {
                    $(this).closest("tr").remove();
                }
            });

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

            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').val($('#hidden_clasificacion_anterior').val())
                            .change();
                    }
                });
            }

            $('#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();
                        }
                    }
                });
            });

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

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

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

                if (x == true) {
                    $("#geolocalizacionCheck").val(1);
                } else if (x == false) {
                    $("#geolocalizacionCheck").val(0);
                }
            });
            $("#necesitaAprobarCheck").click(function() {
                var x = $("#necesitaAprobarCheck").is(":checked");

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

            if ($('#tipoTicket').val() == 19) {
                $('.usuariosEscalaSection').css('display', 'none');
                $('#necesitaAprobarCheck').val(0);
                //$('#necesitaAprobarCheck').prop('checked', false);
                $('#necesitaAprobarCheck').prop('disabled', false);
            } else if ($('#tipoTicket').val() == 20 || $('#tipoTicket').val() == 30) {
                $('.usuariosEscalaSection').css('display', 'contents');
                $('#necesitaAprobarCheck').prop('disabled', true);
                //$('#necesitaAprobarCheck').prop('checked', false);
                $('#necesitaAprobarCheck').val(1);
                allUsersTable();
            }

            /* HIDE MODAL */
            $('#btnCancelar').click(function(e) {
                e.preventDefault();

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

            $('#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');
                    allUsersTable();
                } 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');
                    allUsersTable();
                }
            });

            function allUsersTable() {

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

                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"]
                    ]
                });
            }


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

                fillUsersEncargados();

                fillSelectClasificaciones();

            });

            /* REQUISITOS */
            try {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                'meta[name="csrf-token"]').attr('content'));
                        }
                    },
                    url: "{{ url('/api/get/input/requisitos/table') }}",
                    method: "POST",
                    data: {
                        id_ticket_comun: "{{ $id }}"
                    },
                    success: function(data) {
                        $("#requisitosTable > tbody").html(data);
                        //$('.requisitosTXT').html();
                    }
                });
            } catch (error) {
                Swal.fire("", "Error: " + error, "error");
            }

            /* AUTORIZA ESCALA */
            try {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                'meta[name="csrf-token"]').attr('content'));
                        }
                    },
                    url: "{{ url('/api/get/escala/autorizan/table') }}",
                    method: "POST",
                    data: {
                        id_ticket_comun: "{{ $id }}"
                    },
                    success: function(data) {
                        $("#escalaAddedTable > tbody").html(data);
                    }
                });
            } catch (error) {
                Swal.fire("", "Error: " + error, "error");
            }

            function fillUsersEncargados() {
                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/asignados') }}" + "/" + group_id +
                            "/{{ $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 == 3) {
                                    badge +=
                                        '<input class="form-check-input checkOptionUser" id="checkOption" type="checkbox" value="' +
                                        data + '" checked>';
                                } else 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"]
                    ]
                });
            }

            fillUsersEncargados();

            /* MARK USERS ENCARGADOS */
            $(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);
                }
            });

            $('#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');
                }
            });


            $(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();
            });



            $('#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;

                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') {
                    Swal.fire("", "Debe llenar o seleccionar todos los campos!", "warning");
                } else if (tipoTicket == 20 && ($('table#escalaAddedTable tr:last').index()) == 0) {
                    Swal.fire("", "Debe llenar o seleccionar todos los campos!", "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 los Cambios de 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/edit/ticket/comun') }}",
                                        method: "POST",
                                        data: {
                                            id_ticket: "{{ $id }}",
                                            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 Editado!",
                                                    "success");
                                                window.location =
                                                    "{{ url('/admin/gestion/tickets/comunes') }}";
                                            }
                                        }
                                    });
                                } catch (error) {
                                    Swal.fire("", "Error: " + error, "error");
                                }

                            }
                        });

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

                }

            });

        });
    </script>
@endsection