{% extends 'admin/base.html' %}
{% block title %}{{ t('media.upload_title') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>📤 {{ t('media.upload_title') }}</h2>
    <p>{{ t('media.upload_subtitle') }}</p>
</div>

<form method="POST" enctype="multipart/form-data" id="uploadForm">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="return_to" value="{{ admin_back_value() }}">
    <div class="settings-section">

        <div class="alert alert-warning mb-4">
            ⚠️ <strong>{{ t('media.accessibility_notice') }}</strong> — {{ t('media.accessibility_notice_text') }}
        </div>

        <div class="upload-zone" id="dropZone" onclick="document.getElementById('file').click()">
            <input type="file" id="file" name="file" accept="image/*" required>
            <div class="upload-zone-icon">📤</div>
            <div class="upload-zone-label">{{ t('media.favicon_drop_label') }}</div>
            <div class="upload-zone-hint">{{ t('media.file_help') }}</div>
        </div>

        <div class="upload-preview" id="uploadPreview">
            <img id="previewImg" src="" alt="{{ t('common.preview') }}">
            <div>
                <div class="upload-preview-name" id="previewName"></div>
                <div class="upload-preview-meta" id="previewMeta"></div>
            </div>
        </div>

        <div class="alert alert-info mb-4">
            ⚡ <strong>{{ t('media.optimization_notice') }}</strong> — {{ t('media.optimization_notice_text') }}
        </div>
        
        <div class="form-group">
            <label for="alt_text">{{ t('media.alt_text') }} <span class="text-error">*</span></label>
            <input type="text" id="alt_text" name="alt_text" required placeholder="{{ t('media.alt_text_placeholder') }}">
            <div class="help-text">{{ t('media.alt_text_help') }}</div>
        </div>
        
        <div class="form-group">
            <label for="title">{{ t('media.title_label') }}</label>
            <input type="text" id="title" name="title" placeholder="{{ t('media.title_placeholder') }}">
        </div>
        
        <div class="form-group">
            <label for="caption">{{ t('media.caption') }}</label>
            <textarea id="caption" name="caption" rows="2" placeholder="{{ t('media.caption_placeholder') }}"></textarea>
        </div>
        
        <div class="form-group">
            <label for="description">{{ t('media.description') }}</label>
            <textarea id="description" name="description" rows="3" placeholder="{{ t('media.description_placeholder') }}"></textarea>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="uploadBtn" disabled>📤 {{ t('media.upload_btn') }}</button>
            <a href="{{ admin_back_url('admin_media_library') }}" class="btn">{{ t('common.cancel') }}</a>
        </div>
    </div>
</form>

<script>
(function() {
    var dropZone = document.getElementById('dropZone');
    var fileInput = document.getElementById('file');
    var preview = document.getElementById('uploadPreview');
    var previewImg = document.getElementById('previewImg');
    var previewName = document.getElementById('previewName');
    var previewMeta = document.getElementById('previewMeta');
    var uploadBtn = document.getElementById('uploadBtn');

    ['dragenter', 'dragover'].forEach(function(evt) {
        dropZone.addEventListener(evt, function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
    });
    ['dragleave', 'drop'].forEach(function(evt) {
        dropZone.addEventListener(evt, function(e) { e.preventDefault(); dropZone.classList.remove('dragover'); });
    });
    dropZone.addEventListener('drop', function(e) {
        if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; showPreview(e.dataTransfer.files[0]); }
    });
    fileInput.addEventListener('change', function() {
        if (fileInput.files.length) showPreview(fileInput.files[0]);
    });

    function showPreview(file) {
        var url = URL.createObjectURL(file);
        previewImg.src = url;
        previewName.textContent = file.name;
        var sizeKB = (file.size / 1024).toFixed(1);
        var img = new Image();
        img.onload = function() { previewMeta.textContent = img.width + ' × ' + img.height + ' px · ' + sizeKB + ' {{ t("common.unit_kb") }}'; };
        img.src = url;
        previewMeta.textContent = sizeKB + ' {{ t("common.unit_kb") }}';
        preview.classList.add('visible');
        uploadBtn.disabled = false;
    }

    // Prevent double-submit: disable button + show progress
    document.getElementById('uploadForm').addEventListener('submit', function() {
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '⏳ {{ t("media.uploading") }}';
        uploadBtn.style.opacity = '0.7';
    });
})();
</script>
{% endblock %}