{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>{{ title }}</h2>

    <form method="POST" class="mt-4">
        {{ form.hidden_tag() }}

        <div class="mb-3">
            <label class="form-label">{{ _('Site') }}</label>
            {{ form.sito(class="form-control", required=True) }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Country') }}</label>
            {{ form.nazione(class="form-control") }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Region') }}</label>
            {{ form.regione(class="form-control") }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Municipality') }}</label>
            {{ form.comune(class="form-control") }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Province') }}</label>
            {{ form.provincia(class="form-control") }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Site Definition') }}</label>
            {{ form.definizione_sito(class="form-control") }}
        </div>

        <div class="mb-3">
            <label class="form-label">{{ _('Description') }}</label>
            {{ form.descrizione(class="form-control", rows=5) }}
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ _('Save') }}</button>
            <a href="{{ url_for('sites_list') }}" class="btn btn-secondary">{{ _('Cancel') }}</a>
        </div>
    </form>

    <!-- Media Files Section (only in edit mode) -->
    {% if edit_mode and site_id %}
    <div class="card mt-4">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-photo-video"></i> {{ _('Media Files') }}
            </h5>
            <a href="{{ url_for('upload_media') }}?entity_type=site&entity_id={{ site_id }}"
               class="btn btn-sm btn-light">
                <i class="fas fa-upload"></i> {{ _('Upload Media') }}
            </a>
        </div>
        <div class="card-body">
            <!-- Drag and Drop Upload Zone -->
            <div id="dropZone" class="border border-2 border-dashed rounded p-4 text-center mb-4"
                 style="border-color: #6c757d !important; background-color: #f8f9fa; cursor: pointer;">
                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                <p class="mb-1"><strong>Drag & drop files here or click to browse</strong></p>
                <p class="small text-muted mb-0">Supports: images, documents, videos, audio, 3D models</p>
                <input type="file" id="fileInput" multiple class="d-none" accept="image/*,application/pdf,.doc,.docx,video/*,audio/*,.obj,.stl,.ply,.gltf,.glb,.dae,.fbx,.3ds">
            </div>

            <!-- Upload Progress -->
            <div id="uploadProgress" class="d-none mb-3">
                <div class="progress">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                         role="progressbar" style="width: 0%"></div>
                </div>
                <p id="uploadStatus" class="small text-muted mt-1 mb-0"></p>
            </div>

            {% if media_list %}
            <div class="row" id="mediaGrid">
                {% for media in media_list %}
                <div class="col-md-3 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            {% if media.media_type == 'image' and media.media_path %}
                                <a href="/{{ media.media_path }}"
                                   class="glightbox"
                                   data-gallery="site-gallery"
                                   data-title="{{ media.media_name }}"
                                   data-description="{{ media.description if media.description else '' }}">
                                    <img src="/{{ media.media_path }}"
                                         alt="{{ media.media_name }}"
                                         class="img-fluid mb-2"
                                         style="max-height: 150px; object-fit: cover; cursor: pointer;"
                                         onerror="this.parentElement.innerHTML='<i class=\'fas fa-image fa-3x text-muted mb-2\'></i>'">
                                </a>
                            {% elif media.media_type == 'document' %}
                                <a href="/{{ media.media_path }}"
                                   class="glightbox"
                                   data-type="iframe"
                                   data-gallery="site-docs"
                                   data-title="{{ media.media_name }}"
                                   data-description="{{ media.description if media.description else '' }}">
                                    <i class="fas fa-file-pdf fa-3x text-danger mb-2" style="cursor: pointer;"></i>
                                </a>
                            {% elif media.media_type == 'video' %}
                                <a href="/{{ media.media_path }}"
                                   class="glightbox"
                                   data-type="video"
                                   data-gallery="site-videos"
                                   data-title="{{ media.media_name }}"
                                   data-description="{{ media.description if media.description else '' }}">
                                    <i class="fas fa-video fa-3x text-primary mb-2" style="cursor: pointer;"></i>
                                </a>
                            {% elif media.media_type == 'audio' %}
                                <i class="fas fa-music fa-3x text-info mb-2"></i>
                            {% elif media.media_type == 'spreadsheet' %}
                                <a href="{{ url_for('view_spreadsheet', media_id=media.id_media) }}"
                                   target="_blank"
                                   title="Open in new window">
                                    <i class="fas fa-table fa-3x text-success mb-2" style="cursor: pointer;"></i>
                                </a>
                            {% elif media.media_type == 'docx' %}
                                <a href="{{ url_for('view_docx', media_id=media.id_media) }}"
                                   target="_blank"
                                   title="Open in new window">
                                    <i class="fas fa-file-word fa-3x text-primary mb-2" style="cursor: pointer;"></i>
                                </a>
                            {% elif media.media_type == '3d_model' %}
                                <a href="{{ url_for('view_3d_model', media_id=media.id_media) }}"
                                   target="_blank"
                                   title="Open in new window">
                                    <i class="fas fa-cube fa-3x text-success mb-2" style="cursor: pointer;"></i>
                                </a>
                            {% else %}
                                <i class="fas fa-file fa-3x text-secondary mb-2"></i>
                            {% endif %}
                            <p class="small mb-1"><strong>{{ media.media_name }}</strong></p>
                            {% if media.description %}
                            <p class="small text-muted mb-2">{{ media.description[:50] }}{% if media.description|length > 50 %}...{% endif %}</p>
                            {% endif %}
                            {% if media.is_primary %}
                            <span class="badge bg-success mb-2">{{ _('Primary') }}</span>
                            {% endif %}
                        </div>
                        <div class="card-footer text-center">
                            <div class="btn-group btn-group-sm">
                                <a href="/{{ media.media_path }}" target="_blank" class="btn btn-primary" title="{{ _('View') }}">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="/{{ media.media_path }}" download="{{ media.media_name }}" class="btn btn-success" title="{{ _('Download') }}">
                                    <i class="fas fa-download"></i>
                                </a>
                                <form method="POST"
                                      action="{{ url_for('delete_media', media_id=media.id_media) }}"
                                      style="display: inline;"
                                      onsubmit="return confirm('{{ _('Are you sure you want to delete this media file? This action cannot be undone.') }}');">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="btn btn-danger" title="{{ _('Delete') }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-info mb-0">
                <i class="fas fa-info-circle"></i>
                {{ _('No media files have been uploaded for this site yet.') }}
                <a href="{{ url_for('upload_media') }}?entity_type=site&entity_id={{ site_id }}">
                    {{ _('Upload your first file') }}
                </a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<script>
// Drag and Drop Upload for Site Media
{% if edit_mode and site_id %}
(function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const siteId = {{ site_id }};

    // Get CSRF token from meta tag or form
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                     document.querySelector('input[name="csrf_token"]')?.value;

    // Click to browse
    dropZone.addEventListener('click', () => fileInput.click());

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

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

    // Highlight drop zone when dragging over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.style.borderColor = '#007bff';
        dropZone.style.backgroundColor = '#e7f3ff';
    }

    function unhighlight(e) {
        dropZone.style.borderColor = '#6c757d';
        dropZone.style.backgroundColor = '#f8f9fa';
    }

    // Handle dropped files
    dropZone.addEventListener('drop', handleDrop, false);
    fileInput.addEventListener('change', handleFiles, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles({ target: { files: files } });
    }

    function handleFiles(e) {
        const files = e.target.files;
        if (files.length === 0) return;

        uploadFiles(files);
    }

    function uploadFiles(files) {
        const formData = new FormData();

        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }

        formData.append('entity_type', 'site');
        formData.append('entity_id', siteId);

        // Show progress
        uploadProgress.classList.remove('d-none');
        progressBar.style.width = '0%';
        uploadStatus.textContent = `Uploading ${files.length} file(s)...`;

        // Upload via AJAX
        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', (e) => {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.style.width = percentComplete + '%';
            }
        });

        xhr.addEventListener('load', () => {
            if (xhr.status === 200) {
                progressBar.style.width = '100%';
                uploadStatus.textContent = 'Upload complete! Refreshing...';
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.add('bg-success');

                // Reload page after short delay
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                uploadStatus.textContent = 'Upload failed: ' + xhr.statusText;
                progressBar.classList.add('bg-danger');
            }
        });

        xhr.addEventListener('error', () => {
            uploadStatus.textContent = 'Upload error occurred';
            progressBar.classList.add('bg-danger');
        });

        xhr.open('POST', '/media/upload/ajax', true);

        // Add CSRF token header
        if (csrfToken) {
            xhr.setRequestHeader('X-CSRFToken', csrfToken);
        }

        xhr.send(formData);

        // Reset file input
        fileInput.value = '';
    }
})();
{% endif %}
</script>
{% endblock %}