@extends('header_nuevo_generico')
@section('main')
<script type="text/javascript" src="{{ URL::asset('/js/vis.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('/components/trumbowyg.2.18.0/ui/trumbowyg.css') }}">
<link rel="stylesheet" href="{{ asset('/css/vis.min.css') }}">
<link rel="stylesheet" href="{{ asset('/Libreria_CA/css/fancy_fidelitas_theme.css') }}?v=2">
<style>
    .modal-header--sticky {
        position: sticky;
        top: 0;
        background-color: inherit; /* [1] */
        z-index: 1055; /* [2] */
    }
</style>
<!-- -->
<input type="hidden" id="_token" value="{{ csrf_token() }}">

<div class="container-fluid mt-5 pt-5">
    <!--  -->
    <div class="row justify-content-center my-2 mb-5">
        <div class="col-md-6 col-sm-9">
            <h2 class="text-fidelitas display-6 text-center">Panel de Usuarios</h2>
        </div>
    </div>
    <!-- -->   
    <div class="row justify-content-center my-1">
        <div class="row justify-content-end">
            <div class="col col-md-6">
                <table class="table table-bordered table-primary my-0">
                    <thead>
                        <tr>
                            <th>Users</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- -->
            <div class="col col-md-6">
                <table class="table table-bordered table-primary my-0">
                    <thead>
                        <tr>
                            <th style="width:25%;">@traducir('Totales','Totales'): </th>
                            <th style="width:25%;">@traducir('Listas_para_iniciar','Listas para iniciar'): </th>
                            <th style="width:25%;">@traducir('En_proceso','En proceso'): </th>
                            <th style="width:25%;">@traducir('En_pausa','En pausa'): </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        @foreach( $usuarios as $user_data )
            <div class="col-sm-12">    
                <!-- -->
                <div class="accordion" id="accordion-{{$user_data->user_id}}">                   
                    <!-- -->                    
                    <div class="accordion-item" id="user-item-{{$user_data->user_id}}">
                        <h2 class="accordion-header">
                            <div class="row justify-content-center">
                                <div class="col col-md-6">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{$user_data->user_id}}" aria-expanded="false" aria-controls="collapse-{{$user_data->user_id}}">
                                        {{ $user_data->first_name.' '.$user_data->last_name }} 
                                    </button>
                                </div>
                                <!-- -->
                                <div class="col col-md-6">
                                    <table class="table table-bordered table-primary my-0">
                                        <thead>
                                            @if( $user_data->total_tareas && !$user_data->ready2start && !$user_data->proceso )
                                            <tr class="table-warning">
                                            @elseif( $user_data->total_tareas && $user_data->ready2start && !$user_data->proceso )
                                            <tr class="table-danger">
                                            @elseif( !$user_data->total_tareas )
                                            <tr class="table-secondary">
                                            @endif
                                                <th style="width:25%;"><h5>{{ $user_data->total_tareas ?? '0' }}</h5> </th>
                                                <th style="width:25%;"><h5>{{ $user_data->ready2start ?? '0' }}</h5> </th>
                                                <th style="width:25%;"><h5>{{ $user_data->proceso ?? '0' }}</h5> </th>
                                                <th style="width:25%;"><h5>{{ $user_data->pausa ?? '0' }}</h5> </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </h2>
                        <!-- -->
                        <div id="collapse-{{$user_data->user_id}}" class="accordion-collapse collapse" data-bs-parent="#accordion-{{$user_data->user_id}}">
                            <div class="accordion-body">
                                @if( !is_null($user_data->total_tareas) )
                                    <input type="hidden" class="users-{{$user_data->user_id}}" value="{{$user_data->user_id}}">
                                    <div class="row justify-content-center">
                                        <div class="col-12 d-none" id="cargando-{{$user_data->user_id}}">
                                            <span class="spinner-border spinner-border-sm"></span> @traducir('Cargando','Cargando') ...
                                        </div>
                                        <div class="col-12 d-none" id="datos-{{$user_data->user_id}}"></div>
                                        <div class="col-12 d-none" id="error-{{$user_data->user_id}}">
                                            <div class="alert alert-danger" role="alert">
                                                <i class="bi bi-exclamation-triangle-fill"></i> @traducir('error_tabla_usuario','Ocurrió un error')
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    @traducir('sin_tareas','Sin tareas asignadas').
                                @endif
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        @endforeach
    </div>
    <!-- -->
    <div class="row justify-content-start my-2">
        <div class="col-md-6 col-sm-9">
            <small class="text-muted">@traducir('texto_panel_usuarios','Se visualizan los usuarios de la plataforma y las tareas que tienen asignadas').</small>
            <br>
            <small class="text-muted">@traducir('visualizar','Lo que se visualizan en') <span class="text-danger">@traducir('rojo','rojo')</span> @traducir('tienen tareas','tienen tareas') <span class="text-dark">@traducir('Listas_para_iniciar','Listas para iniciar')</span> @traducir('pero ninguna','pero ninguna') <span class="text-dark">@traducir('En_proceso','En proceso')</span>. </small>
            <br>
            <small class="text-muted">@traducir('visualizar','Lo que se visualizan en') <span class="text-warning">@traducir('amarillo','amarillo')</span> @traducir('no tienen tareas','no tienen tareas') <span class="text-dark">@traducir('Listas_para_iniciar','Listas para iniciar')</span> @traducir('ni','ni') <span class="text-dark">@traducir('En_proceso','En proceso')</span>. </small>
            <br>
            <small class="text-muted">@traducir('visualizar','Lo que se visualizan en') <b class="text-secondary">@traducir('gris','gris')</b> @traducir('no tienen ninguna tareas','no tienen ninguna tareas'). </small>
        </div>
    </div>
</div>
<!-- MODAL DE EDICION TAREA INFORME -->
<div class="modal fade" id="modalTarea">
    <div class="modal-dialog modal-xl" style="max-width:1600px;">
        <div class="modal-content">
            <div class="modal-header modal-header--sticky">
                <h6 class="modal-title" id="titulo-edicion-tarea-informe"></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="cuerpo-edicion-tarea-informe"></div>
            <!-- -->
            <div class="modal-body d-none" id="cargando-edicion-tarea-informe">
                <h6 class="lead text-fidelitas text-center">@traducir('Cargando los Documentos','Cargando los Documentos')... <div class="spinner-border text-fidelitas"></div></h6>
            </div>
            <!-- -->
            <div class="modal-body d-none" id="error-edicion-tarea-informe">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill"></i> @traducir('Ocurrio un error','Ocurrio un error')
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE DOCUMENTOS INFORME -->
<div class="modal fade" id="modalDocumentosInforme" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="titulo-informe-documentos"></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="cuerpo-informe-documentos"></div>
            <!-- -->
            <div class="modal-body d-none" id="cargando-informe-documentos">
                <h6 class="lead text-fidelitas text-center">@traducir('Cargando los Documentos','Cargando los Documentos')... <div class="spinner-border text-fidelitas"></div></h6>
            </div>
            <!-- -->
            <div class="modal-body d-none" id="error-informe-documentos">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill"></i> @traducir('Ocurrio un error','Ocurrio un error')
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE EDICION DEL DOCUMENTO DEL INFORME -->
<div class="modal fade" id="modalEdicionDocumentoInforme" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="titulo-edicion-informe-documento"></h6>
            </div>
            <div class="modal-body" id="cuerpo-edicion-informe-documento"></div>
            <!-- -->
            <div class="modal-body d-none" id="cargando-edicion-informe-documento">
                <h6 class="lead text-fidelitas text-center">@traducir('Cargando','Cargando')... <div class="spinner-border text-fidelitas"></div></h6>
            </div>
            <!-- -->
            <div class="modal-body d-none" id="exito-edicion-informe-documento">
                <h6 class="text-success lead"><i class="bi bi-check-lg"></i>  @traducir('Datos guardados con éxito','Datos guardados con éxito'). </h6>
            </div>
            <!-- -->
            <div class="modal-body d-none" id="error-edicion-informe-documento">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill"></i> @traducir('Ocurrio un error','Ocurrio un error')
                </div>
            </div>
        </div>
    </div>
</div>
<!-- FORMULARIO ACCEDER A INFORME -->
<form id="frmReports" method="post" action="/blue/servicios-contratados-contrapartes-acciones" target="_blank">
    {{ csrf_field() }}
    <input type="hidden" name="accion" value="reportes">
    <input type="hidden" name="contraparte" value="">
    <input type="hidden" name="cli_cuit" value="20111111112">
    <input type="hidden" name="cli_codigo" value="5680">
    <input type="hidden" name="desde_contraparte_generico" value="0">
    <input type="hidden" name="desde_mis_tareas" value="1">
    <input type="hidden" name="de_informe_tareas" value='1'>
</form>
<!-- FORMULARIO EDICION TAREA -->
<form id="frmTarea">
    {{ csrf_field() }}
    <input type="hidden" name="informe">
    <input type="hidden" name="tarea">
</form>
<!-- FORMULARIO LISTA DOCUMENTOS -->
<form id="frmDocumentosInforme">
    {{ csrf_field() }}
    <input type="hidden" name="contraparte">
    <input type="hidden" name="gestion">
</form>
@endsection
@section('funcionesJS')
    <script src="{{ asset('/components/trumbowyg.2.18.0/trumbowyg.min.js') }}"></script>
    <script src="{{ asset('/components/trumbowyg.2.18.0/langs/es.min.js') }}"></script>
    <script src="{{ asset('/components/trumbowyg.2.18.0/plugins/fontfamily/trumbowyg.fontfamily.min.js') }}"></script>
    <script src="{{ asset('/components/trumbowyg.2.18.0/plugins/fontsize/trumbowyg.fontsize.min.js') }}"></script>
    <!-- -->
    <script src="{{ asset('/Libreria_CA/Momentjs-2.29.2/moment.js') }}"></script>
    <script src="{{ asset('/Libreria_CA/Momentjs-2.29.2/datetime_moment.js') }}"></script>
    <!--  -->
    <script src="{{ asset('/Libreria_CA/Js/funciones_panel_informes_blue.js') }}?v={{rand()}}"></script>
    <script src="{{ asset('/Libreria_CA/Js/funciones_panel_usuarios_tareas.js') }}?v={{rand()}}"></script>
    <!-- -->
    <script type="text/javascript" src="{{ asset('/js/buscador_v2.js') }}?v={{rand()}}"></script>
    <!-- -->
    <script>
        $(document).ready(function(){
            var usuarios_id = <?php echo json_encode($usuarios_id); ?>;
            
            PanelUsuarios(usuarios_id);
            // funcionesMisTareas('','');
        });
    </script>
@endsection