@extends('header_nuevo_generico')
@section('main')
<link rel="stylesheet" href="{{ asset('/Libreria_CA/css/fancy_fidelitas_theme.css') }}?v=2">
<div class="container-fluid mt-5 pt-5" style="height:auto;">
    <!-- -->
    <div class="row justify-content-center my-2">
        <div class="col-xl-12 col-lg-12 col-md-12">
            <h3 class="text-center text-fidelitas">@traducir('Panel de Teams','Panel de Teams')</h3>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-start my-2">
        <div class="col-xl-4 col-lg-6 col-md-12 text-start ps-1">
            <a class="btn btn-outline-fidelitas-secondary" href="/configuracion-teams/nuevo-team"><i class="bi bi-gear-fill"></i> @traducir('nuevo_teams','Nuevo Teams')</a>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-start my-2 px-1">
        <div class="col-12">
            <!-- radio select -->
            <ul class="my-2 nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="informes-tab" data-bs-toggle="tab" data-bs-target="#informes-tab-pane" type="button" role="tab" aria-controls="informes-tab" aria-selected="false"> <i class="bi bi-plus-square"></i> @traducir('Activos','Activos') </button>
                </li>
                <!-- -->
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="informes-gestion-tab" data-bs-toggle="tab" data-bs-target="#informes-gestion-tab-pane" type="button" role="tab" aria-controls="informes-gestion-tab" aria-selected="false"> <i class="bi bi-x-square"></i> @traducir('Inactivos','Inactivos') </button>
                </li>
            </ul>
            <!-- -->
        </div>
    </div>
    <!--  -->
    <div class="row justify-content-center">
        <div class="tab-content" id="myTabContent">
            <!-- SOLAPA DE ACTIVOS -->
            <div class="tab-pane fade show active" id="informes-tab-pane" role="tabpanel" aria-labelledby="informes-tab" tabindex="0">
                <div class="row justify-content-center pt-3 d-none" id="cargando-informes">
                    @traducir('Cargando','Cargando...')
                    <div class="spinner-border text-fidelitas" role="status">
                        <span class="visually-hidden">@traducir('Loading','Loading...')</span>
                    </div>
                </div>
                <!-- -->
                <div class="col-lg-12 col-md-12">                
                    <div id="fancyTablaTeamsA"></div>
                </div>     
            </div>
            <!-- SOLAPA DE INACTIVOS -->
            <div class="tab-pane fade" id="informes-gestion-tab-pane" role="tabpanel" aria-labelledby="informes-gestion-tab" tabindex="0">
                <div class="row justify-content-center pt-3 d-none" id="cargando-informes">
                    @traducir('Cargando','Cargando...')
                    <div class="spinner-border text-fidelitas" role="status">
                        <span class="visually-hidden">@traducir('Loading','Loading...')</span>
                    </div>
                </div>
                <!-- -->
                <div class="col-lg-12 col-md-12">
                    <div id="fancyTablaTeamsI"></div>
                </div>     
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE EDICION DE TEAMS -->
<div class="modal fade" id="modalEditarTeam" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="headerModalEditarTeam"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- -->
            <div class="modal-body" id="contenidoModalEditarTeam"></div>
            <!-- -->
            <div class="modal-body text-center d-none" id="esperaModalEditarTeam">
                @traducir('Cargando','Cargando')... <div class="spinner-border text-fidelitas"></div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE ACTIVAR O DESACTIVAR TEAMS -->
<div class="modal fade" id="modalEstadoTeam" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-none" id="headerDesactivarModalEstadoTeam">@traducir('titulo_desactivar','Desactivar Team')</h5>
                <h5 class="modal-title d-none" id="headerActivarModalEstadoTeam">@traducir('titulo_activar','Activar Team')</h5>
            </div>
            <!-- -->
            <div class="modal-body" id="contenidoModalEstadoTeam"></div>
            <!-- -->
            <div class="modal-body text-center d-none" id="esperaModalEstadoTeam">
                @traducir('Cargando','Cargando')... <div class="spinner-border text-fidelitas"></div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE TRAZABILIDAD -->
<div class="modal fade" id="modalTrazabilidadTeam">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@traducir('Trazabilidad','Trazabilidad de Teams') <span id="nombre-team-trazabilidad"></span></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="contenidoTrazabilidadTeams"></div>
            <h6 id="seccion-espera-trazabilidad-team" class="lead text-fidelitas text-center mb-5">@traducir('Cargando','Cargando')... <div class="spinner-border text-fidelitas"></div></h6>
        </div>
    </div>
</div>
<!-- -->
<form id="frmTeamMembers" method="POST" action="/configuracion-teams/team-members">
    {{ csrf_field() }}
    <input type="hidden" name="team">
</form>
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_config_teams.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        let teams = '<?php echo(json_encode($teams)); ?>';
        eventosPanelTeams(teams);
    });
</script>
@endsection