<?php
// Handle form submission
$message = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Collect data for demonstration
    $data = [
        "dpto" => $_POST['dpto'] ?? '',
        "cod" => $_POST['cod'] ?? '',
        "propietario" => $_POST['propietario'] ?? '',
        "cargo" => $_POST['cargo'] ?? '',
        "total" => $_POST['total_anual'] ?? 0
    ];
    $message = "<div class='alert alert-success'>Datos recibidos: " . htmlspecialchars(json_encode($data)) . "</div>";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Pagos - Gestión 2025</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <style>
        body { background-color: #f8f9fa; padding-top: 20px; }
        .form-container { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .month-input { min-width: 80px; }
        .total-field { font-weight: bold; background-color: #e9ecef; }
    </style>
</head>
<body>

<div class="container mb-5">
    <div class="form-container">
        <h2 class="mb-4 text-center text-primary">Control de Pagos 2025</h2>
        
        <?= $message ?>

        <form method="POST" action="">
            <!-- Identification Section -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <label for="dpto" class="form-label">DPTO/P.B.</label>
                    <input type="text" class="form-control" id="dpto" name="dpto" required>
                </div>
                <div class="col-md-2">
                    <label for="cod" class="form-label">COD.</label>
                    <input type="number" class="form-control" id="cod" name="cod" required>
                </div>
                <div class="col-md-5">
                    <label for="propietario" class="form-label">NOMBRE DEL PROPIETARIO</label>
                    <input type="text" class="form-control" id="propietario" name="propietario" required>
                </div>
                <div class="col-md-3">
                    <label for="cargo" class="form-label">CARGO</label>
                    <select class="form-select" id="cargo" name="cargo" required>
                        <option value="">Seleccione...</option>
                        <option value="EXPENSA">EXPENSA</option>
                        <option value="PREVIS.">PREVIS.</option>
                        <option value="AGUA">AGUA</option>
                    </select>
                </div>
            </div>

            <hr>

            <!-- Monthly Payments Section -->
            <h4 class="mb-3">Pagos Mensuales</h4>
            <div class="row g-2 mb-3">
                <?php 
                $months = ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN', 'JUL', 'AGO', 'SEP', 'OCT', 'NOV', 'DIC'];
                foreach ($months as $index => $month): ?>
                <div class="col-6 col-md-3 col-lg-2"> <!-- Responsive grid: 2 cols on mobile, 4 on tablet, 6 on desktop -->
                    <label for="mes_<?= $index + 1 ?>" class="form-label small text-muted"><?= $month ?></label>
                    <input type="number" step="0.01" class="form-control month-input calc-input" id="mes_<?= $index + 1 ?>" name="mes_<?= $index + 1 ?>" placeholder="0.00">
                </div>
                <?php endforeach; ?>
            </div>

            <!-- Totals Section -->
            <div class="row justify-content-end mb-4">
                <div class="col-md-3">
                    <label for="total_anual" class="form-label">TOTAL GESTIÓN 2025</label>
                    <input type="number" step="0.01" class="form-control total-field" id="total_anual" name="total_anual" readonly>
                </div>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">Guardar Registro</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('.calc-input');
        const totalField = document.getElementById('total_anual');

        function calculateTotal() {
            let total = 0;
            inputs.forEach(input => {
                const val = parseFloat(input.value) || 0;
                total += val;
            });
            totalField.value = total.toFixed(2); // Keep 2 decimals
        }

        inputs.forEach(input => {
            input.addEventListener('input', calculateTotal);
        });
    });
</script>

</body>
</html>
