@extends('layouts.menu')

@section('tittle')
    ABRIR TICKET
@endsection

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

            <div class="page-sub-header">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="allTicketsMenu"><span
                                class="badge badge-pill badge-success">TODOS</span></b></li>
                    @foreach ($myGroups as $gp)
                        <li class="breadcrumb-item groupItem">
                            <input type="hidden" name="hidden_id_group" value="{{ $gp->id_grupo }}">
                            <input type="hidden" name="hidden_group_name" value="{{ $gp->nombre_grupo }}">
                            <b class="menu-item-head" id="groupMenu">
                                <span class="badge badge-pill badge-warning">{{ $gp->nombre_grupo }}</span>
                            </b>
                        </li>
                    @endforeach
                </ul>
            </div>

            <input type="hidden" id="hidden_area_value">

            <div class="abrirTicketComun">
                <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" id="section-title-abrir">ABRIR TICKET</h3>
                            </div>
                            <div class="col text-end float-end ms-auto download-grp">
                                <a href="#" type="button" data-toggle="modal" class="btn btn-primary" id="btnNuevo"
                                    title="Abrir Ticket Personalizado" alt="Abrir Ticket Personalizado">Abrir Ticket
                                    Personalizado <i class="fas fa-plus"></i></a>
                            </div>
                        </div>
                        <br>
                        <hr>
                        <br>
                        <div class="allTicketsSection">
                            <h5 class="page-title">TODOS</h5>
                            <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>
                            <div class="table-responsive">
                                <table id="ticketComunesGrupos"
                                    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">Es Posible Error</th>
                                            <th class="text-center">Descripcion Posible Error</th>
                                            <th class="text-center">Autoriza Directo</th>
                                            <th class="text-center">Geolocalización</th>
                                            <th class="text-center">Tipo Autorización</th>
                                            <th class="text-center">Grupo</th>
                                            <th class="text-center">Requisitos</th>
                                            <th class="text-center">Autoriza</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Cant. Solicitado</th>
                                            <th class="text-center">Clasificación</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                        <div class="ticketsAreaSection">
                            <h5 class="page-title myGroupArea"></h5>
                            <div class="table-responsive">
                                <table id="ticketComunesAreas"
                                    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">Es Posible Error</th>
                                            <th class="text-center">Descripcion Posible Error</th>
                                            <th class="text-center">Autoriza Directo</th>
                                            <th class="text-center">Geolocalización</th>
                                            <th class="text-center">Tipo Autorización</th>
                                            <th class="text-center">Grupo</th>
                                            <th class="text-center">Requisitos</th>
                                            <th class="text-center">Autoriza</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Cant. Solicitado</th>
                                            <th class="text-center">Clasificación</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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


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

        </div>
    </div>


    {{-- MODAL ABRIR TICKET --}}
    <div class="modal fade" id="modalGestionSolicitud" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <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-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">Asunto:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="asuntoBox"
                                    id="asuntoBox">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="row">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="grupoSelectTicket">Área:</label>
                                    <select type="text" class="form-select form-select-sm selectControls"
                                        name="grupoSelectTicket" id="grupoSelectTicket">
                                        <option value="0">Seleccione una opción</option>
                                        @foreach ($gruposDataNew as $grupo)
                                            <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group enviarSolicitudSection">
                                <label for="" class="col-form-label" for="selectEnviadoA">Usuario
                                    Autoriza:</label>
                                <select type="text" class="form-select form-select-sm selectControls"
                                    name="selectEnviadoA" id="selectEnviadoA">
                                    <option value="0">Seleccione un usuario</option>
                                </select>
                            </div>
                            <div class="listAutorizaSection">
                                <div class="form-group">
                                    <label for="" id="#listAutorizacionText"><b>Lista Orden Autorizan</b></label>
                                    <div class="listAutoriza" style="font-size: 14px">

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

                    <div class="row">
                        <div class="col-lg-8">
                            <div class="form-group">
                                <label for="" class="col-form-label textControls"
                                    for="descripcionBox">Descripción o
                                    Requisitos:</label>
                                <textarea name="descripcionBox" id="descripcionBox" class="form-control textControlsArea" cols="8"
                                    rows="3"></textarea>
                                <div class="requisitosTXT">

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="prioridad">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 class="tipoSolicitudSection">
                                <div class="row">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="tipoSolicitudBox">Tipo
                                            Solicitud:</label>
                                        <select type="text" class="form-select form-select-sm selectControls"
                                            name="tipoSolicitudBox" id="tipoSolicitudBox">
                                            <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>
                            <div class="sistemaSection">
                                <div class="row">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="sistemaBox">Sistema:</label>
                                        <select type="text" class="form-select form-select-sm selectControls"
                                            name="sistemaBox" id="sistemaBox">
                                            <option value="0">Seleccione una opción</option>
                                            @foreach ($sistemasData as $system)
                                                <option value="{{ $system->id }}">{{ $system->sistema }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="sucursalBox">Sucursal:</label>
                                    <select type="text" class="form-select form-select-sm selectControls"
                                        name="sucursalBox" id="sucursalBox">
                                        <option value="0">Seleccione una opción</option>
                                        @foreach ($sucursalesData as $sucursal)
                                            <option value="{{ $sucursal->id }}">{{ $sucursal->sucursal }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group p-2" style="background-color: #c1ffb5">
                                    <label for="" class="col-form-label" for="asuntoBox">Tiempo Promedio en
                                        Gestionar (Min):</label>
                                    <input type="text" class="form-control form-control-sm textControls"
                                        name="promedioGestion" id="promedioGestion" readonly>
                                </div>
                            </div>
                            <div class="row" style="display: none">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="areaSolicitaSelect">Área
                                        Solicita:</label>
                                    <select type="text" class="form-select form-select-sm selectControls"
                                        name="areaSolicitaSelect" id="areaSolicitaSelect">
                                        <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>
                    </div>

                    <div class="row">
                        <div class="form-group">
                            <label for="" class="col-form-label textControls"
                                for="descripcionTicketBox">Descripcion del Ticket:</label>
                            <textarea name="descripcionTicketBox" id="descripcionTicketBox" class="form-control textControlsArea" disabled
                                rows="3"></textarea>
                        </div>
                    </div>


                    <div class="row">
                        <div class="form-group">
                            <label for="" class="col-form-label textControls"
                                for="justificacionBox">Justificación:</label>
                            <textarea name="justificacionBox" id="justificacionBox" class="form-control textControlsArea" cols="8"
                                rows="3"></textarea>
                        </div>
                    </div>


                    <div class="locationSection">
                        <div class="row">
                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        <label>Latitud</label>
                                        <input type="text" id="latitud"
                                            class="form-control form-control-sm rounded-4" readonly>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label>Longitud</label>
                                        <input type="text" id="longitud"
                                            class="form-control form-control-sm rounded-4" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group d-flex justify-content-around">
                                <button id="btnGEO" class="btn btn-info">Obtener Ubicación</button>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">

                        <input type="hidden" id="auto_directo" class="form-control form-control-sm">
                        <input type="hidden" id="location_val" class="form-control form-control-sm">
                        <input type="hidden" id="escala_val" class="form-control form-control-sm">
                        <input type="hidden" id="id_ticket_comun" class="form-control form-control-sm">
                        <input type="hidden" id="customTicket" class="form-control form-control-sm">
                        <input type="hidden" id="grupo_select" class="form-control form-control-sm">

                        <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>
            </div>
        </div>
    </div>

    {{-- INNIT MODAL --}}
    <div class="modal fade" id="modalInnit" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="modalInnit" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background-color: chocolate">
                    <h5 class="modal-title" style="font-weight: 900; color: white" id="exampleModalLabel">Seleccione el
                        Área a Solicitar un Ticket</h5>
                </div>
                <div class="modal-body">

                    <div class="row">
                        @foreach ($gruposData as $grupo)
                            <div class="col d-flex areasTicketComun">
                                <input type="hidden" class="hidden_area" name="hidden_area"
                                    value="{{ $grupo->id_grupo }}">
                                <input type="hidden" class="hidden_name" name="hidden_name"
                                    value="{{ $grupo->nombre }}">
                                <div class="card bg-comman shadow-lg w-100">
                                    <div class="card-body">
                                        <div class="db-widgets d-flex justify-content-between align-items-center">
                                            <div class="db-info text-center">
                                                <h6 class="text-center" style="font-weight: 800">
                                                    <b>{{ $grupo->nombre }}</b>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="modal-footer">
                        <span><b>Recordatorio:</b> Si abres un Ticket Personalizado y está dentro del listado de "Tickets
                            Comúnes" procederá a ser Rechazado!</span>
                        <button type="submit" id="btnRegresar" class="btn btn-secondary">Regresar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL VALIDAR TICKET PERSONALIZADO --}}
    <div class="modal fade" id="modalPersonalizado" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="modalPersonalizado" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header" style="background-color: chocolate">
                    <h5 class="modal-title" style="font-weight: 900; color: white" id="exampleModalLabel">Estás realmente
                        seguro que el Ticket que necesitas NO ESTÁ en el Siguiente Listado?</h5>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="table-responsive">
                            <table id="ticketComunesAreasConfirmar"
                                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">Es Posible Error</th>
                                        <th class="text-center">Descripcion Posible Error</th>
                                        <th class="text-center">Autoriza Directo</th>
                                        <th class="text-center">Geolocalización</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Requisitos</th>
                                        <th class="text-center">Autoriza</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Cant. Solicitado</th>
                                        <th class="text-center">Clasificación</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

                    <div class="modal-footer">
                        <button type="submit" id="btnSeguro" class="btn btn-success">Abrir Ticket Personalizado</button>
                        <button type="submit" id="btnInseguro" class="btn btn-secondary">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            var buttons = "Brtlip";
            $('#ticketComunMenu, #abrirTicketComunMenu').addClass('active');

            $('#modalInnit').modal({
                backdrop: 'static',
                keyboard: false
            });
            $('#modalInnit').modal("show");

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

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

            $('.enviarSolicitudSection').css('display', 'none');
            $('.listAutorizaSection').css('display', 'none');
            $('.locationSection').css('display', 'none');

            $('.tipoSolicitudSection').css('display', 'none');
            $('.sistemaSection').css('display', 'none');

            $("#ticketComunesGrupos").DataTable();

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

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

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

                        if ($('#selectEnviadoA').val() == "{{ Session::get('user_id') }}") {
                            $('#selectEnviadoA').prop("disabled", true);
                        } else {
                            $('#selectEnviadoA').prop("disabled", false);
                        }

                        if ($('#escala_val').val() == 0 && $('#auto_directo').val() == 1) {
                            $('#selectEnviadoA').prop("disabled", true);
                        } else if ($('#escala_val').val() == 1 && $('#auto_directo').val() ==
                            1) {
                            $('#selectEnviadoA').prop("disabled", true);
                        } else if ($('#escala_val').val() == 0 && $('#auto_directo').val() ==
                            0) {
                            $('#selectEnviadoA').prop("disabled", false);
                        } else if ($('#escala_val').val() == 1 && $('#auto_directo').val() ==
                            0) {
                            $('#selectEnviadoA').prop("disabled", true);
                        }
                    }
                });
            });

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

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

                $('.allTicketsSection').css('display', 'contents');
                $('.ticketsAreaSection').css('display', 'none');
            });
            $('.groupItem').click(function(e) {
                e.preventDefault();

                $('.allTicketsSection').css('display', 'none');
                $('.ticketsAreaSection').css('display', 'contents');
            });

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

                var area_clicked = $(this).closest(".areasTicketComun").find('input[name="hidden_area"]')
                    .val();
                var area_name = $(this).closest(".areasTicketComun").find('input[name="hidden_name"]')
                    .val();

                $('#hidden_area_value').val(area_clicked);

                $('#section-title-abrir').text('ABRIR TICKET ' + area_name);
                $('#grupo_select').val(area_clicked);

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

                /* 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/group/clasificaciones') }}" + "/" + area_clicked,
                    success: function(data) {
                        $('#allClasificaciones').html(data);
                    }
                });

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

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

                ticketComunesGrupos = $("#ticketComunesGrupos").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    ordering: false,
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    fixedColumns: {
                        left: fixedColumns_ticketComunesGrupos,
                        right: 1
                    },
                    ajax: {
                        async: false,
                        url: "{{ url('/api/group/list/created/ticket/comunes') }}" + "/" +
                            area_clicked,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_ticket_comun"
                        },
                        {
                            data: "nombre_ticket_comun"
                        },
                        {
                            data: "descripcion_ticket",
                            className: "text-wrap",
                            width: '10%'
                        },
                        {
                            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>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "nombre_grupo",
                            className: "text-center"
                        },
                        {
                            data: "requisitos",
                            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: "cantidadSolicitada",
                            className: "text-center font-weight-bold"
                        },
                        {
                            data: "clasificacion",
                            className: "text-center text-wrap font-weight-bold"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnNew' data-aos='fade-in' type='button' title='Abrir Ticket Comun' alt='Abrir Ticket Comun'><i class='fas fa-plus'></i></button></div></div>",
                        },
                    ],
                    order: [
                        [10, "desc"]
                    ]
                });

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

                ticketComunesAreasConfirmar = $("#ticketComunesAreasConfirmar").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    ordering: false,
                    fixedColumns: {
                        left: fixedColumns_ticketComunesGrupos,
                        right: 1
                    },
                    ajax: {
                        async: false,
                        url: "{{ url('/api/group/list/created/ticket/comunes') }}" + "/" +
                            area_clicked,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_ticket_comun"
                        },
                        {
                            data: "nombre_ticket_comun"
                        },
                        {
                            data: "descripcion_ticket",
                            className: "text-wrap",
                            width: "15%"
                        },
                        {
                            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>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "nombre_grupo",
                            className: "text-center"
                        },
                        {
                            data: "requisitos",
                            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: "cantidadSolicitada",
                            className: "text-center font-weight-bold"
                        },
                        {
                            data: "clasificacion",
                            className: "text-center text-wrap font-weight-bold"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnNew' data-aos='fade-in' type='button' title='Abrir Ticket Comun' alt='Abrir Ticket Comun'><i class='fas fa-plus'></i></button></div></div>",
                        },
                    ],
                    order: [
                        [10, "desc"]
                    ]
                });

                $('#allClasificaciones').change(function() {
                    ticketComunesGrupos.column(11).search(this.value, true, false).draw();
                });


                if (area_clicked == 8) {
                    $('.tipoSolicitudSection').css('display', 'block');
                    $('.sistemaSection').css('display', 'block');
                } else {
                    $('.tipoSolicitudSection').css('display', 'none');
                    $('.sistemaSection').css('display', 'none');
                }

                $('#modalInnit').modal("hide");
            });

            $('.groupItem').click(function(e) {
                e.preventDefault();

                var groupSelect = $('#hidden_area_value').val();
                var myIDGroup = $(this).closest(".groupItem").find('input[name="hidden_id_group"]').val();
                var myGroupName = $(this).closest(".groupItem").find('input[name="hidden_group_name"]')
                    .val();

                $('.myGroupArea').text('TICKETS MÁS SOLICITADOS POR ' + myGroupName);

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

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

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

                ticketComunesAreas = $("#ticketComunesAreas").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    fixedColumns: {
                        left: fixedColumns_ticketComunesAreas,
                        right: 1
                    },
                    ajax: {
                        async: false,
                        url: "{{ url('/api/group/list/area/ticket/comunes') }}" + "/" +
                            groupSelect + "/" + myIDGroup + "/" + myGroupName,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_ticket_comun"
                        },
                        {
                            data: "nombre_ticket_comun"
                        },
                        {
                            data: "descripcion_ticket",
                            className: "text-wrap",
                            width: "15%"
                        },
                        {
                            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>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "nombre_grupo"
                        },
                        {
                            data: "requisitos",
                            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: "cantidadSolicitada",
                            className: "text-center font-weight-bold"
                        },
                        {
                            data: "clasificacion",
                            className: "text-center text-wrap font-weight-bold"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnNew' data-aos='fade-in' type='button' title='Abrir Ticket Comun' alt='Abrir Ticket Comun'><i class='fas fa-plus'></i></button></div></div>",
                        },
                    ],
                    order: [
                        [10, "desc"]
                    ]
                });
            });

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

                window.location = "{{ url('/admin/dashboard') }}";
            });

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

                getLocation();
            });

            /* --------------------------- GET LOCATION --------------------------- */
            function getLocation() {
                fetch("https://ipapi.co/json/")
                    .then((response) => response.json())
                    .then((data) => {
                        $('#latitud').val(data.latitude);
                        $('#longitud').val(data.longitude);

                        if (!$('#latitud').val() || $('#longitud').val()) {
                            if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(showPosition);
                            } else {
                                //Swal.fire("", "Geolocation is not supported by this browser.", "warning");
                            }
                        }
                    });
            }

            function showPosition(position) {
                $('#latitud').val(position.coords.latitude);
                $('#longitud').val(position.coords.longitude);
            }

            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        Swal.fire("", "User denied the request for Geolocation.", "warning");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        Swal.fire("", "Location information is unavailable.", "warning");
                        break;
                    case error.TIMEOUT:
                        Swal.fire("", "The request to get user location timed out.", "warning");
                        break;
                    case error.UNKNOWN_ERROR:
                        Swal.fire("", "An unknown error occurred.", "warning");
                        break;
                }
            }

            /* --------------------------- FUNCTION OPEN MODAL --------------------------- */
            $(document).on("click", ".btnNew", function(e) {
                e.preventDefault();
                $('#modalPersonalizado').modal("hide");

                $('.textControls').val('');
                $('.textControlsArea').text('');
                $('.selectControls').val(0);

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

                $('#descripcionBox').css('display', 'none');
                $('.requisitosTXT').css('display', 'contents');

                id_ticket_comun = $.trim(fila.find("td:eq(0)").text());
                ticket = $.trim(fila.find("td:eq(1)").text());
                descripcion_ticket = $.trim(fila.find("td:eq(2)").text());
                autoriza_directo = $.trim(fila.find("td:eq(5)").text());
                saveLocation = $.trim(fila.find("td:eq(6)").text());
                escala = $.trim(fila.find("td:eq(7)").text());
                requisitos = $.trim(fila.find("td:eq(9)").text());

                escala_autoriza = $.trim(fila.find("td:eq(10)").text());

                $('#customTicket').val(1);

                if (saveLocation == "ACTIVADO") {
                    getLocation();
                    var location = 1;
                    $('#location_val').val(1);
                    $('.locationSection').css('display', 'block');
                } else {
                    var location = 0;
                    $('#location_val').val(0);
                    $('#latitud').val(0);
                    $('#longitud').val(0);
                    $('.locationSection').css('display', 'none');
                }

                var line = escala_autoriza.replace(/~/g, "<br>");

                if (escala == "AUTORIZACIÓN ESCALA") {
                    $('.enviarSolicitudSection').css('display', 'none');
                    $('.listAutorizaSection').css('display', 'block');

                    $('.listAutoriza').html(line);
                } else {
                    $('.enviarSolicitudSection').css('display', 'block');
                    $('.listAutorizaSection').css('display', 'none');
                }

                if (escala == "AUTORIZACIÓN NORMAL" && autoriza_directo == "AUTORIZA DIRECTO") {
                    $('#escala_val').val('0');
                    $('#auto_directo').val('1');

                    $('#selectEnviadoA').prop("disabled", true);

                } else if (escala == "AUTORIZACIÓN ESCALA" && autoriza_directo == "AUTORIZA DIRECTO") {
                    $('#escala_val').val('1');
                    $('#auto_directo').val('1');

                    $('#selectEnviadoA').prop("disabled", true);

                } else if (escala == "AUTORIZACIÓN NORMAL" && autoriza_directo == "NECESITA AUTORIZACIÓN") {
                    $('#escala_val').val('0');
                    $('#auto_directo').val('0');

                    $('#selectEnviadoA').prop("disabled", false);
                } else if (escala == "AUTORIZACIÓN ESCALA" && autoriza_directo == "NECESITA AUTORIZACIÓN") {
                    $('#escala_val').val('1');
                    $('#auto_directo').val('0');

                    $('#selectEnviadoA').prop("disabled", true);
                }

                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') }}",
                        method: "POST",
                        data: {
                            id_ticket_comun: id_ticket_comun
                        },
                        success: function(data) {
                            $('.requisitosTXT').html(data);
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        url: "{{ url('/api/get/tiempo/promedio') }}",
                        method: "POST",
                        data: {
                            id_ticket_comun: id_ticket_comun
                        },
                        success: function(data) {
                            $('#promedioGestion').val(data.tiempo_promedio);
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }


                $('#id_ticket_comun').val(id_ticket_comun);
                $('#descripcionTicketBox').val(descripcion_ticket);
                $('#asuntoBox').val(ticket);
                $('#asuntoBox').prop('readonly', true);

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Abrir Ticket");
                $("#modalGestionSolicitud").modal("show");
            });

            /* --------------------------- FUNCTION OPEN MODAL PERSONALIZADO --------------------------- */
            $('#btnNuevo').click(function(e) {
                e.preventDefault();

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text(
                    "Estás realmente seguro que el Ticket que necesitas NO ESTÁ en el Siguiente Listado?"
                );
                $("#modalPersonalizado").modal("show");
                $('#asuntoBox').prop('readonly', false);
            });

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

                if ($('#grupo_select').val() == 0) {
                    Swal.fire("", "Debes elegir un Área para Crear un Ticket Personalizado!", "warning");
                } else {

                    Swal.fire({
                        title: "RECORDATORIO",
                        text: "Si abres un Ticket Personalizado y está dentro del listado de Tickets Comúnes procederá a ser Rechazado!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#modalPersonalizado').modal("hide");
                            $('.textControls').val('');
                            $('.textControlsArea').text('');
                            $('.selectControls').val(0);
                            $('#id_ticket_comun').val(0);

                            $('#descripcionBox').css('display', 'block');
                            $('.requisitosTXT').css('display', 'none');
                            $('.locationSection').css('display', 'none');

                            $('.enviarSolicitudSection').css('display', 'block');
                            $('.listAutorizaSection').css('display', 'none');

                            $('#selectEnviadoA').prop("disabled", false);

                            $('#customTicket').val(0);
                            $('#location_val').val(0);
                            $('#auto_directo').val(0);
                            $('#escala_val').val(0);
                            $('#latitud').val(0);
                            $('#longitud').val(0);


                            $(".modal-header").css("background-color", "#17a2b8");
                            $(".modal-title").css({
                                "color": "white",
                                "font-weight": "900",
                            });
                            $(".modal-title").text("Abrir Ticket Personalizado");
                            $("#modalGestionSolicitud").modal("show");
                        } else {
                            $(".modal-header").css("background-color", "#17a2b8");
                            $(".modal-title").css({
                                "color": "white",
                                "font-weight": "900",
                            });
                            $(".modal-title").text(
                                "Estás realmente seguro que el Ticket que necesitas NO ESTÁ en el Siguiente Listado?"
                            );
                            $("#modalPersonalizado").modal("show");
                        }
                    });

                }
            });

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

                $('#modalPersonalizado').modal("hide");
            });

            /* --------------------------- FUNCTION CLOSE MODAL --------------------------- */
            $("#btnCancelar").click(function(e) {
                e.preventDefault();

                $('.textControls').val('');
                $('.textControlsArea').text('');
                $('.selectControls').val(0);
                $('#justificacionBox').val('');
                $("#modalGestionSolicitud").modal("hide");

                $('#descripcionBox').val();
                $('#justificacionBox').val();
            });
            $("#btnCloseEscala").click(function(e) {
                e.preventDefault();

                $("#modalEscala").modal("hide");
            });


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

                var asuntoBox = $('#asuntoBox').val();
                var descripcionBox = $('#descripcionBox').val();
                var justificacionBox = $('#justificacionBox').val();

                var grupoSelectSolicito = $('#grupo_select').val();
                var grupoSelect = $('#grupoSelectTicket').val();

                var selectEnviadoA = $('#selectEnviadoA').val();
                var selectEnviadoText = $("#selectEnviadoA option:selected").text();

                var prioridad = $('#prioridad').val();

                var tipoSolicitudBox = $('#tipoSolicitudBox').val();
                var tipoSolicitudName = $("#tipoSolicitudBox option:selected").text();

                var sistemaBox = $('#sistemaBox').val();
                var sistemaName = $("#sistemaBox option:selected").text();

                var sucursalBox = $('#sucursalBox').val();
                var sucursalName = $("#sucursalBox option:selected").text();

                var latitud = $('#latitud').val();
                var longitud = $('#longitud').val();

                var auto_directo = $('#auto_directo').val();
                var location_val = $('#location_val').val();
                var escala_val = $('#escala_val').val();

                var id_ticket_comun = $('#id_ticket_comun').val();
                var areaSolicitaSelect = $('#areaSolicitaSelect').val();

                var count = 0,
                    count_requisito_vacio = 0;

                var assignedRequisitos = [];

                var customTicket = $('#customTicket').val();

                if (customTicket == 1) {
                    $('.requisitoTXT').each(function() {
                        count += 1;

                        var requisitoLabel = $('#requisitoLabel' + count).val();
                        var requisitoEntry = $('#requisitoEntry' + count).val();

                        if (!$('#requisitoEntry' + count).val()) {
                            count_requisito_vacio += 1;
                        }

                        var requisito = requisitoLabel + ': ' + requisitoEntry;

                        assignedRequisitos.push(requisito + ' ~');
                    });

                    var requisitos_char = JSON.stringify(assignedRequisitos);

                    var char1 = requisitos_char.replace(/~","/g, "\r\n");
                    var char2 = char1.replace('["', '\r\n');
                    var char3 = char2.replace('~"]', '\r\n');

                    var descripcionRequisitos = char3;
                    $('#descripcionBox').val('REQUISITOS: \r\n' + descripcionRequisitos);
                }

                if (
                    !$('#asuntoBox').val() ||
                    !$('#justificacionBox').val() ||
                    grupoSelect == 0 ||
                    prioridad == 0 ||
                    sucursalBox == 0 ||
                    count_requisito_vacio >= 1
                ) {
                    Swal.fire("", "Debe llenar todos los campos!", "warning");
                } else {

                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        async: false,
                        type: "POST",
                        url: "{{ url('/api/save/ticket/comun') }}",
                        data: {
                            asuntoBox: asuntoBox,
                            grupoSelect: grupoSelect,
                            selectEnviadoA: selectEnviadoA,
                            selectEnviadoText: selectEnviadoText,
                            descripcionBox: $('#descripcionBox').val(),
                            justificacionBox: $('#justificacionBox').val(),
                            prioridad: prioridad,
                            tipoSolicitudBox: tipoSolicitudBox,
                            sistemaBox: sistemaBox,
                            sucursalBox: sucursalBox,
                            sucursalName: sucursalName,
                            grupoSelectSolicito: grupoSelectSolicito,
                            areaSolicitaSelect: areaSolicitaSelect,
                            latitud: latitud,
                            longitud: longitud,
                            auto_directo: auto_directo,
                            location_val: location_val,
                            escala_val: escala_val,
                            customTicket: customTicket,
                            tipoTicket: escala_val,
                            id_ticket_comun: id_ticket_comun
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                if (data.enviar == 1) {
                                    Swal.fire("Ticket Directo!", "Número de Fila: " + data
                                        .numero_fila, "success");
                                } else {
                                    Swal.fire("Ticket Solicitado!", "Número de Fila: " + data
                                        .numero_fila, "success");
                                }
                            }
                        }
                    });

                    $('.textControls').val('');
                    $('.textControlsArea').text('');
                    $('#justificacionBox').val('');
                    $('.selectControls').val(0);
                    $("#modalGestionSolicitud").modal("hide");
                    $('#id_ticket_comun').val(0);
                    $('#descripcionBox').val();
                    $('#justificacionBox').val();
                }


            });

        });
    </script>
@endsection