File "slider-edit.php"

Full path: /home/fsibplc/public_html/sommilito-bank/admin/slider-edit.php
File size: 5 B (5 KB bytes)
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<?php
include 'admin-header.php';


$id = $_GET['id'];

$result = $conn->query("SELECT * FROM sliders WHERE id = $id");
$slider = $result->fetch_assoc();

if (isset($_POST['update'])) {

    $title = $_POST['title'];

    if (!empty($_FILES['image']['name'])) {

        $image = time() . '_' . $_FILES['image']['name'];
        move_uploaded_file($_FILES['image']['tmp_name'], "uploads/sliders/" . $image);

        $conn->query("UPDATE sliders SET title='$title', image='$image' WHERE id=$id");
    } else {
        $conn->query("UPDATE sliders SET title='$title' WHERE id=$id");
    }

    header("Location: slider.php");
}
?>


        <main class="flex-1 p-6 overflow-auto">

            <!-- Breadcrumb -->
            <nav class="text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-teal-600 transition">Slider</a>
                <span class="mx-2">/</span>
                <span class="font-semibold text-teal-900">Edit Slider</span>
            </nav>


            <div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-200">

                <!-- Header -->
                <div class="border-b px-6 py-4">
                    <h2 class="text-lg font-semibold text-gray-800">Edit Slider</h2>
                    <p class="text-sm text-gray-500 mt-1">Update slider title or image</p>
                </div>

                <form method="POST" enctype="multipart/form-data" class="p-6 space-y-6">

                    <!-- Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Title
                        </label>
                        <input
                            type="text"
                            name="title"
                            value="<?= htmlspecialchars($slider['title']) ?>"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm 
                       focus:border-teal-500 focus:ring-2 focus:ring-teal-100 outline-none transition">
                    </div>

                    <!-- Image Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Slider Image
                        </label>

                        <label id="uploadBox"
                            class="w-full flex flex-col items-center justify-center px-6 py-6 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-teal-500 transition">

                            <!-- Upload Text -->
                            <span id="uploadText" class="text-sm text-gray-600">
                                Click to change image
                            </span>

                            <!-- File Name -->
                            <span id="fileName" class="text-xs text-gray-500 mt-1"></span>

                            <!-- Current / Preview Image -->
                            <img
                                id="previewImage"
                                src="uploads/sliders/<?= $slider['image'] ?>"
                                class="mt-4 h-32 rounded-lg shadow object-cover">

                            <input type="file" name="image" id="imageInput" class="hidden">
                        </label>

                        <p class="text-xs text-gray-500 mt-2">
                            Leave empty if you don’t want to change the image
                        </p>
                    </div>

                    <!-- Buttons -->
                    <div class="flex justify-end space-x-3 pt-4 border-t">

                        <a href="slider.php"
                            class="px-4 py-2 text-sm rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100 transition">
                            Cancel
                        </a>

                        <button type="submit" name="update"
                            class="px-5 py-2 text-sm rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition shadow-sm">
                            Update Slider
                        </button>

                    </div>

                </form>
            </div>

        </main>

    </div>

    <script>
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('previewImage');
        const fileName = document.getElementById('fileName');
        const uploadText = document.getElementById('uploadText');

        input.addEventListener('change', function() {
            const file = this.files[0];

            if (file) {
                // Show filename
                fileName.textContent = file.name;

                // Replace preview image
                preview.src = URL.createObjectURL(file);

                // Update text
                uploadText.textContent = "New image selected";
            }
        });
    </script>
</body>

</html>