{% extends 'admin_panel/base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block page_title %}
    {% if form.instance.pk %}Edit Gallery{% else %}Tambah Gallery{% endif %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/tourism/tourism-form.css' %}">

{% endblock %}

{% block content %}
<div class="tf-form-wrapper">
    <div class="tf-container">
        <!-- Tombol Kembali -->
        <a href="{% url 'admin_panel:tourism_gallery_list' %}" class="td-back-btn" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #f3f4f6; color: #374151; border-radius: 6px; text-decoration: none; margin-bottom: 1.5rem; transition: all 0.2s ease;">
            <i class="fas fa-arrow-left"></i>
            Kembali ke Daftar Gallery
        </a>

        <div class="tf-header">
            <h1 class="tf-title">
                <i class="fas fa-images"></i>
                {% if form.instance.pk %}Edit Gallery{% else %}Tambah Gallery{% endif %}
            </h1>
            <p class="tf-subtitle">
                {% if form.instance.pk %}
                    Perbarui gambar gallery
                {% else %}
                    Upload gambar baru ke gallery
                {% endif %}
            </p>
        </div>

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

            <!-- Form Errors Display -->
            {% if form.errors or form.non_field_errors %}
            <div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left: 5px solid #ef4444; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(239, 68, 68, 0.1);">
                <div style="display: flex; align-items: flex-start; gap: 1rem;">
                    <div style="flex-shrink: 0; width: 48px; height: 48px; background: #ef4444; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-exclamation-triangle" style="color: white; font-size: 24px;"></i>
                    </div>
                    <div style="flex: 1;">
                        <h3 style="color: #dc2626; margin: 0 0 0.75rem 0; font-size: 1.25rem; font-weight: 700;">
                            Oops! Ada yang perlu diperbaiki
                        </h3>
                        <div style="color: #991b1b; font-size: 0.95rem; line-height: 1.6;">
                            {% if form.non_field_errors %}
                                {% for error in form.non_field_errors %}
                                    <div style="background: white; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                        <i class="fas fa-arrow-right" style="color: #ef4444;"></i>
                                        <span>{{ error }}</span>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            {% for field in form %}
                                {% if field.errors and field.name != 'media_type' %}
                                    <div style="background: white; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
                                        <i class="fas fa-arrow-right" style="color: #ef4444;"></i>
                                        <span><strong>{{ field.label }}:</strong> {{ field.errors.0 }}</span>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-cloud-upload-alt"></i>
                    Upload Gambar
                </h2>

                <div class="tf-form-group">
                    <label for="{{ form.tourism_location.id_for_label }}" class="tf-label tf-label-required">
                        <i class="fas fa-map-marker-alt"></i>
                        Lokasi Wisata
                    </label>
                    {{ form.tourism_location }}
                    {% if form.tourism_location.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.tourism_location.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Pilih lokasi wisata untuk gambar ini
                    </small>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.image.id_for_label }}" class="tf-label {% if not form.instance.pk %}tf-label-required{% endif %}">
                        <i class="fas fa-image"></i>
                        Gambar
                    </label>

                    {% if form.instance.pk and form.instance.image %}
                    <div class="tf-image-preview" style="margin-bottom: 1rem;">
                        <span class="tf-image-preview-label">Gambar Saat Ini:</span>
                        <img src="{{ form.instance.image.url }}" alt="Current image">
                    </div>
                    <small class="tf-help-text" style="display: block; margin-bottom: 0.5rem;">
                        <i class="fas fa-info-circle"></i>
                        Upload gambar baru untuk mengganti yang sekarang
                    </small>
                    {% endif %}

                    {{ form.image }}
                    {% if form.image.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.image.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Format yang didukung: JPG, JPEG, PNG, WebP (Maks 5MB)
                    </small>

                    <div id="imagePreview" class="tf-image-preview" style="display:none; margin-top: 1rem;">
                        <span class="tf-image-preview-label">Preview Gambar Baru:</span>
                        <img id="previewImg" src="" alt="Preview">
                    </div>
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-info-circle"></i>
                    Informasi Gambar
                </h2>

                <div class="tf-form-group">
                    <label for="{{ form.title.id_for_label }}" class="tf-label">
                        <i class="fas fa-heading"></i>
                        Judul
                    </label>
                    {{ form.title }}
                    {% if form.title.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.title.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Judul/caption untuk gambar (opsional)
                    </small>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.description.id_for_label }}" class="tf-label">
                        <i class="fas fa-align-left"></i>
                        Deskripsi
                    </label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.description.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Deskripsi lengkap gambar (opsional)
                    </small>
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-cog"></i>
                    Pengaturan Gambar
                </h2>

                <div class="tf-form-group">
                    <label for="{{ form.order.id_for_label }}" class="tf-label">
                        <i class="fas fa-sort-numeric-down"></i>
                        Urutan Tampilan
                    </label>
                    {{ form.order }}
                    {% if form.order.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.order.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Urutan untuk menampilkan gambar (angka lebih kecil muncul lebih dulu)
                    </small>
                </div>

                <div class="tf-form-group">
                    <div class="tf-checkbox-wrapper">
                        {{ form.is_active }}
                        <label for="{{ form.is_active.id_for_label }}" class="tf-checkbox-label">
                            Gambar Aktif
                        </label>
                    </div>
                    {% if form.is_active.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.is_active.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Gambar aktif akan ditampilkan di gallery publik
                    </small>
                </div>
            </div>

            <div class="tf-form-actions">
                <a href="{% url 'admin_panel:tourism_gallery_list' %}" class="tf-btn tf-btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    Kembali
                </a>
                <button type="submit" class="tf-btn tf-btn-primary">
                    <i class="fas fa-save"></i>
                    {% if form.instance.pk %}Simpan Perubahan{% else %}Upload Gambar{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Bootstrap Bundle JS (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <script>document.addEventListener('DOMContentLoaded', function() {

    const form = document.getElementById('galleryForm');
    const inputs = form.querySelectorAll('input[type="text"], input[type="number"]');
    const textareas = form.querySelectorAll('textarea');
    const selects = form.querySelectorAll('select');
    const fileInputs = form.querySelectorAll('input[type="file"]');
    const checkboxes = form.querySelectorAll('input[type="checkbox"]');

    inputs.forEach(input => input.classList.add('tf-input'));
    textareas.forEach(textarea => textarea.classList.add('tf-textarea'));
    selects.forEach(select => select.classList.add('tf-select'));
    fileInputs.forEach(fileInput => fileInput.classList.add('tf-file-input'));
    checkboxes.forEach(checkbox => checkbox.classList.add('tf-checkbox'));

    const imageInput = document.querySelector('[name="image"]');
    const imagePreview = document.getElementById('imagePreview');
    const previewImg = document.getElementById('previewImg');

    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {

                if (file.size > 5 * 1024 * 1024) {
                    showWarning('Ukuran file terlalu besar! Maksimal 5MB');
                    imageInput.value = '';
                    imagePreview.style.display = 'none';
                    return;
                }

                const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
                if (!validTypes.includes(file.type)) {
                    showWarning('Format file tidak didukung! Gunakan JPG, PNG, atau WebP');
                    imageInput.value = '';
                    imagePreview.style.display = 'none';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    imagePreview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                imagePreview.style.display = 'none';
            }
        });
    }

    form.addEventListener('submit', function(e) {
        const location = document.querySelector('[name="tourism_location"]');
        const imageField = document.querySelector('[name="image"]');
        const isEdit = {{ form.instance.pk|default:'false' }};

        if (!location.value) {
            e.preventDefault();
            showWarning('Lokasi wisata harus dipilih!');
            location.focus();
            return false;
        }

        if (!isEdit && (!imageField.files || imageField.files.length === 0)) {
            e.preventDefault();
            showWarning('Gambar harus diupload!');
            imageField.focus();
            return false;
        }
    });
});

</script>
{% endblock %}