{% extends 'base.html' %}

{% block title %}Upload Image | Admin | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin.images') }}">Images</a></li>
                <li class="breadcrumb-item active">Upload</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Upload Image</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <form action="{{ url_for('admin.upload_image') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <!-- Upload Area -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-upload me-2"></i>Select Image</h5>
                        </div>
                        <div class="card-body">
                            <div class="upload-area border-2 border-dashed rounded p-5 text-center" id="uploadArea">
                                <input type="file" name="image" id="imageInput" accept="image/*" class="d-none" required>
                                <div id="uploadPlaceholder">
                                    <i class="fas fa-cloud-upload-alt text-primary" style="font-size: 3rem;"></i>
                                    <p class="mt-3 mb-1">Drag and drop an image here, or</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('imageInput').click()">
                                        Browse Files
                                    </button>
                                    <p class="text-muted small mt-3 mb-0">
                                        Supported formats: JPEG, PNG, GIF, WebP, SVG<br>
                                        Maximum size: 16 MB
                                    </p>
                                </div>
                                <div id="imagePreview" class="d-none">
                                    <img src="" alt="Preview" class="img-fluid rounded" style="max-height: 300px;">
                                    <p class="mt-2 mb-0">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearImage()">
                                            <i class="fas fa-times me-1"></i>Remove
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Image Details -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Image Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required
                                           placeholder="e.g., Research Lab Photo">
                                </div>
                                <div class="col-md-4">
                                    <label for="category" class="form-label">Category</label>
                                    <select class="form-select" id="category" name="category">
                                        <option value="page">Page Image</option>
                                        <option value="article">Article Image</option>
                                        <option value="journal">Journal Cover</option>
                                        <option value="author">Author Photo</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="alt_text" class="form-label">Alt Text</label>
                                    <input type="text" class="form-control" id="alt_text" name="alt_text"
                                           placeholder="Describe the image for accessibility">
                                    <div class="form-text">Important for accessibility and SEO</div>
                                </div>
                                <div class="col-12">
                                    <label for="page" class="form-label">Associated Page</label>
                                    <select class="form-select" id="page" name="page">
                                        <option value="">None</option>
                                        <option value="home">Home</option>
                                        <option value="about">About</option>
                                        <option value="for_authors">For Authors</option>
                                        <option value="open_access">Open Access</option>
                                        <option value="contact">Contact</option>
                                    </select>
                                    <div class="form-text">Optionally associate this image with a specific page</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Submit -->
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary py-2 px-4" id="submitBtn">
                            <i class="fas fa-upload me-2"></i>Upload Image
                        </button>
                        <a href="{{ url_for('admin.images') }}" class="btn btn-outline-secondary py-2 px-4">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
            
            <div class="col-lg-4">
                <!-- Upload Tips -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>Tips</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                Use descriptive filenames
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                Optimize images before uploading
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                Always add alt text for accessibility
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                Use appropriate categories for organization
                            </li>
                            <li>
                                <i class="fas fa-check text-success me-2"></i>
                                WebP format is recommended for web use
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- Recommended Sizes -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-ruler me-2"></i>Recommended Sizes</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <td><strong>Hero Images</strong></td>
                                <td>1920 × 600 px</td>
                            </tr>
                            <tr>
                                <td><strong>Article Thumbnails</strong></td>
                                <td>800 × 450 px</td>
                            </tr>
                            <tr>
                                <td><strong>Journal Covers</strong></td>
                                <td>400 × 600 px</td>
                            </tr>
                            <tr>
                                <td><strong>Author Photos</strong></td>
                                <td>200 × 200 px</td>
                            </tr>
                            <tr>
                                <td><strong>Logo</strong></td>
                                <td>200 × 60 px</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_css %}
<style>
.upload-area {
    border-color: #dee2e6 !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-color) !important;
    background-color: rgba(37, 99, 235, 0.05);
}

.upload-area.dragover {
    transform: scale(1.02);
}
</style>
{% endblock %}

{% block extra_js %}
<script>
const uploadArea = document.getElementById('uploadArea');
const imageInput = document.getElementById('imageInput');
const uploadPlaceholder = document.getElementById('uploadPlaceholder');
const imagePreview = document.getElementById('imagePreview');
const titleInput = document.getElementById('title');

// Drag and drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, preventDefaults, false);
});

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

['dragenter', 'dragover'].forEach(eventName => {
    uploadArea.addEventListener(eventName, () => uploadArea.classList.add('dragover'), false);
});

['dragleave', 'drop'].forEach(eventName => {
    uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('dragover'), false);
});

uploadArea.addEventListener('drop', function(e) {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        imageInput.files = files;
        handleFileSelect(files[0]);
    }
});

// Click to upload
uploadArea.addEventListener('click', function(e) {
    if (e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
        imageInput.click();
    }
});

imageInput.addEventListener('change', function() {
    if (this.files.length > 0) {
        handleFileSelect(this.files[0]);
    }
});

function handleFileSelect(file) {
    // Validate file type
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
    if (!validTypes.includes(file.type)) {
        alert('Please select a valid image file (JPEG, PNG, GIF, WebP, or SVG)');
        return;
    }
    
    // Validate file size (16 MB)
    if (file.size > 16 * 1024 * 1024) {
        alert('File size must be less than 16 MB');
        return;
    }
    
    // Show preview
    const reader = new FileReader();
    reader.onload = function(e) {
        imagePreview.querySelector('img').src = e.target.result;
        uploadPlaceholder.classList.add('d-none');
        imagePreview.classList.remove('d-none');
    };
    reader.readAsDataURL(file);
    
    // Auto-fill title from filename if empty
    if (!titleInput.value) {
        const filename = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
        titleInput.value = filename.replace(/[-_]/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
    }
}

function clearImage() {
    imageInput.value = '';
    uploadPlaceholder.classList.remove('d-none');
    imagePreview.classList.add('d-none');
    imagePreview.querySelector('img').src = '';
}

// Form submission
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Uploading...';
});
</script>
{% endblock %}