@extends('layouts.menu')

@section('tittle')
    REPORTE TICKETS
@endsection


@section('contenido')
    <style>
        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            width: 5px;
            background: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {
            width: 1em;
            background-color: #ddd;
            outline: 1px solid slategrey;
            border-radius: 1rem;
        }

        .text-small {
            font-size: 0.9rem;
        }

        .messages-box,
        .chat-box {
            height: auto;
            overflow-y: scroll;
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        input::placeholder {
            font-size: 0.9rem;
            color: #999;
        }

        .chatBox-overflow {
            overflow: hidden;
        }

        #messageBox {
            overflow: auto;
        }
    </style>

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

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">REPORTE TICKETS</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>
                    {{-- FILTER FOR COLUMNS --}}
                    <div class="row d-flex justify-content-end">
                        <span><b>Filtros Rápidos</b></span>
                        <div class="mainFilters">
                            <div class="row f-flex justify-content-end">

                                <div class="col-sm">
                                    <label for="">Asunto</label>
                                    <input type="text" class="form-control form-control-sm tableMainFilters"
                                        id="filterAsuntoTables" placeholder="Asunto">
                                </div>
                                <div class="col-sm">
                                    <label for="">Solicitado Por</label>
                                    <input type="text" class="form-control form-control-sm tableMainFilters"
                                        id="filterSolicitaTables" placeholder="Solicitado Por">
                                </div>
                                <div class="col-sm">
                                    <label for="">Aprueba o Rechaza</label>
                                    <input type="text" class="form-control form-control-sm tableMainFilters"
                                        id="filterJefeTables" placeholder="Aprobado o Rechazado Por">
                                </div>
                                <div class="col-sm">
                                    <label for="">Asignado Por</label>
                                    <input type="text" class="form-control form-control-sm tableMainFilters"
                                        id="filterAsignadoTables" placeholder="Asignado Por">
                                </div>
                                <div class="col-sm">
                                    <label for="">Estado</label>
                                    <input type="text" class="form-control form-control-sm tableMainFilters"
                                        id="filterEstadoTables" placeholder="Estado">
                                </div>
                                <div class="col-sm">
                                    <label for="" class="form-label">Área Solicita</label>
                                    <select class="form-select form-select-sm" name="filterAreaSolicitaTable"
                                        id="filterAreaSolicitaTable">
                                        <option selected value="">TODAS</option>
                                        @foreach ($allGruposData as $solicita)
                                            <option value="{{ $solicita->id_grupo }}">{{ $solicita->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm">
                                    <label for="" class="form-label">Área Resuelve</label>
                                    <select class="form-select form-select-sm" name="filterAreaResuelveTable"
                                        id="filterAreaResuelveTable">
                                        <option selected value="">TODAS</option>
                                        @foreach ($gruposData as $resuelve)
                                            <option value="{{ $resuelve->id_grupo }}">{{ $resuelve->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="ticketsFinalizadosTable"
                            class="table table-hover table-center table-bordered table-striped" style="width:100%">

                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Asunto</th>
                                    <th class="text-center">Descripción</th>
                                    <th class="text-center">Justificación</th>
                                    <th class="text-center">Prioridad Ticket</th>
                                    <th class="text-center">Solicitado</th>
                                    <th class="text-center">Cargo Aprueba</th>
                                    <th class="text-center">Aprobado | Rechazado por</th>
                                    <th class="text-center">Asignado Por</th>
                                    <th class="text-center">Tipo Autorización</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Prioridad</th>
                                    <th class="text-center">Área Solicita</th>
                                    <th class="text-center">Área Resuelve</th>
                                    <th class="text-center">Sucursal</th>

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

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

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

        </div>
    </div>

    {{-- MODAL VIEW ESCALA STATUS --}}
    <div class="modal fade" id="modalEscala" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="modalEscala" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <div class="table-responsive">
                        <table id="escalaStatusTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">Nombre</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Fecha Autoriza | Rechaza</th>
                                </tr>
                            </thead>
                            <tbody>

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


                    <div class="modal-footer">
                        <button type="submit" id="btnCloseEscala" class="btn btn-secondary">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>



    {{-- MODAL EDIT SOLICITUD --}}
    <div class="modal fade" id="modalGestionSolicitud" data-bs-keyboard="false" data-bs-backdrop="static"
        role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <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" style="display: none">
                                    <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 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 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 sistemaSection" style="display: none">
                                    <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 class="row latitudSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="sucursalBox">Latitud:</label>
                                        <input type="text" class="form-control form-control-sm" id="latitud"
                                            readonly>
                                    </div>
                                </div>
                                <div class="row latitudSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="sucursalBox">Longitud:</label>
                                        <input type="text" class="form-control form-control-sm" id="longitud"
                                            readonly>
                                    </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 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 prioridadITSection">
                                    <div class="form-group">
                                        <label for="" class="col-form-label" for="prioridadIT">Prioridad a
                                            Resolver:</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 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="row">
                                <div class="form-group">
                                    <label for="" class="col-form-label textControls"
                                        for="justificacionBox">Justificación:</label>
                                    <textarea name="justificacionBox" id="justificacionBox" class="form-control textControlsArea" cols="8"
                                        rows="3" readonly></textarea>
                                </div>
                            </div>
                        </div>
                        <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 class="form-control form-control-sm quill-editor" name="comentarioPausa"
                                        id="comentarioPausa" rows="5"></div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="comentarioFinal">Comentario
                                        Finalizado:</label>
                                    {{-- <textarea name="comentarioFinal" id="comentarioFinal" class="form-control form-control-sm " cols="20"
                                        rows="3" readonly></textarea> --}}
                                    <div class="form-control form-control-sm quill-editor" name="comentarioFinal"
                                        id="comentarioFinal" rows="5"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <label for="">URL / Enlace: </label>
                                <input type="text" name="url" placeholder="Enlace..."
                                    class="form-control form-control-sm inputControls" id="txtURL">
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-3">
                                <label for="messagesBox" class="form-label">Comentarios:</label>

                                <div class="px-4 py-5 chat-box bg-white" id="messagesBox">



                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-3">
                                <label for="pasos_resolver" class="form-label">Pasos para Resolver:</label>
                                {{-- <textarea class="form-control " name="pasos_resolver" id="pasos_resolver" rows="5" readonly></textarea> --}}
                                <div class="form-control form-control-sm quill-editor" name="pasos_resolver"
                                    id="pasos_resolver" rows="5"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row rechazarSolicitudSection">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="comentarioRechazo">Comentario:</label>
                                {{-- <textarea name="comentarioRechazo" id="comentarioRechazo" class="form-control form-control-sm" cols="20" rows="3"></textarea> --}}
                                <div class="form-control form-control-sm quill-editor" name="comentarioRechazo"
                                    id="comentarioRechazo" rows="5"></div>
                            </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="button" class="btn btn-secondary" id="btnCancelar"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

            reporteTickets();

            $('.pickedDate').change(function(e) {
                e.preventDefault();

                reporteTickets();
            });

            var editors = {};

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

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

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

            var ticketsFinalizadosTable;

            function reporteTickets() {
                var periodoInicio = $('#periodoInicio').val();
                var periodoFinal = $('#periodoFinal').val();

                $('.tableMainFilters').val('');

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

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

                if (windowSize <= 960) {
                    fixedColumns__ticketsFinalizadosTable = 0;
                } else if (windowSize > 960) {
                    fixedColumns__ticketsFinalizadosTable = 4;
                }

                ticketsFinalizadosTable = $("#ticketsFinalizadosTable").DataTable({
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '400px',
                    pageLength: 50,
                    fixedColumns: {
                        left: fixedColumns__ticketsFinalizadosTable,
                        right: 1
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    initComplete: function() {
                        var api = this.api();
                    },
                    dom: 'frtlip',
                    ajax: {
                        method: "GET",
                        url: "{{ url('/api/get/reporte/tickets/') }}" + "/" + periodoInicio + "/" +
                            periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "justificacion",
                            className: "text-wrap"
                        },
                        {
                            data: "prioridadTicket",
                            className: "text-center",
                            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 {
                                    badge +=
                                        '<span class="badge badge-pill badge-light">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fullName_creado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "perfil",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_aprueba",
                            className: "text-wrap"
                        },
                        {
                            data: "fullName_asignado_por",
                            className: "text-wrap"
                        },
                        {
                            data: "id_tipo_ticket",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">AUTORIZACIÓN ESCALA</span>';
                                } else if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">AUTORIZACIÓN NORMAL</span>';
                                } else {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">FINALIZA POR ESCALA</span>';
                                }

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

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

                                return badge;
                            },
                        },
                        {
                            data: "areaSolicita",
                            className: "text-wrap text-center"
                        },
                        {
                            data: "areaResuelve",
                            className: "text-wrap text-center"
                        },
                        {
                            data: "sucursal",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_creado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_aceptado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_asignado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_proceso",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_pausa",
                            className: "text-wrap"
                        },
                        {
                            data: "comentario_pausa",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_reanudado",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_estimada",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_hora_finalizado",
                            className: "text-wrap"
                        },

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

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

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

                                return badge;
                            },
                        },
                        {
                            data: 'id_area_solicita'
                        },
                        {
                            data: 'id_area_resuelve'
                        },
                        {
                            data: "error",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "SI") {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">' +
                                        data +
                                        "</span>";
                                } else if (data == "NO") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">' +
                                        data +
                                        "</span>";
                                }

                                return badge;
                            },
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'>    <button class='btn btn-info btn-sm btnPreview text-white' title='Ver Gestión' alt='Ver Gestión'><i class='material-icons'>visibility</i></button> </div></div>",
                        },
                    ],
                    order: [
                        [0, "DESC"]
                    ],
                    columnDefs: [{
                        targets: [26, 27],
                        visible: false,
                        searchable: true
                    }],
                });
            }



            $(document).on("click", ".btnPreview", 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");

                fillGestionData(solicitud_id, 2);
            });


            function fillGestionData(solicitud_id, opcion) {
                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/get/x/ticket/data') }}",
                        data: {
                            solicitud_id: solicitud_id,
                        },
                        success: function(data) {
                            console.log(data.idEstado);

                            $('#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.idEstado).change();
                            $('#fechaSelect').val(data.fecha_hora_espera_finalizado).change();
                            $('#dificultadFinal').val(data.id_dificultad_final).change();
                            $('#hidden_estado_anterior').val(data.idEstado);

                            var editors = window.quillEditors;

                            editors['comentarioPausa'].enable(false);
                            editors['comentarioFinal'].enable(false);
                            editors['pasos_resolver'].enable(false);

                            editors['comentarioPausa'].clipboard.dangerouslyPasteHTML(data.comentario_pausa || '');
                            editors['comentarioFinal'].clipboard.dangerouslyPasteHTML(data.comentario_finalizado || '');
                            editors['pasos_resolver'].clipboard.dangerouslyPasteHTML(data.pasos_resolver || '');

                            $('#justificacionBox').val(data.justificacion);
                            $('#latitud').val(data.latitud);
                            $('#longitud').val(data.longitud);

                            if (opcion == 1) {
                                $("#estadoOption").prop("disabled", true);
                                $("#prioridadIT").prop("disabled", true);
                                $("#fechaSelect").prop("disabled", true);
                                $("#dificultadInicio").prop("disabled", true);

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

                                $('#estadoOption').val(data.idEstado).change();

                                $("#txtURL").prop("readonly", true);


                                $('#btnGuardar').attr('disabled', false);
                            } else {
                                $("#estadoOption").prop("disabled", true);
                                $("#prioridadIT").prop("disabled", true);
                                $("#fechaSelect").prop("disabled", true);
                                $("#dificultadInicio").prop("disabled", true);

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

                                $('#estadoOption').val(data.idEstado).change();

                                $('#btnGuardar').attr('disabled', true);
                            }
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        method: "POST",
                        url: "{{ url('/api/get/comentarios/ticket/data') }}",
                        data: {
                            solicitud_id: solicitud_id,
                        },
                        success: function(data) {
                            $('#messagesBox').html(data);
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            }


            $("#btnCancelar").click(function() {
                $("#modalGestionSolicitud").modal("hide");
            });


            $('#filterAsuntoTables').keyup(function() {
                ticketsFinalizadosTable.column(1).search(this.value).draw();
            });
            $('#filterSolicitaTables').keyup(function() {
                ticketsFinalizadosTable.column(5).search(this.value).draw();
            });
            $('#filterJefeTables').keyup(function() {
                ticketsFinalizadosTable.column(7).search(this.value).draw();
            });
            $('#filterAsignadoTables').keyup(function() {
                ticketsFinalizadosTable.column(8).search(this.value).draw();
            });
            $('#filterEstadoTables').keyup(function() {
                ticketsFinalizadosTable.column(10).search(this.value).draw();
            });
            $('#filterAreaSolicitaTable').change(function() {
                var selectedRange = $(this).val();
                var min, max;
                min = selectedRange;
                max = selectedRange;

                if (selectedRange === '') {
                    // If "All" is selected, clear the filter
                    ticketsFinalizadosTable.column(27).search(selectedRange).draw();
                    return;
                } else {
                    min = selectedRange;
                    max = selectedRange;
                }

                //ticketsFinalizadosTable.column(26).search(this.value, true, false).draw()
                ticketsFinalizadosTable.column(27).search('^(' + min + '|' + (min) + '|' + (max) + '|' +
                    max + ')$',
                    true, false).draw();
            });
            $('#filterAreaResuelveTable').change(function() {
                var selectedRange = $(this).val();
                var min, max;
                min = selectedRange;
                max = selectedRange;

                if (selectedRange === '') {
                    // If "All" is selected, clear the filter
                    ticketsFinalizadosTable.column(28).search(selectedRange).draw();
                    return;
                } else {
                    min = selectedRange;
                    max = selectedRange;
                }

                //ticketsFinalizadosTable.column(27).search(this.value, true, false).draw()
                ticketsFinalizadosTable.column(28).search('^(' + min + '|' + (min) + '|' + (max) + '|' +
                    max + ')$',
                    true, false).draw();
            });

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

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

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

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

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

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

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

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

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

        });
    </script>
@endsection