@extends('layouts.menu')

@section('tittle')
    GESTION SOLICITUDES IT
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">
            <div class="page-sub-header">
                @if (Session::get('solicitudAdminIT') == 1101080 or Session::get('adminIT') == 'adminIT')
                    <a href="{{ url('/admin/solicitudes/solicitudAdminIT') }}" type="button" class="btn btn-primary"
                        id="btnNuevo" title="Crear Nuevo" alt="Crear Nuevo"><i class="fas fa-plus"></i> Ticket Admin IT</a>
                @endif

                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="sinAsignarMenu">SIN ASIGNAR</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="asignadasMenu">ASIGNADAS</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="procesoMenu">PROCESO</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="pausaMenu">PAUSA</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="finalizadosMenu">FINALIZADAS</b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="allSolicitudesMenu">TODAS</b></li>
                </ul>
            </div>

            {{-- SIN ASIGNAR SECTION --}}
            <div class="sinAsignarSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS SIN ASIGNAR</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="solicitudesNOAsignadasTable"
                                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">Enviada Por</th>
                                        <th class="text-center">Aprobada Por</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>

            {{-- ASIGNADAS SECTION --}}
            <div class="asignadasSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS ASIGNADAS</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="solicitudesAsignadasTable"
                                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">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Enviada Por</th>
                                        <th class="text-center">Aprobada Por</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">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- PROCESO SECTION --}}
            <div class="procesoSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <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="solicitudesProcesoTable"
                                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">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Enviada Por</th>
                                        <th class="text-center">Aprobada Por</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">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- PAUSA SECTION --}}
            <div class="pausaSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <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="solicitudesPausaTable"
                                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">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Enviada Por</th>
                                        <th class="text-center">Aprobada Por</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">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- FINAL SECTION --}}
            <div class="finalSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TICKETS FINALIZADAS</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="solicitudesFinalTable"
                                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">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Enviada Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Aprobada Por</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>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- ALL TICKETS SECTION --}}
            <div class="allSolicitudesSection">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">TODOS MIS TICKETS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicioTodas"
                                    class="form-control form-control-sm pickedDateTodas" value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinalTodas"
                                    class="form-control form-control-sm pickedDateTodas" value="{{ $date }}">
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="solicitudesAllTable"
                                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">Prioridad</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Sucursal</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Enviada Por</th>
                                        <th class="text-center">Cargo Aprueba</th>
                                        <th class="text-center">Aprobada Por</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>
                                    </tr>
                                </thead>
                                <tbody>

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

        </div>
    </div>

    {{-- MODAL EDIT SOLICITUD --}}
    <div class="modal fade" id="modalGestionSolicitud" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static" 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="editSolicitudIT">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="row asuntoSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="asuntoBox">Asunto:</label>
                                        <input type="text" class="form-control form-control-sm" name="asuntoBox"
                                            id="asuntoBox" readonly>
                                    </div>
                                </div>
                                <div class="row descripcionSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label"
                                            for="descripcionBox">Descripción:</label>
                                        <textarea style="height: 295px" name="descripcionBox" id="descripcionBox" class="form-control" cols="8"
                                            rows="15" readonly></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="row tipoSolicitudSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="tipoSolicitudBox">Tipo
                                            Solicitud:</label>
                                        <select type="text" class="form-select form-select-sm" name="tipoSolicitudBox"
                                            id="tipoSolicitudBox" disabled>
                                            @foreach ($tiposData as $tipo)
                                                <option value="{{ $tipo->pk_tipo }}">{{ $tipo->descripcion_tipo }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row prioridadSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="prioridad">Prioridad:</label>
                                        <select type="text" class="form-select form-select-sm" name="prioridad"
                                            id="prioridad" disabled>
                                            @foreach ($prioridadesData as $prioridad)
                                                <option value="{{ $prioridad->id_prioridad }}">
                                                    {{ $prioridad->prioridad }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row empleadoSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="empleadoBox">Solicitado
                                            por:</label>
                                        <input type="text" class="form-control form-control-sm" name="empleadoBox"
                                            id="empleadoBox" readonly>
                                    </div>
                                </div>
                                <div class="row sistemaSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="sistemaBox">Sistema:</label>
                                        <select type="text" class="form-select form-select-sm" name="sistemaBox"
                                            id="sistemaBox" disabled>
                                            @foreach ($sistemasData as $system)
                                                <option value="{{ $system->id }}">{{ $system->sistema }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row sucursalSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="sucursalBox">Sucursal:</label>
                                        <select type="text" class="form-select form-select-sm" name="sucursalBox"
                                            id="sucursalBox" disabled>
                                            <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 class="col-lg-4">
                                <div class="row estadoSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="estadoOption">Estado:</label>
                                        <select type="text" class="form-select form-select-sm" name="estadoOption"
                                            id="estadoOption">
                                            <option value="0">Seleccione una opción</option>
                                            @foreach ($estadosSolicitudesData as $estado)
                                                <option value="{{ $estado->id }}" id="estado{{ $estado->id }}">
                                                    {{ $estado->estado }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row prioridadITSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label"
                                            for="prioridadIT">Prioridad IT:</label>
                                        <select type="text" class="form-select form-select-sm" name="prioridadIT"
                                            id="prioridadIT">
                                            <option value="0">Seleccione una opción</option>
                                            @foreach ($prioridadesData as $prioridad)
                                                <option value="{{ $prioridad->id_prioridad }}">
                                                    {{ $prioridad->prioridad }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row fechaSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="fechaSelect">Fecha
                                            Estimada:</label>
                                        <input type="datetime-local" class="form-control form-control-sm"
                                            name="fechaSelect" id="fechaSelect">
                                    </div>
                                </div>
                                <div class="row dificultadInicioSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="dificultadInicio">Dificultad
                                            Inicio:</label>
                                        <select type="text" class="form-select form-select-sm" name="dificultadInicio"
                                            id="dificultadInicio">
                                            <option value="0">Seleccione una opción</option>
                                            @foreach ($dificultadesData as $dificultad)
                                                <option value="{{ $dificultad->id_dificultad }}">
                                                    {{ $dificultad->tiempo }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row dificultadFinalSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="dificultadInicio">Dificultad
                                            Final:</label>
                                        <select type="text" class="form-select form-select-sm" name="dificultadFinal"
                                            id="dificultadFinal" disabled>
                                            <option value="0">Seleccione una opción</option>
                                            @foreach ($dificultadesData as $dificultad)
                                                <option value="{{ $dificultad->id_dificultad }}">
                                                    {{ $dificultad->tiempo }}</option>
                                            @endforeach
                                        </select>

                                        <div class="errorUsuarioView">
                                            <div class="text-right">
                                                <input class="form-check-input" type="checkbox" value="0"
                                                    id="errorUsuarioCheck">
                                                <label class="form-check-label" for="errorUsuarioCheck">
                                                    <b> Error Usuario </b>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="editSolicitudIT">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="comentarioPausa">Comentario
                                        Pausa:</label>
                                    <textarea name="comentarioPausa" id="comentarioPausa" class="form-control form-control-sm" cols="20"
                                        rows="3" readonly></textarea>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label"
                                        for="comentarioFinal">Comentario:</label>
                                    <textarea name="comentarioFinal" id="comentarioFinal" class="form-control form-control-sm" cols="20"
                                        rows="3" readonly></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row rechazarSolicitudSection">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="comentarioFinal">Comentario:</label>
                                <textarea name="comentarioRechazo" id="comentarioRechazo" class="form-control form-control-sm" cols="20"
                                    rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="hidden_solicitud_id">
                        <input type="hidden" id="hidden_estado_anterior">
                        <input type="hidden" id="hidden_optionReject">
                        
                        <button type="submit" id="btnRechazar" class="btn btn-danger">Rechazar</button>
                        <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>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#solicitudesMenu, #gestionSolicitudesMenu').addClass('active');

            var solicitud_id, opcion, invisibleColumns;
            opcion = 4;

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

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

            //$("#comentarioPausa").alphaNumericOnly();
            //$("#comentarioFinal").alphaNumericOnly();
            //$("#comentarioRechazo").alphaNumericOnly();

            $('.editSolicitudIT').css('display', 'none');
            $('.rechazarSolicitudSection').css('display', 'none');

            $('.sinAsignarSection').css("display", "contents");
            $('.asignadasSection').css("display", "none");
            $('.procesoSection').css("display", "none");
            $('.pausaSection').css("display", "none");
            $('.finalSection').css("display", "none");
            $('.allSolicitudesSection').css("display", "none");

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

                $('.sinAsignarSection').css("display", "contents");
                $('.asignadasSection').css("display", "none");
                $('.procesoSection').css("display", "none");
                $('.pausaSection').css("display", "none");
                $('.finalSection').css("display", "none");
                $('.allSolicitudesSection').css("display", "none");
            });
            $('#asignadasMenu').click(function(e) {
                e.preventDefault();

                $('.sinAsignarSection').css("display", "none");
                $('.asignadasSection').css("display", "contents");
                $('.procesoSection').css("display", "none");
                $('.pausaSection').css("display", "none");
                $('.finalSection').css("display", "none");
                $('.allSolicitudesSection').css("display", "none");
            });
            $('#procesoMenu').click(function(e) {
                e.preventDefault();

                $('.sinAsignarSection').css("display", "none");
                $('.asignadasSection').css("display", "none");
                $('.procesoSection').css("display", "contents");
                $('.pausaSection').css("display", "none");
                $('.finalSection').css("display", "none");
                $('.allSolicitudesSection').css("display", "none");
            });
            $('#pausaMenu').click(function(e) {
                e.preventDefault();

                $('.sinAsignarSection').css("display", "none");
                $('.asignadasSection').css("display", "none");
                $('.procesoSection').css("display", "none");
                $('.pausaSection').css("display", "contents");
                $('.finalSection').css("display", "none");
                $('.allSolicitudesSection').css("display", "none");
            });
            $('#finalizadosMenu').click(function(e) {
                e.preventDefault();

                $('.sinAsignarSection').css("display", "none");
                $('.asignadasSection').css("display", "none");
                $('.procesoSection').css("display", "none");
                $('.pausaSection').css("display", "none");
                $('.finalSection').css("display", "contents");
                $('.allSolicitudesSection').css("display", "none");
            });
            $('#allSolicitudesMenu').click(function(e) {
                e.preventDefault();

                $('.sinAsignarSection').css("display", "none");
                $('.asignadasSection').css("display", "none");
                $('.procesoSection').css("display", "none");
                $('.pausaSection').css("display", "none");
                $('.finalSection').css("display", "none");
                $('.allSolicitudesSection').css("display", "contents");
            });

            /*
             * --------------------------- FILL SOLICITUDES TABLES ---------------------------
             */
            /* SIN ASIGNAR */
            solicitudesNOAsignadasTable = $("#solicitudesNOAsignadasTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "gestionIT/pendientes",
                    method: "GET",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_creado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            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"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnAssign' title='Asignar' alt='Asignar'><i class='material-icons'>done</i></button><button class='btn btn-danger btn-sm btnRejectSAS' title='Rechazar' alt='Rechazar'><i class='material-icons'>close</i></button></div></div>",
                    },
                ],
                /* columnDefs: [{
                    targets: invisibleColumns,
                    visible: false,
                }, ], */
            });

            /* ASIGNADAS */
            solicitudesAsignadasTable = $("#solicitudesAsignadasTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "gestionIT/estado/2/12",
                    method: "GET",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "fullName_creado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        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"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-primary btn-sm btnComment' title='Comentar' alt='Comentar'><i class='material-icons'>forum</i></button><button class='btn btn-primary btn-sm btnReturn' title='Regresar' alt='Regresar'><i class='material-icons'>reply</i></button><button class='btn btn-danger btn-sm btnReject' title='Rechazar' alt='Rechazar'><i class='material-icons'>close</i></button></div></div>",
                    },
                ],
                /* columnDefs: [{
                    targets: invisibleColumnsAsignadas,
                    visible: false,
                }, ], */
            });

            /* PROCESO */
            solicitudesProcesoTable = $("#solicitudesProcesoTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "gestionIT/estado/3/12",
                    method: "GET",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "fullName_creado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        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"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-primary btn-sm btnComment' title='Comentar' alt='Comentar'><i class='material-icons'>forum</i></button><button class='btn btn-primary btn-sm btnReturn' title='Regresar' alt='Regresar'><i class='material-icons'>reply</i></button><button class='btn btn-danger btn-sm btnReject' title='Rechazar' alt='Rechazar'><i class='material-icons'>close</i></button></div></div>",
                    },
                ],
                /* columnDefs: [{
                    targets: invisibleColumnsProceso,
                    visible: false,
                }, ], */
            });

            /* PAUSA */
            solicitudesPausaTable = $("#solicitudesPausaTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "gestionIT/estado/4/12",
                    method: "GET",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia"
                    },
                    {
                        data: "asunto",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "sistema",
                        className: "text-wrap"
                    },
                    {
                        data: "sucursal",
                        className: "text-wrap"
                    },
                    {
                        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>";
                            }

                            return badge;
                        },
                    },
                    {
                        data: "fullName_creado_por",
                        className: "text-wrap"
                    },
                    {
                        data: "fullName_aprueba",
                        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"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-primary btn-sm btnComment' title='Comentar' alt='Comentar'><i class='material-icons'>forum</i></button><button class='btn btn-primary btn-sm btnReturn' title='Regresar' alt='Regresar'><i class='material-icons'>reply</i></button><button class='btn btn-danger btn-sm btnReject' title='Rechazar' alt='Rechazar'><i class='material-icons'>close</i></button></div></div>",
                    },
                ],
                /* columnDefs: [{
                    targets: invisibleColumnsProceso,
                    visible: false,
                }, ], */
            });

            /* FINALIZADAS */
            getSolicitudesFinalizadas();
            $(".pickedDate").change(function(e) {
                e.preventDefault();

                getSolicitudesFinalizadas();
            });

            function getSolicitudesFinalizadas() {
                var periodoInicio = $("#periodoInicio").val();
                var periodoFinal = $("#periodoFinal").val();

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

                solicitudesFinalTable = $("#solicitudesFinalTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "gestionIT/dateRange/5/12/" + periodoInicio + "/" + periodoFinal,
                        /* type: "POST",
                        data: {
                            estado: 5,
                            periodoInicio: periodoInicio,
                            periodoFinal: periodoFinal
                        }, */
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            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 == "SIN TIPO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "sistema",
                            className: "text-wrap"
                        },
                        {
                            data: "sucursal",
                            className: "text-wrap"
                        },
                        {
                            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-danger">' + data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fullName_creado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "perfilAprueba",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_aprueba",
                            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"
                        },
                    ],
                    /* columnDefs: [{
                        targets: invisibleColumnsProceso,
                        visible: false,
                    }, ], */
                });
            }

            /* ALL SOLICITUDES */
            getAllSolicitudes();
            $(".pickedDateTodas").change(function(e) {
                e.preventDefault();

                getAllSolicitudes();
            });

            function getAllSolicitudes() {
                var periodoInicioTodas = $("#periodoInicioTodas").val();
                var periodoFinalTodas = $("#periodoFinalTodas").val();

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

                solicitudesAllTable = $("#solicitudesAllTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "gestionIT/getAllSolicitudes/1/12/" + periodoInicioTodas + "/" +
                            periodoFinalTodas,
                        /* type: "POST",
                        data: {
                            estado: 5,
                            periodoInicio: periodoInicio,
                            periodoFinal: periodoFinal
                        }, */
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            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 == "SIN TIPO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "sistema",
                            className: "text-wrap"
                        },
                        {
                            data: "sucursal",
                            className: "text-wrap"
                        },
                        {
                            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-danger">' + data +
                                        "</span>";
                                } else if (data == "RECHAZADA IT") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' + data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fullName_creado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "perfilAprueba",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_aprueba",
                            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"
                        },
                    ],
                    /* columnDefs: [{
                        targets: invisibleColumnsProceso,
                        visible: false,
                    }, ], */
                });
            }

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

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

            /*  FUNCTION ASSIGN SOLICITUD */
            $(document).on("click", ".btnAssign", function(e) {
                e.preventDefault();

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

                $.ajax({
                    url: "{{ URL::asset('php/validationsAPI.php') }}",
                    method: "POST",
                    datatype: "json",
                    data: {
                        solicitud_id: solicitud_id,
                        opcion: 1
                    },
                    success: function(data) {
                        if (data.result == "Existe") {
                            toastMixinLong.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'NO DISPONIBLE! Solicitud en gestión por otro usuario.'
                            });
                        } else {
                            try {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader('X-CSRF-Token', $(
                                                    'meta[name="csrf-token"]')
                                                .attr('content'));
                                        }
                                    },
                                    url: "gestionIT/assignSolicitud",
                                    type: "POST",
                                    data: {
                                        solicitud_id: solicitud_id
                                    },
                                    success: function(data) {
                                        solicitudesNOAsignadasTable.ajax.reload(
                                            null, false);
                                        solicitudesAsignadasTable.ajax.reload(null,
                                            false);
                                        solicitudesProcesoTable.ajax.reload(null,
                                            false);
                                        solicitudesPausaTable.ajax.reload(null,
                                            false);
                                        solicitudesFinalTable.ajax.reload(null,
                                            false);
                                        solicitudesAllTable.ajax.reload(null,
                                            false);

                                        console.log("Solicitud: " + data.id +
                                            " asignada.");

                                        toastMixin.fire({
                                            animation: true,
                                            title: 'Asignada!'
                                        });
                                    },
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }
                        }
                    }
                });
            });

            /* FUNCTION RETURN SOLICITUD SISTEMAS */
            $(document).on("click", ".btnReturn", function(e) {
                e.preventDefault();

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

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        url: "gestionIT/returnSolicitud/" + solicitud_id,
                        method: "GET",
                        success: function(data) {
                            solicitudesNOAsignadasTable.ajax.reload(null, false);
                            solicitudesAsignadasTable.ajax.reload(null, false);
                            solicitudesProcesoTable.ajax.reload(null, false);
                            solicitudesPausaTable.ajax.reload(null, false);
                            solicitudesFinalTable.ajax.reload(null, false);
                            solicitudesAllTable.ajax.reload(null, false);

                            console.log("Solicitud: " + data.id + " regresada.");

                            toastMixin.fire({
                                animation: true,
                                title: 'Regresada!'
                            });
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            /* FUNCTION STATUS CHANGE ENABLE BOXES */
            $('#estadoOption').change(function(e) {
                e.preventDefault();

                var old_status = $('#hidden_estado_anterior').val();
                var new_estado = $('#estadoOption').val();

                if (new_estado == 2) {
                    $("#estadoOption").prop("disabled", false);
                    $("#prioridadIT").prop("disabled", false);
                    $("#fechaSelect").prop("disabled", false);
                    $("#dificultadInicio").prop("disabled", false);

                    $(".errorUsuarioView").css("display", "none");
                    $("#dificultadFinal").prop("disabled", true);
                    $("#comentarioPausa").prop("readonly", true);
                    $("#comentarioFinal").prop("readonly", true);
                } else if (new_estado == 3) {
                    $("#estadoOption").prop("disabled", false);
                    $("#prioridadIT").prop("disabled", false);
                    $("#fechaSelect").prop("disabled", false);
                    $("#dificultadInicio").prop("disabled", false);

                    $(".errorUsuarioView").css("display", "none");
                    $("#dificultadFinal").prop("disabled", true);
                    $("#comentarioPausa").prop("readonly", true);
                    $("#comentarioFinal").prop("readonly", true);
                } else if (new_estado == 4) {
                    $("#estadoOption").prop("disabled", false);
                    $("#prioridadIT").prop("disabled", true);
                    $("#fechaSelect").prop("disabled", true);
                    $("#dificultadInicio").prop("disabled", true);

                    $(".errorUsuarioView").css("display", "none");
                    $("#dificultadFinal").prop("disabled", true);
                    $("#comentarioPausa").prop("readonly", false);
                    $("#comentarioFinal").prop("readonly", true);
                } else if (new_estado == 5) {
                    $("#estadoOption").prop("disabled", false);
                    $("#prioridadIT").prop("disabled", true);
                    $("#fechaSelect").prop("disabled", true);
                    $("#dificultadInicio").prop("disabled", true);

                    $(".errorUsuarioView").css("display", "contents");
                    $("#dificultadFinal").prop("disabled", false);
                    $("#comentarioPausa").prop("readonly", true);
                    $("#comentarioFinal").prop("readonly", false);
                } else if (new_estado == 6) {
                    $("#estadoOption").prop("disabled", false);
                    $("#prioridadIT").prop("disabled", true);
                    $("#fechaSelect").prop("disabled", true);
                    $("#dificultadInicio").prop("disabled", true);

                    $(".errorUsuarioView").css("display", "none");
                    $("#dificultadFinal").prop("disabled", true);
                    $("#comentarioPausa").prop("readonly", true);
                    $("#comentarioFinal").prop("readonly", true);
                }
            });

            /* FUNCTION OPEN MODAL REJECT SOLICITUD NO ASSIGNED SAS SISTEMAS */
            $(document).on("click", ".btnRejectSAS", function(e) {
                e.preventDefault();

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

                opcion = 1;
                $('#hidden_optionReject').val(1);

                $.ajax({
                    url: "{{ URL::asset('php/validationsAPI.php') }}",
                    method: "POST",
                    datatype: "json",
                    data: {
                        solicitud_id: solicitud_id,
                        opcion: 1
                    },
                    success: function(data) {
                        if (data.result == "Existe") {
                            toastMixinLong.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'NO DISPONIBLE! Solicitud en gestión por otro usuario.'
                            });
                        } else {
                            $('#hidden_solicitud_id').val(solicitud_id);

                            $('#btnRechazar').show();
                            $('#btnGuardar').hide();
                            $('.editSolicitudIT').css('display', 'none');
                            $('.rechazarSolicitudSection').css('display', 'contents');

                            $(".modal-header").css("background-color", "#f44336");
                            $(".modal-title").css({
                                "color": "white",
                                "font-weight": "900",
                            });
                            $(".modal-title").text("Rechazar Solicitud #" + solicitud_id);
                            $("#modalGestionSolicitud").modal("show");
                        }
                    }
                });
            });

            /* --------------------------- FUNCTION CLOSE MODAL --------------------------- */
            $("#btnCancelar").click(function() {
                $("#modalGestionSolicitud").modal("hide");
            });

            /* FUNCTION REJECT SOLICITUD SISTEMAS */
            $(document).on("click", "#btnRechazar", function(e) {
                e.preventDefault();

                var solicitud_id = $('#hidden_solicitud_id').val();
                var comment = $('#comentarioRechazo').val();
                var optionReject = $('#hidden_optionReject').val();

                var var_url = "gestionIT/rejectSolicitudIT";

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        url: var_url,
                        type: "POST",
                        data: {
                            solicitud_id: solicitud_id,
                            comment: comment
                        },
                        success: function(data) {
                            $("#modalGestionSolicitud").modal("hide");
                            solicitudesNOAsignadasTable.ajax.reload(null, false);
                            solicitudesAsignadasTable.ajax.reload(null, false);
                            solicitudesProcesoTable.ajax.reload(null, false);
                            solicitudesPausaTable.ajax.reload(null, false);
                            solicitudesFinalTable.ajax.reload(null, false);
                            solicitudesAllTable.ajax.reload(null, false);

                            $("#dificultadFinal").prop("disabled", true);
                            $("#comentarioFinal").prop("readonly", true);

                            console.log("Solicitud: " + solicitud_id + " rechazada.");

                            /* SEND TELEGRAM NOTIFICATION */
                            try {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader(
                                                'X-CSRF-Token',
                                                $(
                                                    'meta[name="csrf-token"]'
                                                ).attr('content'));
                                        }
                                    },
                                    method: "POST",
                                    url: "{{ url('/api/send/telegram/notification/rechaza/it') }}",
                                    data: {
                                        solicitud_id: solicitud_id
                                    },
                                    success: function(data) {
                                        console.log('Notification sent!');
                                    },
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }

                            toastMixin.fire({
                                animation: true,
                                title: 'Rechazada!'
                            });
                            $('#hidden_solicitud_id').val('0');
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            /* FUNCTION OPEN MODAL REJECT SOLICITUD SISTEMAS */
            $(document).on("click", ".btnReject", function(e) {
                e.preventDefault();

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

                $('#hidden_optionReject').val(3);

                opcion = 1;

                $('#hidden_solicitud_id').val(solicitud_id);

                $('#btnRechazar').show();
                $('#btnGuardar').hide();
                $('.editSolicitudIT').css('display', 'none');
                $('.rechazarSolicitudSection').css('display', 'contents');

                $(".modal-header").css("background-color", "#f44336");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Rechazar Solicitud #" + solicitud_id);
                $("#modalGestionSolicitud").modal("show");
            });

            /* FUNCTION OPEN MODAL EDIT SOLICITUD SISTEMAS */
            $(document).on("click", ".btnEdit", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");
                solicitud_id = $.trim(fila.find("td:eq(0)").text());
                $('#hidden_solicitud_id').val(solicitud_id);

                $('#btnRechazar').hide();
                $('#btnGuardar').show();
                $('.editSolicitudIT').css('display', 'contents');
                $('.rechazarSolicitudSection').css('display', 'none');

                $('.comentarioFinalView').css('display', 'contents');

                $(".modal-header").css("background-color", "#0D3728");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Gestión Ticket #" + solicitud_id);
                $("#modalGestionSolicitud").modal("show");

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        url: "gestionIT/solicitud/" + solicitud_id + "/data",
                        method: "GET",
                        success: function(data) {
                            console.log(data.estado);

                            $('#asuntoBox').val(data.asunto);
                            $('#descripcionBox').val(data.descripcion);
                            $('#sistemaBox').val(data.id_sistema).change();
                            $('#prioridadIT').val(data.id_prioridad_it).change();
                            $('#tipoSolicitudBox').val(data.id_tipo_solicitud).change();
                            $('#prioridad').val(data.id_prioridad).change();
                            $('#empleadoBox').val(data.empleado);
                            $('#dificultadInicio').val(data.id_dificultad_proceso).change();
                            $('#sucursalBox').val(data.id_sucursal).change();
                            $('#estadoOption').val(data.estado).change();
                            $('#fechaSelect').val(data.fecha_hora_espera_finalizado).change();
                            $('#dificultadFinal').val(data.id_dificultad_final).change();
                            $('#comentarioPausa').val(data.comentario_pausa);
                            $('#comentarioFinal').val(data.comentario_finalizado);
                            $('#hidden_estado_anterior').val(data.estado);

                            if (data.estado == 2) {
                                $("#estado2").css("display", "contents");
                                $("#estado3").css("display", "contents");
                                $("#estado4").css("display", "none");
                                $("#estado5").css("display", "none");
                                $("#estado6").css("display", "none");

                                $("#estadoOption").prop("disabled", false);
                                $("#prioridadIT").prop("disabled", false);
                                $("#fechaSelect").prop("disabled", false);
                                $("#dificultadInicio").prop("disabled", false);

                                $("#dificultadFinal").prop("disabled", true);
                                $("#comentarioPausa").prop("readonly", true);
                                $("#comentarioFinal").prop("readonly", true);
                            } else if (data.estado == 3) {
                                $("#estado2").css("display", "none");
                                $("#estado3").css("display", "contents");
                                $("#estado4").css("display", "contents");
                                $("#estado5").css("display", "contents");
                                $("#estado6").css("display", "none");

                                $("#estadoOption").prop("disabled", false);
                                $("#prioridadIT").prop("disabled", true);
                                $("#fechaSelect").prop("disabled", true);
                                $("#dificultadInicio").prop("disabled", true);

                                $("#dificultadFinal").prop("disabled", true);
                                $("#comentarioPausa").prop("readonly", true);
                                $("#comentarioFinal").prop("readonly", true);
                            } else if (data.estado == 4) {
                                $("#estado2").css("display", "none");
                                $("#estado3").css("display", "none");
                                $("#estado4").css("display", "contents");
                                $("#estado5").css("display", "none");
                                $("#estado6").css("display", "contents");

                                $("#estadoOption").prop("disabled", false);
                                $("#prioridadIT").prop("disabled", true);
                                $("#fechaSelect").prop("disabled", true);
                                $("#dificultadInicio").prop("disabled", true);

                                $("#dificultadFinal").prop("disabled", true);
                                $("#comentarioPausa").prop("readonly", true);
                                $("#comentarioFinal").prop("readonly", true);
                            }
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            
            /* FUNCTION CHANGE SOLICITUD STATUS */
            $(document).on("click", "#btnGuardar", function(e) {
                e.preventDefault();

                var solicitud_id = $('#hidden_solicitud_id').val();

                var estado = $.trim($('#estadoOption').val());
                var prioridadIT = $.trim($('#prioridadIT').val());
                var fechaEstimada = $.trim($('#fechaSelect').val());
                var dificultadInicio = $.trim($('#dificultadInicio').val());
                var dificultadFinal = $.trim($('#dificultadFinal').val());
                var comentarioPausa = $.trim($('#comentarioPausa').val());
                var comentarioFinal = $.trim($('#comentarioFinal').val());
                var errorUsuarioCheck = $.trim($('#errorUsuarioCheck').val());

                if (estado == 3) {
                    comentarioPausa = "commentPausa";
                    comentarioFinal = "commentFinal";
                } else if (estado == 4 || estado == 6) {
                    comentarioFinal = "commentFinal";
                }

                if (estado == 2 && (prioridadIT == 0 || dificultadInicio == 0)) {
                    Swal.fire("", "No puede dejar campos sin seleccionar o llenar!", "warning");
                } else if (estado == 3 && (prioridadIT == 0 || dificultadInicio == 0)) {
                    Swal.fire("", "No puede dejar campos sin seleccionar o llenar!", "warning");
                } else if ((estado == 4 || estado == 6) && (prioridadIT == 0 || dificultadInicio == 0 || !$
                        .trim($("#comentarioPausa").val()))) {
                    Swal.fire("", "No puede dejar campos sin seleccionar o llenar!", "warning");
                } else if ((estado == 5) && (prioridadIT == 0 || dificultadInicio == 0 || !$.trim($(
                        "#comentarioFinal").val()))) {
                    Swal.fire("", "No puede dejar campos sin seleccionar o llenar!", "warning");
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr('content'));
                                }
                            },
                            url: "gestionIT/gestion/edit",
                            type: "POST",
                            data: {
                                solicitud_id: solicitud_id,
                                prioridadIT: prioridadIT,
                                fechaEstimada: fechaEstimada,
                                dificultadInicio: dificultadInicio,
                                dificultadFinal: dificultadFinal,
                                comentarioPausa: comentarioPausa,
                                comentarioFinal: comentarioFinal,
                                errorUsuarioCheck: errorUsuarioCheck,
                                estado: estado,
                            },
                            success: function(data) {
                                $("#modalGestionSolicitud").modal("hide");
                                solicitudesNOAsignadasTable.ajax.reload(null, false);
                                solicitudesAsignadasTable.ajax.reload(null, false);
                                solicitudesProcesoTable.ajax.reload(null, false);
                                solicitudesPausaTable.ajax.reload(null, false);
                                solicitudesFinalTable.ajax.reload(null, false);
                                solicitudesAllTable.ajax.reload(null, false);

                                if (estado == 4 || estado == 5 || estado == 6) {
                                    try {
                                        $.ajax({
                                            beforeSend: function(xhr, type) {
                                                if (!type.crossDomain) {
                                                    xhr.setRequestHeader(
                                                        'X-CSRF-Token',
                                                        $(
                                                            'meta[name="csrf-token"]'
                                                        ).attr('content'));
                                                }
                                            },
                                            url: "gestionIT/notification/" +
                                                solicitud_id + "/" + estado,
                                            method: "GET",
                                            success: function(data) {},
                                        });
                                    } catch (error) {
                                        Swal.fire("", "Error: " + error, "error");
                                    }
                                }

                                console.log("Solicitud: " + data.id + " cambia de estado.");

                                toastMixin.fire({
                                    animation: true,
                                    title: 'Estado Editado!'
                                });
                                $('#hidden_solicitud_id').val('0');
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }
            });

            /* FUNCTION GO TO COMMENTS */
            $(document).on("click", ".btnComment", function(e) {
                e.preventDefault();

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

                window.location = "gestionIT/comment/" + id_secuencia;
            });
        });
    </script>
@endsection