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

{% block page_title %}{{ title }}{% 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_events_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 Event
        </a>

        <div class="tf-header">
            <h1 class="tf-title">
                <i class="fas fa-calendar-alt"></i>
                {{ title }}
            </h1>
            <p class="tf-subtitle">
                {% if form.instance.pk %}
                    Perbarui informasi event wisata
                {% else %}
                    Buat event wisata baru untuk menarik pengunjung
                {% endif %}
            </p>
        </div>

        <form method="post" enctype="multipart/form-data" id="eventForm">
            {% 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-row">
                    <div class="tf-form-group tf-col-span-2">
                        <label for="{{ form.title.id_for_label }}" class="tf-label tf-label-required">
                            <i class="fas fa-heading"></i>
                            Judul Event
                        </label>
                        {{ form.title }}
                        {% if form.title.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.title.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.event_type.id_for_label }}" class="tf-label tf-label-required">
                            <i class="fas fa-tag"></i>
                            Jenis Event
                        </label>
                        {{ form.event_type }}
                        {% if form.event_type.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.event_type.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <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>
                                {{ form.tourism_location.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.description.id_for_label }}" class="tf-label tf-label-required">
                        <i class="fas fa-align-left"></i>
                        Deskripsi Event
                    </label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {{ form.description.errors.0 }}
                        </span>
                    {% endif %}
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-clock"></i>
                    Jadwal Event
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.start_date.id_for_label }}" class="tf-label tf-label-required">
                            <i class="fas fa-calendar-plus"></i>
                            Tanggal Mulai
                        </label>
                        {{ form.start_date }}
                        {% if form.start_date.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.start_date.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.end_date.id_for_label }}" class="tf-label tf-label-required">
                            <i class="fas fa-calendar-check"></i>
                            Tanggal Selesai
                        </label>
                        {{ form.end_date }}
                        {% if form.end_date.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.end_date.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.start_time.id_for_label }}" class="tf-label">
                            <i class="fas fa-hourglass-start"></i>
                            Waktu Mulai
                        </label>
                        {{ form.start_time }}
                        {% if form.start_time.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.start_time.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.end_time.id_for_label }}" class="tf-label">
                            <i class="fas fa-hourglass-end"></i>
                            Waktu Selesai
                        </label>
                        {{ form.end_time }}
                        {% if form.end_time.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.end_time.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-users"></i>
                    Informasi Penyelenggara
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.organizer.id_for_label }}" class="tf-label tf-label-required">
                            <i class="fas fa-user-tie"></i>
                            Penyelenggara
                        </label>
                        {{ form.organizer }}
                        {% if form.organizer.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.organizer.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.contact_person.id_for_label }}" class="tf-label">
                            <i class="fas fa-user"></i>
                            Kontak Person
                        </label>
                        {{ form.contact_person }}
                        {% if form.contact_person.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.contact_person.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

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

                    <div class="tf-form-group">
                        <label for="{{ form.email.id_for_label }}" class="tf-label">
                            <i class="fas fa-envelope"></i>
                            Email
                        </label>
                        {{ form.email }}
                        {% if form.email.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.email.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.contact_info.id_for_label }}" class="tf-label">
                        <i class="fas fa-info-circle"></i>
                        Informasi Kontak Tambahan
                    </label>
                    {{ form.contact_info }}
                    {% if form.contact_info.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {{ form.contact_info.errors.0 }}
                        </span>
                    {% endif %}
                    <span class="tf-help-text">Informasi kontak tambahan untuk event (opsional)</span>
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-clipboard-check"></i>
                    Informasi Pendaftaran
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <div class="tf-checkbox-wrapper">
                            {{ form.registration_required }}
                            <label for="{{ form.registration_required.id_for_label }}" class="tf-checkbox-label">
                                Pendaftaran Diperlukan
                            </label>
                        </div>
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.registration_deadline.id_for_label }}" class="tf-label">
                            <i class="fas fa-calendar-times"></i>
                            Deadline Pendaftaran
                        </label>
                        {{ form.registration_deadline }}
                        {% if form.registration_deadline.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.registration_deadline.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.max_participants.id_for_label }}" class="tf-label">
                            <i class="fas fa-users-cog"></i>
                            Maksimal Peserta
                        </label>
                        {{ form.max_participants }}
                        {% if form.max_participants.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.max_participants.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.registration_fee.id_for_label }}" class="tf-label">
                            <i class="fas fa-dollar-sign"></i>
                            Biaya Pendaftaran (Rp)
                        </label>
                        {{ form.registration_fee }}
                        <div id="registration_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="registration_fee_usd_value">0</span> USD
                        </div>
                        {% if form.registration_fee.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.registration_fee.errors.0 }}
                            </span>
                        {% endif %}
                        <span class="tf-help-text">Format otomatis: 999.999 (gunakan angka saja)</span>
                    </div>
                </div>

                <div class="tf-form-group">
                    <label for="{{ form.registration_link.id_for_label }}" class="tf-label">
                        <i class="fas fa-link"></i>
                        Link Pendaftaran
                    </label>
                    {{ form.registration_link }}
                    {% if form.registration_link.errors %}
                        <span class="tf-error-message">
                            <i class="fas fa-exclamation-triangle"></i>
                            {{ form.registration_link.errors.0 }}
                        </span>
                    {% endif %}
                </div>
            </div>

            <div class="tf-card-section">
                <h2 class="tf-section-title">
                    <i class="fas fa-photo-video"></i>
                    Media Event
                </h2>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.image.id_for_label }}" class="tf-label">
                            <i class="fas fa-image"></i>
                            Gambar Event
                        </label>
                        {{ form.image }}
                        {% if form.image.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.image.errors.0 }}
                            </span>
                        {% endif %}

                        <div class="tf-image-preview-container" style="margin-top: 0.75rem;">
                            {% if form.instance.image %}
                            <div class="tf-image-preview" id="current-image-preview">
                                <img src="{{ form.instance.image.url }}" alt="Current Image" style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid #e5e7eb;">
                                <p style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">Gambar saat ini</p>
                            </div>
                            {% endif %}
                            <div class="tf-image-preview" id="image-preview" style="display: none;">
                                <img src="" alt="Preview" style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid #3b82f6;">
                                <p style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">Preview gambar baru</p>
                            </div>
                        </div>
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.hero_image.id_for_label }}" class="tf-label">
                            <i class="fas fa-image"></i>
                            Gambar Hero
                        </label>
                        {{ form.hero_image }}
                        {% if form.hero_image.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.hero_image.errors.0 }}
                            </span>
                        {% endif %}

                        <div class="tf-image-preview-container" style="margin-top: 0.75rem;">
                            {% if form.instance.hero_image %}
                            <div class="tf-image-preview" id="current-hero-image-preview">
                                <img src="{{ form.instance.hero_image.url }}" alt="Current Hero Image" style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid #e5e7eb;">
                                <p style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">Gambar hero saat ini</p>
                            </div>
                            {% endif %}
                            <div class="tf-image-preview" id="hero-image-preview" style="display: none;">
                                <img src="" alt="Preview" style="max-width: 150px; max-height: 150px; border-radius: 8px; border: 2px solid #3b82f6;">
                                <p style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">Preview gambar hero baru</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tf-row">
                    <div class="tf-form-group">
                        <label for="{{ form.hero_video.id_for_label }}" class="tf-label">
                            <i class="fas fa-video"></i>
                            Video Hero Event
                        </label>
                        {{ form.hero_video }}
                        {% if form.hero_video.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.hero_video.errors.0 }}
                            </span>
                        {% endif %}
                    </div>

                    <div class="tf-form-group">
                        <label for="{{ form.hero_youtube.id_for_label }}" class="tf-label">
                            <i class="fab fa-youtube"></i>
                            Link YouTube Hero
                        </label>
                        {{ form.hero_youtube }}
                        {% if form.hero_youtube.errors %}
                            <span class="tf-error-message">
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ form.hero_youtube.errors.0 }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

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

                <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">
                                Event Aktif
                            </label>
                        </div>
                    </div>

                    <div class="tf-form-group">
                        <div class="tf-checkbox-wrapper">
                            {{ form.is_featured }}
                            <label for="{{ form.is_featured.id_for_label }}" class="tf-checkbox-label">
                                Event Unggulan
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tf-form-actions">
                <a href="{% url 'admin_panel:tourism_events_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>
                    Simpan Event
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function showWarning(message) {

    if (typeof Swal !== 'undefined') {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: message,
            confirmButtonColor: '#3b82f6'
        });
    } else {
        showWarning(message);
    }
}

document.addEventListener('DOMContentLoaded', function() {

    const form = document.getElementById('eventForm');
    const inputs = form.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="time"]');
    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 feeInput = document.getElementById('{{ form.registration_fee.id_for_label }}');
    const feeUsdDisplay = document.getElementById('registration_fee_usd');
    const feeUsdValue = document.getElementById('registration_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';
    }

    form.addEventListener('submit', function(e) {
        if (feeInput && feeInput.value) {
            feeInput.value = feeInput.value.replace(/\./g, '');
        }
    });

    const startDateInput = document.querySelector('input[name="start_date"]');
    const endDateInput = document.querySelector('input[name="end_date"]');

    if (startDateInput && endDateInput) {
        startDateInput.addEventListener('change', function() {
            const startDate = new Date(this.value);
            if (endDateInput.value) {
                const endDate = new Date(endDateInput.value);
                if (endDate < startDate) {
                    endDateInput.value = this.value;
                }
            }
            endDateInput.min = this.value;
        });

        endDateInput.addEventListener('change', function() {
            const startDate = new Date(startDateInput.value);
            const endDate = new Date(this.value);

            if (endDate < startDate) {
                showWarning('Tanggal selesai tidak boleh lebih awal dari tanggal mulai');
                this.value = startDateInput.value;
            }
        });
    }

    const startTimeInput = document.querySelector('input[name="start_time"]');
    const endTimeInput = document.querySelector('input[name="end_time"]');

    if (startTimeInput && endTimeInput) {
        startTimeInput.addEventListener('change', function() {
            const startTime = this.value;
            if (endTimeInput.value && startTime > endTimeInput.value) {
                endTimeInput.value = startTime;
            }
        });

        endTimeInput.addEventListener('change', function() {
            const startTime = startTimeInput.value;
            const endTime = this.value;

            if (startTime && endTime < startTime) {
                showWarning('Waktu selesai tidak boleh lebih awal dari waktu mulai');
                this.value = startTime;
            }
        });
    }

    function setupImagePreview(inputId, previewId, currentPreviewId) {
        const input = document.getElementById(inputId);
        if (!input) return;

        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById(previewId);
            const currentPreview = document.getElementById(currentPreviewId);

            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const img = preview.querySelector('img');
                    img.src = e.target.result;
                    preview.style.display = 'block';

                    if (currentPreview) {
                        currentPreview.style.display = 'none';
                    }
                };

                reader.readAsDataURL(file);
            } else if (!file) {
                preview.style.display = 'none';

                if (currentPreview) {
                    currentPreview.style.display = 'block';
                }
            }
        });
    }

    setupImagePreview('{{ form.image.id_for_label }}', 'image-preview', 'current-image-preview');
    setupImagePreview('{{ form.hero_image.id_for_label }}', 'hero-image-preview', 'current-hero-image-preview');
});

</script>
{% endblock %}