<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compressor - GreateTools</title>
    <meta name="description" content="Compress your images while maintaining quality. Free online image compression tool with adjustable settings.">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Backup Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/tools.css">
    <link rel="icon" type="image/png" href="../public/favicon.png">
    <style>
        .upload-container {
            margin: 2rem 0;
        }

        .upload-area {
            border: 2px dashed #6366f1;
            border-radius: 16px;
            padding: 3rem 2rem;
            text-align: center;
            background: #f8fafc;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .upload-area:hover {
            background: #f1f5f9;
            border-color: #4f46e5;
            transform: translateY(-2px);
        }

        .upload-area.highlight {
            background: #eef2ff;
            border-color: #4f46e5;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

        .upload-content {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 1rem;
        }

        .upload-content i {
            color: #ffff;
            font-size: 2.5rem;
        }

        .upload-content p {
            color: #64748b;
            font-size: 1.1rem;
            margin: 0;
        }

        .upload-content .btn-primary {
            background: #6366f1;
            border: none;
            padding: 0.5rem 1.3rem;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .upload-content .btn-primary:hover {
            background: #4f46e5;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
        }

        .upload-content .btn-primary:active {
            transform: translateY(0);
        }
        

        @media (max-width: 768px) {
            .upload-area {
                padding: 2rem 1rem;
            }

            .upload-content i {
                font-size: 2rem;
            }

            .upload-content p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Header will be loaded dynamically -->
    <div id="header-placeholder"></div>

    <div class="container py-4">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h1 class="h3 mb-3">Image Compressor</h1>
                        <p class="text-muted mb-4">Compress your images while maintaining quality.</p>
                        
                        <div class="upload-container mb-4">
                            <div class="upload-area" id="dropZone">
                                <input type="file" id="fileInput" accept="image/*" style="display: none;">
                                <div class="upload-content">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <p>Drag & Drop your image here or</p>
                                    <button class="btn btn-primary d-flex align-items-center gap-2" onclick="document.getElementById('fileInput').click()">
                                        <i class="fas fa-image"></i>
                                        <span>Choose File</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="preview-container" style="display: none;">
                            <div class="row g-4 mb-4">
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <h3 class="h5 mb-3">Original Image</h3>
                                            <img id="originalImage" src="" alt="Original" class="img-fluid mb-3" style="display: none; max-height: 300px;">
                                            <div class="image-info">
                                                <p class="mb-0">Size: <span id="originalSize" class="fw-bold">-</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <h3 class="h5 mb-3">Compressed Image</h3>
                                            <img id="compressedImage" src="" alt="Compressed" class="img-fluid mb-3" style="display: none; max-height: 300px;">
                                            <div class="image-info">
                                                <p class="mb-0">Size: <span id="compressedSize" class="fw-bold">-</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="controls card">
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="quality" class="form-label">Quality: <span id="qualityValue">80%</span></label>
                                        <input type="range" class="form-range" id="quality" min="0" max="100" value="80">
                                    </div>
                                    <div class="mb-3">
                                        <label for="maxWidth" class="form-label">Max Width (px)</label>
                                        <input type="number" class="form-control" id="maxWidth" value="1920" min="100" max="4000">
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button id="compressBtn" class="btn btn-primary">Compress Image</button>
                                        <button id="downloadBtn" class="btn btn-success" style="display: none;">Download Result</button>
                                        <button id="resetBtn" class="btn btn-secondary">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar -->
            <div class="col-lg-4">
                <!-- Ad Space -->
                <div class="card shadow-sm mb-4">
                    <div class="card-body text-center">
                        <p class="mb-0">Advertisement Space</p>
                    </div>
                </div>

                <!-- Related Tools -->
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3 class="h5 mb-3">Related Tools</h3>
                        <div class="list-group list-group-flush">
                            <a href="image-resizer.html" class="list-group-item list-group-item-action d-flex align-items-center">
                                <i class="fas fa-expand me-2"></i>
                                Image Resizer
                            </a>
                            <a href="image-to-png.html" class="list-group-item list-group-item-action d-flex align-items-center">
                                <i class="fas fa-file-image me-2"></i>
                                Image to PNG
                            </a>
                            <a href="Image to JPG Converter.html" class="list-group-item list-group-item-action d-flex align-items-center">
                                <i class="fas fa-file-image me-2"></i>
                                Image to JPG
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer will be loaded dynamically -->
    <div id="footer-placeholder"></div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Load header
            fetch('../components/header.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('header-placeholder').innerHTML = data;
                    // Initialize Bootstrap dropdowns after loading
                    var dropdowns = document.querySelectorAll('.dropdown-toggle');
                    dropdowns.forEach(dropdown => {
                        new bootstrap.Dropdown(dropdown);
                    });
                });

            // Load footer
            fetch('../components/footer.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('footer-placeholder').innerHTML = data;
                });

            // Image compression functionality
            const dropZone = $('#dropZone');
            const fileInput = $('#fileInput');
            const previewContainer = $('.preview-container');
            const previewImage = $('#previewImage');
            const compressBtn = $('#compressBtn');
            const downloadBtn = $('#downloadBtn');
            const resetBtn = $('#resetBtn');
            const resultContainer = $('.result-container');
            const resultImage = $('#resultImage');
            const qualitySlider = $('#quality');
            const qualityValue = $('#qualityValue');
            const maxWidth = $('#maxWidth');
            let originalFile = null;

            // Update quality value display
            qualitySlider.on('input', function() {
                qualityValue.text($(this).val() + '%');
            });

            // Prevent default drag behaviors
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone[0].addEventListener(eventName, preventDefaults, false);
                document.body.addEventListener(eventName, preventDefaults, false);
            });

            // Highlight drop zone when item is dragged over it
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone[0].addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropZone[0].addEventListener(eventName, unhighlight, false);
            });

            // Handle dropped files
            dropZone[0].addEventListener('drop', handleDrop, false);
            fileInput.on('change', handleFileSelect);

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            function highlight(e) {
                dropZone.addClass('highlight');
            }

            function unhighlight(e) {
                dropZone.removeClass('highlight');
            }

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }

            function handleFileSelect(e) {
                const files = e.target.files;
                handleFiles(files);
            }

            function handleFiles(files) {
                if (files.length > 0) {
                    const file = files[0];
                    if (file.type.startsWith('image/')) {
                        originalFile = file;
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Display original image
                            const originalImage = document.getElementById('originalImage');
                            originalImage.src = e.target.result;
                            originalImage.style.display = 'block';
                            
                            // Show original size
                            document.getElementById('originalSize').textContent = formatFileSize(file.size);
                            
                            // Show preview container
                            previewContainer.show();
                            
                            // Reset compressed image
                            const compressedImage = document.getElementById('compressedImage');
                            compressedImage.src = '';
                            compressedImage.style.display = 'none';
                            document.getElementById('compressedSize').textContent = '-';
                            
                            // Enable controls
                            qualitySlider.prop('disabled', false);
                            maxWidth.prop('disabled', false);
                            compressBtn.prop('disabled', false);
                        };
                        reader.readAsDataURL(file);
                    } else {
                        alert('Please select an image file.');
                    }
                }
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            function calculateReduction(original, compressed) {
                return Math.round((1 - (compressed / original)) * 100);
            }

            compressBtn.on('click', function() {
                if (!originalFile) {
                    alert('Please select an image first.');
                    return;
                }

                // Show loading state
                compressBtn.prop('disabled', true).text('Compressing...');

                const quality = qualitySlider.val() / 100;
                const maxWidthValue = parseInt(maxWidth.val());

                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        // Create canvas
                        const canvas = document.createElement('canvas');
                        let width = img.width;
                        let height = img.height;

                        // Resize if needed
                        if (width > maxWidthValue) {
                            height = Math.round((height * maxWidthValue) / width);
                            width = maxWidthValue;
                        }

                        canvas.width = width;
                        canvas.height = height;

                        // Draw and compress
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, width, height);

                        // Convert to blob
                        canvas.toBlob(function(blob) {
                            // Update stats
                            const originalSize = originalFile.size;
                            const compressedSize = blob.size;
                            const reduction = calculateReduction(originalSize, compressedSize);

                            // Update size displays
                            document.getElementById('originalSize').textContent = formatFileSize(originalSize);
                            document.getElementById('compressedSize').textContent = formatFileSize(compressedSize);

                            // Display compressed image
                            const url = URL.createObjectURL(blob);
                            const compressedImage = document.getElementById('compressedImage');
                            compressedImage.src = url;
                            compressedImage.style.display = 'block';

                            // Show download button
                            downloadBtn.show();

                            // Enable download
                            downloadBtn.off('click').on('click', function() {
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = 'compressed-' + originalFile.name;
                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                            });

                            // Reset button state
                            compressBtn.prop('disabled', false).text('Compress Image');
                        }, 'image/jpeg', quality);
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(originalFile);
            });

            resetBtn.on('click', function() {
                fileInput.val('');
                previewImage.attr('src', '');
                previewContainer.hide();
                resultContainer.hide();
                downloadBtn.hide();
                originalFile = null;
                qualitySlider.val(80);
                qualityValue.text('80%');
                maxWidth.val(1920);
            });
        });
    </script>
</body>
</html>