<?php
include("connection.php");

$id = isset($_GET['id']) ? $_GET['id'] : 0;

// Fetch current blog data
$sql = "SELECT * FROM `blog` WHERE `id`='$id'";
$query = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($query);

// Slug generator function
function generateSlug($string)
{
    $slug = preg_replace('/[^A-Za-z0-9-]+/', '-', strtolower($string));
    return trim($slug, '-');
}

if (isset($_POST['update'])) {
    $title = mysqli_real_escape_string($con, $_POST['title']);
    $inputSlug = mysqli_real_escape_string($con, $_POST['slug']);
    $description = mysqli_real_escape_string($con, $_POST['description']);
    $meta_title = mysqli_real_escape_string($con, $_POST['meta_title']);
    $short_des = mysqli_real_escape_string($con, $_POST['short_des']);
    $meta_des = mysqli_real_escape_string($con, $_POST['meta_des']);
    $meta_key = mysqli_real_escape_string($con, $_POST['meta_key']);
    $blog_writer = mysqli_real_escape_string($con, $_POST['blog_writer']);
    $blog_date = mysqli_real_escape_string($con, $_POST['blog_date']);
    $category = mysqli_real_escape_string($con, $_POST['category']);
    $old_image = $_POST['old_image'];

    // Generate or clean slug
    $slug = empty($inputSlug) ? generateSlug($title) : generateSlug($inputSlug);

    // Check for duplicate slug (excluding current record)
    $checkSlug = mysqli_query($con, "SELECT COUNT(*) as total FROM blog WHERE slug='$slug' AND id != '$id'");
    $slugRow = mysqli_fetch_assoc($checkSlug);
    if ($slugRow['total'] > 0) {
        $slug .= '-' . time(); // Make unique
    }

    // Handle image upload
    if (!empty($_FILES['Image']['name'])) {
        $originalName = basename($_FILES['Image']['name']);
        $ext = pathinfo($originalName, PATHINFO_EXTENSION);
        $uniqueName = 'blog_' . time() . '.' . $ext;
        $img_path = "./assets/images/blog/" . $uniqueName;

        if (move_uploaded_file($_FILES['Image']['tmp_name'], $img_path)) {
            // Delete old image if exists
            if (!empty($old_image) && file_exists("./assets/images/blog/" . $old_image)) {
                unlink("./assets/images/blog/" . $old_image);
            }
            $Image = $uniqueName;
        } else {
            $Image = $old_image; // fallback if upload fails
        }
    } else {
        $Image = $old_image; // no new image uploaded
    }

    // Update query
    $sql1 = "UPDATE `blog` SET 
                `Image`='$Image',
                `title`='$title',
                `slug`='$slug',
                `description`='$description',
                `meta_title`='$meta_title',
                `short_des`='$short_des',
                `meta_des`='$meta_des',
                `meta_key`='$meta_key',
                `blog_writer`='$blog_writer',
                `blog_date`='$blog_date',
                `category`='$category'
            WHERE `id`='$id'";

    $query1 = mysqli_query($con, $sql1);

    if ($query1) {
        header("location: viewblog.php");
        exit();
    } else {
        echo "Update failed: " . mysqli_error($con);
    }
}
?>


<?php include("header.php") ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Blog Update</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    <style>
    .form .input {
        width: 100%;
        background: white;
        border: none;
        padding: 15px 20px;
        border-radius: 20px;
        margin-bottom: 9px;
        margin-top: 15px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    input[name='Image'] {
        display: none;
    }

    div#upload {
        cursor: pointer;
    }

    .filepath {
        display: none;
    }

    img[alt="img"] {
        width: clamp(50px, 15%, 100px);
        aspect-ratio: 1/0.70;
    }
    </style>
</head>

<body data-sidebar="dark">

    <div id="layout-wrapper">
        <div class="w-80 ">
            <div class="page-content" style="width: 80%;margin-left: 260px;">
                <div class="container">

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">

                                    <form class="form" action="" method="POST" enctype="multipart/form-data">
                                        <input type="hidden" name="old_image" value="<?php echo $row['Image']; ?>">

                                        <div class="text-center">
                                            <!-- Center whole block -->
                                            <div
                                                class="dropzone d-flex flex-column align-items-center justify-content-center p-4">
                                                <div class="fallback">
                                                    <input type="file" name="Image" id="imageInput" />
                                                </div>
                                                <div class="dz-message needsclick" id="upload">
                                                    <div class="mb-3">
                                                        <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                                                    </div>
                                                    <h4>Drop files here or click to upload.</h4>
                                                </div>
                                            </div>

                                            <div class="filepath mt-3" style="display:block;">
                                                <img id="previewImg"
                                                    src="./assets/images/blog/<?php echo $row['Image']; ?>" alt="img"
                                                    class="img-fluid" style="max-height:150px;">
                                                <div id="filename" class="mt-2"><?php echo $row['Image']; ?></div>
                                            </div>
                                        </div>


                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label>Title</label>
                                                <input type="text" class="form-control" id="title" name="title"
                                                    value="<?php echo $row['title']; ?>" onkeyup="generateSlug()" />
                                            </div>
                                            <div class="col-lg-6">
                                                <label>Slug</label>
                                                <input type="text" class="form-control" id="slug" name="slug"
                                                    value="<?php echo $row['slug']; ?>" />
                                            </div>
                                        </div>
                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label>Meta Title</label>
                                                <input type="text" class="form-control" name="meta_title"
                                                    value="<?php echo $row['meta_title']; ?>" />
                                            </div>
                                            <div class="col-lg-6">
                                                <label>Meta Keyword</label>
                                                <input type="text" class="form-control" name="meta_key"
                                                    value="<?php echo htmlspecialchars($row['meta_key'] ?? ''); ?>">
                                            </div>
                                        </div>
                                        <br>

                                        <!-- Writer, Date, Category Row -->
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <label>Writer</label>
                                                <input type="text" class="form-control" name="blog_writer"
                                                    value="<?php echo htmlspecialchars($row['blog_writer'] ?? ''); ?>" />
                                            </div>
                                            <div class="col-lg-4">
                                                <label>Date</label>
                                                <input type="date" class="form-control" name="blog_date"
                                                    value="<?php echo $row['blog_date']; ?>" />
                                            </div>
                                            <div class="col-lg-4">
                                                <label>Category</label>
                                                <select name="category" class="form-control" required>
                                                    <option value="">Select Category</option>
                                                    <option value="uPVC Door"
                                                        <?php if ($row['category']=="uPVC Door") echo "selected"; ?>>
                                                        uPVC Door</option>
                                                    <option value="uPVC Window"
                                                        <?php if ($row['category']=="uPVC Window") echo "selected"; ?>>
                                                        uPVC Window</option>
                                                    <option value="Aluminium Door"
                                                        <?php if ($row['category']=="Aluminium Door") echo "selected"; ?>>
                                                        Aluminium Door</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>


                                        <label>Short Description</label>
                                        <textarea name="short_des"
                                            id="Experience1"><?php echo htmlspecialchars($row['short_des'] ?? ''); ?></textarea>
                                        <br>

                                        <label>Description</label>
                                        <textarea name="description"
                                            id="Experience"><?php echo htmlspecialchars($row['description'] ?? ''); ?></textarea>
                                        <br>



                                        <label>Meta Description</label>
                                        <textarea name="meta_des"
                                            id="Experience2"><?php echo htmlspecialchars($row['meta_des'] ?? ''); ?></textarea>

                                        <div class="text-center mt-4">
                                            <button type="submit" name="update" class="btn btn-primary">Update</button>
                                            <a href="viewblog.php"><button type="button" class="btn btn-danger">View
                                                    Data</button></a>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./ck editor/ckeditor.js"></script>
    <script>
    ['Experience', 'Experience1', 'Experience2'].forEach(function(id) {
        CKEDITOR.replace(id);
    });

    const imgInput = document.querySelector("input[name='Image']");
    const uploadBox = document.getElementById('upload');
    const previewImg = document.getElementById('previewImg');
    const filenameSpan = document.getElementById('filename');

    uploadBox.onclick = () => imgInput.click();

    imgInput.onchange = () => {
        if (imgInput.files.length > 0) {
            const file = imgInput.files[0];
            const fileURL = URL.createObjectURL(file);
            previewImg.src = fileURL;
            filenameSpan.textContent = file.name;
            document.querySelector(".filepath").style.display = 'block';
        }
    };

    function generateSlug() {
        let title = document.getElementById("title").value;
        let slug = title.toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim();
        document.getElementById("slug").value = slug;
    }
    </script>
</body>

</html>