{{-- VIEW SAMPLE --}}
@extends('layouts.menu')

@section('tittle')
    MIS TICKETS
@endsection

@section('contenido')
    <div class="row">

        <div class="col-lg-12">

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

                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketPendientesMenu"><span
                                class="badge badge-pill badge-warning text-black">PENDIENTES</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsAprobadosMenu"><span
                                class="badge badge-pill badge-success">APROBADOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsRechazadosMenu"><span
                                class="badge badge-pill badge-danger">RECHAZADOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsAsignadosMenu"><span
                                class="badge badge-pill badge-warning text-black">ASIGNADOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsProcesoMenu"><span
                                class="badge badge-pill badge-info text-black">EN PROCESO</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsPausaMenu"><span
                                class="badge badge-pill badge-warning text-black">PAUSADOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="ticketsFinalizadosMenu"><span
                                class="badge badge-pill badge-success">FINALIZADOS</span></b></li>
                </ul>
            </div>

            <style>
                .breadcrumb-item:hover {
                    transform: scale(1.05);
                }
            </style>

            {{-- TICKET COMUN EN ESCALA (AL ESTADOS) --}}
            <div class="pendientesSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS PENDIENTES</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsPendientesTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- TICKET COMUN APROBADOS --}}
            <div class="aprobadasSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS APROBADOS</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsAprobadosTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- TICKET COMUN RECHAZADOS --}}
            <div class="rechazadasSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS RECHAZADOS</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="rechazadasTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Rechazada</th>
                                        <th class="text-center">Comentario</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- TICKET COMUN ASIGNADOS --}}
            <div class="asignadasSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS ASIGNADOS</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsAsignadosTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>

                                        <th class="text-center">Fecha Asignada</th>
                                        <th class="text-center">Fecha Proceso</th>
                                        <th class="text-center">Fecha Pausa</th>
                                        <th class="text-center">Comentario Pausa</th>
                                        <th class="text-center">Fecha Reanudado</th>
                                        <th class="text-center">Fecha Estimada</th>
                                        <th class="text-center">Fecha Finalizada</th>
                                        <th class="text-center">Comentario Finalizado</th>

                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- TICKET COMUN PROCESO --}}
            <div class="procesoSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS EN PROCESO</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsProcesoTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>

                                        <th class="text-center">Fecha Asignada</th>
                                        <th class="text-center">Fecha Proceso</th>
                                        <th class="text-center">Fecha Pausa</th>
                                        <th class="text-center">Comentario Pausa</th>
                                        <th class="text-center">Fecha Reanudado</th>
                                        <th class="text-center">Fecha Estimada</th>
                                        <th class="text-center">Fecha Finalizada</th>
                                        <th class="text-center">Comentario Finalizado</th>

                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- TICKET COMUN PAUSADO --}}
            <div class="pausadoSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS EN PAUSA</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsPausadosTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>

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

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

            {{-- TICKET COMUN FINALIZADOS --}}
            <div class="finalizadosSection">
                <div class="card card-table comman-shadow shadow-lg bg-ticket-comun">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS FINALIZADOS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                    value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                    value="{{ $date }}">
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="ticketsFinalizadosTable"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Asunto</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Justificación</th>
                                        <th class="text-center">Asignado Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Última Aprobación | Rechazo por</th>
                                        <th class="text-center">Tipo Autorización</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>

                                        <th class="text-center">Fecha Creada</th>
                                        <th class="text-center">Fecha Aprobada</th>

                                        <th class="text-center">Fecha Asignada</th>
                                        <th class="text-center">Fecha Proceso</th>
                                        <th class="text-center">Fecha Pausa</th>
                                        <th class="text-center">Comentario Pausa</th>
                                        <th class="text-center">Fecha Reanudado</th>
                                        <th class="text-center">Fecha Estimada</th>
                                        <th class="text-center">Fecha Finalizada</th>
                                        <th class="text-center">Comentario Finalizado</th>
                                        <th class="text-center">Error Usuario</th>
                                        <th class="text-center">Documento Adjunto</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </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=""><b>Lista Orden Autorizan</b></label>
                                    <div class="listAutoriza">

                                    </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:</label>
                                <textarea style="height: 295px" name="descripcionBox" id="descripcionBox" class="form-control textControlsArea"
                                    cols="8" rows="15"></textarea>
                                <div class="requisitosTXT">

                                </div>
                                <div class="autorizanList">

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

                    <div class="locationSection">
                        <div class="modal-footer">
                            <button id="btnGEO" class="btn btn-info">Obtener Ubicación</button>
                            <br>
                            <label>Latitud</label>
                            <input type="text" id="latitud" class="rounded-4" readonly>
                            <label>Longitud</label>
                            <input type="text" id="longitud" class="rounded-4" readonly>
                        </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>

    {{-- MODAL VIEW ESCALA STATUS --}}
    <div class="modal fade" id="modalEscala" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static" aria-labelledby="modalEscala" 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="table-responsive">
                        <table id="escalaStatusTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">Nombre</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Fecha Autoriza | Rechaza</th>
                                </tr>
                            </thead>
                            <tbody>

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


                    <div class="modal-footer">
                        <button type="submit" id="btnCloseEscala" class="btn btn-secondary">Cerrar</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">
                                                <h6 class="text-center" style="font-weight: 800">
                                                    <b>{{ $grupo->nombre }}</b>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="modal-footer">
                        <button type="submit" id="btnRegresar" class="btn btn-secondary">Regresar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

            /* MENUS EVENTS */
            $('.pendientesSection').show();
            $('.aprobadasSection').hide();
            $('.rechazadasSection').hide();
            $('.asignadasSection').hide();
            $('.procesoSection').hide();
            $('.pausadoSection').hide();
            $('.finalizadosSection').hide();


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

                $('.pendientesSection').show();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').hide();
                $('.asignadasSection').hide();
                $('.procesoSection').hide();
                $('.pausadoSection').hide();
                $('.finalizadosSection').hide();
            });
            $('#ticketsAprobadosMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').show();
                $('.rechazadasSection').hide();
                $('.asignadasSection').hide();
                $('.procesoSection').hide();
                $('.pausadoSection').hide();
                $('.finalizadosSection').hide();
            });
            $('#ticketsRechazadosMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').show();
                $('.asignadasSection').hide();
                $('.procesoSection').hide();
                $('.pausadoSection').hide();
                $('.finalizadosSection').hide();
            });
            $('#ticketsAsignadosMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').hide();
                $('.asignadasSection').show();
                $('.procesoSection').hide();
                $('.pausadoSection').hide();
                $('.finalizadosSection').hide();
            });
            $('#ticketsProcesoMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').hide();
                $('.asignadasSection').hide();
                $('.procesoSection').show();
                $('.pausadoSection').hide();
                $('.finalizadosSection').hide();
            });
            $('#ticketsPausaMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').hide();
                $('.asignadasSection').hide();
                $('.procesoSection').hide();
                $('.pausadoSection').show();
                $('.finalizadosSection').hide();
            });
            $('#ticketsFinalizadosMenu').click(function(e) {
                e.preventDefault();

                $('.pendientesSection').hide();
                $('.aprobadasSection').hide();
                $('.rechazadasSection').hide();
                $('.asignadasSection').hide();
                $('.procesoSection').hide();
                $('.pausadoSection').hide();
                $('.finalizadosSection').show();
            });
            /* END MENUS EVENTS */

            /* --------------------------- TICKET PENDIENTES --------------------- */
            ticketsPendientesTable = $("#ticketsPendientesTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/7/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET APROBADOS --------------------- */
            ticketsAprobadosTable = $("#ticketsAprobadosTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/8/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET RECHAZADOS --------------------- */
            rechazadasTable = $("#rechazadasTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/9/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET ASIGNADOS --------------------- */
            ticketsAsignadosTable = $("#ticketsAsignadosTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/2/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },


                    {
                        data: "fecha_hora_asignado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_proceso",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_reanudado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_estimada",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_finalizado",
                        className: "text-wrap"
                    },

                    {
                        data: "comentario_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET EN PROCESO --------------------- */
            ticketsProcesoTable = $("#ticketsProcesoTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/3/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },


                    {
                        data: "fecha_hora_asignado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_proceso",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_reanudado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_estimada",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_finalizado",
                        className: "text-wrap"
                    },

                    {
                        data: "comentario_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET EN PAUSA --------------------- */
            ticketsPausadosTable = $("#ticketsPausadosTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/4/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },


                    {
                        data: "fecha_hora_asignado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_proceso",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_reanudado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_estimada",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_finalizado",
                        className: "text-wrap"
                    },

                    {
                        data: "comentario_finalizado",
                        className: "text-wrap"
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });

            /* --------------------------- TICKET EN PAUSA --------------------- */
            ticketsFinalizadosTable = $("#ticketsFinalizadosTable").DataTable({
            	scrollX: true,
                scrollCollapse: true,
                scrollY: '400px',
                pageLength: 50,
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    method: "GET",
                    url: "{{ url('/api/get/tickets/realizados/aprobar') }}" + "/5/0",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "justificacion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_asignado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "perfil",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "ASIGNADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "EN PROCESO") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "PAUSADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' + data +
                                    "</span>";
                            } else if (data == "FINALIZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "RECHAZADA IT") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' + data +
                                    "</span>";
                            } else if (data == "SOLICITADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' + data +
                                    "</span>";
                            } else if (data == "APROBADO") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "prioridad",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "URGENTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else if (data == "ALTA") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "MEDIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "BAJA") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "NULA") {
                                badge +=
                                    '<span class="badge badge-pill badge-light">' +
                                    data +
                                    "</span>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "tipo_solicitud",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "PROYECTO") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">' +
                                    data +
                                    "</span>";
                            } else if (data == "CAMBIOS SISTEMA") {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">' +
                                    data +
                                    "</span>";
                            } else if (data == "SOPORTE") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">' + data +
                                    "</span>";
                            } else if (data == "SISTEMAS") {
                                badge +=
                                    '<span class="badge badge-pill badge-info">' +
                                    data +
                                    "</span>";
                            } else if (data == "AUDITORIA") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">' +
                                    data +
                                    "</span>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">NINGUNO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_creado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_aceptado",
                        className: "text-wrap"
                    },


                    {
                        data: "fecha_hora_asignado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_proceso",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "comentario_pausa",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_reanudado",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_estimada",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_hora_finalizado",
                        className: "text-wrap"
                    },

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

                            if (data != 0) {
                                badge +=
                                    '<div class="text-center"><div class="btn-group"><a href="' +
                                    data +
                                    '" target="_blank"><button class="btn btn-info btn-sm viewManual text-white" title="Ver Documento"><i class="material-icons text-white">visibility</i></button></a></div></div>';
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "id_tipo_ticket",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewEscala' title='Ver Escala' alt='Ver Escala'><i class='material-icons'>visibility</i></button></div></div>";
                            } else if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">SIN ACCIONES</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "DESC"]
                ]
            });


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

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

                id_ticket_comun = $.trim(fila.find("td:eq(0)").text());
                ticket = $.trim(fila.find("td:eq(1)").text());

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

                escalaStatusTable = $("#escalaStatusTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    ordering: false,
                    ajax: {
                        method: "POST",
                        url: "{{ url('/api/get/ticket/escala/status') }}",
                        data: {
                            id_ticket_comun: id_ticket_comun
                        },
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "nombre_usuario",
                            className: "text-wrap"
                        },
                        {
                            data: "estado",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "PENDIENTE") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">' +
                                        data +
                                        "</span>";
                                } else if (data == "RECHAZADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                } else if (data == "AUTORIZADO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fecha_autoriza",
                            className: "text-wrap"
                        },
                    ],
                });

                $(".modal-header").css("background-color", "#b81742");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Visualización Autorizaciones Ticket Común en Escala: " + ticket);
                $("#modalEscala").modal("show");
            });

            $('#btnCloseEscala').click(function(e) {
                e.preventDefault();
                $("#modalEscala").modal("hide");
            });
        });
    </script>
@endsection