@extends('layouts.app')

@section('content')
<!-- Tool Header -->
<section class="tool-header py-5 bg-gradient-primary">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-3">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white-50">{{ __('pdftools.nav.home') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('tools') }}" class="text-white-50">{{ __('pdftools.nav.tools') }}</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{ __('pdftools.tools.compress.name') }}</li>
                    </ol>
                </nav>
                <h1 class="display-5 fw-bold text-white mb-3">
                    <i class="fas fa-compress-arrows-alt me-3"></i>{{ __('pdftools.tools.compress.name') }}
                </h1>
                <p class="lead text-white-50 mb-0">{{ __('pdftools.tools.compress.description') }}</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <div class="tool-stats text-white">
                    <div class="d-inline-block text-center me-4">
                        <div class="fw-bold fs-4">100MB</div>
                        <div class="small text-white-50">{{ __('pdftools.tool_header.max_size') }}</div>
                    </div>
                    <div class="d-inline-block text-center">
                        <div class="fw-bold fs-4">{{ __('pdftools.tool_header.free') }}</div>
                        <div class="small text-white-50">{{ __('pdftools.tool_header.price') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Tool Content -->
<section class="tool-content py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- Upload Area -->
                <div id="uploadArea" class="upload-area card border-2 border-dashed shadow-sm">
                    <div class="card-body p-5 text-center">
                        <div class="upload-icon mb-4">
                            <i class="fas fa-cloud-upload-alt fa-5x text-primary"></i>
                        </div>
                        <h4 class="mb-3">{{ __('pdftools.upload.title') }}</h4>
                        <p class="text-muted mb-4">{{ __('pdftools.upload.subtitle') }}</p>
                        <button id="selectFileBtn" class="btn btn-primary btn-lg">
                            <i class="fas fa-plus me-2"></i>{{ __('pdftools.upload.select_file') }}
                        </button>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;">
                        <p class="text-muted small mt-3">{{ __('pdftools.upload.max_size', ['size' => '100MB']) }}</p>
                    </div>
                </div>
                
                <!-- File Info (Hidden initially) -->
                <div id="fileInfo" class="card shadow-sm" style="display: none;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center">
                            <div class="file-icon flex-shrink-0">
                                <i class="fas fa-file-pdf fa-3x text-danger"></i>
                            </div>
                            <div class="file-details ms-3 flex-grow-1">
                                <h5 id="fileName" class="mb-1"></h5>
                                <p class="text-muted mb-0">
                                    <span id="fileSize"></span>
                                    <span class="mx-2">|</span>
                                    <span id="pageCount"></span> {{ __('pdftools.upload.pages') }}
                                </p>
                            </div>
                            <button id="removeFileBtn" class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Compression Options (Hidden initially) -->
                <div id="compressionOptions" class="card shadow-sm mt-4" style="display: none;">
                    <div class="card-header bg-white">
                        <h5 class="mb-0"><i class="fas fa-cog me-2"></i>{{ __('pdftools.compress.options_title') }}</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-4">
                            <label class="form-label fw-bold">{{ __('pdftools.compress.level') }}</label>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="form-check compression-option">
                                        <input class="form-check-input" type="radio" name="compressionLevel" id="levelLow" value="low">
                                        <label class="form-check-label w-100" for="levelLow">
                                            <div class="card border h-100">
                                                <div class="card-body text-center p-3">
                                                    <i class="fas fa-image fa-2x text-info mb-2"></i>
                                                    <h6 class="mb-1">{{ __('pdftools.compress.level_low') }}</h6>
                                                    <small class="text-muted">{{ __('pdftools.compress.level_low_desc') }}</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check compression-option">
                                        <input class="form-check-input" type="radio" name="compressionLevel" id="levelMedium" value="medium" checked>
                                        <label class="form-check-label w-100" for="levelMedium">
                                            <div class="card border border-primary h-100">
                                                <div class="card-body text-center p-3">
                                                    <i class="fas fa-balance-scale fa-2x text-primary mb-2"></i>
                                                    <h6 class="mb-1">{{ __('pdftools.compress.level_medium') }}</h6>
                                                    <small class="text-muted">{{ __('pdftools.compress.level_medium_desc') }}</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check compression-option">
                                        <input class="form-check-input" type="radio" name="compressionLevel" id="levelHigh" value="high">
                                        <label class="form-check-label w-100" for="levelHigh">
                                            <div class="card border h-100">
                                                <div class="card-body text-center p-3">
                                                    <i class="fas fa-compress fa-2x text-success mb-2"></i>
                                                    <h6 class="mb-1">{{ __('pdftools.compress.level_high') }}</h6>
                                                    <small class="text-muted">{{ __('pdftools.compress.level_high_desc') }}</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check compression-option">
                                        <input class="form-check-input" type="radio" name="compressionLevel" id="levelCustom" value="custom">
                                        <label class="form-check-label w-100" for="levelCustom">
                                            <div class="card border h-100">
                                                <div class="card-body text-center p-3">
                                                    <i class="fas fa-sliders-h fa-2x text-secondary mb-2"></i>
                                                    <h6 class="mb-1">{{ __('pdftools.compress.level_custom') }}</h6>
                                                    <small class="text-muted">{{ __('pdftools.compress.level_custom_desc') }}</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Custom Options -->
                        <div id="customOptions" style="display: none;">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="imageQuality" class="form-label">{{ __('pdftools.compress.image_quality') }}</label>
                                    <input type="range" class="form-range" id="imageQuality" min="1" max="100" value="75">
                                    <div class="d-flex justify-content-between">
                                        <small class="text-muted">{{ __('pdftools.compress.low') }}</small>
                                        <small class="text-primary fw-bold" id="qualityValue">75%</small>
                                        <small class="text-muted">{{ __('pdftools.compress.high') }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="dpi" class="form-label">{{ __('pdftools.compress.dpi') }}</label>
                                    <select class="form-select" id="dpi">
                                        <option value="72">72 DPI</option>
                                        <option value="150" selected>150 DPI</option>
                                        <option value="200">200 DPI</option>
                                        <option value="300">300 DPI</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <button id="compressBtn" class="btn btn-primary btn-lg w-100">
                            <i class="fas fa-compress-arrows-alt me-2"></i>{{ __('pdftools.compress.button') }}
                        </button>
                    </div>
                </div>
                
                <!-- Processing Status (Hidden initially) -->
                <div id="processingStatus" class="card shadow-sm mt-4" style="display: none;">
                    <div class="card-body p-5 text-center">
                        <div class="processing-animation mb-4">
                            <div class="spinner-border text-primary" style="width: 4rem; height: 4rem;" role="status">
                                <span class="visually-hidden">{{ __('pdftools.processing.loading') }}</span>
                            </div>
                        </div>
                        <h4>{{ __('pdftools.processing.title') }}</h4>
                        <p class="text-muted">{{ __('pdftools.processing.please_wait') }}</p>
                        <div class="progress mt-3">
                            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Result (Hidden initially) -->
                <div id="resultArea" class="card shadow-sm mt-4" style="display: none;">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <div class="success-icon mb-3">
                                <i class="fas fa-check-circle fa-5x text-success"></i>
                            </div>
                            <h4>{{ __('pdftools.result.success') }}</h4>
                            <p class="text-muted">{{ __('pdftools.result.ready') }}</p>
                        </div>
                        
                        <div class="compression-stats row text-center mb-4">
                            <div class="col-4">
                                <div class="stat-item">
                                    <div id="originalSize" class="fw-bold text-muted"></div>
                                    <small class="text-muted">{{ __('pdftools.result.original') }}</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-item">
                                    <div id="compressedSize" class="fw-bold text-primary"></div>
                                    <small class="text-muted">{{ __('pdftools.result.compressed') }}</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-item">
                                    <div id="compressionRatio" class="fw-bold text-success"></div>
                                    <small class="text-muted">{{ __('pdftools.result.saved') }}</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <a id="downloadBtn" href="#" class="btn btn-success btn-lg">
                                <i class="fas fa-download me-2"></i>{{ __('pdftools.result.download') }}
                            </a>
                            <button id="compressAnotherBtn" class="btn btn-outline-primary">
                                <i class="fas fa-redo me-2"></i>{{ __('pdftools.result.compress_another') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Instructions -->
        <div class="row mt-5">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow-sm">
                    <div class="card-header bg-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2 text-primary"></i>{{ __('pdftools.instructions.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 text-center mb-3 mb-md-0">
                                <div class="step-icon bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fas fa-upload fa-2x"></i>
                                </div>
                                <h6>{{ __('pdftools.instructions.step1.title') }}</h6>
                                <p class="text-muted small">{{ __('pdftools.instructions.step1.description') }}</p>
                            </div>
                            <div class="col-md-4 text-center mb-3 mb-md-0">
                                <div class="step-icon bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fas fa-cog fa-2x"></i>
                                </div>
                                <h6>{{ __('pdftools.instructions.step2.title') }}</h6>
                                <p class="text-muted small">{{ __('pdftools.instructions.step2.description') }}</p>
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="step-icon bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                    <i class="fas fa-download fa-2x"></i>
                                </div>
                                <h6>{{ __('pdftools.instructions.step3.title') }}</h6>
                                <p class="text-muted small">{{ __('pdftools.instructions.step3.description') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectFileBtn = document.getElementById('selectFileBtn');
    const fileInput = document.getElementById('fileInput');
    const uploadArea = document.getElementById('uploadArea');
    const fileInfo = document.getElementById('fileInfo');
    const compressionOptions = document.getElementById('compressionOptions');
    const processingStatus = document.getElementById('processingStatus');
    const resultArea = document.getElementById('resultArea');
    const removeFileBtn = document.getElementById('removeFileBtn');
    const compressBtn = document.getElementById('compressBtn');
    const compressAnotherBtn = document.getElementById('compressAnotherBtn');
    const customOptions = document.getElementById('customOptions');
    const imageQuality = document.getElementById('imageQuality');
    const qualityValue = document.getElementById('qualityValue');
    
    let currentJobId = null;
    
    // File selection
    selectFileBtn.addEventListener('click', () => fileInput.click());
    
    fileInput.addEventListener('change', handleFileSelect);
    
    // Drag and drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('border-primary');
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('border-primary');
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('border-primary');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect();
        }
    });
    
    function handleFileSelect() {
        const file = fileInput.files[0];
        if (!file) return;
        
        if (file.type !== 'application/pdf') {
            alert('{{ __("pdftools.upload.error_pdf_only") }}');
            return;
        }
        
        if (file.size > 100 * 1024 * 1024) {
            alert('{{ __("pdftools.upload.error_too_large") }}');
            return;
        }
        
        // Upload file
        const formData = new FormData();
        formData.append('file', file);
        formData.append('_token', '{{ csrf_token() }}');
        
        fetch('{{ route("compress.upload") }}', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                currentJobId = data.job_id;
                document.getElementById('fileName').textContent = data.filename;
                document.getElementById('fileSize').textContent = data.file_size;
                document.getElementById('pageCount').textContent = data.page_count || '-';
                
                uploadArea.style.display = 'none';
                fileInfo.style.display = 'block';
                compressionOptions.style.display = 'block';
            } else {
                alert(data.message || '{{ __("pdftools.upload.error_generic") }}');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('{{ __("pdftools.upload.error_generic") }}');
        });
    }
    
    // Remove file
    removeFileBtn.addEventListener('click', () => {
        if (currentJobId) {
            fetch('{{ route("ajax.delete-file") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ job_id: currentJobId })
            });
        }
        
        fileInput.value = '';
        currentJobId = null;
        uploadArea.style.display = 'block';
        fileInfo.style.display = 'none';
        compressionOptions.style.display = 'none';
        resultArea.style.display = 'none';
    });
    
    // Compression level change
    document.querySelectorAll('input[name="compressionLevel"]').forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'custom') {
                customOptions.style.display = 'block';
            } else {
                customOptions.style.display = 'none';
            }
        });
    });
    
    // Quality slider
    imageQuality.addEventListener('input', function() {
        qualityValue.textContent = this.value + '%';
    });
    
    // Compress button
    compressBtn.addEventListener('click', () => {
        if (!currentJobId) return;
        
        const compressionLevel = document.querySelector('input[name="compressionLevel"]:checked').value;
        const quality = document.getElementById('imageQuality').value;
        const dpi = document.getElementById('dpi').value;
        
        compressionOptions.style.display = 'none';
        processingStatus.style.display = 'block';
        
        // Animate progress bar
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const progressInterval = setInterval(() => {
            progress += Math.random() * 15;
            if (progress > 90) progress = 90;
            progressBar.style.width = progress + '%';
        }, 500);
        
        fetch('{{ route("compress.process") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                job_id: currentJobId,
                compression_level: compressionLevel,
                image_quality: quality,
                dpi: dpi
            })
        })
        .then(response => response.json())
        .then(data => {
            clearInterval(progressInterval);
            progressBar.style.width = '100%';
            
            setTimeout(() => {
                processingStatus.style.display = 'none';
                
                if (data.success) {
                    document.getElementById('originalSize').textContent = data.original_size;
                    document.getElementById('compressedSize').textContent = data.compressed_size;
                    document.getElementById('compressionRatio').textContent = data.compression_ratio;
                    document.getElementById('downloadBtn').href = data.download_url;
                    resultArea.style.display = 'block';
                } else {
                    alert(data.message || '{{ __("pdftools.processing.error") }}');
                    compressionOptions.style.display = 'block';
                }
            }, 500);
        })
        .catch(error => {
            clearInterval(progressInterval);
            console.error('Error:', error);
            alert('{{ __("pdftools.processing.error") }}');
            processingStatus.style.display = 'none';
            compressionOptions.style.display = 'block';
        });
    });
    
    // Compress another button
    compressAnotherBtn.addEventListener('click', () => {
        if (currentJobId) {
            fetch('{{ route("ajax.delete-file") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ job_id: currentJobId })
            });
        }
        
        fileInput.value = '';
        currentJobId = null;
        uploadArea.style.display = 'block';
        fileInfo.style.display = 'none';
        compressionOptions.style.display = 'none';
        resultArea.style.display = 'none';
    });
});
</script>
@endpush

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.upload-area {
    border-style: dashed !important;
    border-color: #dee2e6;
    transition: all 0.3s ease;
}

.upload-area:hover,
.upload-area.border-primary {
    border-color: #667eea !important;
    background-color: rgba(102, 126, 234, 0.02);
}

.compression-option .form-check-input {
    display: none;
}

.compression-option .form-check-label .card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.compression-option .form-check-input:checked + .form-check-label .card {
    border-color: #667eea !important;
    background-color: rgba(102, 126, 234, 0.05);
}

.compression-option .form-check-label:hover .card {
    border-color: #667eea;
}

.processing-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.success-icon {
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
</style>
@endpush