{% extends "base.html" %}

{% block title %}Edit Set - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0">
                    <i class="bi bi-pencil"></i> Edit LEGO Set
                </h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('sets.edit_set', set_id=set.id) }}" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="set_number" class="form-label">
                                Set Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="set_number" 
                                   name="set_number" value="{{ set.set_number }}" disabled>
                            <div class="form-text">Set number cannot be changed</div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="year_released" class="form-label">
                                Year Released <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="year_released" 
                                   name="year_released" value="{{ set.year_released }}" 
                                   required min="1949" max="2030">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="set_name" class="form-label">
                            Set Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="set_name" 
                               name="set_name" value="{{ set.set_name }}" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="theme" class="form-label">
                                Theme <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="theme" 
                                   name="theme" value="{{ set.theme }}" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="piece_count" class="form-label">
                                Piece Count
                            </label>
                            <input type="number" class="form-control" id="piece_count" 
                                   name="piece_count" value="{{ set.piece_count or '' }}">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image_url" class="form-label">
                            Image URL (optional)
                        </label>
                        <input type="url" class="form-control" id="image_url" 
                               name="image_url" value="{{ set.image_url or '' }}">
                        <div class="form-text">Enter a URL to an image of the set</div>
                    </div>
                    
                    {% if set.image_url %}
                        <div class="mb-3">
                            <label class="form-label">Current URL Image Preview:</label>
                            <div class="border rounded p-3 bg-light">
                                <img src="{{ set.image_url }}" alt="{{ set.set_name }}" 
                                     style="max-height: 200px; max-width: 100%; object-fit: contain;">
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Cover Image Upload -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="bi bi-image"></i> Cover Picture</h6>
                        </div>
                        <div class="card-body">
                            {% if set.cover_image %}
                                <div class="mb-3">
                                    <label class="form-label">Current Uploaded Cover:</label>
                                    <div class="border rounded p-3 bg-light position-relative">
                                        <img src="{{ url_for('static', filename='uploads/' + set.cover_image.replace('\\', '/')) }}" 
                                             alt="{{ set.set_name }}" 
                                             style="max-height: 200px; max-width: 100%; object-fit: contain;">
                                    </div>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="remove_cover_image" name="remove_cover_image">
                                        <label class="form-check-label text-danger" for="remove_cover_image">
                                            <i class="bi bi-trash"></i> Remove uploaded cover image
                                        </label>
                                    </div>
                                </div>
                            {% endif %}
                            
                            <div class="mb-0">
                                <label for="cover_image" class="form-label">
                                    <i class="bi bi-upload"></i> {% if set.cover_image %}Replace Cover Picture{% else %}Upload Cover Picture{% endif %}
                                </label>
                                <input type="file" class="form-control" id="cover_image" 
                                       name="cover_image" accept="image/*">
                                <div class="form-text">
                                    Upload your own photo of the set or MOC (JPG, PNG, GIF). Max 800px, optimized automatically.
                                </div>
                                <div id="imagePreview" class="mt-2" style="display: none;">
                                    <label class="form-label small">New Image Preview:</label>
                                    <img id="previewImg" src="" alt="Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px; border: 2px solid #dee2e6;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- MOC (My Own Creation) Section -->
                    <div class="card mb-3 border-info">
                        <div class="card-header bg-info bg-opacity-10">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_moc" name="is_moc" 
                                       {% if set.is_moc %}checked{% endif %}>
                                <label class="form-check-label fw-bold" for="is_moc">
                                    <i class="bi bi-star-fill text-warning"></i> This is a MOC (My Own Creation)
                                </label>
                            </div>
                        </div>
                        <div class="card-body" id="mocFields" {% if not set.is_moc %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="moc_designer" class="form-label">
                                    Designer / Creator Name
                                </label>
                                <input type="text" class="form-control" id="moc_designer" 
                                       name="moc_designer" value="{{ set.moc_designer or '' }}" 
                                       placeholder="e.g., Your Name">
                                <div class="form-text">Who designed this MOC?</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="moc_description" class="form-label">
                                    Description / Notes
                                </label>
                                <textarea class="form-control" id="moc_description" name="moc_description" 
                                          rows="4" placeholder="Add details about your MOC...">{{ set.moc_description or '' }}</textarea>
                                <div class="form-text">Optional notes about your custom creation</div>
                            </div>
                        </div>
                    </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-primary btn-lg">
                            <i class="bi bi-check-circle"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        {% set image_pages = set.image_instructions %}
        {% if image_pages %}
            <div class="card shadow mt-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="bi bi-arrows-move"></i> Page Order</h5>
                </div>
                <div class="card-body">
                    <p>
                        This set has {{ image_pages|length }} image page{% if image_pages|length != 1 %}s{% endif %}.
                        Drag them into the right order, or sort the whole lot by
                        filename in one go.
                    </p>
                    <a href="{{ url_for('instructions.organise', set_id=set.id) }}"
                       class="btn btn-outline-primary">
                        <i class="bi bi-arrows-move"></i> Organise pages
                    </a>
                    <div class="form-text mt-2">
                        Opens a separate page, so save any changes above first.
                    </div>
                </div>
            </div>
        {% endif %}
        
        <div class="card shadow mt-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Set Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Added by:</strong> {{ set.added_by.username }}</p>
                <p><strong>Created:</strong> {{ set.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
                <p><strong>Last updated:</strong> {{ set.updated_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
                <p class="mb-0"><strong>Instructions:</strong> {{ set.instructions.count() }} file(s)</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Toggle MOC fields visibility
    $('#is_moc').change(function() {
        if ($(this).is(':checked')) {
            $('#mocFields').slideDown();
        } else {
            $('#mocFields').slideUp();
        }
    });
    
    // Image preview
    $('#cover_image').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImg').attr('src', e.target.result);
                $('#imagePreview').slideDown();
            };
            reader.readAsDataURL(file);
        } else {
            $('#imagePreview').slideUp();
        }
    });
});
</script>
{% endblock %}