@extends('layouts.super-admin')
@section('title','Super Admin')
@section('eyebrow','General')
@section('page-title','Administración de plataforma')
@section('page-description','Gestiona las instancias comercializadas y sus usuarios administradores.')
@section('page-actions')<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#adminUserModal"><i class="bi bi-person-plus me-2"></i>Nuevo administrador</button>@endsection
@section('content')
<div id="superAdminApp" data-users-url="{{ route('super-admin.users') }}" data-clients-url="{{ url('/super-admin/api/clients') }}">
    <div class="row g-4 mb-4">
        <div class="col-md-4"><article class="metric-card compact"><div class="metric-icon metric-icon-primary"><i class="bi bi-buildings"></i></div><div><p class="metric-label">Clientes</p><strong class="metric-value" id="instanceCount">—</strong></div></article></div>
        <div class="col-md-4"><article class="metric-card compact"><div class="metric-icon metric-icon-success"><i class="bi bi-people"></i></div><div><p class="metric-label">Administradores</p><strong class="metric-value" id="adminCount">—</strong></div></article></div>
        <div class="col-md-4"><article class="metric-card compact"><div class="metric-icon metric-icon-info"><i class="bi bi-person-check"></i></div><div><p class="metric-label">Usuarios activos</p><strong class="metric-value" id="activeAdminCount">—</strong></div></article></div>
    </div>
    <section class="content-card">
        <div class="table-toolbar"><div class="search-box"><i class="bi bi-search"></i><input id="adminSearch" type="search" placeholder="Buscar por ID, nombre o instancia…"></div><span class="security-note"><i class="bi bi-shield-check"></i> Contraseñas protegidas con hash</span></div>
        <div class="table-responsive"><table class="table agents-table align-middle mb-0"><thead><tr><th>ID</th><th>Email</th><th>Cliente</th><th>Estado</th><th>Último acceso</th><th></th></tr></thead><tbody id="adminUsersBody"><tr><td colspan="6" class="loading-cell"><span class="spinner-border spinner-border-sm me-2"></span>Cargando administradores…</td></tr></tbody></table></div>
        <div class="table-footer"><span id="adminSummary">—</span></div>
    </section>
</div>
<div class="modal fade" id="adminUserModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
    <div class="modal-header border-0"><div><h2 class="modal-title fs-5" id="adminModalTitle">Nuevo administrador</h2><p class="modal-subtitle">Vincula un usuario de Axynia con el cliente de facturación.</p></div><button class="btn-close" data-bs-dismiss="modal"></button></div>
    <form id="adminUserForm"><div class="modal-body pt-0"><div id="adminFormError" class="alert alert-danger d-none"></div><div class="mb-3"><label class="form-label">Email</label><input class="form-control" type="email" name="email" placeholder="admin@empresa.com" required><div class="form-text">Será el identificador único para ingresar a Axynia.</div></div><div class="mb-3"><label class="form-label">ID cliente</label><input class="form-control" name="idCliente" inputmode="numeric" pattern="[0-9]{1,19}" maxlength="19" placeholder="Ej. 10482" required><div class="form-text">ID del cliente en el sistema de facturación.</div></div><div class="mb-3"><label class="form-label">Contraseña inicial</label><input class="form-control" type="password" name="password" minlength="10" autocomplete="new-password" required><div class="form-text">Mínimo 10 caracteres. Solo se almacenará su hash.</div></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="active" id="newAdminActive" checked><label class="form-check-label" for="newAdminActive">Usuario activo</label></div></div>
    <div class="modal-footer border-0"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Cancelar</button><button class="btn btn-primary" type="submit"><span class="submit-label" id="adminSubmitLabel">Crear administrador</span></button></div></form>
</div></div></div>
@endsection