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

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

// Fetch current blog data
$sql = "SELECT * FROM `upvc_window` 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 = $_POST['title'];
    $inputSlug = mysqli_real_escape_string($con, $_POST['slug']);
    $description = $_POST['description'];
    $meta_title = $_POST['meta_title'];
    $short_des = $_POST['short_des'];
    $meta_des = $_POST['meta_des'];
    $meta_key = $_POST['meta_key'];
    $old_image = $_POST['old_image'];

    // Handle slug
    $slug = empty($inputSlug) ? generateSlug($title) : generateSlug($inputSlug);

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

    $Image = $old_image; // Default to old image

    // Check if a new image is uploaded
    if (!empty($_FILES['Image']['name'])) {
        $originalName = $_FILES['Image']['name'];
        $ext = pathinfo($originalName, PATHINFO_EXTENSION);
        $uniqueName = 'upvc_' . time() . '_' . rand(1000, 9999) . '.' . $ext;
        $img_path = "./assets/images/service/" . $uniqueName;

        if (move_uploaded_file($_FILES['Image']['tmp_name'], $img_path)) {
            // Delete old image if exists
            if (!empty($old_image) && file_exists("./assets/images/service/" . $old_image)) {
                unlink("./assets/images/service/" . $old_image);
            }
            $Image = $uniqueName; // Set new image name
        }
    }

    // Update query
    $sql1 = "UPDATE `upvc_window` 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' 
            WHERE `id`='$id'";

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

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




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

<head>
    <meta charset="utf-8" />
    <title>UPVC window Update</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- App favicon -->
    <!-- <link rel="shortcut icon" href="assets/images/favicon.ico" /> -->

    <!-- Plugins css -->
    <link href="assets/libs/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="shortcut icon" href="./assets/logo/fav.png" />

    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    <!-- App js -->
    <!-- <script src="assets/js/plugin.js"></script> -->
    <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;
            border-inline: 2px solid transparent;
        }

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

        }

        div#upload {
            cursor: pointer;

        }

        ::-webkit-file-upload-button {
            display: none;
        }

        /* 
        .form .input::-moz-placeholder {
            color: rgb(170, 170, 170);
        }

        .form .input::placeholder {
            color: rgb(170, 170, 170);
        }

        .form .input:focus {
            outline: none;
            border-inline: 2px solid #12b1d1;
        } */

        .filepath {
            display: none;
        }

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

<body data-sidebar="dark">
    <!-- <body data-layout="horizontal" data-topbar="dark"> -->

    <!-- Begin page -->
    <div id="layout-wrapper">

        <div class="w-80 ">
            <div class="page-content" style="width: 80%;margin-left: 260px;">
                <div class="container">
                    <!-- start page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0 font-size-18">UPVC window Update</h4>


                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

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

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

                                            <div class="dropzone">
                                                <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>

                                            <ul class="list-unstyled mb-0" id="dropzone-preview"></ul>

                                            <!-- Preview -->
                                            <div class="filepath" style="display:block; margin-top:10px;">
                                                <img id="previewImg" src="./assets/images/service/<?php echo $row['Image']; ?>" alt="img" style="max-height:150px;">
                                                <span id="filename"><?php echo $row['Image']; ?></span>
                                            </div>

                                            <br>

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

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

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

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

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



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

                                </div>
                            </div>
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->
                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->


        </div>
        <!-- end main content-->
    </div>
    <!-- END layout-wrapper -->




    <!-- JAVASCRIPT -->
    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/metismenu/metisMenu.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/node-waves/waves.min.js"></script>

    <!-- Plugins js -->
    <script src="assets/libs/dropzone/dropzone-min.js"></script>

    <!-- Form file upload init js -->
    <script src="assets/js/pages/form-file-upload.init.js"></script>

    <script src="assets/js/app.js"></script>
    <script src="./ck editor/ckeditor.js"></script>
    <script>
        ['Experience', 'Experience1', 'Experience2', 'Experience3'].forEach(function(id) {
            CKEDITOR.replace(id);
        });
    </script>
    <script>
        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';
            }
        };
    </script>
    <!-- slug auto -->
    <script>
        function generateSlug() {
            let title = document.getElementById("title").value;
            let slug = title.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '') // Remove invalid chars
                .replace(/\s+/g, '-') // Replace spaces with -
                .replace(/-+/g, '-') // Collapse dashes
                .trim();
            document.getElementById("slug").value = slug;
        }
    </script>
    <!-- end slug -->
</body>

</html>