1#@!#!123s

32759 1#@!#!123s
: / home / aissorg / public_html / admin /
Filename : images_slider.php
back
<?php
include('include/config.php');
include('php/constant.php');

$alert = '';
$alert_class = '';

// Handle POST Requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Insert New Image with Title
    if (isset($_POST['action']) && $_POST['action'] === 'insert') {
        $titles = $_POST['title'];

        if (!empty($_FILES['multiple_images']['name'][0])) {
            foreach ($_FILES['multiple_images']['tmp_name'] as $key => $tmp_name) {
                $file_name = basename($_FILES['multiple_images']['name'][$key]);
                $target_dir = "assets/img/gallery/";
                $target_file = $target_dir . $file_name;

                if (move_uploaded_file($tmp_name, $target_file)) {
                    $title = mysqli_real_escape_string($con, $titles[$key]);
                    $sql = "INSERT INTO image_slider (image, title) VALUES ('$file_name', '$title')";
                    mysqli_query($con, $sql);
                }
            }
            $alert = 'Images added successfully.';
            $alert_class = 'alert-success';
        } else {
            $alert = 'Error: No images were uploaded.';
            $alert_class = 'alert-danger';
        }
    }

    // Delete Image
    if (isset($_POST['action']) && $_POST['action'] === 'delete') {
        $id = mysqli_real_escape_string($con, $_POST['id']);
        $sql = "SELECT image FROM image_slider WHERE id = $id";
        $result = mysqli_query($con, $sql);
        $row = mysqli_fetch_assoc($result);

        if ($row) {
            $image_path = "assets/img/gallery/" . $row['image'];
            if (file_exists($image_path)) unlink($image_path);

            $sql = "DELETE FROM image_slider WHERE id = $id";
            if (mysqli_query($con, $sql)) {
                $alert = 'Image deleted successfully.';
                $alert_class = 'alert-success';
            } else {
                $alert = 'Error: ' . mysqli_error($con);
                $alert_class = 'alert-danger';
            }
        } else {
            $alert = 'Error: Image not found.';
            $alert_class = 'alert-danger';
        }
    }
}

// Fetch All Slider Images
function fetchSliderImages($con) {
    $sql = "SELECT * FROM image_slider ORDER BY created_at DESC";
    $result = mysqli_query($con, $sql);
    $images = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $images[] = $row;
    }
    return $images;
}
?>

<!DOCTYPE html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider</title>

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    <!-- Feather CSS -->
    <link rel="stylesheet" href="assets/plugins/feather/feather.css">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="assets/plugins/datatables/datatables.min.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <style>
        .image-preview {
            position: relative;
            display: inline-block;
            margin-right: 10px;
        }

        .image-preview .delete-image {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 50%;
            z-index: 10;
        }

        #image-container {
            gap: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<!-- Dynamic Alert -->
<?php if (!empty($alert)): ?>
<div class="alert <?php echo $alert_class; ?> alert-dismissible fade show" role="alert">
    <strong><?php echo ($alert_class === 'alert-success') ? 'Success!' : 'Error!'; ?></strong> <?php echo $alert; ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>

<!-- Main Wrapper -->
<div class="main-wrapper">
    <!-- Header -->
    <?php include("include/header.php")?>
    <!-- /Header -->

    <!-- Sidebar -->
    <?php include("include/sidebar.php")?>
    <!-- /Sidebar -->

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="content-page-header">
                    <h5>Image Slider</h5>
                    <div class="list-btn">
                        <ul class="filter-list">
                            <li>
                                <a class="btn btn-primary" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_modal">
                                    <i class="fa fa-plus-circle me" aria-hidden="true"></i> Add Image
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <!-- Table -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-table">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-stripped table-hover datatable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Image</th>
                                            <th>Title</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        $slider_images = fetchSliderImages($con);
                                        foreach ($slider_images as $index => $img): ?>
                                            <tr>
                                                <td><?= $index + 1 ?></td>
                                                <td>
                                                    <img src="assets/img/gallery/<?= htmlspecialchars($img['image']) ?>" alt="<?= htmlspecialchars($img['title']) ?>" width="100">
                                                </td>
                                                <td><?= htmlspecialchars($img['title']) ?></td>
                                                <td class="d-flex align-items-center">
                                                    <a class="btn-action-icon me-2" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#delete_modal_<?= $img['id'] ?>">
                                                        <i class="fe fe-trash"></i>
                                                    </a>
                                                </td>
                                            </tr>

                                            <!-- Delete Modal -->
                                            <div class="modal custom-modal fade" id="delete_modal_<?= $img['id'] ?>" role="dialog">
                                                <div class="modal-dialog modal-dialog-centered modal-md">
                                                    <div class="modal-content">
                                                        <div class="modal-body">
                                                            <div class="form-header">
                                                                <h3>Delete Image</h3>
                                                                <p>Are you sure you want to delete this image?</p>
                                                            </div>
                                                            <div class="modal-btn delete-action">
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <form method="POST" action="">
                                                                            <input type="hidden" name="action" value="delete">
                                                                            <input type="hidden" name="id" value="<?= $img['id'] ?>">
                                                                            <button type="submit" class="w-100 btn btn-primary paid-continue-btn">Delete</button>
                                                                        </form>
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <button type="button" class="w-100 btn btn-primary paid-cancel-btn" data-bs-dismiss="modal">Cancel</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Table -->
        </div>
    </div>
    <!-- /Page Wrapper -->

    <!-- Add Modal -->
    <div class="modal custom-modal fade" id="add_modal" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h4 class="mb-0">Add Image</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="" enctype="multipart/form-data">
                    <input type="hidden" name="action" value="insert">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="input-block mb-3">
                                    <label>Multiple Images</label>
                                    <div class="service-upload mb-0">
                                        <span><img src="assets/img/icons/drop-icon.svg" alt="upload"></span>
                                        <h6 class="drop-browse align-center">Drop your files here or <span class="text-primary ms-1">browse</span></h6>
                                        <p class="text-muted">Maximum size: 4MB</p>
                                        <input type="file" class="form-control" name="multiple_images[]" accept="image/*" multiple required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="input-block mb-3">
                                    <label>Titles (One per image)</label>
                                    <textarea class="form-control" name="title[]" rows="3" placeholder="Enter titles separated by line break" required></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-back cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary paid-continue-btn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Add Modal -->
</div>
<!-- /Main Wrapper -->

<!-- jQuery -->
<script src="assets/js/jquery-3.7.1.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JS -->
<script src="assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<!-- Datatables JS -->
<script src="assets/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<!-- Custom JS -->
<script src="assets/js/script.js" type="text/javascript"></script>

</body>
</html>