<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/inicio.css">
    <link rel="stylesheet" href="../css/consultar-api.css">

    <link rel="stylesheet" href="assets/fontawesome/css/fontawesome.css">
    <link rel="stylesheet" href="assets/fontawesome/css/brands.css">
    <link rel="stylesheet" href="assets/fontawesome/css/solid.css">
	<title>API Candidatos</title>
</head>
<body>
	
	<!-- SIDEBAR -->
	<section id="sidebar">
		<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a>

        <ul class="side-menu">
            <li><a href="inicio.html"><i class="fa-solid fa-square icon"></i> Dashboard</a></li>
            <li><a href="formulario-candidato.html" target="_blank"><i class="fa-solid fa-list icon"></i> Formulario de registro</a></li>
            <li><a href="control-candidatos.php"><i class="fa-solid fa-users-line icon"></i>Control candidatos</a></li>
            <li><a href="control-usuarios.php"><i class="fa-solid fa-users-gear icon"></i>Control usuario</a></li>
            <li><a href="consultar-api.html" class="active"><i class="fa-solid fa-globe icon"></i> API</a></li>
            <li><a href="../controllers/cerrarSesion.php"><i class="fa-solid fa-right-to-bracket icon"></i> Cerrar sesión</a></li>
        </ul>


	</section>
	<!-- .SIDEBAR -->


    <section id="content">
		<!-- ========== MAIN ========== -->
		<main>

			<h1 class="title" style="margin: 2% 1%">API Candidatos</h1>
            <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5>Credenciales del Cliente</h5>
                    </div>
                    <div class="card-body">
                        <form id="oauth-form">
                            <div class="mb-3">
                                <label for="clientId" class="form-label"><i class="fa-solid fa-id-card"></i> Client ID</label>
                                <input type="text" class="form-control" id="clientId" required />
                            </div>
                            <div class="mb-3">
                                <label for="clientSecret" class="form-label"><i class="fa-solid fa-key"></i> Client Secret</label>
                                <input type="password" class="form-control" id="clientSecret" required />
                            </div>
                            <button type="submit" class="btn btn-primary">Obtener Token</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="card" id="token-card">
                    <div class="card-header">
                        <h5>Estado de Autenticación</h5>
                    </div>
                    <div class="card-body">
                        <div id="token-section" class="hidden">
                            <div class="success-message">
                                <p><strong>✓ Autenticación exitosa</strong></p>
                                <p><strong>Token tipo:</strong> <span id="token-type">-</span></p>
                                <p><strong>Token válido por:</strong> <span id="expires-in">-</span> segundos</p>
                                <p><small class="text-muted">El token de acceso se ha guardado de forma segura</small></p>
                            </div>
                            <button id="get-candidates" class="btn btn-success">Obtener Candidatos</button>
                        </div>
                        <div id="no-token-message">
                            <p class="text-muted">Ingrese sus credenciales y haga clic en "Obtener Token" para comenzar.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-12">
                <div class="card" id="result-card">
                    <div class="card-header">
                        <h5>Resultados</h5>
                    </div>
                    <div class="card-body">
                        <div id="download-section" class="download-section hidden">
                            <h6 class="mb-3">📥 Descargar Datos</h6>
                            <div class="download-buttons">
                                <button id="download-json" class="btn btn-outline-primary download-btn">
                                    JSON
                                </button>
                                <button id="download-csv" class="btn btn-outline-success download-btn">
                                    CSV
                                </button>
                                <button id="download-excel" class="btn btn-outline-info download-btn">
                                    Excel
                                </button>
                            </div>
                            <small class="text-muted d-block mt-2">
                                Total de registros: <span id="records-count">0</span>
                            </small>
                        </div>
                        
                        <div id="candidates-section" class="hidden">
                            <h4 class="mb-3">Lista de Candidatos</h4>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Correo</th>
                                            <th>Teléfono</th>
                                            <th>Género</th>
                                            <th>Rango Edad</th>
                                            <th>Tipo Identificación</th>
                                            <th>País</th>
                                            <th>Estado</th>
                                            <th>Municipio</th>
                                            <th>Colonia</th>
                                            <th>Nivel Estudio</th>
                                            <th>Giro</th>
                                            <th>Empresa/Institución</th>
                                            <th>ID Examen</th>
                                            <th>Nombre Examen</th>
                                            <th>Motivo</th>
                                            <th>Calificación</th>
                                            <th>Consentimiento Publicidad</th>
                                            <th>Fecha Entrada</th>
                                            <th>Fecha Salida</th>
                                        </tr>
                                    </thead>
                                    <tbody id="candidates-table-body"></tbody>
                                </table>
                            </div>
                        </div>
                        <div id="api-response-section" class="hidden">
                            <h4 class="mb-3">Respuesta JSON</h4>
                            <pre id="api-response">Esperando respuesta...</pre>
                        </div>
                        <div id="error-section" class="hidden">
                            <div class="alert alert-danger" id="error-message"></div>
                        </div>
                        <div id="no-results-message">
                            <p class="text-muted">Obtenga un token y haga una solicitud para ver los resultados aquí.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		</main>
		<!-- .......... MAIN .......... -->
	</section>


	<!-- <script src="assets/bootstrap/js/bootstrap.min.js"></script> -->
    <script src="../js/consultar-api.js"></script>
	<script src="../js/sidebar-navbar.js"></script>
    <script src="../js/control-candidato.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

	<!-- <script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script> -->
</body>
</html>