@extends('layouts.app')
@section('pageTitle', 'Trabajos')
@push('styles')
    <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap.css') }}" />
@endpush
@section('content')
    <input type='hidden' id='amount-pages-first-folder'>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">


                <div class="card-header">
                    <div class="d-flex flex-wrap justify-content-between  gap-1">

                        <div class="card-d-flex align-items-center">
                            <span class="span-title float-left">Listado Trabajos
                                <i class="fa fa-question-circle-o" aria-hidden="true">

                                </i>
                            </span>


                            <h4 class="d-inline float-left">
                                @can('admin')
                                    <a target="_blank" href="{{ route('permission.module_permission', '3') }}"><abbr
                                            title="Gestionar los permisos de esté módulo">
                                            <i class="fas fa-cog" aria-hidden="true"></i></abbr>
                                    </a>
                                @endcan
                            </h4>



                        </div>

                        <div class="button">

                            @can('block-user-view')
                                <button class="btn btn-m btn-warning  btn-sm  " data-toggle="modal" data-target="#BlockUser"><i
                                        class="fa fa-cog"></i>
                                    Bloquear
                                </button>
                            @endcan

                            {{-- <div class=" col-lg-12 row float-center" id="modal-body-block-hours">
                                listado
                            </div> --}}
                            <button class="btn btn-m btn-success float-right btn-sm" data-toggle="modal"
                                style="margin-left: 1rem" data-target="#CreateTask" id="create-task"><i
                                    class="fa fa-plus"></i> Crear</button>
                        </div>



                    </div>



                </div>


                <div class="card-body">
                    <div class="row px-4">

                        <div id="myFolders" class="col-lg-2 pr-0 pl-0"></div>
                        <div id="div_schedule" class="col-lg-10">
                            <div class="row">
                                <div class="col-12">
                                    <input type="text" placeholder="Buscar..." id="searchInput"
                                        style="border-radius:4px; border:0; float:right; color: white; background:rgba(255, 255, 255, 0.1);">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <table
                                        class="table tableTask table-p025 table-responsive-sm table-hover table-outline mb-0"
                                        id="task-table" style="width: 100%">
                                        <thead class="thead-light">
                                            <tr style="display: none">
                                                <th class="text-center"></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody style="cursor: pointer">
                                        </tbody>
                                    </table>
                                    <div style="float: right;" class="dataTables_paginate paging_simple_numbers"
                                        id="task-table_paginate">
                                        <ul class="pagination" id="pages">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

    {{-- Bloquear usuarios --}}
    <div class="modal fade" id="BlockUser" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dark" role="document">



            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modificar Tiempo de Bloqueo</h5>

                </div>
                <div class="modal-body ">
                    <div>
                        <div class="row">
                            <div class="col-md">
                                <div class="form-check form-check-inline mr-1">
                                    <input class="form-check-input send-to_block" id="checkbox_roles_block" type="checkbox"
                                        name="inline-radios">
                                    <label class="form-check-label">Areas</label>
                                </div>
                                <div class="form-check form-check-inline mr-1">
                                    <input class="form-check-input send-to_block" id="checkbox_users_block" type="checkbox"
                                        name="inline-radios">
                                    <label class="form-check-label">Usuarios</label>
                                </div>
                            </div>

                            <div class="col-md mt-2">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button type='button' id='btn-block-unblock' disabled='true'
                                            class='btn btn-success float-left btn-sm' data-dismiss='modal'><i
                                                class='fa fa-lock'></i>
                                            <small>Deshabilitar Bloqueo</small>
                                        </button>
                                    </div>
                                    <button id="see_user_block" class="btn btn-m btn-dark btn-sm mr-n4"
                                        title="Buscar Personas Bloqueadas">
                                        <i class="fas fa-eye">
                                        </i>
                                    </button>
                                </div>
                                <select style="display: none" class="  form-control" name="choose_btn_unblock"
                                    id="choose_btn_unblock">
                                </select>
                            </div>
                            {{-- selector for hours quantity a user or a role should be blocked --}}
                            {{-- <div class="col-md mt-2">
                                <div class="input-group">

                                    <input type="number" id='hours' min="1" value="1" class="form-control"
                                        aria-label="Input group example" aria-describedby="btnGroupAddon">
                                    <div class="input-group-prepend">

                                        <button type='button' id='btn-block-user-hours' disabled='true'
                                            class='btn btn-success   btn-sm  ' data-dismiss='modal'>
                                            <i class='fa fa-check'>

                                            </i>
                                            <small>
                                                Bloquear
                                            </small>
                                        </button>
                                    </div>
                                </div>

                                <select style="display: none" class="  form-control" name="choose_block_hour"
                                    id="choose_block_hour">

                                </select>
                            </div> --}}

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

                <div class="modal-body">
                    <div id="modal-body-block-hours" style="display: none">

                    </div>
                </div>
                <div class="modal-body">
                    <div class="col-lg-12 row" id="modal-body-block-roles-hours">

                    </div>
                </div>

            </div>
        </div>
    </div>
    {{-- Bloquear usuarios end --}}



    <!--Create Task-->
    <div class="modal fade" id="CreateTask" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-slideout modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Crear Trabajo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <form action="{{ route('tasks.store') }}" method="post" id="form-create-task"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <div class="col-lg-8 pt-1">
                                                    <label>Titulo</label>
                                                    <input type="text" class="form-control" name="title" id="title" />
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-lg-11">
                                                    <label>Descripción</label>
                                                    <textarea name="comment" id="comment" class="description"></textarea>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-lg-12">
                                                    <div class="form-group row">
                                                        <div class="col-lg-4">
                                                            <label>Enviar a </label>
                                                            <i title="Elija los remitentes que puedan visualizar o deban recibir esta tarea o información, debe dejar presionada la tecla Ctrl( Control ) para elegir varias Areas o Usuarios"
                                                                class="fa fa-question-circle"></i>
                                                            <div class="form-group row">
                                                                <div class="col-md-9 col-form-label">
                                                                    <div class="form-check form-check-inline mr-1">
                                                                        <input class="form-check-input send-to"
                                                                            id="checkbox_roles" type="checkbox"
                                                                            name="inline-radios">
                                                                        <label class="form-check-label">Areas</label>
                                                                    </div>
                                                                    <div class="form-check form-check-inline mr-1">
                                                                        <input class="form-check-input send-to"
                                                                            id="checkbox_users" type="checkbox"
                                                                            name="inline-radios">
                                                                        <label class="form-check-label">Usuarios</label>
                                                                    </div>
                                                                    <div class="form-check form-check-inline mr-1">
                                                                        @if (Auth()->user()->setting_role_id !== 14)
                                                                            <input class="form-check-input send-to"
                                                                                id="checkbox_models" type="checkbox"
                                                                                name="inline-radios">
                                                                            <label class="form-check-label">Modelos</label>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <label>Tiempo Estimado </label>
                                                            <i title="Escoja el tiempo que calcula esta tarea debe tomar en obtener una solución. Recuerde que la idea es que las tareas se realicen en el menor tiempo posible"
                                                                class="fa fa-question-circle"></i>
                                                            <div class="form-group row">
                                                                <div class="col-md-9 col-form-label">
                                                                    <div class="form-check form-check-inline mr-1">
                                                                        <input class="form-check-input" id="radio-hours"
                                                                            type="radio" value="option-hours"
                                                                            name="time_aprox" checked="">
                                                                        <label class="form-check-label"
                                                                            for="radio-hours">Horas</label>
                                                                    </div>
                                                                    <div class="form-check form-check-inline mr-1">
                                                                        <input class="form-check-input" id="radio-days"
                                                                            type="radio" value="option-days"
                                                                            name="time_aprox">
                                                                        <label class="form-check-label"
                                                                            for="radio-days">Dias</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3">
                                                            <label>Adjuntar Archivos</label><i
                                                                title="Si desea subir varios archivos imágenes, mantenga presionada la tecla CTRL (Control) del teclado y seleccione los archivos."
                                                                class="fa fa-question-circle ml-1"></i>
                                                            <div class="col-sm-7 col-lg-6 inputFile pl-0">
                                                                <span class="btnFile btn-dark btn-sm">
                                                                    <span id="spanFile">Seleccionar Archivos</span>
                                                                    <i class="fa fa-upload pl-1 pr-1"
                                                                        aria-hidden="true"></i>
                                                                </span>
                                                                <input id="inputfile" name="inputfile[]" type="file"
                                                                    multiple="">
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-2">
                                                            <label>Ortografía</label>
                                                            <button type="button" class="btn btn-m btn-dark btn-sm mr-2"
                                                                onclick="configOrtography()"
                                                                title="Activar configuración google chrome"><i
                                                                    class="fas fa fa-question ml-1"></i></button>
                                                        </div>



                                                    </div>
                                                </div>

                                                <div class="col-lg-12 row">
                                                    <div class="col-lg-5 bg-secondary">
                                                        <span id="div_receivers"></span>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div id="div_hours">
                                                            <select name="select_hours" class="form-control">
                                                                @for ($i = 1; $i <= 24; $i++)
                                                                    <option>{{ $i }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                        <div id="div_days" style="display: none">
                                                            <select name="select_days" class="form-control">
                                                                @for ($i = 2; $i <= 15; $i++)
                                                                    <option>{{ $i }}</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="card-footer">
                                        <button type="button" class="btn btn-danger  pull-right btn-sm"
                                            data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
                                        <button type="button" class="btn btn-success  pull-rigth btn-sm" id="btn-create"><i
                                                class="fa fa-check"></i> Aceptar</button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="modal-footer ml-4">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button type="button" class="btn btn-danger  pull-right btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button type="button" class="btn btn-success  pull-rigth btn-sm" id="btn-create"><i class="fa fa-check"></i> Aceptar</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </div> -->
            </div>
        </div>
    </div>

    <!---->

    <!-- Add Receivers -->
    <div id="modal-receivers" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Agregar Recipiente</h4>
                    <div class="mt-auto p-2 bd-highlight" id="div-selectAll" style="display: none">

                        <label>Seleccionar todo</label>
                        <input type="checkbox" name="selectAll" id="selectAll">

                    </div>
                </div>
                <div class="modal-body">
                    <div class=" col-lg-12 row" id="modal-body-receiviers">

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


    <!-- Modal de configuración de chrome para activar la detención de fallos de ortografía -->
    <div class="modal fade" id="modal-orthography">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                    <h4>Ortografía en Google Chrome.</h4>
                </div>
                <div class="modal-body">
                    1 Dirígete al panel de configuración.

                    Lo primero que deberás hacer es seleccionar el botón de opciones de la esquina superior derecha de la
                    pantalla. Selecciona 'Configuración' y dirígete abajo para desplegar el panel de opciones avanzadas.

                    2 Activa el corrector.

                    A continuación, busca las opciones de idioma: 'Configuración de idioma y de introducción de texto'. En
                    la nueva pestaña abierta, en la parte de abajo, haz clic en 'Habilitar la revisión ortográfica' y listo.
                    Ahora cuando comentas una falta de ortografía aparecerá en rojo. Si haces clic en la palabra con el
                    botón derecho podrás corregirla.
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-success" value="Acceotar">
                </div>
            </div>
        </div>
    </div>

    <!-- Folder Administrator -->
    <div id="modal-admin-folder" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Administrar Carpeta</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <label> Nombre</label>
                                    </div>
                                    <div class="col-lg-7">
                                        <form action="{{ route('tasks.store_folder') }}" method="post"
                                            id="form-create-folder">
                                            @csrf
                                            <input type="text" class="form-control" name="name_folder" id="name_folder"
                                                placeholder="Please, enter a location name" />
                                        </form>
                                    </div>
                                    <div class="col-lg-3">
                                        <button class="btn btn-success btn-sm" id="btn-create-folder">Crear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" col-lg-12 pt-2" id="modal-body-folders">

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



    <!--View Comments-->
    <div class="modal fade" id="modal-view-comments" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-slideout modal-xl" role="document">
            <div class="modal-content">

                <div id="modal-header-comment" class="modal-header ">
                    <div class="row ">
                        <div class="col-md">

                            <h5 class="modal-title mr-2">Comentarios Trabajo </h5>

                            <div id="time-div" style=" ">
                                <table class="table tableTask table-p025 table-responsive-sm table-hover mb-20 "
                                    id="site_name" style="width: 30%">
                                    <thead class="thead-light">
                                        <tr style="display: none">
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>


                        </div>



                        <div class="col-md  ">
                            <button style="z-index:9;position:relative" type="button" class="close  "
                                data-dismiss="modal" aria-label="Close">
                            </button>

                            <button style="z-index:9;position:relative" class="btn btn-m btn-dark float-right btn-sm mr-2"
                                onclick="markAsUnreadTask()" title="Marcar como no leido"><i class="fas fa-bolt"></i>
                            </button>

                            <button style="z-index:9;position:relative" class="btn btn-m btn-dark float-right btn-sm mr-2"
                                onclick="signOutTask()" title="Retirarme del Trabajo"><i class="fas fa-sign-out-alt"></i>
                            </button>

                            <button style="z-index:9;position:relative" id="extend-time"
                                class="btn btn-m btn-dark float-right btn-sm mr-2" data-toggle="modal"
                                data-target="#modal-extend-time" title="Alargar Tiempo"><i class="far fa-clock"></i>
                            </button>

                            <button style="z-index:9;position:relative" id="remove_receivers"
                                class="mb-1 btn btn-m btn-dark float-right btn-sm mr-2" data-toggle="modal"
                                data-target="#modal-receivers_remove" title="Eliminar Recipiente"><i
                                    class="fas fa-user-minus"></i>
                            </button>

                            <button style="z-index:9;position:relative" id="add-receivers"
                                class="mb-1 btn btn-m btn-dark float-right btn-sm mr-2" data-toggle="modal"
                                data-target="#modal-receivers_add" id="add-receivers" title="Agregar Recipiente"><i
                                    class="fas fa-user-plus"></i>
                            </button>

                            <button style="z-index:9;position:relative"
                                class="mb-1 btn btn-m btn-dark float-right btn-sm mr-2" id="goDown" title="Ir Abajo"><i
                                    class="fas fa-arrow-down"></i>
                            </button>

                            <button style="z-index:9;position:relative"
                                class="mb-1 btn btn-m btn-dark float-right btn-sm mr-2" id="goUp" title="Ir Arriba"><i
                                    class="fas fa-arrow-up"></i>
                            </button>


                            @can('task-block-if-expires-view')
                                <button style="z-index:9;position:relative" class="btn btn-m btn-dark float-right btn-sm mr-2"
                                    onclick="blockTask()" id="expires-block-btn"
                                    title="Bloquea solo si el tiempo esta caducado"><i class="fas fa-lock"></i>
                                </button>
                            @endcan




                        </div>




                    </div>





                </div>
                <br>
                <div class="modal-body mt-2 " id="modal-body-comment">
                    <div class="container mt-2">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card mb-0">
                                    <div class="m-2 card-body row p-2" id="title-comments"></div>
                                </div>
                                <div class="card">
                                    <div class="m-2 card-body p-2" id="receivers-comments"></div>
                                </div>
                                <div class="col-lg-12" id="content-comments"></div>

                            </div>
                            <div class="col-lg-12" id="div-text-area">
                                <div class="card">
                                    <form action="{{ route('tasks.create_comments') }}" method="post"
                                        id="form-create-comment" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="task_id" id="task_id">
                                        <div class="card-body">
                                            <div class="form-group row">
                                                <div class="col-lg-12">
                                                    <textarea name="replaycomment" id="replaycomment" class="description"></textarea>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-lg-12">
                                                    <div class="form-group row">
                                                        <div class="col-md-2">
                                                            <label>Ortografía</label>
                                                            <button type="button" class="btn btn-m btn-dark btn-sm mr-2"
                                                                onclick="configOrtography()"
                                                                title="Activar configuración google chrome"><i
                                                                    class="fas fa fa-question ml-1"></i></button>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label>Adjuntar Archivos</label><i
                                                                title="Si desea subir varios archivos imágenes, mantenga presionada la tecla CTRL (Control) del teclado y seleccione los archivos."
                                                                class="fa fa-question-circle ml-1"></i>
                                                            <div class="col-sm-7 col-lg-6 inputFile pl-0">
                                                                <span class=" mb-2 btnFile btn-dark btn-sm">
                                                                    <span id="spanFile">Seleccionar Archivos</span>
                                                                    <i class="fa fa-upload pl-1 pr-1"
                                                                        aria-hidden="true"></i>
                                                                </span>
                                                                <input id="inputfileComment" name="inputfileComment[]"
                                                                    type="file" multiple="">
                                                                <div id="inputfileCommentList"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7">
                                                            <button type="button" class="btn btn-danger btn-sm"
                                                                style="float: right" id="btn-finish_task"><i
                                                                    class="fa fa-check"></i>
                                                                Finalizar</button>
                                                            <button type="button" class="btn btn-success btn-sm"
                                                                style="float: right; margin-right: 8px;"
                                                                id="btn-replaycomment"><i class="fa fa-check"></i>
                                                                Responder</button>
                                                            <button type="button" class="btn btn-success btn-sm"
                                                                style="display: none; float: right;" id="btn-edit"
                                                                style="display: none;"><i class="fa fa-check"></i>
                                                                Editar</button>
                                                            @if (Auth()->user()->btn_block !== 1)
                                                                <button type="button"
                                                                    class="btn btn-warning btn-sm float-left"
                                                                    onclick="desblockTask()" id="btn-desblock">
                                                                    <i class="fa fa-check"></i>
                                                                    Desbloquear</button>
                                                            @endif
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="card-footer">

                                    </div>
                                </div>
                            </div>
                            <div id="div-task-terminated" class="col-lg-12">
                                <div class="alert alert-danger text-center" role="alert">
                                    <h5 id="text_terminated_task">El trabajo se encuentra finalizado</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="modal-footer ml-4">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button type="button" class="btn btn-danger  pull-right btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <button type="button" class="btn btn-success  pull-rigth btn-sm" id="btn-create"><i class="fa fa-check"></i> Aceptar</button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </div> -->
            </div>
        </div>
    </div>

    <!-- Add Receivers -->
    <div id="modal-receivers_add" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Agregar Recipiente</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="col-lg-12">
                                <div class="form-group row">
                                    <div class="col-md-9 col-form-label">
                                        <div class="form-check form-check-inline mr-1">
                                            <input class="form-check-input send-to_add" id="checkbox_roles_add"
                                                type="checkbox" name="inline-radios">
                                            <label class="form-check-label">Areas</label>
                                        </div>
                                        <div class="form-check form-check-inline mr-1">
                                            <input class="form-check-input send-to_add" id="checkbox_users_add"
                                                type="checkbox" name="inline-radios">
                                            <label class="form-check-label">Usuarios</label>
                                        </div>
                                        <div class="form-check form-check-inline mr-1">
                                            @if (Auth()->user()->setting_role_id !== 14)
                                                <input class="form-check-input send-to_add" id="checkbox_models_add"
                                                    type="checkbox" name="inline-radios">
                                                <label class="form-check-label">Modelos</label>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" col-lg-12 row" id="modal-body-receiviers_add">

                    </div>
                    <div class=" col-lg-12 row bg-dark p-3 mt-3 ml-1 text-info" id="div_receivers_add">

                    </div>
                    <button class="btn btn-sm btn-success float-right m-3" id="btn_add_receivers"><i
                            class="fa fa-plus"></i>
                        Agregar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- remove Receivers -->
    <div id="modal-receivers_remove" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Eliminar Recipiente</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" role="info">Marque los que desea eliminar</div>
                    <h5 class="modal-title">Areas</h5>
                    <div class=" col-lg-12 row mt-2" id="modal-body-roles-receiviers_remove">

                    </div>
                    <h5 class="modal-title mt-2">Usuarios</h5>
                    <div class=" col-lg-12 row mt-2" id="modal-body-users-receiviers_remove">

                    </div>
                    <button class="btn btn-sm btn-danger float-right m-2" id="btn_remove_receivers"><i
                            class="fa fa-trash"></i> Remover</button>
                </div>
            </div>
        </div>
    </div>

    <!-- extend time -->
    <div id="modal-extend-time" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Alargar Tiempo</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ route('tasks.extend_time') }}" method="post" id="form-extend_time">
                        <div class="col-lg-12">
                            <div class="form-group row">
                                <div class="col-md-9 col-form-label">
                                    <div class="form-check form-check-inline mr-1">
                                        <input class="form-check-input" id="radio-hours_extend" type="radio"
                                            value="option-hours_extend" name="time_aprox_extend" checked="">
                                        <label class="form-check-label" for="radio-hours_extend">Horas</label>
                                    </div>
                                    <div class="form-check form-check-inline mr-1">
                                        <input class="form-check-input" id="radio-days_extend" type="radio"
                                            value="option-days_extend" name="time_aprox_extend">
                                        <label class="form-check-label" for="radio-days_extend">Dias</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">

                            @csrf
                            <div id="div_hours_extend">
                                <select name="select_hours_extend" class="form-control">
                                    @for ($i = 1; $i <= 24; $i++)
                                        <option>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div id="div_days_extend" style="display: none">
                                <select name="select_days_extend" class="form-control">
                                    @for ($i = 2; $i <= 15; $i++)
                                        <option>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>

                        </div>
                    </form>

                    <button class="btn btn-sm btn-success float-right m-2" id="btn_extend_time"><i
                            class="fa fa-plus"></i>
                        Agregar</button>

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


    <!-- embed documents -->
    <div id="modal-embed-documents" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl modal-dark">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Documento</h4>
                </div>
                <div class="modal-body" id="document-pdf">
                    <embed id="embed-documents" src="" type="" style="height: 600px; width: 100%"></embed>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script src="{{ global_asset('js/select2.min.js') }}"></script>

    <script>
        let MyDiv = null;
        let Mytable = null;
        created_by = null;
        let page = 1;
        let lastPage = 1;
        let quantityPages = 1;
        let comment_id = 0
        let
            infoBlockedTasks = {}; //Guarda {} (oeto) con la informacion global de las tareas bloquedas por falta de comentarios.

        function setAmountFolder(amount) {
            const pages = Math.ceil((amount / 100)) // sacamos el piso de la cantidad de tareas / 100 (registros por pagina)
            quantityPages = pages
            getPages(1, quantityPages)
        }

        function getPages(index, amountPages, btnPrevious = false) {
            document.getElementById('pages').innerHTML =
                '<li onclick="setPage(1)" class="paginate_button page-item next disabled" id="task-table_next"><a href="#" aria-controls="task-table" data-dt-idx="2" tabindex="0" class="page-link">«</a></li>'
            document.getElementById('pages').innerHTML +=
                '<li onclick="previousPage()" class="paginate_button page-item previous disabled" id="task-table_previous"><a href="#" aria-controls="task-table" data-dt-idx="0" tabindex="0" class="page-link">&lt;</a></li>'
            let limitante = 1
            for (let i = index; i <= amountPages && limitante <= 5; i++) {
                if (i === index && !btnPrevious) document.getElementById('pages').innerHTML += '<li id="page_' + i +
                    '" onclick="setPage(' + i +
                    ')" class="paginate_button page-item active"><a href="#" aria-controls="task-table" data-dt-idx="1" tabindex="0" class="page-link">' +
                    i + '</a></li>'
                else if (limitante === 5 && btnPrevious) document.getElementById('pages').innerHTML += '<li id="page_' + i +
                    '" onclick="setPage(' + i +
                    ')" class="paginate_button page-item active"><a href="#" aria-controls="task-table" data-dt-idx="1" tabindex="0" class="page-link">' +
                    i + '</a></li>'
                else document.getElementById('pages').innerHTML += '<li id="page_' + i + '" onclick="setPage(' + i +
                    ')" class="paginate_button page-item"><a href="#" aria-controls="task-table" data-dt-idx="1" tabindex="0" class="page-link">' +
                    i + '</a></li>'
                lastPage = i
                limitante++
            }
            document.getElementById('pages').innerHTML +=
                '<li onclick="nextPage()" class="paginate_button page-item next disabled" id="task-table_next"><a href="#" aria-controls="task-table" data-dt-idx="2" tabindex="0" class="page-link">&gt;</a></li>'
            document.getElementById('pages').innerHTML += '<li onclick="setPage(' + amountPages +
                ')" class="paginate_button page-item next disabled" id="task-table_next"><a href="#" aria-controls="task-table" data-dt-idx="2" tabindex="0" class="page-link">»</a></li>'
        }

        function setPage(newPage) {
            if (document.getElementById("page_" + page) && document.getElementById("page_" + page).classList.contains(
                    'active')) {
                $("#page_" + page).toggleClass('active')
            }
            page = newPage
            $("#page_" + page).toggleClass('active')
            if (page === quantityPages && quantityPages > 5) getPages(quantityPages - 4, quantityPages, true)
            else if (page === 1) getPages(1, quantityPages)
            search()
        }

        function nextPage() {
            if (page < quantityPages) {
                if (document.getElementById("page_" + page) && document.getElementById("page_" + page).classList.contains(
                        'active')) {
                    $("#page_" + page).toggleClass('active')
                }
                page++
                $("#page_" + page).toggleClass('active')
                if (page > lastPage) getPages(page, quantityPages)
                search()
            }
        }

        function previousPage() {
            if (page > 1) {
                if (document.getElementById("page_" + page) && document.getElementById("page_" + page).classList.contains(
                        'active')) {
                    $("#page_" + page).toggleClass('active')
                }
                page--
                if (page === (lastPage - 5) || ((page + 1) === quantityPages) && quantityPages > 5) getPages(page - 4,
                    quantityPages, true)
                else $("#page_" + page).toggleClass('active')
                search()
            }
        }

        var receivers = {
            'to_roles': [],
            'to_users': [],
            'to_models': [],
        };

        var receivers_add = {
            'to_roles': [],
            'to_users': [],
            'to_models': [],
        };

        var receivers_remove = {
            'to_roles': [],
            'to_users': [],
        };

        var seeing = {
            'status': 0,
            'folder': 0,
            'customDisplay': 0,
        }

        async function search() {
            await $('#task-table').DataTable().clear().destroy();
            let searchInput = await $('#searchInput').val()
            await ShowTable(page, searchInput)
        }
        var timer;

        $("#searchInput").on('keyup', function() {
            clearTimeout(timer); //clear any running timeout on key up
            timer = setTimeout(function() { //then give it a second to see if the user is finished
                $('#task-table').DataTable().clear().destroy();
                let searchInput = $('#searchInput').val()
                ShowTable(page, searchInput)
            }, 500);
        });

        function cleanReceivers() {
            receivers = {
                'to_roles': [],
                'to_users': [],
                'to_models': [],
            };

            receivers_add = {
                'to_roles': [],
                'to_users': [],
                'to_models': [],
            };

            receivers_remove = {
                'to_roles': [],
                'to_users': [],
            };
        }


        function avalibleBtn() {
            let valDivInput = false;
            let divInput = [];
            let i = 0;
            let li = 0;
            $('.to_roles_block').each(function() {
                $(this).prop("checked") == true ? divInput[i] = 1 : divInput[i] = 0;
                i++;
            });
            if (divInput.includes(1)) {
                valDivInput = true
            } else {
                valDivInput = false;
            }
            $("#select2-select_users_block-container").each(function() {

                li = $(this).find('li');
            });
            if (li.length >= 1 || valDivInput == true) {
                $("#btn-block-unblock").removeAttr('disabled');
                // Button for hour selector
                //$("#btn-block-user-hours").removeAttr('disabled');
            } else {
                $("#btn-block-unblock").attr('disabled', 'disabled');
                //$("#btn-block-user-hours").attr('disabled', 'disabled');
            }


        };

        var show_lists = false;
        $('#see_user_block').click(function() {
            if (show_lists) {
                $("#choose_btn_unblock").css('display', 'none');
                $("#choose_block_hour").css('display', 'none');
                show_lists = false;
            } else {
                try {
                    $("#choose_btn_unblock").css('display', 'block');
                    users = @json($users);
                    let btn_block = 0;
                    let user_btn_block = "<option hidden selected>Sin Boton Desbloquear</option>";
                    for (let i = 0; i < users.length; i++) {
                        btn_block = users[i]['btn_block'];
                        if (btn_block == 1) {
                            name = users[i]['first_name'] +
                                ' ' + users[i]['middle_name'] +
                                ' ' + users[i]['last_name'] +
                                ' ' + users[i]['second_last_name'];
                            user_btn_block = user_btn_block + "<option value='to_users-" + users[i]['id'] + "'>" +
                                name + "</option>";
                        }
                        $('#choose_btn_unblock').html(user_btn_block);
                    }
                } catch (error) {
                    console.log(error);
                }
                /* }
                });

                $('#see_user_block').click(function () { 
                    if (show_lists) {
                        $("#choose_btn_unblock").css('display','none');    
                    }else{ */
                try {

                    $("#choose_block_hour").css('display', 'block');
                    users_hours = @json($user_hours);
                    let user_block_hours = "<option hidden selected>Bloqueados - Horas</option>"
                    let hours_block = 0;
                    for (let i = 0; i < users_hours.length; i++) {
                        hours_block = users_hours[i]['hours_block'];
                        name = users_hours[i]['first_name'] +
                            ' ' + users_hours[i]['middle_name'] +
                            ' ' + users_hours[i]['last_name'] +
                            ' ' + users_hours[i]['second_last_name'];
                        user_block_hours = user_block_hours + "<option value='to_users-" + users_hours[i][
                            'user_id'
                        ] + "'>" + name + " - " + hours_block + "</option>";
                    }
                    $('#choose_block_hour').html(user_block_hours);
                } catch (error) {
                    console.log(error);
                }
                show_lists = true;
            }
        });

        $('.send-to_block').click(function() {
            if ($(this).prop("checked") == true) {
                if ($(this).prop("id") == "checkbox_roles_block") {
                    roles = @json($roles);
                    result1 = "";
                    for (let i = 0; i < roles.length; i++) {
                        role = roles[i]['name'];
                        result1 = result1 +
                            "<div class='form-check col-lg-4' id='select_roles_block'><input class='form-check-input to_roles_block' id='to_roles-" +
                            roles[i]['id'] + "' type='checkbox' name='inline-radios' value='" + role +
                            "'><label class='form-check-label' for=" + "'to_roles-" + roles[i]['id'] + "'>" + role +
                            "</label></div>";
                    }
                    $("#modal-body-block-roles-hours").html(result1);
                    $('#to_roles-').select2({
                        theme: "bootstrap"
                    });
                    $("#modal-body-block-roles-hours").css('display', 'flex');
                    $("#modal-body-block-roles-hours").css('flex-wrap', 'wrap');
                }
                if ($(this).prop("id") == "checkbox_users_block") {
                    user_id_block = 0;
                    users = @json($users);
                    result =
                        "<div class='row'><label for='select_users' class='col-md  ' style='width: 100%'> Seleccione los usuarios a Bloquear";
                    result = result +
                        "<select class='form-control' name='select_users_block' id='select_users_block' multiple='multiple' onchange='AssignUserBlock()'>";
                    for (let i = 0; i < users.length; i++) {
                        name = users[i]['first_name'] + ' ' + users[i]['middle_name'] + ' ' + users[i][
                            'last_name'
                        ] + ' ' + users[i]['second_last_name'];
                        result = result + "<option value='to_users-" + users[i]['id'] + "'>" + name + "</option>";

                    }
                    result = result + "</select></label> </div>";

                    $("#modal-body-block-hours").html(result);
                    $('#select_users_block').select2({
                        theme: "bootstrap"
                    });
                    $("#modal-body-block-hours").css('display', 'block');
                }
            }
            if ($(this).prop("checked") == false) {
                if ($(this).prop("id") == "checkbox_roles_block") {
                    $("#modal-body-block-roles-hours").css('display', 'none');
                }
                if ($(this).prop("id") == "checkbox_users_block") {

                    $("#modal-body-block-hours").css('display', 'none');
                }
            }
        });

        $('.send-to').click(function() {
            if ($(this).prop("checked") == true) {
                if ($(this).prop("id") == "checkbox_roles") {
                    $('#div-selectAll').css('display', 'block');
                    roles = @json($roles);
                    result = "";
                    for (var i = 0; i < roles.length; i++) {
                        role = roles[i]['name'];
                        result = result +
                            "<div class='form-check col-lg-4'><input class='form-check-input to_roles' onclick='AssignRole()' id='to_roles-" +
                            roles[i]['id'] + "' type='checkbox' name='inline-radios' value='" + role +
                            "'><label class='form-check-label'>" + role + "</label></div>";
                    }
                    $("#modal-body-receiviers").html(result);
                }
                if ($(this).prop("id") == "checkbox_users") {
                    $('#div-selectAll').css('display', 'none');
                    users = @json($users);
                    result = "<label for='select_users' style='width: 100%'> Seleccione los usuarios";
                    result = result +
                        "<select class='form-control' name='select_users' id='select_users' multiple='multiple' onchange='AssignUser()'>";
                    for (var i = 0; i < users.length; i++) {
                        name = users[i]['first_name'] + ' ' + users[i]['middle_name'] + ' ' + users[i][
                            'last_name'
                        ] + ' ' + users[i]['second_last_name'];
                        result = result + "<option value='to_users-" + users[i]['id'] + "'>" + name + "</option>";
                    }
                    result = result + "</select></label>";

                    $("#modal-body-receiviers").html(result);

                    $('#select_users').select2({
                        theme: "bootstrap"
                    });

                }
                if ($(this).prop("id") == "checkbox_models") {
                    $('#div-selectAll').css('display', 'none');
                    models = @json($models);
                    result = "<label for='select_models' style='width: 100%'> Seleccione las modelos";
                    result = result +
                        "<select class='form-control' name='select_models' id='select_models' multiple='multiple' size='15' onchange='AssignModel()' >";
                    for (var i = 0; i < models.length; i++) {
                        nick = models[i]['nick'];
                        result = result + "<option value='to_models-" + models[i]['id'] + "'>" + nick + "</option>";
                    }
                    result = result + "</select></label>";

                    $("#modal-body-receiviers").html(result);

                    $('#select_models').select2({
                        theme: "bootstrap"
                    });
                }

                $("#modal-receivers").modal('show');
            } else if ($(this).prop("checked") == false) {
                if ($(this).prop("id") == "checkbox_roles") {
                    receivers['to_roles'] = [];
                }
                if ($(this).prop("id") == "checkbox_users") {
                    receivers['to_users'] = [];
                }
                if ($(this).prop("id") == "checkbox_models") {
                    receivers['to_models'] = [];
                }
                ShowReceivers();
            }
        });


        function AssignRole() {
            receivers['to_roles'] = [];
            cont = 0;
            $('.to_roles').each(function() {
                if ($(this).prop("checked") == true) {
                    id = $(this).prop('id');
                    id = id.split('-');
                    id = id[1];
                    name = $(this).val();
                    receivers['to_roles'][cont] = {
                        'id': id,
                        'name': name
                    };
                    cont++;
                }
            });
            ShowReceivers();
        }

        function AssignUserBlock() {
            receivers['to_users'] = [];
            cont = 0;
            $("#select_users_block option:selected").each(function() {
                id = $(this).val();
                id = id.split('-');
                id = id[1];
                name = $(this).text();
                receivers['to_users'][cont] = {
                    'id': id,
                    'name': name
                };
                cont++;
            });
        }

        function AssignUser() {
            receivers['to_users'] = [];
            cont = 0;
            $("#select_users option:selected").each(function() {
                id = $(this).val();
                id = id.split('-');
                id = id[1];
                name = $(this).text();
                receivers['to_users'][cont] = {
                    'id': id,
                    'name': name
                };
                cont++;
            });
            ShowReceivers();
        }

        function AssignModel() {
            receivers['to_models'] = [];
            cont = 0;
            $("#select_models option:selected").each(function() {
                id = $(this).val();
                id = id.split('-');
                id = id[1];
                name = $(this).text();
                receivers['to_models'][cont] = {
                    'id': id,
                    'name': name
                };
                cont++;
            });
            ShowReceivers();
        }

        $("input[name=time_aprox]").on("click", function() {
            if ($(this).val() == "option-hours") {
                $("#div_days").css('display', 'none');
                $("#div_hours").css('display', '');
            } else {
                $("#div_hours").css('display', 'none');
                $("#div_days").css('display', '');
            }
        });

        $("input[name=time_aprox_extend]").on("click", function() {
            if ($(this).val() == "option-hours_extend") {
                $("#div_days_extend").css('display', 'none');
                $("#div_hours_extend").css('display', '');
            } else {
                $("#div_hours_extend").css('display', 'none');
                $("#div_days_extend").css('display', '');
            }
        });



        /**Cargar tabla de trabajos -> Muestra todos los trabajos (Mostrar todos los trabajos)*/
        function ShowTable(page = 1, search = '') {

            const route = "{{ route('tasks.get_tasks') }}"


            Mytable = $('#task-table').DataTable({
                processing: true,
                ordering: false,
                serverSide: true,
                filter: false,
                bPaginate: false,

                "language": {
                    url: `{{ asset('DataTables/Spanish.json') }}`,
                },
                "lengthMenu": [
                    [50, 100, 200, -1],
                    [50, 100, 200, 'Todos']
                ],
                ajax: {
                    url: route + '/' + page + '/' + search,
                    dataSrc: 'data',
                    type: 'GET',
                    data: function(d) {
                        // console.log('--------------------------------------------------------')
                        d.seeing = seeing;

                    }
                },
                columns: [{
                        data: 'bolt',
                        class: 'TdClass_task'
                    },
                    {
                        data: 'img',
                        class: 'TdClass_task'
                    },
                    {
                        data: 'info_task',
                        class: 'TdClass_task',
                        "render": function(data, type, row, meta) {
                            //let encode_title = encode_utf8(row.title);
                            return "<div>" + checkUTF8(row.title) + "</div>" + row.info_task_extra;
                        }
                    },
                    {
                        data: 'time',
                        class: 'TdClass_task'
                    },
                    {
                        data: 'move'
                    },

                    {
                        data: 'rode_task',
                         
                        
                    },
                ],

            })

        }


        function titleComment(id) {
            $("#title-comments").html('');
            $.ajax({
                    url: "{{ route('tasks.title_comments') }}",
                    type: 'GET',
                    data: {
                        'id': id
                    },
                })
                .done(function(res) {
                    $("#title-comments").html(res.result);

                    if (res.permission.extend_time == 0) {
                        $("#extend-time").css('display', 'none');
                    } else {
                        $("#extend-time").css('display', 'block');
                    }

                    if (res.permission.remove_receivers == 0) {
                        $("#remove_receivers").css('display', 'none');
                    } else {
                        $("#remove_receivers").css('display', 'block');
                    }

                    if (res.permission.add_receivers == 0) {
                        $("#add-receivers").css('display', 'none');
                    } else {
                        $("#add-receivers").css('display', 'block');
                    }

                    if (res.permission.finalized == 0) {
                        $("#btn-finish_task").css('display', 'none');
                    } else {
                        $("#btn-finish_task").css('display', 'block');
                    }
                });
        };

        //----------------------------------Carpetas -> Folders-------------------------------------

        /**Cargar carpetas (Mostrar carpetas)*/
        function ShowTaskFolder(status, folder, amount) {
            // seeing = {
            //  'status' : status,
            //  'folder'  : folder,
            // }

            seeing.status = status;
            seeing.folder = folder;
            seeing.customDisplay = 0;
            Mytable.data('seeing', seeing);
            Mytable.draw();
            setPage(1)
            setAmountFolder(amount)
            ShowFolders();
        }

        function receiversComments(id) {
            $.ajax({
                    url: "{{ route('tasks.receivers_comments') }}",
                    type: 'GET',
                    data: {
                        'id': id
                    },
                })
                .done(function(res) {
                    $("#receivers-comments").html(res);
                });

        }


        /** Actualizar Nombre de carpeta  (updateFolderName) */
        function updateFolderName(id) {
            if ($("#folder-" + id).val() != "") {
                $.ajax({
                        url: `{{ route('tasks.update_folder_name') }}`,
                        type: 'GET',
                        data: {
                            'id': id,
                            'value': $("#folder-" + id).val()
                        },
                    })
                    .done(function() {
                        Mytable.data('seeing', seeing);
                        Mytable.draw();
                        ShowFolders();
                    });

                if (type == "pdf") {
                    $("#modal-embed-documents").modal("show");
                    // $("#embed-documents").attr("src", "../../storage/app/public/GB/task/" + url);
                    document.getElementById('document-pdf').innerHTML =
                        "<embed id='embed-documents' src='../../storage/app/public/GB/task/" + url +
                        "' type='' style='height: 600px; width: 100%'></embed>"
                } else {
                    window.open("../../storage/app/public/GB/task/" + url);
                }

            }
        }

        /** Eliminar carpeta  (deleteFolder) */
        function deleteFolder(id) {
            $.ajax({
                    url: "{{ route('tasks.delete_folder') }}" + "/" + id,
                    type: 'DELETE',
                    data: {
                        "_token": "{{ csrf_token() }}",
                    },
                })
                .done(async function(res) {
                    if (res.success) {
                        Toast.fire({
                            icon: "info",
                            title: "Se ha eliminado esta carpeta!",
                        });
                        ShowFolders()
                        $("#modal-admin-folder").modal("hide");
                        await $('#task-table').DataTable().clear().destroy();
                        await ShowTable()
                    } else if (!res.success) {
                        Toast.fire({
                            icon: "error",
                            title: "No se pudo eliminar, comuniquese con el ADMIN",
                        });
                    }
                });
        }

        //----------------------------------Fin Carpetas-------------------------------------

        /**  Retirarse de un trabajo*/
        async function signOutTask() {
            SwalGB.fire({
                title: "Está seguro?",
                text: " Desea retirarse del trabajo ?",
                icon: "question",
            }).then(result => {
                if (result.value) {
                    task_id = $("#task_id").val();
                    $.ajax({
                            url: "{{ route('tasks.sign_out_task') }}",
                            type: 'POST',
                            data: {
                                "_token": "{{ csrf_token() }}",
                                'task_id': task_id
                            },
                        })
                        .done(function(res) {
                            console.log(res);
                            if (res.success) {
                                Toast.fire({
                                    icon: "success",
                                    title: "Te has retirado del trabajo !!!",
                                });
                                $("#modal-view-comments").modal("hide");
                                //
                                ShowFolders();
                                Mytable.draw();

                            } else {
                                Toast.fire({
                                    icon: "error",
                                    title: "No te has podido retirar del trabajo !!!",
                                });
                            }
                        });
                }
            });
        }

        // Activar la corrección ortografica desde google chrome.
        function configOrtography() {

            SwalGB.fire({
                title: "Activar Ortografía en Google Chrome.",
                html: '1. Abrimos el menú desplegable de Chrome, y escogemos Configuración. <br>' +
                    '2. Al fondo del menú de Configuración, abrimos la Configuración Avanzada. <br>' +
                    '3. En la sección de Idiomas, hacemos clic en la flecha a la derecha de Revisión ortográfica.<br>' +
                    '4. Finalmente, haremos clic en el botón a la derecha del idioma deseado. <br>' +
                    '<b>Para más detalles Ingresa</b>, ' +
                    '<a href="//www.qore.com/noticias/58188/Como-activar-el-corrector-ortografico-espanol-en-Chrome" target="_blank" >link</a> ',
                icon: "info",
                showCancelButton: false,
                confirmButtonText: '<i class="fa fa-thumbs-up"></i> Acceptar!',
            });
        }


        /** Remover Pulsacion (removePulsing)*/
        function removePulsing(id) {
            $("#" + id).css("visibility", "visible");
            $("#" + id).removeClass("pulsing-active");
            $("#" + id).css("color", "#e1e1e1");
        }

        /**Archivar un trabajo*/
        function SendToFolder(task_status_id, folder) {

            $.ajax({
                    url: `{{ route('tasks.update_folder_destination') }}`,
                    type: 'GET',
                    data: {
                        task_status_id,
                        folder
                    },
                })
                .done(function() {
                    Mytable.data('seeing', seeing);
                    Mytable.draw();
                    ShowFolders();
                }).catch(error => console.log(error));

        }

        /** Obtener las Carpetas (ShowFolders) */
        function ShowFolders() {
            $.ajax({
                    url: `{{ route('tasks.get_folders') }}`,
                    type: 'GET',
                    data: {
                        seeing
                    }
                })
                .done(function(res) {
                    $("#myFolders").html(res);
                    //show modal create folder
                    $("#admin-folder").on("click", function() {
                        $("#modal-admin-folder").modal("show");
                        $.ajax({
                                url: `{{ route('tasks.admin_folders') }}`,
                                type: 'GET',
                            })
                            .done(function(res) {
                                $("#modal-body-folders").html(res)

                            });

                    });
                });
        }

        /*create folder (Crear carpeta) */
        $("#btn-create-folder").on("click", function() {
            $("#btn-create-folder").prop("disabled", true);
            ResetValidations();
            $.ajax({
                    url: `{{ route('tasks.store_folder') }}`,
                    type: 'POST',
                    dataType: 'json',
                    data: $("#form-create-folder").serialize(),
                })
                .done(function(res) {
                    if (res.success) {
                        Toast.fire({
                            icon: "success",
                            title: "La Carpeta fue agregada exitosamente",
                        });
                        $("#modal-admin-folder").modal("hide");
                        ResetModalForm("#form-create-folder");
                        Mytable.data('seeing', seeing);
                        Mytable.draw();
                        ShowFolders();
                        $("#btn-create-folder").prop("disabled", false);
                    } else {
                        Toast.fire({
                            icon: "error",
                            title: "Ha ocurrido un error, comuniquese con el ADMIN",
                        });
                    }
                })
                .fail(function(res) {
                    CallBackErrors(res);
                });
        });

        async function editComment(id) {
            comment_id = id
            const text = $('#comment_' + comment_id).text()
            console.log('text')
            console.log(text)
            const editor = await tinymce.get('replaycomment')
            console.log('editor')
            console.log(editor)
            editor.setContent(text)
            $("#modal-body-comment").animate({
                scrollTop: document.getElementById('modal-body-comment').scrollHeight
            }, 2000);
            $('#btn-replaycomment').css('display', 'none')
            $('#btn-finish_task').css('display', 'none')
            $('#btn-desblock').css('display', 'none')
            $('#btn-edit').css('display', 'block')
        }

        $("#btn-edit").on("click", async function() {
            $("#btn-edit").prop('disabled', true);
            bandera = true;

            if ($("#replaycomment").val() == "") {
                texto = "Escriba un comentario";
                bandera = false;
            }

            if (bandera) {
                console.log('aca 0')
                formData = new FormData(document.getElementById('form-create-comment'));
                ResetValidations();
                let route = `{{ route('tasks.editComment') }}`
                await axios.post(route + '/' + comment_id, formData).then(async (response) => {
                    const res = response.data
                    if (res.success) {
                        console.log('aca 1')
                        $("#btn-edit").prop('disabled', false);
                        console.log('aca 1.0')
                        Toast.fire({
                            icon: "success",
                            title: "El comentario fue editado exitosamente",
                        });


                        try {
                            console.log('aca 1.2')
                            console.log('$("#form-create-comment")')
                            console.log($("#form-create-comment"))
                            $("#form-create-comment")[0].reset();
                        } catch (error) {
                            console.error(error)
                        }
                        console.log('aca 1.3')
                        Mytable.draw();
                        console.log('aca 2')

                        tinyMCE.activeEditor.setContent('');
                        contentComments($("#task_id").val());
                        setInfoBlockedTasks();
                        console.log('aca3 ')
                        $('#btn-replaycomment').css('display', 'block')
                        $('#btn-finish_task').css('display', 'block')
                        $('#btn-desblock').css('display', 'block')
                        $('#btn-edit').css('display', 'none')
                        //
                    } else {
                        Toast.fire({
                            icon: "error",
                            title: "Ha ocurrido un error, comuniquese con el ADMIN",
                        });
                        $("#btn-edit").prop('disabled', false);
                        $('#inputfileCommentList').text('')
                        contentComments($("#task_id").val());
                        Mytable.draw();
                        ShowFolders();
                        //
                    }
                }).catch((res) => {
                    $("#btn-edit").prop('disabled', false);
                    contentComments($("#task_id").val());
                    ShowFolders();
                })
            } else {
                Toast.fire({
                    icon: "error",
                    title: texto,
                });
                $("#btn-edit").prop('disabled', false);
                //
            }
        });

        function titleComment(id) {
            $("#title-comments").html('');
            $.ajax({
                    url: "{{ route('tasks.title_comments') }}",
                    type: 'GET',
                    data: {
                        'id': id
                    },
                })
                .done(function(res) {
                    $("#title-comments").html(res.result);

                    if (res.permission.extend_time == 0) {
                        $("#extend-time").css('display', 'none');
                    } else {
                        $("#extend-time").css('display', 'block');
                    }

                    if (res.permission.remove_receivers == 0) {
                        $("#remove_receivers").css('display', 'none');
                    } else {
                        $("#remove_receivers").css('display', 'block');
                    }

                    if (res.permission.add_receivers == 0) {
                        $("#add-receivers").css('display', 'none');
                    } else {
                        $("#add-receivers").css('display', 'block');
                    }

                    if (res.permission.finalized == 0) {
                        $("#btn-finish_task").css('display', 'none');
                    } else {
                        $("#btn-finish_task").css('display', 'block');
                    }

                });

        }

        function encode_utf8(s) {
            return unescape(encodeURIComponent(s));
        }

        function decode_utf8(s) {
            return decodeURIComponent(escape(s));
        }

        /** */
        function contentComments(id) {
            $("#content-comments").html("");
            $.ajax({
                    url: "{{ route('tasks.content_comments') }}",
                    datatype: 'json',
                    type: 'GET',
                    data: {
                        'id': id
                    },
                })
                .done(function(res) {

                    if (res.terminated == 1 || res.signed_out == 1) {
                        if (res.terminated == 1) {
                            $("#text_terminated_task").html("El trabajo se encuentra finalizado");
                        } else {
                            $("#text_terminated_task").html("No puedes comentar en este trabajo");
                        }
                        $("#div-text-area").css("display", "none");
                        $("#div-task-terminated").css("display", "");
                    } else {
                        $("#div-text-area").css("display", "");
                        $("#div-task-terminated").css("display", "none");
                    }
                    $("#content-comments").html(res.comments + "<div id='div-goDown'></div>");
                    zoomImageGB();
                });
        }


        function embedDocuments(url, type) {
            if (type == "pdf") {
                $("#modal-embed-documents").modal("show");
                // $("#embed-documents").attr("src", "../../storage/app/public/GB/task/" + url);
                document.getElementById('document-pdf').innerHTML =
                    "<embed id='embed-documents' src='../../storage/app/public/GB/task/" + url +
                    "' type='' style='height: 600px; width: 100%'></embed>"
            } else if (type == 'txt') {
                const link = document.createElement("a")
                link.download = url
                link.href = "../../storage/app/public/GB/task/" + url
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
                delete link
            } else {
                window.open("../../storage/app/public/GB/task/" + url);
            }

        }

        // ----------------------------------Utilidades-------------------------------------

        /** Marcar trabajo como no leido (markAsUnreadTask)*/
        function markAsUnreadTask() {
            task_id = $("#task_id").val();
            updatePulsing(task_id, 1);
            $("#pulsing-" + task_id).addClass("pulsing-active");
        }


        function updatePulsing(task_id, pulsing) {
            $.ajax({
                    url: "{{ route('tasks.update_pulsing') }}",
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'task_id': task_id,
                        "pulsing": pulsing
                    },
                })
                .done(function(res) {
                    if (pulsing == 1) {
                        Toast.fire({
                            icon: "info",
                            title: "Ha marcado este trabajo como no leido !!!",
                        });
                    }
                });
        }

        function displayCustomTask(folderId) {

            $("#task-table_info").css("display", "none");

            seeing.customDisplay = 1;

            console.log(seeing);

            if (folderId == 'midUrgencyFolder') {
                console.log(folderId);
                seeing.customDisplay = 3;
                Mytable.data('seeing', seeing);
                Mytable.draw();
                ShowFolders();

            } else if (folderId == 'highUrgencyFolder') {
                console.log(folderId);
                seeing.customDisplay = 2;
                Mytable.data('seeing', seeing);
                Mytable.draw();
                ShowFolders();

            } else if (folderId == 'myTaskFolder') {
                console.log(folderId);
                seeing.customDisplay = 1;
                Mytable.data('seeing', seeing);
                Mytable.draw();
                ShowFolders();

            } else {
                console.log(folderId);
                seeing.customDisplay = 4;
                Mytable.data('seeing', seeing);
                Mytable.draw();
                ShowFolders();

            }

        }





        /** Remover Pulsacion (removePulsing)*/
        function removePulsing(id) {
            $("#" + id).css("visibility", "visible");
            $("#" + id).removeClass("pulsing-active");
            $("#" + id).css("color", "#e1e1e1");
        }

        /**Archivar un trabajo*/
        function SendToFolder(task_status_id, folder) {

            $.ajax({
                    url: `{{ route('tasks.update_folder_destination') }}`,
                    type: 'GET',
                    data: {
                        task_status_id,
                        folder
                    },
                })
                .done(function() {
                    Mytable.data('seeing', seeing);
                    Mytable.draw();
                    ShowFolders();
                }).catch(error => console.log(error));

        }





        function NuevoReloj() {
            var msecPerMinute = 1000 * 60;
            var msecPerHour = msecPerMinute * 60;
            var msecPerDay = msecPerHour * 24;
            $("input[name='should_finish_date']").each(function() {

                should_finish_date = $(this).val();
                id = this.id;
                status_id = id.split("should_finish_date-");
                status_id = status_id[1];
                created_at_date = $("#created_at_date-" + status_id).val();

                var date_now = new Date();
                var should_finish_date = new Date(should_finish_date.replace(/\s/, 'T'));
                var created_at_date = new Date(created_at_date.replace(/\s/, 'T'));



                should_finish_date = should_finish_date.getTime();
                date_now = date_now.getTime();
                created_at_date = created_at_date.getTime();

                var interval = should_finish_date - date_now;
                var minutes1 = (date_now / msecPerMinute) - (created_at_date / msecPerMinute);
                var minutes2 = (should_finish_date / msecPerMinute) - (created_at_date / msecPerMinute);

                xc = (minutes1 * 100) / minutes2;
                xc = 100 - xc;

                var days = Math.floor(interval / msecPerDay);
                interval = interval - (days * msecPerDay);
                var hours = Math.floor(interval / msecPerHour);
                interval = interval - (hours * msecPerHour);
                if (hours <= 9)
                    hours = "0" + hours;


                var minutes = Math.floor(interval / msecPerMinute);
                interval = interval - (minutes * msecPerMinute);
                if (minutes <= 9)
                    minutes = "0" + minutes;


                var seconds = Math.floor(interval / 1000);
                if (seconds <= 9)
                    seconds = "0" + seconds;


                // Display the result.
                if (should_finish_date < date_now) {
                    time = "Caducado";
                    var progress_status = -1;
                } else {
                    time = days + "d " + hours + ":" + minutes + ":" + seconds;
                    var progress_status = parseInt(days);
                }

                progress_status = parseInt(progress_status);

                if (progress_status >= 3) {
                    $("#should_finish_progress-" + status_id).removeClass();
                    $("#should_finish_progress-" + status_id).addClass("progress-bar bg-gradient-success");
                }
                if (progress_status <= 2 && progress_status >= 1) {
                    $("#should_finish_progress-" + status_id).removeClass();
                    $("#should_finish_progress-" + status_id).addClass("progress-bar bg-gradient-warning");
                }
                if (progress_status == 0) {
                    $("#should_finish_progress-" + status_id).removeClass();
                    $("#should_finish_progress-" + status_id).addClass("progress-bar bg-gradient-danger");
                }
                if (progress_status == -1) {
                    $("#should_finish_progress-" + status_id).removeClass();
                    $("#should_finish_progress-" + status_id).addClass("progress-bar");
                }

                $("#should_finish_progress-" + status_id).css("width", xc + "%");
                $("#should_finish_time-" + status_id).html(time);
                $("#site_name div #should_finish_progress-" + status_id).css("width", xc + "%")
                $("#site_name div #should_finish_time-" + status_id).html(time)

            });
        }



        function checkUTF8(text) {
            var utf8Text = text;
            try {
                // Try to convert to utf-8
                utf8Text = decodeURIComponent(escape(text));
                // If the conversion succeeds, text is not utf-8
            } catch (e) {
                // console.log(e.message); // URI malformed
                // This exception means text is utf-8
            }
            return utf8Text; // returned text is always utf-8
        }

        function encode_utf8(s) {
            return unescape(encodeURIComponent(s));
        }

        function decode_utf8(s) {
            return decodeURIComponent(escape(s));
        }

        function checkIsBlockExpireBtn(id) {
            $.ajax({
                    url: `{{ route('tasks.check_expires_block') }}`,
                    type: 'GET',
                    data: {
                        'task_id': id
                    },
                })
                .done(function(response) {
                    if (response === 1) {
                        $("#expires-block-btn").addClass('text-warning')
                        $("#expires-block-btn").attr('disabled', 'disabled')
                    } else {
                        $("#expires-block-btn").removeClass('text-warning')
                        $("#expires-block-btn").removeAttr('disabled')
                    }
                }).catch(error => console.log(error));
        }


        //----------------------------------Fin Utilidades-------------------------------------



        //----------------------------------Trabajos-------------------------------------
        //click one task
        $("#task-table").on("click", ".TdClass_task", function() {
            $('#btn-replaycomment').css('display', 'block')
            $('#btn-finish_task').css('display', 'block')
            $('#btn-edit').css('display', 'none')
            tinymce.activeEditor.setContent('')
            id = $(this).parent().prop("id");
            id = id.split("_");
            id = id[1];
            $("#modal-view-comments").modal("show");
            checkIsBlockExpireBtn(id)
            $("#task_id").val(id);
            titleComment(id);
            receiversComments(id);
            contentComments(id);
            updatePulsing(id, 0);
            pulsing_id = "pulsing-" + id;
            removePulsing(pulsing_id);
            var currentRow = $(this).closest("tr");
            var column = currentRow.find("td:eq(3)").html();
            $("#site_name").html(column);
        });


        /**Crear trabajo */
        $("#btn-create").on("click", function() {
            $("#btn-create").prop('disabled', true);
            bandera = true;
            if (receivers['to_roles'].length == 0 && receivers['to_users'].length == 0 && receivers['to_models']
                .length == 0) {
                texto = "Debe elegir al menos un remitente";
                bandera = false;
            }
            if ($("#title").val() == "") {
                texto = "Debe escoger un titulo";
                bandera = false;
            }

            if (bandera) {
                receivers1 = JSON.stringify(receivers);
                formData = new FormData(document.getElementById('form-create-task'));
                formData.append('receivers', receivers1);
                ResetValidations();
                $.ajax({
                        url: `{{ route('tasks.store') }}`,
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        data: formData,
                    })
                    .done(function(res) {
                        if (res.success) {
                            Toast.fire({
                                icon: "success",
                                title: "El trabajo fue creado exitosamente",
                            });
                            $("#btn-create").prop('disabled', false);
                            ResetModalForm("#form-create-task");
                            $("#div_receivers").html("");
                            Mytable.draw();
                            ShowFolders();
                        } else {
                            Toast.fire({
                                icon: "error",
                                title: "Ha ocurrido un error, comuniquese con el ADMIN",
                            });
                            $("#btn-create").prop('disabled', false);
                        }
                    })
                    .fail(function(res) {
                        CallBackErrors(res);
                        Toast.fire({
                            icon: "error",
                            title: "Upss... Ha ocurrido un error, comuniquese con el ADMIN",
                        });
                        $("#btn-create").prop('disabled', false);
                    });
                cleanReceivers();
            } else {
                Toast.fire({
                    icon: "error",
                    title: texto,
                });
                $("#btn-create").prop('disabled', false);
            }
        });



        /** Reponder trabajo	 */
        $("#btn-replaycomment").on("click", function() {
            $("#btn-replaycomment").prop('disabled', true);
            bandera = true;

            if ($("#replaycomment").val() == "") {
                texto = "Escriba un comentario";
                bandera = false;
            }

            if (bandera) {
                formData = new FormData(document.getElementById('form-create-comment'));
                ResetValidations();
                $.ajax({
                        url: `{{ route('tasks.create_comments') }}`,
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        data: formData,
                    })
                    .done(async (res) => {
                        if (res.success) {
                            $("#btn-replaycomment").prop('disabled', false);
                            Toast.fire({
                                icon: "success",
                                title: "El comentario fue creado exitosamente",
                            });

                            $("#form-create-comment")[0].reset();
                            Mytable.draw();

                            tinyMCE.activeEditor.setContent('');
                            contentComments($("#task_id").val());
                            setInfoBlockedTasks();
                            //
                        } else {
                            Toast.fire({
                                icon: "error",
                                title: "Ha ocurrido un error, comuniquese con el ADMIN",
                            });
                            $("#btn-replaycomment").prop('disabled', false);
                            $('#inputfileCommentList').text('')
                            contentComments($("#task_id").val());
                            Mytable.draw();
                            ShowFolders();
                            //
                        }
                    })
                    .fail(function(res) {
                        CallBackErrors(res);
                        $("#btn-replaycomment").prop('disabled', false);
                        contentComments($("#task_id").val());
                        ShowFolders();
                        //
                    });

            } else {
                Toast.fire({
                    icon: "error",
                    title: texto,
                });
                $("#btn-replaycomment").prop('disabled', false);
                //
            }
        });



        /**Finalizar trabajo */
        $("#btn-finish_task").on("click", function() {
            SwalGB.fire({
                title: "Está seguro?",
                text: " Desea finalizar el trabajo ?. Tenga en cuenta que este proceso no es reversible !!!",
                icon: "question",
            }).then(result => {
                if (result.value) {
                    task_id = $("#task_id").val();
                    $.ajax({
                            url: `{{ route('tasks.finish_task') }}`,
                            type: 'POST',
                            data: {
                                "_token": "{{ csrf_token() }}",
                                'task_id': task_id
                            },
                        })
                        .done(function() {
                            Toast.fire({
                                icon: "success",
                                title: "Se ha finalizado el trabajo !!!",
                            });
                            contentComments(task_id);
                            ShowFolders();
                            Mytable.draw();
                        })
                        .fail(function() {
                            Toast.fire({
                                icon: "error",
                                title: "Se ha producido un error, contactese con el ADMIN",
                            });
                        });

                }
            });
        });

        

        function redoTask(task_status_id, task_id) {
        
            $.ajax({
                    url: `{{ route('tasks.redo_task') }}`,
                    type: 'GET',
                    data: {
                        task_status_id,
                        task_id
                    },
                })
                .done(function() {
                    Toast.fire({
                                icon: "success",
                                title: "Se ha reanudado el trabajo !!!",
                    });
                    Mytable.data('seeing', seeing);
                    Mytable.draw();
                    ShowFolders();
                }).catch(error => console.log(error));
        }

        $('#add-receivers').click(() => {
            document.getElementById("checkbox_roles_add").checked = false;
            document.getElementById("checkbox_users_add").checked = false;
            document.getElementById("checkbox_models_add").checked = false;
            $("#modal-body-receiviers_add").html("");
        })

        //----------------------------------Fin Trabajos-------------------------------------

        //Seleccionar todos

        $('#selectAll').click(function() {
            $("input[type=checkbox]").prop('checked', this.checked, $(this).prop('checked'));
            AssignRole();
        });

        $("input[type=checkbox]").click(function() {
            if (!$(this).prop('checked')) {
                $('#selectAll').prop('checked', false);
            }

        });


        $('.send-to_add').click(function() {
            if ($(this).prop("checked") == true) {
                task_id = $("#task_id").val();
                if ($(this).prop("id") == "checkbox_roles_add") {
                    $.ajax({
                            url: `{{ route('tasks.no_in_roles_receivers') }}`,
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                'task_id': task_id
                            },
                        })
                        .done(function(res) {
                            roles = res;
                            result = "";
                            for (var i = 0; i < roles.length; i++) {
                                role = roles[i]['name'];
                                result = result +
                                    "<div class='form-check col-lg-4'><input class='form-check-input to_roles_add' onclick='AssignRoleAdd()' id='to_roles-" +
                                    roles[i]['id'] + "' type='checkbox' name='inline-radios' value='" + role +
                                    "'><label class='form-check-label'>" + role + "</label></div>";
                            }
                            $("#modal-body-receiviers_add").html(result);
                        });


                }
                if ($(this).prop("id") == "checkbox_users_add") {
                    $.ajax({
                            url: `{{ route('tasks.no_in_users_receivers') }}`,
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                'task_id': task_id,
                                'type': 0
                            },
                        })
                        .done(function(res) {
                            users = res;
                            result =
                                "<label style='width: 100%' for='select_users_add'> Seleccione los usuarios";
                            result = result +
                                "<select class='form-control' name='select_users_add' id='select_users_add' multiple='' size='15' onchange='AssignUserAdd()' >";
                            for (var i = 0; i < users.length; i++) {
                                name = users[i]['fullname'].replace('  ', ' ');
                                console.log(name)
                                result = result + "<option value='to_users-" + users[i]['id'] + "'>" + name +
                                    "</option>";
                            }
                            result = result + "</select></label>";
                            $("#modal-body-receiviers_add").html(result);

                            $('#select_users_add').select2({
                                theme: "bootstrap"
                            });
                        });
                }
                if ($(this).prop("id") == "checkbox_models_add") {
                    $.ajax({
                            url: `{{ route('tasks.no_in_users_receivers') }}`,
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                'task_id': task_id,
                                'type': 1
                            },
                        })
                        .done(function(res) {
                            models = res;
                            result =
                                "<label style='width: 100%' for='select_models_add'> Seleccione las modelos";
                            result = result +
                                "<select class='form-control' name='select_models_add' id='select_models_add' multiple='' size='15' onchange='AssignModelAdd()' >";
                            for (var i = 0; i < models.length; i++) {
                                nick = models[i]['fullname'];
                                result = result + "<option value='to_models-" + models[i]['id'] + "'>" + nick +
                                    "</option>";
                            }
                            result = result + "</select></label>";
                            $("#modal-body-receiviers_add").html(result);

                            $('#select_models_add').select2({
                                theme: "bootstrap"
                            });
                        });
                }

            } else if ($(this).prop("checked") == false) {
                if ($(this).prop("id") == "checkbox_roles_add") {
                    receivers_add['to_roles'] = [];
                }
                if ($(this).prop("id") == "checkbox_users_add") {
                    receivers_add['to_users'] = [];
                }
                if ($(this).prop("id") == "checkbox_models_add") {
                    receivers_add['to_models'] = [];
                }
                ShowReceiversAdd();
            }

            if ($("#checkbox_roles_add").prop("checked") == false && $("#checkbox_users_add").prop("checked") ==
                false && $("#checkbox_models_add").prop("checked") == false) {
                $("#modal-body-receiviers_add").html("");
            }
        });


        function AssignRoleAdd() {
            receivers_add['to_roles'] = [];
            cont = 0;
            $('.to_roles_add').each(function() {
                if ($(this).prop("checked") == true) {
                    id = $(this).prop('id');
                    id = id.split('-');
                    id = id[1];
                    name = $(this).val();
                    receivers_add['to_roles'][cont] = {
                        'id': id,
                        'name': name
                    };
                    cont++;
                }
            });
            ShowReceiversAdd();
        }


        function AssignUserAdd() {
            receivers_add['to_users'] = [];
            cont = 0;
            $("#select_users_add option:selected").each(function() {
                id = $(this).val();
                id = id.split('-');
                id = id[1];
                name = $(this).text();
                receivers_add['to_users'][cont] = {
                    'id': id,
                    'name': name
                };
                cont++;
            });
            ShowReceiversAdd();
        }

        function AssignModelAdd() {
            receivers_add['to_models'] = [];
            cont = 0;
            $("#select_models_add option:selected").each(function() {
                id = $(this).val();
                id = id.split('-');
                id = id[1];
                name = $(this).text();
                receivers_add['to_models'][cont] = {
                    'id': id,
                    'name': name
                };
                cont++;
            });
            ShowReceiversAdd();
        }


        function ShowReceiversAdd() {
            console.log(receivers_add);
            result = "";
            for (var i = 0; i < receivers_add['to_roles'].length; i++) {
                if (result == "")
                    result = receivers_add['to_roles'][i]['name'];
                else
                    result = result + ", " + receivers_add['to_roles'][i]['name'];
            }
            for (var i = 0; i < receivers_add['to_users'].length; i++) {
                if (result == "")
                    result = receivers_add['to_users'][i]['name'];
                else
                    result = result + ", " + receivers_add['to_users'][i]['name'];
            }
            for (var i = 0; i < receivers_add['to_models'].length; i++) {
                if (result == "")
                    result = receivers_add['to_models'][i]['name'];
                else
                    result = result + ", " + receivers_add['to_models'][i]['name'];
            }
            $("#div_receivers_add").html(result);
        }


        //----------------------------------Recipientes -> Receivers------------------------------------- 

        /** Mostrar recipientes */
        function ShowReceivers() {
            result = "";
            for (var i = 0; i < receivers['to_roles'].length; i++) {
                if (result == "")
                    result = receivers['to_roles'][i]['name'];
                else
                    result = result + ", " + receivers['to_roles'][i]['name'];
            }
            for (var i = 0; i < receivers['to_users'].length; i++) {
                if (result == "")
                    result = receivers['to_users'][i]['name'];
                else
                    result = result + ", " + receivers['to_users'][i]['name'];
            }
            for (var i = 0; i < receivers['to_models'].length; i++) {
                if (result == "")
                    result = receivers['to_models'][i]['name'];
                else
                    result = result + ", " + receivers['to_models'][i]['name'];
            }
            $("#div_receivers").html(result);
        }

        /**Añadir recipientes */
        $("#btn_add_receivers").on('click', function() {
            task_id = $("#task_id").val();
            receivers_add1 = JSON.stringify(receivers_add);
            $('#btn_add_receivers').prop('disabled', true);
            $.ajax({
                    url: `{{ route('tasks.add_receivers') }}`,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'receivers': receivers_add1,
                        'task_id': task_id,
                        'from_add_receivers': 1
                    },
                })
                .done(function() {
                    Toast.fire({
                        icon: "success",
                        title: "Los recipientes fueron agregados",
                    });

                    $('#btn_add_receivers').prop('disabled', false);
                    receiversComments(task_id);
                    contentComments(task_id);
                    $("#modal-body-receiviers_add").html("");
                    $("#div_receivers_add").html("");
                    $("#checkbox_roles_add").prop("checked", false);
                    $("#checkbox_users_add").prop("checked", false);
                    $("#checkbox_models_add").prop("checked", false);
                    $("#modal-receivers_add").modal("hide");
                })
                .fail(function() {
                    Toast.fire({
                        icon: "error",
                        title: "Se ha producido un error, contactese con el ADMIN",
                    });
                });
            cleanReceivers();
        });


        $('#inputfileComment').on('change', (e) => {
            $('#inputfileCommentList').text('Tienes ' + e.target.files.length + ' archivos cargados')
        })


        /**Remover recipientes */
        $("#remove_receivers").on('click', function() {
            task_id = $("#task_id").val();
            $.ajax({
                    url: `{{ route('tasks.get_receivers') }}`,
                    dataType: 'json',
                    type: 'GET',
                    data: {
                        'task_id': task_id
                    },
                })
                .done(function(res) {
                    result = "";
                    rolesReceivers = "";
                    usersReceivers = "";
                    for (var i = 0; i < res.to_roles.length; i++) {
                        id = res.to_roles[i]['id'];
                        role = res.to_roles[i]['name'];
                        rolesReceivers = rolesReceivers +
                            "<div class='form-check col-lg-4'><input class='form-check-input to_roles_remove' onclick='AssignRoleRemove()' type='checkbox' name='inline-radios' id='to_roles_remove-" +
                            id + "' value='" + role + "'><label class='form-check-label'>" + role +
                            "</label></div>";
                    }
                    for (var i = 0; i < res.to_users.length; i++) {
                        id = res.to_users[i]['id'];
                        role = res.to_users[i]['name'];
                        usersReceivers = usersReceivers +
                            "<div class='form-check col-lg-4'><input class='form-check-input to_users_remove' onclick='AssignUserRemove()' type='checkbox' name='inline-radios' id='to_users_remove-" +
                            id + "' value='" + role + "'><label class='form-check-label'>" + role +
                            "</label></div>";
                    }
                    $("#modal-body-roles-receiviers_remove").html(rolesReceivers);
                    $("#modal-body-users-receiviers_remove").html(usersReceivers);

                });

        });

        function AssignRoleRemove() {
            receivers_remove['to_roles'] = [];
            cont = 0;
            $('.to_roles_remove').each(function() {
                if ($(this).prop("checked") == true) {
                    id = $(this).prop('id');
                    id = id.split('-');
                    id = id[1];
                    name = $(this).val();
                    receivers_remove['to_roles'][cont] = {
                        'id': id,
                        'name': name
                    };
                    cont++;
                }
            });
        }

        function AssignUserRemove() {
            receivers_remove['to_users'] = [];
            cont = 0;
            $('.to_users_remove').each(function() {
                if ($(this).prop("checked") == true) {
                    id = $(this).prop('id');
                    id = id.split('-');
                    id = id[1];
                    name = $(this).val();
                    receivers_remove['to_users'][cont] = {
                        'id': id,
                        'name': name
                    };
                    cont++;
                }
            });
        }

        /**Eliminar recipientes */
        $("#btn_remove_receivers").on('click', function() {
            const task_id = $("#task_id").val();
            const receivers_add1 = JSON.stringify(receivers_remove);
            $.ajax({
                    url: `{{ route('tasks.remove_receivers') }}`,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'receivers': receivers_add1,
                        'task_id': task_id
                    },
                })
                .done(function() {
                    Toast.fire({
                        icon: "success",
                        title: "Recipientes eliminados",
                    });
                    receiversComments(task_id);
                    contentComments(task_id);
                    $("#modal-receivers_remove").modal("hide");
                })
                .fail(function() {
                    Toast.fire({
                        icon: "error",
                        title: "Se ha producido un error, contactese con el ADMIN",
                    });
                });
            cleanReceivers();
        });

        /**Alargar tiempo de un trabajo */
        $("#btn_extend_time").on('click', function() {
            task_id = $("#task_id").val();

            formData = new FormData(document.getElementById('form-extend_time'));
            formData.append('task_id', task_id);
            console.log(formData);
            $.ajax({
                    url: `{{ route('tasks.extend_time') }}`,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData,
                })
                .done(function() {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha alargado el tiempo del trabajo",
                    });
                    contentComments(task_id);
                    Mytable.draw();
                    $("#modal-extend-time").modal("hide");
                })
                .fail(function() {
                    Toast.fire({
                        icon: "error",
                        title: "Se ha producido un error, contactese con el ADMIN",
                    });
                });

        });

        //----------------------------------Fin Recipientes------------------------------------- 



        //----------------------------------Navegacion-------------------------------------

        /** Ir hacia abajo*/

        //TODO mirar la forma de bloquear el boton
        $("#goDown").on("click", function() {
            $("#modal-body-comment").animate({
                scrollTop: document.getElementById('modal-body-comment').scrollHeight
            }, 2000);
        })


        /**Ir hacia arriba */
        $("#goUp").on("click", function() {
            $('.modal-body').animate({
                scrollTop: 0
            }, 2000);
            /*$("#modal-body-comment").animate({scrollTop: $('#modal-view-comments').offset().top}, 1300);*/
        })
        //----------------------------------Fin Navegacion-------------------------------------



        //----------------------------------Bloqueo de trabajos-------------------------------------

        /** Bloquear un trabajo */
        async function blockTask() {
            let task_id = $("#task_id").val();
            try {
                let response = await axios.post(route('tasks.block'), {
                    task_id: task_id
                })

                if (response.data == 1) {
                    contentComments(task_id);
                    Toast.fire({
                        icon: "success",
                        title: "El trabajo ha sido desbloqueado exitosamente",
                    });
                    $("#expires-block-btn").addClass('text-warning')
                    $("#expires-block-btn").attr('disabled', 'disabled')
                }

            } catch (error) {
                console.log(error);
            }

        }

        /** desBloquear un trabajo */
        async function desblockTask() {
            let task_id = $("#task_id").val();
            try {
                let response = await axios.post(route('tasks.desblockTask'), {
                    task_id: task_id
                })

                if (response.data == 1) {
                    Toast.fire({
                        icon: "success",
                        title: "El trabajo ha sido desbloqueado exitosamente",
                    });
                    setInfoBlockedTasks();
                    //location.reload();
                    // $("#expires-block-btn").addClass('text-warning')
                    //$("#expires-block-btn").attr('disabled', 'disabled')
                }

            } catch (error) {
                console.log(error);
            }

        }

        /* mostrar boton de desbloqueo */
        $("#btn-block-unblock").on("click", async function() {

            let array_users = [];
            let array_roles = [];
            let i = 0;
            let separate_users = [];
            let idBlock = 0;
            let cont = 0;
            $('.to_roles_block').each(function() {
                if ($(this).prop("checked") == true) {
                    idBlock = $(this).prop('id');
                    idBlock = idBlock.split('-');
                    array_roles[cont] = idBlock[1];
                    cont++;
                }
            });

            let user_id_bh = $(".select2-selection__choice__display").each(function() {
                let aux = ($(this).attr('id'));
                separate_users = aux.split("-");
                array_users[i] = separate_users[separate_users.length - 1];
                i++;
            });

            console.log(array_users);
            console.log(array_roles);

            try {
                let response = await axios.post(route('tasks.blockUnblock'), {
                    data: {
                        array_users: array_users,
                        array_roles: array_roles
                    }
                })

                if (response.data == 1) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha realizado el cambio exitosamente",
                    });
                    location.reload();
                }

            } catch (error) {
                console.log(error);
            }
        })

        /*bloquear por horas a un usuario */
        $("#btn-block-user-hours").on("click", async function() {
            let hours = $("#hours").val();
            let array_users = [];
            let array_roles = [];
            let i = 0;
            let separate_users = [];
            let idBlock = 0;
            let cont = 0;
            $('.to_roles_block').each(function() {
                if ($(this).prop("checked") == true) {
                    idBlock = $(this).prop('id');
                    idBlock = idBlock.split('-');
                    array_roles[cont] = idBlock[1];
                    cont++;
                }
            });

            let user_id_bh = $(".select2-selection__choice__display").each(function() {
                let aux = ($(this).attr('id'));
                separate_users = aux.split("-");
                array_users[i] = separate_users[separate_users.length - 1];
                i++;
            });

            try {
                let response = await axios.post(route('tasks.blockUserHours'), {
                    data: {
                        hours: hours,
                        array_users: array_users,
                        array_roles: array_roles
                    }
                })

                if (response.data == 1) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha realizado el cambio exitosamente",
                    });
                    location.reload();

                }

            } catch (error) {
                console.log(error);
            }

        });

        /**
         * Retorna informacion global de las tareas que han sido bloqueadas por 
         * sobrepasar el rango establecido de respuesta entre comentarios.
         */
        const getInfoBlockedTasks = async () => {
            const response = await axios.get(route('tasks.blockedTasks'))
            // let response = await axios.get(`{{ route('tasks.blockedTasks') }}`);
            // response.data;
            return response.data;
        }

        /**
         * Vincula informacion global de las tareas bloquedas
         */
        async function setInfoBlockedTasks() {
            infoBlockedTasks = await getInfoBlockedTasks();
            console.log('infoBlockedTasks');
            console.log(infoBlockedTasks);
        }

        //----------------------------------Fin Bloqueo de trabajos-------------------------------------
        window.onload = NuevoReloj();
        setInterval(NuevoReloj, 1000);
        setInterval(avalibleBtn, 100);
        /*function NotificacionPush()
        {
        Push.Permission.request();
        Push.create('Hi there!', {
        body: 'This is a notification.',
        icon: 'icon.png',
        timeout: 8000,               // Timeout before notification closes automatically.
        vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
        onClick: function() {
        // Callback for when the notification is clicked.
        console.log(this);
        }
        });
        }
        
        window.onload = NotificacionPush();*/

        async function getAmountIniFolder() {
            let count = 0
            try {
                const response = await axios.get(route('tasks.get_count_task_first_folder'))
                count = response.data.count
            } catch (error) {
                console.log(error)
            }
            setAmountFolder(count)
        }

        window.onload = ShowTable();
        window.onload = ShowFolders();
        window.onload = getAmountIniFolder();

        $(document).ready(async () => {
            collapseMenu();
            setInfoBlockedTasks();

            $('a').click(async (e) => {

                if (infoBlockedTasks.isBlocked) {
                    e.preventDefault();
                    $('a').attr('disabled', 'disabled');
                    const id = e.target.id
                    if (id !== 'signOut') {

                        setInfoBlockedTasks();
                        Toast.fire({
                            icon: "warning",
                            title: `Aún tienes ${infoBlockedTasks.taskCuantity == 1 ? 'un trabajo' : `${infoBlockedTasks.taskCuantity} trabajos`} por responder`,
                        });
                        location.reload();
                        await $('#task-table').DataTable().clear().destroy()
                        ShowTable()
                    }
                }
            });
        });
    </script>
@endpush