<?php 
include 'views/header.php'; 

// Verificar que se recibió un ID
if (!isset($_GET['id']) || empty($_GET['id'])) {
    echo "<script>
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'ID de blog no encontrado'
        }).then(() => {
            window.location.href = 'blog.php';
        });
    </script>";
    exit;
}

$blogId = $_GET['id'];
?>

<div class="container-div">
    <h2>Editar Blog</h2>
    <p>Modifica los datos del blog existente.</p>

    <form id="editBlogForm" class="mt-4">
        <input type="hidden" id="blog_id" name="blog_id" value="<?php echo htmlspecialchars($blogId); ?>">
        <input type="hidden" id="imagen_principal" name="imagen_principal" value="">
        <input type="hidden" id="imagen_actual" name="imagen_actual" value="">
        
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Título</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="publicado" class="form-label">Estado</label>
                            <select class="form-select" id="publicado" name="publicado">
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="descripcion" class="form-label">Contenido</label>
                    <textarea class="form-control" id="descripcion" name="descripcion"></textarea>
                </div>
            </div>

            <div class="col-md-4">
                <div class="d-flex justify-content-end mb-4">
                    <a href="blog.php" class="btn btn-secondary" style="margin-right: 10px;">Cancelar</a>
                    <button type="submit" class="btn btn-success">Actualizar Blog</button>
                </div>

                <div class="mb-4">
                    <label class="form-label">Imagen del blog</label>
                    
                    <!-- Área para mostrar imagen actual -->
                    <div id="currentImageContainer" style="display: none;">
                        <div class="text-center mb-3">
                            <img id="currentImage" src="" class="img-fluid" style="max-height: 200px; border-radius: 5px;" alt="Imagen actual">
                            <div class="mt-2">
                                <span class="badge bg-info">Imagen actual</span>
                                <button type="button" class="btn btn-warning btn-sm ms-2" onclick="changeImage()">
                                    <i class="fas fa-edit"></i> Cambiar
                                </button>
                                <button type="button" class="btn btn-danger btn-sm ms-1" onclick="removeCurrentImage()">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Dropzone para nueva imagen -->
                    <div id="dropzoneBlog" class="dropzone">
                        <div class="dz-message needsclick">
                            Arrastra la imagen aquí o haz clic para seleccionar<br>
                            <small class="text-muted">Solo se permite una imagen</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Loading overlay -->
<div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
    <div class="d-flex justify-content-center align-items-center h-100">
        <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Cargando...</span>
        </div>
    </div>
</div>

<script src="js/editarBlog.js"></script>
<?php include 'views/footer.php'; ?>