{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrahead %}
{{ block.super }}
<style>
    .upload-form-container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
        color: #333;
    }
    .form-group input[type="text"],
    .form-group input[type="file"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    .form-group input[type="file"] {
        padding: 8px;
    }
    .help-text {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        color: #666;
    }
    .btn-container {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
    }
    .btn-primary {
        background-color: #2196F3;
        color: white;
    }
    .btn-primary:hover {
        background-color: #1976D2;
    }
    .btn-secondary {
        background-color: #757575;
        color: white;
    }
    .btn-secondary:hover {
        background-color: #616161;
    }
    .info-box {
        background-color: #E3F2FD;
        border-left: 4px solid #2196F3;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .info-box h4 {
        margin-top: 0;
        color: #1976D2;
    }
    .info-box ul {
        margin: 10px 0;
        padding-left: 20px;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; <a href="{% url 'admin:backup_databasebackup_changelist' %}">Veritabanı Yedekleri</a>
    &rsaquo; Yedek Yükle
</div>
{% endblock %}

{% block content %}
<div class="upload-form-container">
    <h1>📤 Yedek Dosyası Yükle</h1>

    <div class="info-box">
        <h4>ℹ️ Bilgilendirme</h4>
        <ul>
            <li>Sadece <strong>.sql</strong> uzantılı dosyalar yüklenebilir</li>
            <li>Maksimum dosya boyutu: <strong>500 MB</strong></li>
            <li>Yüklenen dosya <code>backups/</code> klasörüne kaydedilecektir</li>
            <li>Dosya otomatik olarak timestamp ile adlandırılacaktır</li>
        </ul>
    </div>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="form-group">
            <label for="backup_name">Yedek Adı:</label>
            <input type="text"
                   id="backup_name"
                   name="backup_name"
                   placeholder="Örn: Production Yedek - 2024-12-24"
                   maxlength="255">
            <span class="help-text">
                Boş bırakılırsa dosya adı kullanılacaktır
            </span>
        </div>

        <div class="form-group">
            <label for="backup_file">Yedek Dosyası: *</label>
            <input type="file"
                   id="backup_file"
                   name="backup_file"
                   accept=".sql"
                   required>
            <span class="help-text">
                PostgreSQL SQL dump dosyası (.sql)
            </span>
        </div>

        <div class="btn-container">
            <button type="submit" class="btn btn-primary">
                📤 Yükle
            </button>
            <a href="{% url 'admin:backup_databasebackup_changelist' %}" class="btn btn-secondary">
                ❌ İptal
            </a>
        </div>
    </form>
</div>

<script>
    // Dosya seçildiğinde boyut kontrolü
    document.getElementById('backup_file').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const maxSize = 500 * 1024 * 1024; // 500MB
            if (file.size > maxSize) {
                alert('Dosya çok büyük! Maksimum 500MB olabilir.');
                e.target.value = '';
                return;
            }

            // Dosya adını backup_name alanına otomatik doldur (eğer boşsa)
            const nameField = document.getElementById('backup_name');
            if (!nameField.value) {
                const fileName = file.name.replace('.sql', '');
                nameField.value = 'Yüklenen Yedek - ' + fileName;
            }

            // Dosya boyutunu göster
            const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
            console.log('Dosya boyutu: ' + sizeInMB + ' MB');
        }
    });
</script>
{% endblock %}