<?php include_once "encabezado1.php" ?>

<?php
include 'conexion1.php'; // Conexión a la base de datos
$conexion = new mysqli($servidor, $nombre, $clave, $base);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Validación y obtención de los datos del formulario
    $nombre = $_POST['nombre'];
    $descripcion = $_POST['descripcion'];
    $precio_unitario = $_POST['precio_unitario'];
    $cantidad = $_POST['cantidad'];

    // Insertar el producto en la base de datos
    $sql = "INSERT INTO productos (nombre, descripcion, precio_unitario, cantidad) VALUES (?, ?, ?, ?)";
    $stmt = $conexion->prepare($sql);
    $stmt->bind_param("ssdi", $nombre, $descripcion, $precio_unitario, $cantidad);

    if ($stmt->execute()) {
        echo "<script>alert('Producto agregado exitosamente.'); window.location.href='listar_productos.php';</script>";
    } else {
        echo "Error al agregar el producto: " . $stmt->error;
    }
    $stmt->close();
    $conexion->close();
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Agregar Producto</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 400px;
            animation: fadeIn 0.8s ease;
        }
        h2 {
            color: #007bff;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        .btn-custom {
            background-color: #007bff;
            color: white;
            width: 100%;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .btn-custom:hover {
            background-color: #0056b3;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2><i class="fas fa-box"></i> Agregar Producto</h2>
        <form id="addProductForm" method="POST">
            <div class="form-group">
                <label><i class="fas fa-tag"></i> Nombre del Producto</label>
                <input type="text" name="nombre" class="form-control" placeholder="Ej: Smartphone Galaxy" required>
            </div>
            <div class="form-group">
                <label><i class="fas fa-align-left"></i> Descripción</label>
                <textarea name="descripcion" class="form-control" rows="3" placeholder="Detalles del producto..."></textarea>
            </div>
            <div class="form-group">
                <label><i class="fas fa-dollar-sign"></i> Precio Unitario</label>
                <input type="number" name="precio_unitario" class="form-control" step="0.01" placeholder="Ej: 599.99" required>
            </div>
            <div class="form-group">
                <label><i class="fas fa-cubes"></i> Cantidad Inicial</label>
                <input type="number" name="cantidad" class="form-control" min="0" placeholder="Ej: 50" required>
            </div>
            <button type="submit" class="btn btn-primary btn-custom"><i class="fas fa-save"></i> Guardar Producto</button>
        </form>
    </div>
</body>
</html>