<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <style>
        /* Selects e inputs de fecha */
        select#id_rango_edad,
        select#id_genero,
        select#id_examen,
        input[type="date"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
            background-color: #fff;
            color: #333;
            font-family: inherit;
            transition: border-color 0.2s ease;
        }

        select#id_rango_edad:focus,
        select#id_genero:focus,
        select#id_examen:focus,
        input[type="date"]:focus {
            border-color: #4a90e2;
            outline: none;
        }

        /* Botones Buscar y Limpiar */
        button#buscar,
        button#limpiar,
        button#limpiar2 {
            padding: 8px 20px;
            font-size: 14px;
            border: 1px solid #4a90e2;
            border-radius: 6px;
            background-color: #fff;
            color: #4a90e2;
            cursor: pointer;
            font-family: inherit;
            transition: background-color 0.2s ease, color 0.2s ease;
            margin-top: 10px;
            margin-right: 10px;
        }

        button#buscar:hover,
        button#limpiar:hover,
        button#limpiar2:hover {
            background-color: #4a90e2;
            color: white;
        }
    </style>

    <link rel="stylesheet" href="../css/inicio.css">
    <title>AdminSite</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" class="active"><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"><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">
        <nav>
            <i class='bx bx-menu toggle-sidebar'></i>
        </nav>

        <main>
            <h1 class="title">Dashboard</h1>
            <ul class="breadcrumbs">
                <li><a href="#">Home</a></li>
                <li class="divider">/</li>
                <li><a href="#" class="active">Dashboard</a></li>
            </ul>

            <div class="select-data">
                <div class="card">
                    <div class="head">
                        <i class='bx bx-trending-up icon'></i>
                    </div>
                    <div style="display: flex; gap: 20px; margin: 10px 0;">
                        <!-- Campo: Edad -->
                        <div style="flex: 1;">
                            <label class="form-label" for="id_rango_edad">Edad</label>
                            <select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
                                <option value="NULL">Seleccione una opción</option>
                                <option value="1">18-24</option>
                                <option value="2">24-34</option>
                                <option value="3">35-44</option>
                                <option value="4">44-54</option>
                                <option value="5">55-64</option>
                                <option value="6">65 o más</option>
                                <option value="7">Menor de 18</option>
                            </select>
                        </div>
                        <!-- Campo: Género -->
                        <div style="flex: 1;">
                            <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
                            <select class="border rounded-pill shadow-sm form-select" id="id_genero" required>
                                <option value="NULL">Seleccione una opción</option>
                                <option value="1">Masculino</option>
                                <option value="2">Femenino</option>
                                <option value="3">Prefiero no decir</option>
                            </select>
                        </div>
                        <!-- Campo: Examen -->
                        <div style="flex: 1;">
                            <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
                            <select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
                                <option value="NULL">Seleccione una opción</option>
                                <option value="1">Amazon Web Services</option>
                                <option value="2">Cisco</option>
                                <option value="3">CompTIA</option>
                                <option value="4">Fortinet</option>
                                <option value="5">Google Cloud Platform</option>
                                <option value="6">IBM</option>
                                <option value="7">Juniper Networks</option>
                                <option value="8">Microsoft</option>
                                <option value="9">Oracle</option>
                                <option value="10">Otros</option>
                                <option value="11">Palo Alto Networks</option>
                                <option value="12">Red Hat</option>
                                <option value="13">Salesforce</option>
                                <option value="14">SAP</option>
                                <option value="15">VMware</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
                    <h2>Fecha</h2>
                    <h3>Ingresa una fecha de inicio:</h3>
                    <br>
                    <input type="date" id="date1" name="date1">
                    <h3>Ingresa una fecha de final:</h3>
                    <input type="date" id="date2" name="date2">
                    <br>
                    <button type="button" id="buscar">Buscar</button>
                    <button type="button" id="limpiar">Limpiar</button>
                    <br>
                    <div class="content-data">
                        <div class="head">
                            <h3>Resultado de registros en el rango de fecha ingresado</h3>
                            <div class="menu"></div>
                        </div>
                        <div class="chart">
                            <div id="chart5"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <br>
                <h3>Promedio de géneros:</h3>
                <div class="info-data">
                    <div class="card" id="card-femenino">
                        <div class="head">
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <i class='bx bx-female' style="font-size: 24px; color: #e91e63;"></i>
                                <div>
                                    <h2>0</h2>
                                    <p>Femenino</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" id="card-masculino">
                        <div class="head">
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <i class='bx bx-male' style="font-size: 24px; color: #2196f3;"></i>
                                <div>
                                    <h2>0</h2>
                                    <p>Masculino</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" id="card-prefiero">
                        <div class="head">
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <i class='bx bx-male' style="font-size: 24px; color: black;"></i>
                                <div>
                                    <h2>0</h2>
                                    <p>Prefiero no decirlo</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="data">
                <div class="content-data">
                    <div class="head">
                        <h3>Generos</h3>
                        <div class="menu">
                            <i class='bx bx-dots-horizontal-rounded icon'></i>
                            <ul class="menu-link">
                                <li><a href="#">Edit</a></li>
                                <li><a href="#">Save</a></li>
                                <li><a href="#">Remove</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="chart">
                        <div id="chart"></div>
                    </div>
                </div>
                <div class="content-data">
                    <div class="head">
                        <h3>Edades</h3>
                        <div class="menu">
                            <i class='bx bx-dots-horizontal-rounded icon'></i>
                            <ul class="menu-link">
                                <li><a href="#">Edit</a></li>
                                <li><a href="#">Save</a></li>
                                <li><a href="#">Remove</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="chart">
                        <div id="chart2"></div>
                    </div>
                </div>
                <div class="content-data">
                    <div class="head">
                        <h3>Estados</h3>
                        <div class="menu">
                            <i class='bx bx-dots-horizontal-rounded icon'></i>
                            <ul class="menu-link">
                                <li><a href="#">Edit</a></li>
                                <li><a href="#">Save</a></li>
                                <li><a href="#">Remove</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="chart">
                        <div id="chart3"></div>
                    </div>
                </div>
                <div class="content-data">
                    <div class="head">
                        <h3>Examenes</h3>
                        <div class="menu">
                            <i class='bx bx-dots-horizontal-rounded icon'></i>
                            <ul class="menu-link">
                                <li><a href="#">Edit</a></li>
                                <li><a href="#">Save</a></li>
                                <li><a href="#">Remove</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="chart">
                        <div id="chart4"></div>
                    </div>
                </div>
            </div>
        </main>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script type="module" src="../js/inicio.js"></script>
    <script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
    <script src="../js/tarjetasPromedio.js"></script>
</body>
</html>