Pagos en Línea – Empresa Pública de Agua Potable y Alcantarillado de Antonio Ante

Bienvenido estimado cliente Usted podrá realizar sus pagos en linea próximamente, estamos trabajando para ofrecerte un mejor servicio, siempre pensando en la comodidad de nuestros clientes.

<style>
    .download-card {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 25px;
        max-width: 450px;
        margin: 20px auto;
        font-family: Arial, sans-serif;
        color: #333;
    }
    .download-card h2 {
        text-align: center;
        margin-top: 0;
        color: #0056b3; /* Color corporativo */
    }
    .download-card p {
        font-size: 14px;
        margin-bottom: 20px;
        color: #555;
    }
    .download-card .form-group {
        margin-bottom: 15px;
    }
    .download-card label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .download-card input[type="text"],
    .download-card input[type="password"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Importante para el padding */
    }
    .download-card button {
        width: 100%;
        padding: 12px;
        background-color: #ffc107; /* Color de acción (ej. amarillo) */
        border: none;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .download-card button:hover {
        background-color: #e0a800;
    }
    
    /* Estilos para la lista de facturas (estado autenticado) */
    .invoice-list {
        list-style: none;
        padding: 0;
        margin-top: 20px;
    }
    .invoice-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    .invoice-info {
        flex: 1;
    }
    .invoice-number {
        font-weight: bold;
        color: #0056b3;
    }
    .invoice-date {
        font-size: 12px;
        color: #777;
    }
    .download-btn {
        width: auto;
        padding: 8px 15px;
        font-size: 12px;
        background-color: #28a745; /* Color de descarga (ej. verde) */
    }
</style>

<div class="download-card">
    <h2>MI PORTAL DE FACTURAS</h2>
    
    <div id="login-section">
        <p>Inicia sesión con tu RUC/Cédula y contraseña para ver y descargar tus facturas.</p>
        <div class="form-group">
            <label for="ruc_login">RUC / Cédula:</label>
            <input type="text" id="ruc_login" placeholder="Ej: 1060040130001">
        </div>
        <div class="form-group">
            <label for="password_login">Contraseña:</label>
            <input type="password" id="password_login">
        </div>
        <button onclick="intentarLogin()">INICIAR SESIÓN</button>
    </div>
    
    <div id="invoice-section" style="display: none;">
        <p>Bienvenido, <span id="user-name">Cliente</span>. Aquí están tus facturas recientes:</p>
        <ul class="invoice-list">
            <li class="invoice-item">
                <div class="invoice-info">
                    <span class="invoice-number">FAC-001-002-1094840</span><br>
                    <span class="invoice-date">10 de Marzo, 2026</span>
                </div>
                <button class="download-btn" onclick="descargarFactura('001-002-1094840')">Descargar PDF</button>
            </li>
            </ul>
        <button onclick="cerrarSesion()" style="background-color: #dc3545; margin-top: 20px;">Cerrar Sesión</button>
    </div>
</div>

<script>
    function intentarLogin() {
        var ruc = document.getElementById('ruc_login').value;
        var pass = document.getElementById('password_login').value;
        
        // Validación básica en el cliente
        if (!ruc || !pass) {
            alert("Por favor, ingresa RUC y contraseña.");
            return;
        }
        
        // Lógica de autenticación: Enviar datos a tu backend para validarlos.
        // Si el login es correcto, debes mostrar la sección de facturas y ocultar la de login.
        // Ejemplo conceptual:
        // document.getElementById('login-section').style.display = 'none';
        // document.getElementById('invoice-section').style.display = 'block';
        // document.getElementById('user-name').innerText = "Nombre del Cliente";
        // Cargar la lista de facturas aquí.
    }
    
    function descargarFactura(numFactura) {
        // Redirigir para iniciar la descarga segura llamando al script PHP que creamos antes.
        var safe_url = 'descargar_factura.php?num_factura=' + encodeURIComponent(numFactura);
        window.location.href = safe_url;
    }
    
    function cerrarSesion() {
        // Lógica para cerrar sesión en el backend y recargar la página para mostrar el login.
        window.location.reload();
    }
</script>