<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agenda de Tareas</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f37f70;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            color: #333;
        }

        form {
            margin: 20px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            margin-bottom: 5px;
            color: #333;
        }

        input {
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 15px;
            background-color: #000000;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 5%
        }

        button:hover {
            background-color: #a6574c;
        }

        table {
            border-collapse: collapse;
            width: 50%;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #000000;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f37f70;
        }

        p {
            color: #333;
        }

    </style>
</head>
<body>

<?php
// Función para obtener las tareas almacenadas
function obtenerTareas() {
    if (isset($_SESSION['tareas'])) {
        return $_SESSION['tareas'];
    } else {
        return [];
    }
}

// Función para mostrar las tareas en formato tabular
function mostrarTareas() {
    $tareas = obtenerTareas();

    if (empty($tareas)) {
        echo "<p>No hay tareas en la lista.</p>";
        return;
    }

    echo "<table>";
    echo "<tr><th>Número</th><th>Nombre</th><th>Completada</th></tr>";
    
    foreach ($tareas as $numero => $tarea) {
        echo "<tr>";
        echo "<td>$numero</td>";
        echo "<td>{$tarea['nombre']}</td>";
        echo "<td>{$tarea['completada']}</td>";
        echo "</tr>";
    }

    echo "</table>";
}

// Iniciar la sesión
session_start();

// Procesar el formulario para agregar nuevas tareas
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['agregar'])) {
        $nombre = $_POST['nombre'];
        if (!empty($nombre)) {
            $tareas = obtenerTareas();
            $tareas[] = ['nombre' => $nombre, 'completada' => 'No'];
            $_SESSION['tareas'] = $tareas;
        } else {
            echo "<p style='color: red;'>¡Advertencia! El nombre de la tarea no puede estar vacío.</p>";
        }
    }
}

// Procesar el formulario para cambiar el estado de una tarea o borrarla
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['cambiarEstado'])) {
        $numeroTarea = $_POST['numeroTarea'];
        $tareas = obtenerTareas();

        if (isset($tareas[$numeroTarea])) {
            $tareas[$numeroTarea]['completada'] = ($tareas[$numeroTarea]['completada'] == 'Sí') ? 'No' : 'Sí';
            $_SESSION['tareas'] = $tareas;
        } else {
            echo "<p style='color: red;'>¡Advertencia! Número de tarea no válido.</p>";
        }
    } elseif (isset($_POST['borrarTarea'])) {
        $numeroTarea = $_POST['numeroTarea'];
        $tareas = obtenerTareas();

        if (isset($tareas[$numeroTarea])) {
            unset($tareas[$numeroTarea]);
            $_SESSION['tareas'] = array_values($tareas);
        } else {
            echo "<p style='color: red;'>¡Advertencia! Número de tarea no válido.</p>";
        }
    }
}

// Procesar la solicitud para vaciar la agenda completamente
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['vaciarAgenda'])) {
    $_SESSION['tareas'] = [];
    header("Location: {$_SERVER['PHP_SELF']}");
    exit();
}
?>

<h1>Agenda de Tareas</h1>

<form method="post">
    <label for="nombre">Nueva Tarea:</label>
    <input type="text" name="nombre" id="nombre">
    <button type="submit" name="agregar">Agregar Tarea</button>
</form>

<?php mostrarTareas(); ?>

<form method="post">
    <label for="numeroTarea">Número de Tarea:</label>
    <input type="number" name="numeroTarea" id="numeroTarea" min="0" max="<?php echo count(obtenerTareas()) ?>">
    <button type="submit" name="cambiarEstado">Cambiar Estado</button>
    <button type="submit" name="borrarTarea">Borrar Tarea</button>
</form>

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <button type="submit" name="vaciarAgenda" formaction="<?php echo $_SERVER['PHP_SELF']; ?>">Vaciar Agenda</button>
</form>

</body>
</html>