{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Recarga - Recarga movil en linea </title>
    <link rel="icon" href="{% static 'favicon.png' %}" type="image/png">
    <meta name="description" content="Virtual Recarga es una plataforma para realizar recargas móviles en línea de manera fácil, segura y rápida. Recarga tu celular en minutos desde cualquier lugar.">
    <meta name="keywords" content="recargas, recarga móvil, recarga online, celular, Argentina, recargar teléfono, pagos seguros,recargar saldo,recargar claro,recargar personal">
    <script type="text/javascript" src="{% static 'script.js'  %}"></script>
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>    
        .recargaAhora {
            display: flex;
            justify-content: center;  /* Centra el botón horizontalmente */
            align-items: center;      /* Centra el botón verticalmente (si tiene altura definida) */
}.error-message {
    color: red;
    font-size: 0.9em;
    margin-left: 10px;
}

input.error, select.error {
    border: 3px solid red;
}

input.valid, select.valid {
    border: 3px solid green;
}
    </style>
</head>
<body>
    
    <div class="header">
        <img src="https://cdn-icons-png.flaticon.com/512/190/190411.png" alt="Ícono Seguro">
        <span>Sitio Seguro</span>
        <div class="recarga-count">
            <img src="https://cdn-icons-png.flaticon.com/512/4339/4339641.png" alt="Ícono Teléfono">
            <span id="contador-recargas" onclick="mostrarRecargas()">0 Recargas</span>
        </div>
         <!-- Popup de últimas recargas -->
    <div class="popup" id="popup-recargas" hidden>
        <div class="popup-content">
            <div class="popup-header">
                <h2>Últimas 10 Recargas</h2>
                <button class="popup-close" onclick="cerrarRecargas()">X</button>
            </div>
            <ul class="recargas-lista" id="recargas-lista">
            </ul>
        </div>
    </div>
    </div>
    <div class="container">
        <h1 style="color:black">Virtual Recarga es la forma más fácil, segura y rápida de recargar tu celular en línea.</h1>
    </div>
    <!-- Contenedor adicional -->
    <div class="container">
        <div class="item">
            <img src="https://cdn-icons-png.flaticon.com/512/1828/1828884.png" alt="Ícono Recarga">
            <span>Recarga fácil y rápido</span>
        </div>
        <div class="item">
            <img src="https://cdn-icons-png.flaticon.com/512/190/190411.png" alt="Ícono Seguro">
            <span>100% seguro</span>
        </div>
        <div class="item">
            <img src="{% static 'icons/atm-card.png' %}" alt="Ícono Pagos">
            <span>Pagos confiables</span>
        </div>
    </div>

    <div class="form-container">
        <h2>Seleccione su empresa.</h2>
    
        <!-- Contenedor de logos -->
        <div class="logo-container">
            <img src="{% static 'icons/Personal-argentina-logo-1.png' %}" alt="Personal" id="personalimg" style="width: 180px;" onclick="seleccionarEmpresa('Personal')">
            <img src="{% static 'icons/Claro.jpg' %}" alt="Claro" id="claroimg" style="width: 200px;" onclick="seleccionarEmpresa('Claro')"">
        </div>
    
        <form action="recargar" method="get">
            <div id="telefono-container" hidden>
                <input type="text" id="empresa" name="empresa" hidden value="">
                <span id="telefono-error" class="error-message"></span>
                <label for="telefono" style="color: black;"><b>Ingresa tu número de teléfono</label></b>
                <input oninput="validarTelefono()" type="tel" id="telefono" type="number" name="telefono" placeholder="Ejemplo: 1145786655" required maxlength="10" style="width: 300px;" >
            </div>
            <div class="recargaAhora">
                <button type="submit" id="recargaAhorab" hidden>Recargar Ahora</button>
            </div>
            
        </form>
    </div>
    </div>
    <footer>
        <p>&copy; 2024 Virtual Recarga. Todos los derechos reservados.</p>
        <div>
            <a href="terminos">Términos y condiciones</a> | <a href="privacidad">Política de privacidad</a>
            <p><strong>Seguridad:</strong> Este sitio utiliza SSL y encriptación para proteger tus datos. No almacenamos información sensible.</p>
        </div>
    </footer>
</body>
</html>
