<?php
$uploadDir = 'uploads/';
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$maxUploadLimit = 100; // Maximum number of images allowed
$maxFileSize = 300 * 1024; // Maximum file size in bytes (300KB)

// Create uploads directory if it doesn't exist
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

$allImagesHTML = ''; // Variable to store HTML of ALL uploaded images

if (isset($_FILES['images'])) {
    $totalFiles = count($_FILES['images']['name']);

    if ($totalFiles > $maxUploadLimit) {
        echo "<p style='color: red;'>Error: You can only upload a maximum of $maxUploadLimit images.</p>";
    } else {
        for ($i = 0; $i < $totalFiles; $i++) {
            $fileName = $_FILES['images']['name'][$i];
            $tempName = $_FILES['images']['tmp_name'][$i];
            $fileSize = $_FILES['images']['size'][$i];
            $fileType = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
    
            // Check if the file is an image
            if (in_array($fileType, $allowedExtensions)) {
                 // Check file size
                if ($fileSize <= $maxFileSize) {
                     // Generate a unique filename
                    $uniqueFileName = uniqid() . '.' . $fileType;
                    $destination = $uploadDir . $uniqueFileName;
        
                    // Move the uploaded file
                    if (move_uploaded_file($tempName, $destination)) {
                        // Successfully uploaded
                    } else {
                        echo "Error uploading $fileName.<br>";
                    }
                } else {
                    echo "Error: $fileName exceeds the maximum file size of 300KB.<br>";
                }
            } else {
                echo "Invalid file type for $fileName. Only JPG, JPEG, PNG, and GIF are allowed.<br>";
            }
        }
    }
    
     // Only output the success message and updated image list
    echo "success";
    exit;
}

// Handle image deletion
if (isset($_POST['deleteImage'])) {
    $imageName = $_POST['deleteImage'];
    $imagePath = $uploadDir . $imageName;

    if (file_exists($imagePath)) {
        if (unlink($imagePath)) {
            echo "Image '$imageName' deleted successfully.";
        } else {
            echo "Error deleting image '$imageName'.";
        }
    } else {
        echo "Image '$imageName' not found.";
    }
    exit; // Stop further execution after deleting
}

// Generate HTML for ALL images in the uploads folder
$images = glob($uploadDir . "*.{jpg,jpeg,png,gif}", GLOB_BRACE);
foreach ($images as $image) {
    $imageName = basename($image);
    $allImagesHTML .= "<div class='image-wrapper'>";
    $allImagesHTML .= "<img src='$image' loading='lazy' alt='$imageName'>";
    $allImagesHTML .= "<button class='delete-btn' onclick='deleteImage(\"$imageName\")'><i class='fas fa-trash'></i></button>";
    $allImagesHTML .= "<a href='$image' download='$imageName' class='download-btn'><i class='fas fa-download'></i></a>";
    $allImagesHTML .= "</div>";
}

//send image on request
if (isset($_GET['getImages'])) {
    echo $allImagesHTML;
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Image Uploader</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <style>
        /* CSS Styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 2rem;
        }

        /* Header styles */
        h1 {
            font-size: 2.5rem;
            color: #1a365d;
            margin-bottom: 1rem;
            font-weight: 700;
        }

        h2 {
            font-size: 1.8rem;
            color: #2d4a7e;
            margin: 2rem 0 1rem;
            font-weight: 600;
        }

        /* Container styles */
        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(226, 232, 240, 0.8);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

         .container:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Form elements */
         input[type="file"] {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            margin-bottom: 1rem;
            background-color: #fff;
        }

        input[type="file"]:focus {
            outline: none;
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
        }
          label {
            display: block;
            font-weight: 600;
            color: #2d4a7e;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        /* Button styles */
        button {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        button:hover {
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }
      
        #uploadButton {
            background-color: #48bb78;
            color: white;
            margin: 1rem 0 2rem;
        }

        #uploadButton:hover {
            background-color: #38a169;
        }

        /* Image Preview Area */
        #imagePreviewArea {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

         .image-container {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f7fafc;
            transition: transform 0.2s ease;
        }
        .image-container:hover {
             transform: translateY(-2px);
        }

         .image-container img {
            max-width: 150px;
            max-height: 150px;
            margin-bottom: 5px;
            border-radius: 4px;
        }

        .image-container p {
            font-size: 0.9rem;
            color: #4a5568;
            margin: 0;
            text-align: center;
        }

        /* Uploaded Images Area */
         #uploadedImages {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        #uploadedImages .image-wrapper {
            display: inline-block;
            position: relative;
            margin: 5px;
        }

        #uploadedImages img {
            max-width: 150px;
            max-height: 150px;
            border-radius: 8px;
            object-fit: cover;
            cursor: pointer;
        }

        .delete-btn, .download-btn {
            position: absolute;
            top: 5px;
            padding: 3px 8px;
            font-size: 12px;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease;
        }
        .delete-btn i, .download-btn i {
            margin: 0;
        }

        .delete-btn {
            right: 5px;
            background-color: #f56565;
            color: white;
            border: none;
        }

        .delete-btn:hover {
             background-color: #c53030;
        }

        .download-btn {
            left: 5px;
            background-color: #4299e1;
            color: white;
            border: none;
        }

          .download-btn:hover{
             background-color: #3182ce;
        }

        /* Messages */
        .upload-limit-msg, .file-size-msg {
            color: #e53e3e;
            display: none;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        
       /* Image Viewer Modal */
        #imageViewer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Prevent scrollbar on overlay */
         }

        #viewerContent {
              background-color: white;
             border-radius: 10px;
             max-width: 90%;
             max-height: 90%;
             position: relative;
             overflow: hidden;
        }

         #viewerImage {
            display: block;
            max-width: 100%;
            max-height: 80vh;
            margin: 0 auto;
            object-fit: contain;
             border-radius: 8px;
            
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 35px;
            color: #fff;
            cursor: pointer;
        }

        .close-btn:hover {
            color: #ccc;
        }

        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2em;
            cursor: pointer;
            color: #fff;
             background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 50%;
              transition:  0.2s ease;
        }
         .nav-btn:hover {
             background: rgba(0, 0, 0, 0.4);
        }

        .prev-btn {
            left: 20px;
        }

        .next-btn {
            right: 20px;
        }
       
        /* Responsive design */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .container {
                padding: 1.5rem;
            }

            h1 {
                font-size: 2rem;
            }
        
            #imagePreviewArea {
                justify-content: center;
            }
               #uploadedImages{
                 justify-content: center;
            }
            
         .nav-btn {
                font-size: 1.5em;
            }
        }

        /* Loading state for buttons */
        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .container {
            animation: fadeIn 0.3s ease-out;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f7fafc;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Image Uploader</h1>

        <input type="file" id="imageUpload" accept="image/*" multiple>
        <p class="upload-limit-msg">You have reached the maximum upload limit (<?php echo $maxUploadLimit; ?> images).</p>
        <p class="file-size-msg" style="display:none"> Image should not be larger than 300KB</p>

        <div id="imagePreviewArea"></div>

        <button id="uploadButton" disabled>Upload Images</button>

        <h2>Uploaded Images</h2>
        <div id="uploadedImages">
            <?php echo $allImagesHTML; ?>
        </div>
    </div>

     <!-- Image Viewer Modal -->
        <div id="imageViewer">
             <div id="viewerContent">
                <span class="close-btn">×</span>
               <img id="viewerImage" src="" alt="Image">
               <div class="nav-btn prev-btn"><i class="fas fa-chevron-left"></i></div>
               <div class="nav-btn next-btn"><i class="fas fa-chevron-right"></i></div>
            </div>
        </div>
        <iframe src="https://squoosh.app/"></iframe>

    <script>
        const imageUpload = document.getElementById('imageUpload');
        const imagePreviewArea = document.getElementById('imagePreviewArea');
        const uploadButton = document.getElementById('uploadButton');
        const uploadedImagesContainer = document.getElementById('uploadedImages');
        const uploadLimitMessage = document.querySelector('.upload-limit-msg');
        const fileSizeMessage = document.querySelector('.file-size-msg');
        const maxUploadLimit = <?php echo $maxUploadLimit; ?>;
        const maxFileSize = <?php echo $maxFileSize; ?>;

        let selectedImages = [];

        // Initial loading of images
        loadImages();
        
        imageUpload.addEventListener('change', handleImageSelection);
        uploadButton.addEventListener('click', uploadImages);

        function handleImageSelection(event) {
             const files = event.target.files;
            selectedImages = [];
            imagePreviewArea.innerHTML = '';
            uploadButton.disabled = true;
            fileSizeMessage.style.display = 'none';
            
            const currentImageCount = uploadedImagesContainer.querySelectorAll('img').length;
            if (currentImageCount + files.length > maxUploadLimit) {
                uploadLimitMessage.style.display = 'block';
                return; 
            } else {
                uploadLimitMessage.style.display = 'none';
            }

            for (let i = 0; i < files.length; i++) {
                const file = files[i];

                 if (file.size > maxFileSize) {
                     fileSizeMessage.style.display = 'block';
                     return;
                 }
                const reader = new FileReader();

                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const container = document.createElement('div');
                        container.classList.add('image-container');

                        const previewImg = document.createElement('img');
                        previewImg.src = img.src;
                        container.appendChild(previewImg);

                        
                        const statusText = document.createElement('p');
                        statusText.innerText = 'Ready to Upload';
                        container.appendChild(statusText);

                        imagePreviewArea.appendChild(container);

                        selectedImages.push({
                            name: file.name,
                            file: file
                        });
                        
                        if (selectedImages.length === files.length){
                            uploadButton.disabled = false;
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        function uploadImages() {
            const formData = new FormData();

            for (let i = 0; i < selectedImages.length; i++) {
                formData.append('images[]', selectedImages[i].file, selectedImages[i].name);
            }

            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                     console.error('Image upload failed:', response.status);
                    throw new Error('Image upload failed');
                }
            })
            .then(responseText => {
                if (responseText === "success") {
                    console.log('Images uploaded successfully!');
                     // Load images after successful upload
                   loadImages();
                } else {
                     console.error('Image upload failed:', responseText);
                }
            })
              .catch(error => {
                console.error('Error during upload:', error);
            })
            .finally(() => {
                // Clear the preview area and reset the upload button
                imagePreviewArea.innerHTML = '';
                uploadButton.disabled = true;

                // Reset the file input
                imageUpload.value = '';
            });
        }


         function loadImages() {
            fetch('?getImages=1') // Using query parameter to trigger image loading
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to load images');
                    }
                    return response.text();
                })
                .then(html => {
                    uploadedImagesContainer.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        function deleteImage(imageName) {
            if (confirm(`Are you sure you want to delete ${imageName}?`)) {
                const formData = new FormData();
                formData.append('deleteImage', imageName);

                fetch('', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (response.ok) {
                        console.log('Image deleted successfully!');
                        
                        const imageWrapper = uploadedImagesContainer.querySelector(`.image-wrapper:has(img[src*="${imageName}"])`);
                        if (imageWrapper) {
                            imageWrapper.remove();
                        }
                    } else {
                         console.error('Image deletion failed:', response.status);
                        throw new Error('Image deletion failed');
                    }
                })
                .catch(error => {
                    console.error('Error during image deletion:', error);
                    
                });
            }
        }
        
          // Image Viewer Functions
        const imageViewer = document.getElementById('imageViewer');
        const viewerImage = document.getElementById('viewerImage');
        const closeBtn = document.querySelector('.close-btn');
          const prevBtn = document.querySelector('.prev-btn');
         const nextBtn = document.querySelector('.next-btn');
        let currentImageIndex = 0;
        let allImages = [];

        function openImageViewer(imageSrc) {
              imageViewer.style.display = 'flex';
             allImages = Array.from(uploadedImagesContainer.querySelectorAll('img')).map(img => img.src);
              currentImageIndex = allImages.indexOf(imageSrc);
            updateViewerImage();
         }
           function updateViewerImage() {
                 if (currentImageIndex >=0 && currentImageIndex < allImages.length) {
                     viewerImage.src = allImages[currentImageIndex];
                 }

             }
         function closeImageViewer() {
               imageViewer.style.display = 'none';
             }

        function nextImage() {
             currentImageIndex = (currentImageIndex + 1) % allImages.length;
            updateViewerImage();
         }

         function prevImage() {
            currentImageIndex = (currentImageIndex - 1 + allImages.length) % allImages.length;
            updateViewerImage();
        }

        uploadedImagesContainer.addEventListener('click', (event) => {
            if (event.target.tagName === 'IMG') {
                 openImageViewer(event.target.src);
            }
        });

        closeBtn.addEventListener('click', closeImageViewer);
        prevBtn.addEventListener('click', prevImage);
        nextBtn.addEventListener('click', nextImage);
        
        
        // Close the viewer if clicked outside the image
          imageViewer.addEventListener('click', (event) => {
            if (event.target === imageViewer) {
                closeImageViewer();
            }
        });
    </script>
</body>
</html>