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

{% block page_title %}
    {% if form.instance.pk %}Edit Kategori Wisata{% else %}Tambah Kategori Wisata{% 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_categories_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 Kategori
        </a>

        <div class="tf-header">
            <h1 class="tf-title">
                <i class="fas fa-{% if form.instance.pk %}edit{% else %}plus-circle{% endif %}"></i>
                {% if form.instance.pk %}Edit Kategori Wisata{% else %}Tambah Kategori Wisata{% endif %}
        </h1>
            <p class="tf-subtitle">
            {% if form.instance.pk %}
                Perbarui informasi kategori wisata
            {% else %}
                Tambahkan kategori wisata baru untuk Desa Pulosarok
            {% endif %}
        </p>
    </div>

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

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

                <div class="tf-form-group">
                    <label for="{{ form.name.id_for_label }}" class="tf-label tf-label-required">
                        <i class="fas fa-tag"></i>
                        Nama Kategori
                            </label>
                            {{ form.name }}
                            {% if form.name.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                        {% for error in form.name.errors %}{{ error }}{% endfor %}
                        </span>
                            {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Masukkan nama kategori wisata yang unik dan mudah diingat
                    </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>
                        Jelaskan secara singkat tentang kategori wisata ini
                    </small>
                                </div>
                        </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-palette"></i>
                    Elemen Visual
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.icon.id_for_label }}" class="tf-label">
                            <i class="fas fa-icons"></i>
                            Icon FontAwesome
                            </label>
                            {{ form.icon }}
                            {% if form.icon.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.icon.errors %}{{ error }}{% endfor %}
                            </span>
                    {% endif %}
                        <small class="tf-help-text">
                            <i class="fas fa-lightbulb"></i>
                            Contoh: fas fa-mountain, fas fa-water
                        </small>
                    {% if form.icon.value %}
                        <div class="tf-badge tf-badge-primary" style="margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem;">
                        <i class="{{ form.icon.value }}"></i>
                        <span>{{ form.icon.value }}</span>
                    </div>
                    {% endif %}
                        </div>

                    <div class="tf-form-group">
                        <label for="{{ form.color.id_for_label }}" class="tf-label">
                            <i class="fas fa-paint-brush"></i>
                            Warna Kategori
                            </label>
                            {{ form.color }}
                            {% if form.color.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.color.errors %}{{ error }}{% endfor %}
                            </span>
                    {% endif %}
                        <small class="tf-help-text">
                            <i class="fas fa-lightbulb"></i>
                            Pilih warna untuk kategori ini
                        </small>
                    {% if form.color.value %}
                        <div style="width: 40px; height: 40px; border-radius: 8px; background-color: {{ form.color.value }}; margin-top: 0.5rem; border: 2px solid #e2e8f0;"></div>
                    {% endif %}
                </div>
            </div>

                <div class="tf-form-group">
                    <label for="{{ form.image.id_for_label }}" class="tf-label">
                        <i class="fas fa-image"></i>
                    Gambar Kategori
                </label>
                {{ 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>
                        Upload gambar representatif untuk kategori ini (opsional)
                    </small>
                    {% if form.instance.image %}
                    <div class="tf-image-preview">
                        <span class="tf-image-preview-label">Gambar Saat Ini:</span>
                        <img src="{{ form.instance.image.url }}" alt="Current image">
                    </div>
                {% endif %}
                </div>
        </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-toggle-on"></i>
                    Status Kategori
                </h2>

                <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">
                            Kategori Aktif
                    </label>
                    </div>
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Kategori aktif akan ditampilkan di halaman publik
                    </small>
                </div>
            </div>

            <div class="tf-form-actions">
                <a href="{% url 'admin_panel:tourism_categories_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 %}Update Kategori{% else %}Simpan Kategori{% 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('categoryForm');
    const inputs = form.querySelectorAll('input[type="text"], input[type="color"]');
    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 iconInput = document.getElementById('{{ form.icon.id_for_label }}');
    if (iconInput) {
        iconInput.addEventListener('input', function() {
            const iconValue = this.value;
            const existingBadge = this.parentElement.querySelector('.tf-badge');
            if (iconValue) {
                if (existingBadge) {
                    existingBadge.innerHTML = `<i class="${iconValue}"></i><span>${iconValue}</span>`;
            } else {
                    const badge = document.createElement('div');
                    badge.className = 'tf-badge tf-badge-primary';
                    badge.style = 'margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem;';
                    badge.innerHTML = `<i class="${iconValue}"></i><span>${iconValue}</span>`;
                    this.parentElement.appendChild(badge);
                }
            } else if (existingBadge) {
                existingBadge.remove();
            }
        });
    }

    const colorInput = document.getElementById('{{ form.color.id_for_label }}');
    if (colorInput) {
        colorInput.addEventListener('input', function() {
            let colorPreview = this.parentElement.querySelector('[style*="background-color"]');
            if (!colorPreview) {
                colorPreview = document.createElement('div');
                colorPreview.style = 'width: 40px; height: 40px; border-radius: 8px; margin-top: 0.5rem; border: 2px solid #e2e8f0;';
                this.parentElement.appendChild(colorPreview);
            }
            colorPreview.style.backgroundColor = this.value;
        });
    }

        form.addEventListener('submit', function(e) {
            const nameInput = document.getElementById('{{ form.name.id_for_label }}');
            if (!nameInput.value.trim()) {
                e.preventDefault();
                showWarning('Nama kategori harus diisi!');
                nameInput.focus();
                return false;
        }
    });

    const imageInput = document.querySelector('input[type="file"]');
    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = imageInput.parentElement.querySelector('.tf-image-preview');
                    if (!preview) {
                        preview = document.createElement('div');
                        preview.className = 'tf-image-preview';
                        imageInput.parentElement.appendChild(preview);
                    }
                    preview.innerHTML = `
                        <span class="tf-image-preview-label">Preview Gambar Baru:</span>
                        <img src="${e.target.result}" alt="Preview">
                    `;
                };
                reader.readAsDataURL(file);
            }
        });
    }
});

</script>
{% endblock %}