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

{% block page_title %}
    {% if form.instance.pk %}Edit Lokasi Wisata{% else %}Tambah Lokasi 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_locations_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 Lokasi
        </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 Lokasi Wisata{% else %}Tambah Lokasi Wisata{% endif %}
            </h1>
            <p class="tf-subtitle">
                {% if form.instance.pk %}
                    Perbarui informasi lokasi wisata
                {% else %}
                    Tambahkan lokasi wisata baru untuk Desa Pulosarok
                {% endif %}
            </p>
        </div>

        <form method="post" enctype="multipart/form-data" id="locationForm">
            {% 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.title.id_for_label }}" class="tf-label tf-label-required">
                        <i class="fas fa-map-marked-alt"></i>
                        Nama Lokasi
                    </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>
                        Masukkan nama lokasi wisata yang menarik
                    </small>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.short_description.id_for_label }}" class="tf-label">
                        <i class="fas fa-text-width"></i>
                        Deskripsi Singkat
                    </label>
                    {{ form.short_description }}
                    {% if form.short_description.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.short_description.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Deskripsi singkat untuk preview (opsional)
                    </small>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.full_description.id_for_label }}" class="tf-label">
                        <i class="fas fa-align-left"></i>
                        Deskripsi Lengkap
                    </label>
                    {{ form.full_description }}
                    {% if form.full_description.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.full_description.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Jelaskan secara detail tentang lokasi wisata ini
                    </small>
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-map-marker-alt"></i>
                    Detail Lokasi
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.address.id_for_label }}" class="tf-label">
                            <i class="fas fa-home"></i>
                            Alamat
                        </label>
                        {{ form.address }}
                        {% if form.address.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {% for error in form.address.errors %}{{ error }}{% endfor %}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.contact_phone.id_for_label }}" class="tf-label">
                            <i class="fas fa-phone"></i>
                            Telepon
                        </label>
                        {{ form.contact_phone }}
                        {% if form.contact_phone.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {% for error in form.contact_phone.errors %}{{ error }}{% endfor %}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.category.id_for_label }}" class="tf-label">
                            <i class="fas fa-tag"></i>
                            Kategori
                        </label>
                        {{ form.category }}
                        {% if form.category.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {% for error in form.category.errors %}{{ error }}{% endfor %}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.location_type.id_for_label }}" class="tf-label">
                            <i class="fas fa-list"></i>
                            Jenis Wisata
                        </label>
                        {{ form.location_type }}
                        {% if form.location_type.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {% for error in form.location_type.errors %}{{ error }}{% endfor %}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.entry_fee.id_for_label }}" class="tf-label">
                        <i class="fas fa-ticket-alt"></i>
                        Harga Tiket (Rp)
                    </label>
                    {{ form.entry_fee }}
                    <div id="entry_fee_usd" class="tf-help-text" style="color: #10b981; font-weight: 600; margin-top: 0.5rem; display: none;">
                        <i class="fas fa-dollar-sign"></i> <span id="entry_fee_usd_value">0</span> USD
                    </div>
                    {% if form.entry_fee.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.entry_fee.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <span class="tf-help-text">Format otomatis: 999.999 (gunakan angka saja)</span>
                </div>
            </div>

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

                <div class="tf-form-group">
                    <label for="{{ form.main_image.id_for_label }}" class="tf-label">
                        <i class="fas fa-camera"></i>
                        Gambar Utama
                    </label>
                    {{ form.main_image }}
                    {% if form.main_image.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.main_image.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Upload gambar utama lokasi wisata
                    </small>
                    {% if form.instance.main_image %}
                    <div class="tf-image-preview">
                        <span class="tf-image-preview-label">Gambar Saat Ini:</span>
                        <img src="{{ form.instance.main_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 Lokasi
                </h2>

                <div class="tf-form-group">
                    <label for="{{ form.status.id_for_label }}" class="tf-label">
                        <i class="fas fa-check-circle"></i>
                        Status Publikasi
                    </label>
                    {{ form.status }}
                    {% if form.status.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {% for error in form.status.errors %}{{ error }}{% endfor %}
                        </span>
                    {% endif %}
                    <small class="tf-help-text">
                        <i class="fas fa-lightbulb"></i>
                        Pilih status publikasi lokasi wisata
                    </small>
                </div>

                <div class="tf-row">
                    <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">
                                Lokasi Aktif
                            </label>
                        </div>
                    </div>

                    <div class="tf-form-group">
                        <div class="tf-checkbox-wrapper">
                            {{ form.featured }}
                            <label for="{{ form.featured.id_for_label }}" class="tf-checkbox-label">
                                Lokasi Unggulan
                            </label>
                        </div>
                    </div>
                </div>
                <small class="tf-help-text">
                    <i class="fas fa-lightbulb"></i>
                    Lokasi aktif akan ditampilkan di halaman publik
                </small>
            </div>

            <div class="tf-form-actions">
                <a href="{% url 'admin_panel:tourism_locations_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 Lokasi{% else %}Simpan Lokasi{% 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('locationForm');
    const inputs = form.querySelectorAll('input[type="text"], input[type="tel"], 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'));

    form.addEventListener('submit', function(e) {
        if (feeInput && feeInput.value) {

            const originalValue = feeInput.value;

            feeInput.value = feeInput.value.replace(/\./g, '');
        }
    });

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

    const phoneInput = document.getElementById('{{ form.contact_phone.id_for_label }}');
    if (phoneInput) {
        phoneInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.length > 0 && !value.startsWith('0')) {
                value = '0' + value;
            }
            this.value = value;
        });
    }

    const feeInput = document.getElementById('{{ form.entry_fee.id_for_label }}');
    const feeUsdDisplay = document.getElementById('entry_fee_usd');
    const feeUsdValue = document.getElementById('entry_fee_usd_value');
    const USD_RATE = 17000;

    if (feeInput) {

        if (feeInput.value) {
            const numericValue = feeInput.value.replace(/\D/g, '');
            if (numericValue) {
                feeInput.value = formatRupiah(numericValue);
                updateUSD(numericValue, feeUsdDisplay, feeUsdValue);
            }
        }

        feeInput.addEventListener('input', function(e) {

            let value = this.value.replace(/\D/g, '');

            const cursorPosition = this.selectionStart;
            const oldLength = this.value.length;

            this.value = formatRupiah(value);

            updateUSD(value, feeUsdDisplay, feeUsdValue);

            const newLength = this.value.length;
            const diff = newLength - oldLength;
            this.setSelectionRange(cursorPosition + diff, cursorPosition + diff);
        });

        feeInput.addEventListener('blur', function() {
            if (this.value && !this.value.includes('.')) {
                const value = this.value.replace(/\D/g, '');
                this.value = formatRupiah(value);
                updateUSD(value, feeUsdDisplay, feeUsdValue);
            }
        });
    }

    function formatRupiah(value) {
        if (!value) return '';
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    function updateUSD(rupiahValue, displayElement, valueElement) {
        if (!rupiahValue || rupiahValue === '0') {
            displayElement.style.display = 'none';
            return;
        }

        const numericValue = parseInt(rupiahValue);
        const usdValue = (numericValue / USD_RATE).toFixed(2);
        valueElement.textContent = usdValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        displayElement.style.display = 'block';
    }

    const imageInput = form.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.querySelector('img[alt="Current image"]')) {
                        const newPreview = document.createElement('div');
                        newPreview.className = 'tf-image-preview';
                        newPreview.style.marginTop = '1rem';
                        newPreview.innerHTML = `
                            <span class="tf-image-preview-label">Preview Gambar Baru:</span>
                            <img src="${e.target.result}" alt="Preview">
                        `;
                        imageInput.parentElement.appendChild(newPreview);
                    } else {
                        preview.innerHTML = `
                            <span class="tf-image-preview-label">Preview Gambar Baru:</span>
                            <img src="${e.target.result}" alt="Preview">
                        `;
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }
});

$(document).ready(function() {
    $('#id_short_description').summernote({
        height: 150,
        placeholder: 'Masukkan deskripsi singkat lokasi wisata (maksimal 200 karakter)...',
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['para', ['ul', 'ol']],
        ],
        callbacks: {
            onKeyup: function(e) {
                const text = $(this).summernote('code').replace(/<[^>]*>/g, '');
                if (text.length > 200) {
                    showWarning('Deskripsi singkat maksimal 200 karakter!');
                }
            }
        }
    });

    $('#id_full_description').summernote({
        height: 300,
        placeholder: 'Masukkan deskripsi lengkap tentang lokasi wisata...',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
});
</script>
{% endblock %}