@extends('layouts.dashboardnew')

@section('content')

@php
    $totalUsuarios   = $usuarios->count();
    $totalActivos    = $usuarios->where('status', 1)->count();
    $totalBloqueados = $usuarios->where('bloqueo', 1)->count();
    $totalInactivos  = $usuarios->where('status', 0)->count();
@endphp

{{-- ============ HEADER UNIFICADO (título + acciones + métricas inline) ============ --}}
<div class="card border-0 shadow-sm rounded-4 mb-3">
    <div class="card-body p-4">

        {{-- Fila 1: identidad + acciones primarias --}}
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
            <div class="d-flex align-items-center gap-3">
                <span class="bg-primary-subtle text-primary rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                      style="width:48px;height:48px;">
                    <i class="fa-solid fa-users fs-5"></i>
                </span>
                <div>
                    <h4 class="fw-bold mb-0">Gestión de Usuarios</h4>
                    <p class="text-muted small mb-0">Administra los usuarios registrados en la plataforma</p>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('downloadred') }}" class="btn btn-outline-info rounded-pill px-3">
                    <i class="fa-solid fa-cloud-arrow-down me-1"></i> Descargar red
                </a>
                <button type="button" class="btn btn-info rounded-pill px-3"
                        data-bs-toggle="modal" data-bs-target="#editar">
                    <i class="fa-solid fa-key me-1"></i> Cambiar contraseña global
                </button>
                
                <button class="btn btn-info fw-semibold rounded-pill px-3 text-white shadow-sm align-self-start"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#filtroIdPanel"
                            aria-expanded="false"
                            aria-controls="filtroIdPanel">
                        <i class="fa-solid fa-filter me-1"></i> Filtro
                        <i class="fa-solid fa-chevron-down ms-1 small"></i>
                </button>
                
            </div>
        </div>

        {{-- Fila 2: métricas como chips inline --}}
        <div class="d-flex flex-wrap align-items-center gap-4 pt-3 border-top">
            <div class="d-inline-flex align-items-baseline gap-2">
                <span class="fw-bold fs-4 lh-1">{{ $totalUsuarios }}</span>
                <span class="text-muted small">usuarios totales</span>
            </div>
            <div class="d-inline-flex align-items-center gap-2">
                <span class="rounded-circle bg-success d-inline-block" style="width:8px;height:8px;"></span>
                <span class="fw-semibold">{{ $totalActivos }}</span>
                <span class="text-muted small">activos</span>
            </div>
            <div class="d-inline-flex align-items-center gap-2">
                <span class="rounded-circle bg-secondary d-inline-block" style="width:8px;height:8px;"></span>
                <span class="fw-semibold">{{ $totalInactivos }}</span>
                <span class="text-muted small">inactivos</span>
            </div>
            <div class="d-inline-flex align-items-center gap-2">
                <span class="rounded-circle bg-danger d-inline-block" style="width:8px;height:8px;"></span>
                <span class="fw-semibold">{{ $totalBloqueados }}</span>
                <span class="text-muted small">bloqueados</span>
            </div>
        </div>

    </div>
</div>

{{-- ===================== PANEL COLAPSABLE DE FILTRO ===================== --}}
@if(Auth::user()->rol_id == 0)
<div class="collapse mb-3" id="filtroIdPanel">

   @include('usuario.componentes.filtrounificado', ['ruta' => 'users.show', 'tipo1' => '1', 'tipo2' => '2', 'tipo3' => '3'])
    
</div>
@endif



{{-- ============ TABLA ============ --}}
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 px-4 py-3 border-bottom">
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-list-ul text-muted"></i>
                <h6 class="fw-bold mb-0">Listado de usuarios</h6>
                <span class="badge bg-primary-subtle text-primary fw-medium rounded-pill ms-1">{{ $totalUsuarios }}</span>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 zero-configuration">
                <thead>
                    <tr class="small text-muted">
                        <th class="ps-4 fw-semibold text-uppercase" style="font-size:.7rem;letter-spacing:.5px;">ID</th>
                        <th class="fw-semibold text-uppercase" style="font-size:.7rem;letter-spacing:.5px;">Usuario</th>
                        <th class="fw-semibold text-uppercase" style="font-size:.7rem;letter-spacing:.5px;">Patrocinador</th>
                        <th class="fw-semibold text-uppercase" style="font-size:.7rem;letter-spacing:.5px;">Rango</th>
                        <th class="fw-semibold text-uppercase text-center" style="font-size:.7rem;letter-spacing:.5px;">Estatus</th>
                        <th class="fw-semibold text-uppercase text-center" style="font-size:.7rem;letter-spacing:.5px;">Acceso</th>
                        @if($settingEstructura->tipoestructura == 'binaria')
                            <th class="fw-semibold text-uppercase text-center" style="font-size:.7rem;letter-spacing:.5px;">Lado</th>
                        @endif
                        <th class="pe-4 fw-semibold text-uppercase text-end" style="font-size:.7rem;letter-spacing:.5px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($usuarios as $usuario)
                        <tr>
                            {{-- ID --}}
                            <td class="ps-4 py-3">
                                <span class="badge bg-light text-primary font-monospace fw-medium rounded-2 px-2 py-1">
                                    {{ $usuario->ID }}
                                </span>
                            </td>

                            {{-- Usuario --}}
                            <td class="py-3">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center fw-bold flex-shrink-0"
                                         style="width:38px;height:38px;font-size:.85rem;">
                                        {{ strtoupper(substr($usuario->display_name, 0, 1)) }}
                                    </div>
                                    <div class="min-w-0">
                                        <p class="mb-0 fw-semibold text-truncate" style="max-width:200px;">
                                            {{ $usuario->display_name }}
                                        </p>
                                        <small class="text-muted text-truncate d-block" style="max-width:200px;">
                                            <i class="fa-regular fa-envelope me-1 opacity-75"></i>{{ $usuario->user_email }}
                                        </small>
                                    </div>
                                </div>
                            </td>

                            {{-- Patrocinador --}}
                            <td class="py-3">
                                @if($usuario->referred_id > 0)
                                    <span class="d-inline-flex align-items-center gap-2">
                                        <i class="fa-solid fa-user-tie text-muted small"></i>
                                        <span>{{ $usuario->patrocinador->nameuser }}</span>
                                    </span>
                                @else
                                    <span class="text-muted small fst-italic">Sin patrocinador</span>
                                @endif
                            </td>

                            {{-- Rango --}}
                            <td class="py-3">
                                <span class="badge bg-info-subtle text-info rounded-pill fw-medium px-3 py-2">
                                    {{ $usuario->rol->name }}
                                </span>
                            </td>

                            {{-- Estatus --}}
                            <td class="text-center py-3">
                                @if ($usuario->status == 1)
                                    <span class="badge bg-success-subtle text-success rounded-pill fw-medium px-3 py-2 d-inline-flex align-items-center gap-1">
                                        <span class="rounded-circle bg-success d-inline-block" style="width:6px;height:6px;"></span>
                                        Activo
                                    </span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary rounded-pill fw-medium px-3 py-2 d-inline-flex align-items-center gap-1">
                                        <span class="rounded-circle bg-secondary d-inline-block" style="width:6px;height:6px;"></span>
                                        Inactivo
                                    </span>
                                @endif
                            </td>

                            {{-- Acceso --}}
                            <td class="text-center py-3">
                                @if ($usuario->bloqueo == 1)
                                    <span class="badge bg-danger-subtle text-danger rounded-pill fw-medium px-3 py-2">
                                        <i class="fa-solid fa-lock me-1"></i> Denegado
                                    </span>
                                @else
                                    <span class="badge bg-success-subtle text-success rounded-pill fw-medium px-3 py-2">
                                        <i class="fa-solid fa-lock-open me-1"></i> Permitido
                                    </span>
                                @endif
                            </td>

                            @if($settingEstructura->tipoestructura == 'binaria')
                                <td class="text-center py-3">
                                    @if($usuario->ladomatriz)
                                        <span class="badge bg-light text-dark rounded-pill fw-medium px-3 py-2">
                                            {{ $usuario->ladomatriz }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                            @endif

                            {{-- Acciones (1 botón visible + dropdown) --}}
                            <td class="text-end pe-4 py-3">
                                @if($usuario->rol_id != 0)
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('users.edit', $usuario->user_login) }}"
                                       class="btn btn-sm btn-primary rounded-2 d-inline-flex align-items-center justify-content-center"
                                       style="width:34px;height:34px;"
                                       data-bs-toggle="tooltip" title="Editar usuario">
                                        <i class="fa-solid fa-pen small"></i>
                                    </a>

                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light rounded-2 d-inline-flex align-items-center justify-content-center"
                                                style="width:34px;height:34px;"
                                                type="button"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                                aria-label="Más opciones">
                                            <i class="fa-solid fa-ellipsis-vertical small text-muted"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-3 py-2">
                                            
                                            {{--@if($usuario->status == 0)
                                            <li>
                                                   <a class="btn btn-info text-white" title="Activar Usuario" onclick="activar('{{$usuario->ID}}','{{$usuario->display_name}}')">
                                                       <i class="fa-solid fa-toggle-on"></i>
                                                   </a>
                                            </li>          
                                            @endif        
                                    
                                            @if($usuario->status == 1)
                                            <li>
                                                <a class="btn btn-danger text-white" title="Desactivar Usuario" onclick="desactivar('{{$usuario->ID}}','{{$usuario->display_name}}')">
                                                    <i class="fa-solid fa-toggle-on"></i>
                                                </a>
                                            </li>    
                                            @endif--}}
                            
                                            @if($usuario->ID != 1)
                                                <li><hr class="dropdown-divider my-1"></li>
                                                @if($usuario->bloqueo == 0)
                                                    <li>
                                                        <a class="dropdown-item small d-flex align-items-center gap-2 text-danger"
                                                           href="{{ route('users-lock', $usuario->ID) }}">
                                                            <i class="fa-solid fa-lock" style="width:16px;"></i> Bloquear acceso
                                                        </a>
                                                    </li>
                                                @else
                                                    <li>
                                                        <a class="dropdown-item small d-flex align-items-center gap-2 text-success"
                                                           href="{{ route('users-unlock', $usuario->ID) }}">
                                                            <i class="fa-solid fa-lock-open" style="width:16px;"></i> Desbloquear acceso
                                                        </a>
                                                    </li>
                                                @endif
                                            @endif

                                            @if($usuario->fechaver != null)
                                                <li>
                                                    <a class="dropdown-item small d-flex align-items-center gap-2 text-warning"
                                                       href="{{ route('users-delete-autenticador', $usuario->ID) }}">
                                                        <i class="fa-solid fa-qrcode" style="width:16px;"></i> Eliminar Authenticator
                                                    </a>
                                                </li>
                                            @endif

                                        </ul>
                                    </div>
                                </div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


{{-- ============ MODAL: CAMBIAR CONTRASEÑA GLOBAL ============ --}}
<div id="editar" class="modal fade" tabindex="-1" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header border-0 pb-0">
                <div class="d-flex align-items-center gap-3">
                    <span class="bg-warning-subtle text-warning rounded-3 d-inline-flex align-items-center justify-content-center"
                          style="width:42px;height:42px;">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                    </span>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" id="recuperarLabel">Cambiar contraseña global</h5>
                        <p class="text-muted small mb-0">Se aplicará a todos los usuarios</p>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <form action="{{ route('users.password') }}" method="post">
                {{ csrf_field() }}
                <div class="modal-body pt-3">

                    <div class="bg-warning-subtle text-warning-emphasis rounded-3 small d-flex align-items-start gap-2 p-3 mb-4">
                        <i class="fa-solid fa-circle-info mt-1"></i>
                        <div>Esta acción modifica la contraseña de <strong>todos los usuarios</strong> registrados. No es reversible.</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Nueva contraseña</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="fa-solid fa-lock text-muted"></i>
                            </span>
                            <input type="password"
                                   class="form-control border-start-0 ps-0"
                                   name="password"
                                   placeholder="Mínimo 8 caracteres"
                                   required
                                   minlength="8">
                        </div>
                        <small class="text-muted">Recomendado: mezcla letras, números y símbolos.</small>
                    </div>
                </div>

                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                        Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-medium">
                        <i class="fa-solid fa-check me-1"></i> Aplicar a todos
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@include('usuario.componentes.scripBotones')

@push('script')
<script>
    
function activar(ID, nombre){
  Swal.fire({
  title: 'Esta seguro que quiere activar al usuario: '+nombre,
  type:'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Si',
  cancelButtonText: 'No',
   }).then((result) => {
     if (result.value) {
       window.location.href = 'active/'+ID;
     }
  });    
}


function desactivar(ID, nombre){
  Swal.fire({
  title: 'Esta seguro que quiere desactivar al usuario: '+nombre,
  type:'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Si',
  cancelButtonText: 'No',
   }).then((result) => {
     if (result.value) {
       window.location.href = 'desactivar/'+ID;
     }
  });
}

</script>
@endpush