Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/pennagaram.org/public_html/admin

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: add-banner.php

<!doctype html>
<html lang="en">
<?php
include('includes/head.php');
include('includes/db.php');
// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        if ($_POST['action'] === 'add_image') {
            $title = mysqli_real_escape_string($conn, $_POST['title']);
            $type = mysqli_real_escape_string($conn, $_POST['type']); // 'gallery' or 'banner'
           
            if ($type === 'gallery') {
                // Handle single image for gallery
                if (isset($_FILES['image']) && $_FILES['image']['error'] === 0) {
                    $uploadDir = 'uploads/gallery/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }
                   
                    $image = $_FILES['image'];
                    $imageExt = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION));
                    $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
                   
                    if (in_array($imageExt, $allowedExt)) {
                        $imageName = 'gallery_' . time() . '_' . uniqid() . '.' . $imageExt;
                        $imageTarget = $uploadDir . $imageName;
                       
                        if (move_uploaded_file($image['tmp_name'], $imageTarget)) {
                            $insertSql = "INSERT INTO gallery (title, image_path, type, created_at) VALUES (?, ?, ?, NOW())";
                            $stmt = mysqli_prepare($conn, $insertSql);
                            mysqli_stmt_bind_param($stmt, 'sss', $title, $imageName, $type);
                            mysqli_stmt_execute($stmt);
                            mysqli_stmt_close($stmt);
                           
                            $successMsg = "Gallery image added successfully!";
                        }
                    }
                }
            } elseif ($type === 'banner') {
                // Handle separate images for desktop and mobile
                $errors = [];
                $uploads = [];
               
                // Process desktop image
                if (isset($_FILES['desktop_image']) && $_FILES['desktop_image']['error'] === 0) {
                    $uploadDir = 'uploads/gallery/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }
                   
                    $image = $_FILES['desktop_image'];
                    $imageExt = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION));
                    $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
                   
                    if (in_array($imageExt, $allowedExt)) {
                        $imageInfo = getimagesize($image['tmp_name']);
                        $width = $imageInfo[0];
                        $height = $imageInfo[1];
                       
                        if ($width == 1920 && $height == 1080) {
                            $imageName = 'banner_desktop_' . time() . '_' . uniqid() . '.' . $imageExt;
                            $imageTarget = $uploadDir . $imageName;
                           
                            if (move_uploaded_file($image['tmp_name'], $imageTarget)) {
                                $uploads['desktop'] = ['name' => $imageName, 'title' => $title . ' (Desktop)'];
                            }
                        } else {
                            $errors[] = "Desktop banner must be exactly 1920x1080px.";
                        }
                    }
                } else {
                    $errors[] = "Desktop banner image is required.";
                }
               
                // Process mobile image
                if (isset($_FILES['mobile_image']) && $_FILES['mobile_image']['error'] === 0) {
                    $uploadDir = 'uploads/gallery/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }
                   
                    $image = $_FILES['mobile_image'];
                    $imageExt = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION));
                    $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
                   
                    if (in_array($imageExt, $allowedExt)) {
                        $imageInfo = getimagesize($image['tmp_name']);
                        $width = $imageInfo[0];
                        $height = $imageInfo[1];
                       
                        if ($width == 768 && $height == 1024) {
                            $imageName = 'banner_mobile_' . time() . '_' . uniqid() . '.' . $imageExt;
                            $imageTarget = $uploadDir . $imageName;
                           
                            if (move_uploaded_file($image['tmp_name'], $imageTarget)) {
                                $uploads['mobile'] = ['name' => $imageName, 'title' => $title . ' (Mobile)'];
                            }
                        } else {
                            $errors[] = "Mobile banner must be exactly 768x1024px.";
                        }
                    }
                } else {
                    $errors[] = "Mobile banner image is required.";
                }
               
                // If no errors, insert both
                if (empty($errors) && count($uploads) === 2) {
                    foreach ($uploads as $upload) {
                        $insertSql = "INSERT INTO gallery (title, image_path, type, created_at) VALUES (?, ?, ?, NOW())";
                        $stmt = mysqli_prepare($conn, $insertSql);
                        mysqli_stmt_bind_param($stmt, 'sss', $upload['title'], $upload['name'], $type);
                        mysqli_stmt_execute($stmt);
                        mysqli_stmt_close($stmt);
                    }
                    $successMsg = "Banner images added successfully!";
                } else {
                    $errorMsg = implode("<br>", $errors);
                }
            }
        } elseif ($_POST['action'] === 'delete_image') {
            $imageId = (int)$_POST['image_id'];
           
            // Get image details before deletion
            $getSql = "SELECT image_path FROM gallery WHERE id = ?";
            $stmt = mysqli_prepare($conn, $getSql);
            mysqli_stmt_bind_param($stmt, 'i', $imageId);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_bind_result($stmt, $imagePath);
            mysqli_stmt_fetch($stmt);
            mysqli_stmt_close($stmt);
           
            // Delete from database
            $deleteSql = "DELETE FROM gallery WHERE id = ?";
            $stmt = mysqli_prepare($conn, $deleteSql);
            mysqli_stmt_bind_param($stmt, 'i', $imageId);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_close($stmt);
           
            // Delete image file
            if (!empty($imagePath)) {
                $filePath = 'uploads/gallery/' . $imagePath;
                if (file_exists($filePath)) {
                    unlink($filePath);
                }
            }
           
            $successMsg = "Image deleted successfully!";
        }
    }
}
// Fetch gallery images
$gallerySql = "SELECT id, title, image_path, type, created_at FROM gallery ORDER BY type, created_at DESC";
$galleryResult = mysqli_query($conn, $gallerySql);
$galleryImages = [];
$bannerImages = [];
if ($galleryResult && mysqli_num_rows($galleryResult) > 0) {
    while ($row = mysqli_fetch_assoc($galleryResult)) {
        if ($row['type'] === 'banner') {
            $bannerImages[] = $row;
        } else {
            $galleryImages[] = $row;
        }
    }
}
// Count statistics
$totalGallery = count($galleryImages);
$totalBanners = count($bannerImages);
$totalImages = $totalGallery + $totalBanners;
?>
<body data-sidebar="dark">

<?php include('includes/pre-loader.php')?>

<div id="layout-wrapper">
<?php include('includes/topbar.php')?>
    
    <div class="vertical-menu">
        <div data-simplebar class="h-100">
            
            <?php include('includes/sidebar.php')?>
            
        </div>
    </div>
    
    
    
    
    <div class="main-content">
        <div class="page-content">
          
            <div class="container-fluid">
                
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0">Gallery & Banner Management</h4>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addImageModal">
                                <i class="fas fa-plus me-2"></i>Add New Image
                            </button>
                        </div>
                    </div>
                </div>
                <?php if (isset($successMsg)): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <?php echo $successMsg; ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php endif; ?>
                <?php if (isset($errorMsg)): ?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <?php echo $errorMsg; ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php endif; ?>
                
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-info mt-2"><?php echo $totalImages; ?></h3> Total Images
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-success mt-2"><?php echo $totalGallery; ?></h3> Gallery Images
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-warning mt-2"><?php echo $totalBanners; ?></h3> Banner Images
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-purple mt-2"><?php echo date('M Y'); ?></h3> Current Month
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h4 class="card-title mb-0">Banner Images</h4>
                                    <span class="badge bg-warning">Mobile: 768x1024px | Desktop: 1920x1080px</span>
                                </div>
                                <?php if (empty($bannerImages)): ?>
                                    <div class="text-center py-5">
                                        <i class="fas fa-flag fa-3x text-muted mb-3"></i>
                                        <h5>No Banner Images</h5>
                                        <p class="text-muted">Add banner images for your website.</p>
                                    </div>
                                <?php else: ?>
                                    <div class="row">
                                        <?php foreach ($bannerImages as $image):
                                            $imageInfo = getimagesize('uploads/gallery/' . $image['image_path']);
                                            $dimensions = $imageInfo ? $imageInfo[0] . 'x' . $imageInfo[1] . 'px' : 'Unknown';
                                        ?>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <div class="card banner-card">
                                                    <div class="banner-image-container">
                                                        <img src="uploads/gallery/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                             class="card-img-top banner-img"
                                                             alt="<?php echo htmlspecialchars($image['title']); ?>"
                                                             onerror="this.src='https://via.placeholder.com/300x200?text=Image+Not+Found'">
                                                        <div class="banner-overlay">
                                                            <div class="banner-actions">
                                                                <button class="btn btn-info btn-sm view-image"
                                                                        data-image="uploads/gallery/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                                        data-title="<?php echo htmlspecialchars($image['title']); ?>">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                <form method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this banner?')">
                                                                    <input type="hidden" name="action" value="delete_image">
                                                                    <input type="hidden" name="image_id" value="<?php echo $image['id']; ?>">
                                                                    <button type="submit" class="btn btn-danger btn-sm">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <h6 class="card-title text-truncate"><?php echo htmlspecialchars($image['title']); ?></h6>
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <span class="badge bg-primary"><?php echo $dimensions; ?></span>
                                                            <small class="text-muted">
                                                                <?php echo date('M j, Y', strtotime($image['created_at'])); ?>
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Gallery Images</h4>
                                <?php if (empty($galleryImages)): ?>
                                    <div class="text-center py-5">
                                        <i class="fas fa-images fa-3x text-muted mb-3"></i>
                                        <h5>No Gallery Images</h5>
                                        <p class="text-muted">Get started by adding your first image to the gallery.</p>
                                    </div>
                                <?php else: ?>
                                    <div class="row">
                                        <?php foreach ($galleryImages as $image): ?>
                                            <div class="col-xl-3 col-md-4 col-sm-6 mb-4">
                                                <div class="card gallery-card">
                                                    <div class="gallery-image-container">
                                                        <img src="uploads/gallery/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                             class="card-img-top gallery-img"
                                                             alt="<?php echo htmlspecialchars($image['title']); ?>"
                                                             onerror="this.src='https://via.placeholder.com/300x200?text=Image+Not+Found'">
                                                        <div class="gallery-overlay">
                                                            <div class="gallery-actions">
                                                                <button class="btn btn-primary btn-sm view-image"
                                                                        data-image="uploads/gallery/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                                        data-title="<?php echo htmlspecialchars($image['title']); ?>">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                <form method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this image?')">
                                                                    <input type="hidden" name="action" value="delete_image">
                                                                    <input type="hidden" name="image_id" value="<?php echo $image['id']; ?>">
                                                                    <button type="submit" class="btn btn-danger btn-sm">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <h6 class="card-title text-truncate"><?php echo htmlspecialchars($image['title']); ?></h6>
                                                        <p class="card-text small text-muted">
                                                            Added: <?php echo date('M j, Y', strtotime($image['created_at'])); ?>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
        
        <?php include('includes/footer.php')?>
    </div>
    
</div>


<div class="modal fade" id="addImageModal" tabindex="-1" aria-labelledby="addImageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addImageModalLabel">Add New Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" enctype="multipart/form-data" id="addImageForm">
                <div class="modal-body">
                    <input type="hidden" name="action" value="add_image">
                   
                    <div class="mb-3">
                        <label for="type" class="form-label">Image Type</label>
                        <select class="form-select" id="type" name="type" required>
                            <option value="">Select Type</option>
                            <option value="gallery">Gallery Image</option>
                            <option value="banner">Banner Image</option>
                        </select>
                    </div>
                   
                    <div class="mb-3">
                        <label for="title" class="form-label">Image Title</label>
                        <input type="text" class="form-control" id="title" name="title" required
                               placeholder="Enter image title" maxlength="255">
                    </div>
                   
                    <div class="mb-3" id="galleryImageField">
                        <label for="image" class="form-label">Select Image</label>
                        <input type="file" class="form-control" id="image" name="image" accept=".jpg,.jpeg,.png,.webp,.gif">
                        <div class="form-text" id="dimensionInfo">
                            Supported formats: JPG, JPEG, PNG, WebP, GIF. Max file size: 5MB.
                        </div>
                    </div>
                   
                    <div class="mb-3" id="desktopBannerField" style="display: none;">
                        <label for="desktop_image" class="form-label">Select Desktop Banner (1920x1080px)</label>
                        <input type="file" class="form-control" id="desktop_image" name="desktop_image" accept=".jpg,.jpeg,.png,.webp,.gif">
                    </div>
                   
                    <div class="mb-3" id="mobileBannerField" style="display: none;">
                        <label for="mobile_image" class="form-label">Select Mobile Banner (768x1024px)</label>
                        <input type="file" class="form-control" id="mobile_image" name="mobile_image" accept=".jpg,.jpeg,.png,.webp,.gif">
                    </div>
                   
                    <div class="image-preview mb-3" id="galleryPreview" style="display: none;">
                        <img id="galleryPreviewImage" class="img-thumbnail" style="max-height: 200px;">
                        <div id="galleryDimensionDisplay" class="mt-2 text-center small"></div>
                    </div>
                   
                    <div class="image-preview mb-3" id="desktopPreview" style="display: none;">
                        <img id="desktopPreviewImage" class="img-thumbnail" style="max-height: 200px;">
                        <div id="desktopDimensionDisplay" class="mt-2 text-center small"></div>
                    </div>
                   
                    <div class="image-preview mb-3" id="mobilePreview" style="display: none;">
                        <img id="mobilePreviewImage" class="img-thumbnail" style="max-height: 200px;">
                        <div id="mobileDimensionDisplay" class="mt-2 text-center small"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add Image</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="viewImageModal" tabindex="-1" aria-labelledby="viewImageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewImageModalTitle">Image Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" class="img-fluid" style="max-height: 70vh;">
            </div>
        </div>
    </div>
</div>

<?php include('includes/rightbar.php')?>


<?php include('includes/scripts.php')?>
<style>
.gallery-card, .banner-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e9ecef;
}
.gallery-card:hover, .banner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.gallery-image-container, .banner-image-container {
    position: relative;
    overflow: hidden;
}
.gallery-img {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.banner-img {
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.gallery-overlay, .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery-image-container:hover .gallery-overlay,
.banner-image-container:hover .banner-overlay {
    opacity: 1;
}
.gallery-image-container:hover .gallery-img,
.banner-image-container:hover .banner-img {
    transform: scale(1.05);
}
.gallery-actions, .banner-actions {
    display: flex;
    gap: 10px;
}
.gallery-actions .btn, .banner-actions .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    font-size: 0.9rem;
    font-weight: 600;
}
.banner-dimension-badge {
    font-size: 0.7rem;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('type');
    const dimensionInfo = document.getElementById('dimensionInfo');
    const galleryImageField = document.getElementById('galleryImageField');
    const desktopBannerField = document.getElementById('desktopBannerField');
    const mobileBannerField = document.getElementById('mobileBannerField');
    const galleryImageInput = document.getElementById('image');
    const desktopImageInput = document.getElementById('desktop_image');
    const mobileImageInput = document.getElementById('mobile_image');
    const galleryPreview = document.getElementById('galleryPreview');
    const desktopPreview = document.getElementById('desktopPreview');
    const mobilePreview = document.getElementById('mobilePreview');
    const galleryPreviewImage = document.getElementById('galleryPreviewImage');
    const desktopPreviewImage = document.getElementById('desktopPreviewImage');
    const mobilePreviewImage = document.getElementById('mobilePreviewImage');
    const galleryDimensionDisplay = document.getElementById('galleryDimensionDisplay');
    const desktopDimensionDisplay = document.getElementById('desktopDimensionDisplay');
    const mobileDimensionDisplay = document.getElementById('mobileDimensionDisplay');
   
    // Update fields based on type selection
    typeSelect.addEventListener('change', function() {
        if (this.value === 'banner') {
            galleryImageField.style.display = 'none';
            desktopBannerField.style.display = 'block';
            mobileBannerField.style.display = 'block';
            galleryImageInput.required = false;
            desktopImageInput.required = true;
            mobileImageInput.required = true;
            dimensionInfo.innerHTML = 'Supported formats: JPG, JPEG, PNG, WebP, GIF. Max file size: 5MB.';
            galleryPreview.style.display = 'none';
        } else {
            galleryImageField.style.display = 'block';
            desktopBannerField.style.display = 'none';
            mobileBannerField.style.display = 'none';
            galleryImageInput.required = true;
            desktopImageInput.required = false;
            mobileImageInput.required = false;
            dimensionInfo.innerHTML = 'Supported formats: JPG, JPEG, PNG, WebP, GIF. Max file size: 5MB.';
            desktopPreview.style.display = 'none';
            mobilePreview.style.display = 'none';
        }
    });
   
    // Gallery image preview
    galleryImageInput.addEventListener('change', function(e) {
        handlePreview(e, galleryPreviewImage, galleryDimensionDisplay, galleryPreview, null);
    });
   
    // Desktop banner preview with validation
    desktopImageInput.addEventListener('change', function(e) {
        handlePreview(e, desktopPreviewImage, desktopDimensionDisplay, desktopPreview, {width: 1920, height: 1080});
    });
   
    // Mobile banner preview with validation
    mobileImageInput.addEventListener('change', function(e) {
        handlePreview(e, mobilePreviewImage, mobileDimensionDisplay, mobilePreview, {width: 768, height: 1024});
    });
   
    function handlePreview(e, previewImg, dimensionDisplay, previewContainer, requiredDimensions = null) {
        if (e.target.files.length) {
            const file = e.target.files[0];
            const reader = new FileReader();
           
            reader.onload = function(e) {
                previewImg.src = e.target.result;
               
                // Get image dimensions
                const img = new Image();
                img.onload = function() {
                    const width = this.width;
                    const height = this.height;
                   
                    let displayText = `Dimensions: ${width}x${height}px`;
                   
                    if (requiredDimensions) {
                        const isValid = (width === requiredDimensions.width && height === requiredDimensions.height);
                        displayText += isValid ? ` <span class="text-success">✅ Valid size</span>` : ` <span class="text-danger">❌ Invalid size (required: ${requiredDimensions.width}x${requiredDimensions.height}px)</span>`;
                    }
                   
                    dimensionDisplay.innerHTML = displayText;
                    previewContainer.style.display = 'block';
                };
                img.src = e.target.result;
            };
           
            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }
   
    // View image modal
    const viewImageModal = new bootstrap.Modal(document.getElementById('viewImageModal'));
    const modalImage = document.getElementById('modalImage');
    const modalTitle = document.getElementById('viewImageModalTitle');
   
    document.querySelectorAll('.view-image').forEach(button => {
        button.addEventListener('click', function() {
            const imageSrc = this.getAttribute('data-image');
            const imageTitle = this.getAttribute('data-title');
           
            modalImage.src = imageSrc;
            modalTitle.textContent = imageTitle;
            viewImageModal.show();
        });
    });
   
    // Form validation
    document.getElementById('addImageForm').addEventListener('submit', function(e) {
        const type = typeSelect.value;
        const title = document.getElementById('title').value.trim();
       
        if (!type) {
            e.preventDefault();
            alert('Please select image type');
            return;
        }
       
        if (!title) {
            e.preventDefault();
            alert('Please enter an image title');
            return;
        }
       
        if (type === 'gallery') {
            const image = galleryImageInput.files[0];
            if (!image) {
                e.preventDefault();
                alert('Please select an image');
                return;
            }
            if (image.size > 5 * 1024 * 1024) {
                e.preventDefault();
                alert('File size must be less than 5MB');
                return;
            }
        } else if (type === 'banner') {
            const desktopImage = desktopImageInput.files[0];
            const mobileImage = mobileImageInput.files[0];
           
            if (!desktopImage || !mobileImage) {
                e.preventDefault();
                alert('Please select both desktop and mobile banner images');
                return;
            }
           
            if (desktopImage.size > 5 * 1024 * 1024 || mobileImage.size > 5 * 1024 * 1024) {
                e.preventDefault();
                alert('File sizes must be less than 5MB');
                return;
            }
           
            // Client-side dimension validation (though server-side also checks)
            // Note: This is async, but for simplicity, we'll rely on server-side for final check
        }
       
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Adding...';
        submitBtn.disabled = true;
    });
});
</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: add-banner.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation