{% extends "base.html" %}

{% block title %}Upload Media{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-upload"></i> Upload Media File</h2>
        <a href="{{ url_for('media_list') }}" class="btn btn-secondary">
            <i class="fas fa-list"></i> Go to Media List
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data" id="mediaUploadForm">
                {{ form.hidden_tag() }}

                <div class="mb-3">
                    <label class="form-label">Entity Type *</label>
                    {{ form.entity_type(class="form-select", id="entity_type", required=True) }}
                    <small class="text-muted">Select the record type to associate the file with</small>
                </div>

                <!-- Site Selection Fields -->
                <div id="site_fields" class="entity-fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Site *</label>
                        {{ form.site_id(class="form-select", required=False) }}
                    </div>
                </div>

                <!-- US Selection Fields -->
                <div id="us_fields" class="entity-fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Site *</label>
                        {{ form.us_site(class="form-select", required=False) }}
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Area</label>
                            {{ form.us_area(class="form-control", placeholder="E.g.: 1000") }}
                            <small class="text-muted">Optional</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">US Number *</label>
                            {{ form.us_number(class="form-control", placeholder="E.g.: 2001", required=False) }}
                        </div>
                    </div>
                </div>

                <!-- Inventory Selection Fields -->
                <div id="inv_fields" class="entity-fields" style="display: none;">
                    <div class="mb-3">
                        <label class="form-label">Site *</label>
                        {{ form.inv_site(class="form-select", required=False) }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Inventory Number *</label>
                        {{ form.inv_number(class="form-control", placeholder="E.g.: 001", required=False) }}
                    </div>
                </div>

                <hr class="my-4">

                <div class="mb-3">
                    <label class="form-label">File *</label>
                    {{ form.file(class="form-control", required=True) }}
                    <small class="text-muted">Supported formats: images (JPG, PNG, TIFF), documents (PDF, DOCX), videos (MP4, AVI), audio (MP3, WAV), 3D models (OBJ, STL, PLY, GLTF/GLB)</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description</label>
                    {{ form.description(class="form-control", rows=3, placeholder="Media file description...") }}
                </div>

                <div class="mb-3">
                    <label class="form-label">Author/Photographer</label>
                    {{ form.author(class="form-control", placeholder="Name of author or photographer") }}
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload"></i> Upload File
                    </button>
                    <a href="{{ url_for('media_list') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const entityTypeSelect = document.getElementById('entity_type');
    const entityFieldGroups = document.querySelectorAll('.entity-fields');

    function updateFieldVisibility() {
        const selectedType = entityTypeSelect.value;

        // Hide all entity field groups
        entityFieldGroups.forEach(group => {
            group.style.display = 'none';
        });

        // Show the relevant field group
        if (selectedType === 'site') {
            document.getElementById('site_fields').style.display = 'block';
        } else if (selectedType === 'us') {
            document.getElementById('us_fields').style.display = 'block';
        } else if (selectedType === 'inventario') {
            document.getElementById('inv_fields').style.display = 'block';
        }
    }

    // Update visibility when entity type changes
    entityTypeSelect.addEventListener('change', updateFieldVisibility);

    // Set initial state
    updateFieldVisibility();
});
</script>
{% endblock %}