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

{% block content %}
<div class="page-header">
    <h2>📤 {{ t('files.upload_title') }}</h2>
    <p>{{ t('files.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="upload-zone" id="dropZone" onclick="document.getElementById('file').click()">
            <input type="file" id="file" name="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.zip,.rar,.txt,.csv" required>
            <div class="upload-zone-icon">📁</div>
            <div class="upload-zone-label">{{ t('files.drop_label') }}</div>
            <div class="upload-zone-hint">{{ t('files.drop_hint') }}</div>
        </div>

        <div class="file-upload-preview" id="uploadPreview">
            <div class="preview-icon" id="previewIcon">📄</div>
            <div>
                <div class="upload-preview-name" id="previewName"></div>
                <div class="upload-preview-meta" id="previewMeta"></div>
            </div>
        </div>

        <div class="form-group">
            <label for="title">{{ t('files.title_field') }}</label>
            <input type="text" id="title" name="title" placeholder="{{ t('files.title_placeholder') }}">
        </div>
        
        <div class="form-group">
            <label for="description">{{ t('files.description_field') }}</label>
            <textarea id="description" name="description" rows="3" placeholder="{{ t('files.description_placeholder') }}"></textarea>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="uploadBtn" disabled>📤 {{ t('files.upload_btn') }}</button>
            <a href="{{ admin_back_url('admin_files_list') }}" 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 previewIcon = document.getElementById('previewIcon');
    var previewName = document.getElementById('previewName');
    var previewMeta = document.getElementById('previewMeta');
    var uploadBtn = document.getElementById('uploadBtn');

    var iconMap = {
        'pdf': '📕', 'doc': '📘', 'docx': '📘',
        'xls': '📗', 'xlsx': '📗', 'csv': '📊',
        'zip': '📦', 'rar': '📦', 'txt': '📄'
    };

    ['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 ext = file.name.split('.').pop().toLowerCase();
        previewIcon.textContent = iconMap[ext] || '📄';
        previewName.textContent = file.name;
        
        var size = file.size;
        if (size < 1024) {
            previewMeta.textContent = size + ' {{ t("common.unit_b") }}';
        } else if (size < 1024 * 1024) {
            previewMeta.textContent = (size / 1024).toFixed(1) + ' {{ t("common.unit_kb") }}';
        } else {
            previewMeta.textContent = (size / (1024 * 1024)).toFixed(1) + ' {{ t("common.unit_mb") }}';
        }
        
        preview.classList.add('visible');
        uploadBtn.disabled = false;
    }

    document.getElementById('uploadForm').addEventListener('submit', function() {
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '⏳ {{ t("files.uploading") }}';
        uploadBtn.style.opacity = '0.7';
    });
})();
</script>
{% endblock %}