{% extends "base.html" %}

{% block title %}Upload Instructions - {{ app_name }}{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('main.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('sets.list_sets') }}">Sets</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('sets.view_set', set_id=set.id) }}">{{ set.set_number }}</a></li>
        <li class="breadcrumb-item active">Upload Instructions</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h3 class="mb-0">
                    <i class="bi bi-cloud-upload"></i> Upload Instructions
                </h3>
                <p class="mb-0 mt-2">{{ set.set_number }}: {{ set.set_name }}</p>
            </div>
            <div class="card-body">
                <!-- Set Info -->
                <div class="alert alert-info">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="alert-heading">{{ set.set_name }}</h5>
                            <p class="mb-0">
                                <strong>Set:</strong> {{ set.set_number }} | 
                                <strong>Theme:</strong> {{ set.theme }} | 
                                <strong>Year:</strong> {{ set.year_released }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <p class="mb-0">
                                <strong>Current Instructions:</strong><br>
                                {{ set.instructions.count() }} file(s)
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- Upload Form -->
                <form method="POST" action="{{ url_for('instructions.upload', set_id=set.id) }}" 
                      enctype="multipart/form-data" id="uploadForm">
                    
                    <div class="mb-4">
                        <label for="files" class="form-label">
                            <i class="bi bi-file-earmark-arrow-up"></i> Select Files
                        </label>
                        <input type="file" class="form-control" id="files" name="files[]" 
                               multiple accept=".pdf,.png,.jpg,.jpeg,.gif" required>
                        <div class="form-text">
                            Accepted formats: PDF, PNG, JPG, JPEG, GIF (Max 50MB per file)
                        </div>
                    </div>
                    
                    <!-- Drag and Drop Area -->
                    <div class="upload-area mb-4" id="dropZone">
                        <i class="bi bi-cloud-upload display-1 text-muted"></i>
                        <h4 class="mt-3">Drag & Drop Files Here</h4>
                        <p class="text-muted">or click to browse</p>
                        <p class="small text-muted mb-0">
                            <i class="bi bi-info-circle"></i> You can upload multiple files at once
                        </p>
                    </div>
                    
                    <!-- File Preview -->
                    <div id="filePreview" class="mb-4" style="display: none;">
                        <h6>Selected Files:</h6>
                        <ul id="fileList" class="list-group"></ul>
                    </div>
                    
                    <!-- Upload Instructions -->
                    <div class="alert alert-light">
                        <h6><i class="bi bi-info-circle"></i> Upload Tips:</h6>
                        <ul class="mb-0">
                            <li><strong>PDFs:</strong> Upload complete instruction manuals as single PDF files</li>
                            <li><strong>Images:</strong> Upload individual pages as separate images (they will be numbered automatically)</li>
                            <li><strong>Quality:</strong> Higher resolution images provide better viewing experience</li>
                            <li><strong>Organization:</strong> Files are automatically organized by set number</li>
                        </ul>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('sets.view_set', set_id=set.id) }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-success btn-lg" id="uploadBtn">
                            <i class="bi bi-cloud-upload"></i> Upload Files
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Current Instructions Summary -->
        {% if set.instructions.count() > 0 %}
        <div class="card shadow mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-file-earmark-text"></i> Current Instructions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>PDFs: {{ set.pdf_instructions|length }}</h6>
                        {% if set.pdf_instructions %}
                            <ul class="list-unstyled">
                                {% for pdf in set.pdf_instructions %}
                                    <li><i class="bi bi-file-pdf text-danger"></i> {{ pdf.file_name }}</li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <p class="text-muted">No PDFs uploaded yet</p>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <h6>Images: {{ set.image_instructions|length }}</h6>
                        {% if set.image_instructions %}
                            <p class="text-muted">{{ set.image_instructions|length }} page(s)</p>
                        {% else %}
                            <p class="text-muted">No images uploaded yet</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    const dropZone = $('#dropZone');
    const fileInput = $('#files');
    const filePreview = $('#filePreview');
    const fileList = $('#fileList');
    
    // Click on drop zone to trigger file input
    dropZone.on('click', function() {
        fileInput.click();
    });
    
    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.on(eventName, function(e) {
            e.preventDefault();
            e.stopPropagation();
        });
    });
    
    // Highlight drop zone when dragging over
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.on(eventName, function() {
            dropZone.addClass('dragover');
        });
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.on(eventName, function() {
            dropZone.removeClass('dragover');
        });
    });
    
    // Handle dropped files
    dropZone.on('drop', function(e) {
        const files = e.originalEvent.dataTransfer.files;
        fileInput[0].files = files;
        displayFiles(files);
    });
    
    // Handle selected files
    fileInput.on('change', function() {
        displayFiles(this.files);
    });
    
    // Display selected files
    function displayFiles(files) {
        fileList.empty();
        
        if (files.length === 0) {
            filePreview.hide();
            return;
        }
        
        filePreview.show();
        
        Array.from(files).forEach(file => {
            const fileSize = (file.size / 1024 / 1024).toFixed(2);
            const fileType = file.type.includes('pdf') ? 'file-pdf' : 'file-image';
            const fileColor = file.type.includes('pdf') ? 'text-danger' : 'text-primary';
            
            const listItem = $(`
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <i class="bi bi-${fileType} ${fileColor}"></i>
                        <strong>${file.name}</strong>
                    </div>
                    <span class="badge bg-secondary">${fileSize} MB</span>
                </li>
            `);
            
            fileList.append(listItem);
        });
    }
    
    // Upload progress
    $('#uploadForm').on('submit', function() {
        $('#uploadBtn').html('<span class="spinner-border spinner-border-sm" role="status"></span> Uploading...');
        $('#uploadBtn').prop('disabled', true);
    });
});
</script>
{% endblock %}

{% block extra_css %}
<style>
.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 0.5rem;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.upload-area:hover {
    border-color: #198754;
    background-color: #f8f9fa;
}

.upload-area.dragover {
    border-color: #198754;
    background-color: #d1e7dd;
    border-style: solid;
}
</style>
{% endblock %}