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

{% block page_title %}{% if announcement %}Edit Pengumuman{% else %}Tambah Pengumuman{% endif %}{% endblock %}

{% block extra_css %}
<style>
    .form-section {
        background: white;
        border-radius: 10px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .form-section h5 {
        color: #333;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #007bff;
    }
    .required-field::after {
        content: " *";
        color: red;
    }
    .priority-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 0.5rem;
    }
    .priority-low { background-color: #6c757d; }
    .priority-normal { background-color: #17a2b8; }
    .priority-high { background-color: #ffc107; }
    .priority-urgent { background-color: #dc3545; }
    .type-indicator {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .type-info { background-color: #d1ecf1; color: #0c5460; }
    .type-warning { background-color: #fff3cd; color: #856404; }
    .type-urgent { background-color: #f8d7da; color: #721c24; }
    .type-schedule { background-color: #d4edda; color: #155724; }
    .type-event { background-color: #e2e3e5; color: #383d41; }
    .type-service { background-color: #cce5ff; color: #004085; }
    .preview-section {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 15px;
        padding: 2rem;
        margin-top: 2rem;
        border: 2px solid #e9ecef;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .preview-section h5 {
        color: #2c3e50;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid #007bff;
        font-weight: 700;
    }
    .preview-content {
        max-height: 500px;
        overflow-y: auto;
        background: white;
        border-radius: 10px;
        padding: 2rem;
        box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
        border: 1px solid #dee2e6;
    }
    .preview-content::-webkit-scrollbar {
        width: 8px;
    }
    .preview-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .preview-content::-webkit-scrollbar-thumb {
        background: #007bff;
        border-radius: 4px;
    }
    .preview-content::-webkit-scrollbar-thumb:hover {
        background: #0056b3;
    }
    .datetime-input {
        position: relative;
    }
    .datetime-input .form-control {
        padding-right: 2.5rem;
    }
    .datetime-input .input-icon {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        pointer-events: none;
    }
    .form-check-custom {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .form-check-custom .form-check-input {
        margin-top: 0.25rem;
    }
    .form-check-custom .form-check-label {
        font-weight: 500;
        margin-left: 0.5rem;
    }
    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    
    /* Summernote Styling */
    .note-editor {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
    }
    
    .note-editor .note-toolbar {
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        border-radius: 0.375rem 0.375rem 0 0;
    }
    
    .note-editor .note-editing-area {
        background: white;
    }
    
    .note-editor .note-editable {
        padding: 15px;
        min-height: 300px;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        line-height: 1.6;
    }
    
    .note-editor .note-editable:focus {
        outline: none;
    }
    
    .note-editor .note-toolbar .btn-group .btn {
        border: none;
        background: transparent;
        color: #6c757d;
        padding: 8px 12px;
        margin: 0 2px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .note-editor .note-toolbar .btn-group .btn:hover {
        background: #e9ecef;
        color: #495057;
    }
    
    .note-editor .note-toolbar .btn-group .btn.active {
        background: #007bff;
        color: white;
    }
    
    /* Summonote Editor Styling */
    .summonote-editor {
        border: 2px solid #F97316;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.02), rgba(251, 146, 60, 0.02));
    }
    
    .summonote-editor .note-editor {
        border: none;
        border-radius: 6px;
    }
    
    .summonote-editor .note-toolbar {
        background: linear-gradient(135deg, #F97316, #FB923C);
        border-radius: 6px 6px 0 0;
    }
    
    .summonote-editor .note-toolbar .btn {
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .summonote-editor .note-toolbar .btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
    .summonote-editor .note-editing-area {
        background: white;
        border-radius: 0 0 6px 6px;
    }
    
    /* Styling untuk Summernote yang sudah diinisialisasi oleh Django */
    #content + .note-editor {
        transition: all 0.3s ease;
    }
    
    .summonote-editor #content + .note-editor {
        border: 2px solid #F97316;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.02), rgba(251, 146, 60, 0.02));
    }
    
    .summonote-editor #content + .note-editor .note-toolbar {
        background: linear-gradient(135deg, #F97316, #FB923C);
        border-radius: 6px 6px 0 0;
    }
    
    .summonote-editor #content + .note-editor .note-toolbar .btn {
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .summonote-editor #content + .note-editor .note-toolbar .btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
    .summonote-editor #content + .note-editor .note-editing-area {
        background: white;
        border-radius: 0 0 6px 6px;
    }
    
    /* Styling untuk class summonote-styled */
    .summonote-styled {
        border: 2px solid #F97316 !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.02), rgba(251, 146, 60, 0.02)) !important;
    }
    
    .summonote-styled .note-toolbar {
        background: linear-gradient(135deg, #F97316, #FB923C) !important;
        border-radius: 6px 6px 0 0 !important;
    }
    
    .summonote-styled .note-toolbar .btn {
        color: white !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .summonote-styled .note-toolbar .btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }
    
    .summonote-styled .note-editing-area {
        background: white !important;
        border-radius: 0 0 6px 6px !important;
    }
    
    /* Visual indicator for Summonote mode */
    .summonote-indicator {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        background: linear-gradient(135deg, #F97316, #FB923C);
        color: white;
        margin-left: 0.5rem;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{% if announcement %}Edit Pengumuman{% else %}Tambah Pengumuman{% endif %}</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group mr-2">
                <a href="{% url 'admin_panel:news_announcements_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
                {% if announcement %}
                <a href="{% url 'admin_panel:news_announcement_detail' announcement.pk %}" class="btn btn-outline-primary">
                    <i class="fas fa-eye"></i> Lihat
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <form method="POST" id="announcementForm"
          data-announcement-id="{% if announcement %}{{ announcement.id|escapejs }}{% else %}new{% endif %}">
        {% csrf_token %}

        <div class="form-section">
            <h5><i class="fas fa-info-circle"></i> Informasi Dasar</h5>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group mb-3">
                        <label for="{{ form.title.id_for_label }}" class="form-label required-field">Judul Pengumuman</label>
                        {{ form.title }}
                        {% if form.title.errors %}
                            <div class="invalid-feedback d-block">{{ form.title.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Judul yang jelas dan informatif</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group mb-3">
                        <label for="{{ form.announcement_type.id_for_label }}" class="form-label required-field">Jenis Pengumuman</label>
                        {{ form.announcement_type }}
                        {% if form.announcement_type.errors %}
                            <div class="invalid-feedback d-block">{{ form.announcement_type.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <label for="{{ form.content.id_for_label }}" class="form-label required-field">
                    Isi Pengumuman
                    <span id="summonote-indicator" class="summonote-indicator" style="display: none;">
                        <i class="fas fa-sticky-note mr-1"></i>Summonote Mode
                    </span>
                </label>
                <div id="content-editor-container">
                    {{ form.content }}
                </div>
                {% if form.content.errors %}
                    <div class="invalid-feedback d-block">{{ form.content.errors.0 }}</div>
                {% endif %}
                <div class="help-text">Gunakan editor Summernote untuk memformat pengumuman dengan baik</div>
            </div>
        </div>

        <div class="form-section">
            <h5><i class="fas fa-calendar"></i> Jadwal & Durasi</h5>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.start_date.id_for_label }}" class="form-label required-field">Tanggal Mulai</label>
                        <div class="datetime-input">
                            {{ form.start_date }}
                            <i class="fas fa-calendar input-icon"></i>
                        </div>
                        {% if form.start_date.errors %}
                            <div class="invalid-feedback d-block">{{ form.start_date.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Kapan pengumuman mulai ditampilkan</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.end_date.id_for_label }}" class="form-label">Tanggal Akhir</label>
                        <div class="datetime-input">
                            {{ form.end_date }}
                            <i class="fas fa-calendar-times input-icon"></i>
                        </div>
                        {% if form.end_date.errors %}
                            <div class="invalid-feedback d-block">{{ form.end_date.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Kapan pengumuman berakhir (opsional)</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h5><i class="fas fa-cog"></i> Prioritas & Pengaturan</h5>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.priority.id_for_label }}" class="form-label">Prioritas</label>
                        {{ form.priority }}
                        {% if form.priority.errors %}
                            <div class="invalid-feedback d-block">{{ form.priority.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.target_audience.id_for_label }}" class="form-label">Target Audiens</label>
                        {{ form.target_audience }}
                        {% if form.target_audience.errors %}
                            <div class="invalid-feedback d-block">{{ form.target_audience.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Siapa yang menjadi target pengumuman ini</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.location.id_for_label }}" class="form-label">Lokasi</label>
                        {{ form.location }}
                        {% if form.location.errors %}
                            <div class="invalid-feedback d-block">{{ form.location.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.contact_person.id_for_label }}" class="form-label">Narahubung</label>
                        {{ form.contact_person }}
                        {% if form.contact_person.errors %}
                            <div class="invalid-feedback d-block">{{ form.contact_person.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="{{ form.contact_phone.id_for_label }}" class="form-label">No. Telepon</label>
                        {{ form.contact_phone }}
                        {% if form.contact_phone.errors %}
                            <div class="invalid-feedback d-block">{{ form.contact_phone.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <h5><i class="fas fa-eye"></i> Pengaturan Tampilan</h5>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-check-custom">
                        {{ form.status }}
                        <label class="form-check-label" for="{{ form.status.id_for_label }}">
                            <i class="fas fa-play text-success"></i> Status
                        </label>
                        {% if form.status.errors %}
                            <div class="invalid-feedback d-block">{{ form.status.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Status pengumuman</div>
                    </div>

                    <div class="form-check-custom">
                        {{ form.is_pinned }}
                        <label class="form-check-label" for="{{ form.is_pinned.id_for_label }}">
                            <i class="fas fa-thumbtack text-warning"></i> Pin di Atas
                        </label>
                        {% if form.is_pinned.errors %}
                            <div class="invalid-feedback d-block">{{ form.is_pinned.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Pengumuman akan selalu ditampilkan di bagian atas</div>
                    </div>

                    <div class="form-check-custom">
                        {{ form.is_popup }}
                        <label class="form-check-label" for="{{ form.is_popup.id_for_label }}">
                            <i class="fas fa-external-link-alt text-info"></i> Tampilkan sebagai Popup
                        </label>
                        {% if form.is_popup.errors %}
                            <div class="invalid-feedback d-block">{{ form.is_popup.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Pengumuman akan muncul sebagai popup saat halaman dimuat</div>
                    </div>

                    <div class="form-check-custom">
                        {{ form.is_summonote }}
                        <label class="form-check-label" for="{{ form.is_summonote.id_for_label }}">
                            <i class="fas fa-star text-warning"></i> Summonote
                        </label>
                        {% if form.is_summonote.errors %}
                            <div class="invalid-feedback d-block">{{ form.is_summonote.errors.0 }}</div>
                        {% endif %}
                        <div class="help-text">Tandai pengumuman sebagai Summonote untuk penekanan khusus. Editor akan berubah tampilan.</div>
                    </div>

                </div>
            </div>
        </div>

        <div class="preview-section">
            <h5><i class="fas fa-eye"></i> Preview</h5>
            <div class="preview-content" id="previewContent">
                <div class="text-muted">Preview akan muncul di sini...</div>
            </div>
        </div>

        <div class="form-section">
            <div class="d-flex justify-content-between">
                <div>
                    <button type="button" class="btn btn-outline-secondary" onclick="saveDraft()">
                        <i class="fas fa-save"></i> Simpan Draft
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="previewAnnouncement()">
                        <i class="fas fa-eye"></i> Preview
                    </button>
                </div>
                <div>
                    <a href="{% url 'admin_panel:news_announcements_list' %}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check"></i> {% if announcement %}Update Pengumuman{% else %}Buat Pengumuman{% endif %}
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}

<script>
$(document).ready(function() {
    // Summernote is handled by Django Summernote automatically
    // Just add change listener for preview
    $('#id_content').on('summernote.change', function() {
        updatePreview();
    });
    
    // Update content preview when summonote checkbox changes
    $('input[name="is_summonote"]').on('change', function() {
        applySummonoteStyling();
        updatePreview();
    });
    
    // Initial Summonote styling check
    applySummonoteStyling();
    
    // Re-apply styling when Summernote is ready
    $(document).on('summernote.init', '#id_content', function() {
        applySummonoteStyling();
    });
    
    // Form initialization
});

function applySummonoteStyling() {
    const isSummonoteCheckbox = document.querySelector('input[name="is_summonote"]');
    if (!isSummonoteCheckbox) return;
    
    const isSummonote = isSummonoteCheckbox.checked;
    const contentContainer = document.getElementById('content-editor-container');
    const summonoteIndicator = document.getElementById('summonote-indicator');
    
    if (isSummonote) {
        contentContainer.classList.add('summonote-editor');
        summonoteIndicator.style.display = 'inline-flex';
        
        // Apply Summonote styling to the Summernote editor
        const summernoteEditor = $('#id_content').next('.note-editor');
        if (summernoteEditor.length > 0) {
            summernoteEditor.addClass('summonote-styled');
        }
    } else {
        contentContainer.classList.remove('summonote-editor');
        summonoteIndicator.style.display = 'none';
        
        // Remove Summonote styling from the Summernote editor
        const summernoteEditor = $('#id_content').next('.note-editor');
        if (summernoteEditor.length > 0) {
            summernoteEditor.removeClass('summonote-styled');
        }
    }
}

function updatePreview() {
    const title = document.getElementById('id_title')?.value || '';
    const content = $('#id_content').val() || '';
    const announcementType = document.getElementById('id_announcement_type')?.value || '';
    const priority = document.getElementById('id_priority')?.value || '';
    const startDate = document.getElementById('id_start_date')?.value || '';
    const endDate = document.getElementById('id_end_date')?.value || '';
    const isActive = document.querySelector('input[name="is_active"]')?.checked || false;
    const isPinned = document.querySelector('input[name="is_pinned"]')?.checked || false;
    const isPopup = document.querySelector('input[name="is_popup"]')?.checked || false;
    const isSummonote = document.querySelector('input[name="is_summonote"]')?.checked || false;
    const targetAudience = document.getElementById('id_target_audience')?.value || '';
    const location = document.getElementById('id_location')?.value || '';
    const contactPerson = document.getElementById('id_contact_person')?.value || '';

    let previewHtml = `
        <div class="preview-announcement">
            <style>
                .preview-announcement {
                    font-family: 'Poppins', sans-serif;
                    line-height: 1.6;
                }
                .preview-header {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 2rem;
                    border-radius: 15px;
                    margin-bottom: 2rem;
                    position: relative;
                    overflow: hidden;
                }
                .preview-header::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
                    opacity: 0.3;
                }
                .preview-title {
                    font-size: 2rem;
                    font-weight: 700;
                    margin: 0 0 1rem 0;
                    position: relative;
                    z-index: 1;
                }
                .preview-meta {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1rem;
                    align-items: center;
                    position: relative;
                    z-index: 1;
                }
                .preview-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem;
                    border-radius: 25px;
                    font-size: 0.9rem;
                    font-weight: 600;
                    backdrop-filter: blur(10px);
                    background: rgba(255,255,255,0.2);
                    border: 1px solid rgba(255,255,255,0.3);
                }
                .preview-content {
                    background: white;
                    padding: 2rem;
                    border-radius: 15px;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                    margin-bottom: 1.5rem;
                }
                .preview-info {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 1rem;
                    margin-bottom: 1.5rem;
                }
                .preview-info-item {
                    background: #f8f9fa;
                    padding: 1rem;
                    border-radius: 10px;
                    border-left: 4px solid #007bff;
                }
                .preview-info-label {
                    font-size: 0.8rem;
                    color: #6c757d;
                    text-transform: uppercase;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                }
                .preview-info-value {
                    color: #2c3e50;
                    font-weight: 500;
                }
                .preview-status {
                    display: flex;
                    gap: 1rem;
                    flex-wrap: wrap;
                    margin-top: 1rem;
                }
                .preview-status-item {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem;
                    border-radius: 20px;
                    font-size: 0.9rem;
                    font-weight: 500;
                }
                .preview-status-active { background: #d4edda; color: #155724; }
                .preview-status-inactive { background: #f8d7da; color: #721c24; }
                .preview-status-pinned { background: #fff3cd; color: #856404; }
                .preview-status-popup { background: #d1ecf1; color: #0c5460; }
                .preview-status-summonote { background: #ffeaa7; color: #d63031; }
            </style>
    `;

    if (title) {
        previewHtml += `
            <div class="preview-header">
                <h1 class="preview-title">${title}</h1>
                <div class="preview-meta">
        `;

        if (announcementType) {
            const typeLabels = {
                'info': '📢 Informasi',
                'warning': '⚠️ Peringatan',
                'urgent': '🚨 Mendesak',
                'schedule': '📅 Jadwal',
                'event': '🎉 Acara',
                'service': '🔧 Layanan'
            };
            previewHtml += `<span class="preview-badge">${typeLabels[announcementType] || announcementType}</span>`;
        }

        if (priority) {
            const priorityLabels = {
                'low': '🟢 Rendah',
                'normal': '🔵 Normal',
                'high': '🟡 Tinggi',
                'urgent': '🔴 Mendesak'
            };
            previewHtml += `<span class="preview-badge">${priorityLabels[priority] || priority}</span>`;
        }

        previewHtml += `</div></div>`;
    }

    previewHtml += `<div class="preview-content">`;

    if (content) {
        previewHtml += `<div style="font-size: 1.1rem; line-height: 1.8; color: #2c3e50;">${content}</div>`;
    }

    previewHtml += `</div>`;

    if (targetAudience || location || contactPerson || startDate || endDate) {
        previewHtml += `<div class="preview-info">`;

        if (targetAudience) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Target Audiens</div>
                    <div class="preview-info-value">${targetAudience}</div>
                </div>
            `;
        }

        if (location) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Lokasi</div>
                    <div class="preview-info-value">${location}</div>
                </div>
            `;
        }

        if (contactPerson) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Narahubung</div>
                    <div class="preview-info-value">${contactPerson}</div>
                </div>
            `;
        }

        if (startDate) {
            const startDateObj = new Date(startDate);
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Tanggal Mulai</div>
                    <div class="preview-info-value">📅 ${startDateObj.toLocaleString('id-ID')}</div>
                </div>
            `;
        }

        if (endDate) {
            const endDateObj = new Date(endDate);
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Tanggal Berakhir</div>
                    <div class="preview-info-value">📅 ${endDateObj.toLocaleString('id-ID')}</div>
                </div>
            `;
        }

        previewHtml += `</div>`;
    }

    previewHtml += `<div class="preview-status">`;

    if (isActive) {
        previewHtml += `<div class="preview-status-item preview-status-active">✅ Aktif</div>`;
    } else {
        previewHtml += `<div class="preview-status-item preview-status-inactive">⏸️ Tidak Aktif</div>`;
    }

    if (isPinned) {
        previewHtml += `<div class="preview-status-item preview-status-pinned">📌 Dipin</div>`;
    }

    if (isPopup) {
        previewHtml += `<div class="preview-status-item preview-status-popup">🔗 Popup</div>`;
    }

    if (isSummonote) {
        previewHtml += `<div class="preview-status-item preview-status-summonote">⭐ Summonote</div>`;
    }

    previewHtml += `</div></div>`;

    if (!title && !content) {
        previewHtml = `
            <div style="text-align: center; padding: 3rem; color: #6c757d;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">👀</div>
                <h5>Preview akan muncul di sini...</h5>
                <p>Mulai mengetik judul dan isi pengumuman untuk melihat preview</p>
            </div>
        `;
    }

    document.getElementById('previewContent').innerHTML = previewHtml;
}

// Add event listeners for form fields
['id_title', 'id_content', 'id_announcement_type', 'id_priority', 'id_start_date', 'id_end_date', 'id_target_audience', 'id_location', 'id_contact_person'].forEach(fieldId => {
    const element = document.getElementById(fieldId);
    if (element) {
        element.addEventListener('input', updatePreview);
        element.addEventListener('change', updatePreview);
    }
});

// Add event listeners for checkbox fields
['is_active', 'is_pinned', 'is_popup', 'is_summonote'].forEach(fieldName => {
    const element = document.querySelector(`input[name="${fieldName}"]`);
    if (element) {
        element.addEventListener('change', updatePreview);
    }
});

function saveDraft() {
    const title = document.getElementById('id_title')?.value?.trim() || '';

    if (!title) {
        showWarning('Judul pengumuman harus diisi untuk menyimpan draft');
        return;
    }

    const draftBtn = document.querySelector('button[onclick="saveDraft()"]');
    const originalText = draftBtn.innerHTML;
    draftBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan Draft...';
    draftBtn.disabled = true;

    document.getElementById('announcementForm').submit();
}

function previewAnnouncement() {
    const title = document.getElementById('id_title')?.value || '';
    const content = $('#id_content').val() || '';
    const announcementType = document.getElementById('id_announcement_type')?.value || '';
    const priority = document.getElementById('id_priority')?.value || '';
    const startDate = document.getElementById('id_start_date')?.value || '';
    const endDate = document.getElementById('id_end_date')?.value || '';
    const isActive = document.querySelector('input[name="is_active"]')?.checked || false;
    const isPinned = document.querySelector('input[name="is_pinned"]')?.checked || false;
    const isPopup = document.querySelector('input[name="is_popup"]')?.checked || false;
    const isSummonote = document.querySelector('input[name="is_summonote"]')?.checked || false;
    const targetAudience = document.getElementById('id_target_audience')?.value || '';
    const location = document.getElementById('id_location')?.value || '';
    const contactPerson = document.getElementById('id_contact_person')?.value || '';

    if (!title && !content) {
        showWarning('Judul dan isi pengumuman harus diisi untuk preview');
        return;
    }

    let previewHtml = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Preview Pengumuman</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
            <style>
                body {
                    font-family: 'Poppins', sans-serif;
                    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                    margin: 0;
                    padding: 2rem;
                }
                .preview-container {
                    max-width: 900px;
                    margin: 0 auto;
                    background: white;
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                }
                .preview-header {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 3rem;
                    position: relative;
                    overflow: hidden;
                }
                .preview-header::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
                    opacity: 0.3;
                }
                .preview-title {
                    font-size: 2.5rem;
                    font-weight: 700;
                    margin: 0 0 1.5rem 0;
                    position: relative;
                    z-index: 1;
                }
                .preview-meta {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1rem;
                    align-items: center;
                    position: relative;
                    z-index: 1;
                }
                .preview-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem 1.5rem;
                    border-radius: 25px;
                    font-size: 1rem;
                    font-weight: 600;
                    backdrop-filter: blur(10px);
                    background: rgba(255,255,255,0.2);
                    border: 1px solid rgba(255,255,255,0.3);
                }
                .preview-content {
                    padding: 3rem;
                    font-size: 1.2rem;
                    line-height: 1.8;
                    color: #2c3e50;
                }
                .preview-info {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 1.5rem;
                    margin: 2rem 0;
                    padding: 0 3rem;
                }
                .preview-info-item {
                    background: #f8f9fa;
                    padding: 1.5rem;
                    border-radius: 15px;
                    border-left: 5px solid #007bff;
                }
                .preview-info-label {
                    font-size: 0.9rem;
                    color: #6c757d;
                    text-transform: uppercase;
                    font-weight: 600;
                    margin-bottom: 0.75rem;
                }
                .preview-info-value {
                    color: #2c3e50;
                    font-weight: 500;
                    font-size: 1.1rem;
                }
                .preview-status {
                    display: flex;
                    gap: 1rem;
                    flex-wrap: wrap;
                    margin: 2rem 0;
                    padding: 0 3rem;
                }
                .preview-status-item {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem 1.5rem;
                    border-radius: 25px;
                    font-size: 1rem;
                    font-weight: 500;
                }
                .preview-status-active { background: #d4edda; color: #155724; }
                .preview-status-inactive { background: #f8d7da; color: #721c24; }
                .preview-status-pinned { background: #fff3cd; color: #856404; }
                .preview-status-popup { background: #d1ecf1; color: #0c5460; }
                .preview-status-summonote { background: #ffeaa7; color: #d63031; }
            </style>
        </head>
        <body>
            <div class="preview-container">
    `;

    if (title) {
        previewHtml += `
            <div class="preview-header">
                <h1 class="preview-title">${title}</h1>
                <div class="preview-meta">
        `;

        if (announcementType) {
            const typeLabels = {
                'info': '📢 Informasi',
                'warning': '⚠️ Peringatan',
                'urgent': '🚨 Mendesak',
                'schedule': '📅 Jadwal',
                'event': '🎉 Acara',
                'service': '🔧 Layanan'
            };
            previewHtml += `<span class="preview-badge">${typeLabels[announcementType] || announcementType}</span>`;
        }

        if (priority) {
            const priorityLabels = {
                'low': '🟢 Rendah',
                'normal': '🔵 Normal',
                'high': '🟡 Tinggi',
                'urgent': '🔴 Mendesak'
            };
            previewHtml += `<span class="preview-badge">${priorityLabels[priority] || priority}</span>`;
        }

        previewHtml += `</div></div>`;
    }

    if (content) {
        previewHtml += `<div class="preview-content">${content}</div>`;
    }

    if (targetAudience || location || contactPerson || startDate || endDate) {
        previewHtml += `<div class="preview-info">`;

        if (targetAudience) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Target Audiens</div>
                    <div class="preview-info-value">${targetAudience}</div>
                </div>
            `;
        }

        if (location) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Lokasi</div>
                    <div class="preview-info-value">${location}</div>
                </div>
            `;
        }

        if (contactPerson) {
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Narahubung</div>
                    <div class="preview-info-value">${contactPerson}</div>
                </div>
            `;
        }

        if (startDate) {
            const startDateObj = new Date(startDate);
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Tanggal Mulai</div>
                    <div class="preview-info-value">📅 ${startDateObj.toLocaleString('id-ID')}</div>
                </div>
            `;
        }

        if (endDate) {
            const endDateObj = new Date(endDate);
            previewHtml += `
                <div class="preview-info-item">
                    <div class="preview-info-label">Tanggal Berakhir</div>
                    <div class="preview-info-value">📅 ${endDateObj.toLocaleString('id-ID')}</div>
                </div>
            `;
        }

        previewHtml += `</div>`;
    }

    previewHtml += `<div class="preview-status">`;

    if (isActive) {
        previewHtml += `<div class="preview-status-item preview-status-active">✅ Aktif</div>`;
    } else {
        previewHtml += `<div class="preview-status-item preview-status-inactive">⏸️ Tidak Aktif</div>`;
    }

    if (isPinned) {
        previewHtml += `<div class="preview-status-item preview-status-pinned">📌 Dipin</div>`;
    }

    if (isPopup) {
        previewHtml += `<div class="preview-status-item preview-status-popup">🔗 Popup</div>`;
    }

    if (isSummonote) {
        previewHtml += `<div class="preview-status-item preview-status-summonote">⭐ Summonote</div>`;
    }

    previewHtml += `</div></div></body></html>`;

    const previewWindow = window.open('', '_blank', 'width=1200,height=800');
    if (previewWindow) {
        previewWindow.document.write(previewHtml);
        previewWindow.document.close();
    } else {
        showWarning('Tidak dapat membuka jendela preview. Pastikan popup blocker dinonaktifkan.');
    }
}

document.getElementById('announcementForm').addEventListener('submit', function(e) {
    const title = document.getElementById('id_title')?.value?.trim() || '';
        const content = $('#id_content').val()?.replace(/<[^>]*>/g, '').trim() || '';
    const startDate = document.getElementById('id_start_date')?.value || '';
    const endDate = document.getElementById('id_end_date')?.value || '';

    if (!title) {
        showWarning('Judul pengumuman harus diisi');
        e.preventDefault();
        return;
    }

    if (!content) {
        showWarning('Isi pengumuman harus diisi');
        e.preventDefault();
        return;
    }

    if (!startDate) {
        showWarning('Tanggal mulai harus diisi');
        e.preventDefault();
        return;
    }

    if (endDate && startDate) {
        const start = new Date(startDate);
        const end = new Date(endDate);
        if (end <= start) {
            showWarning('Tanggal akhir harus lebih besar dari tanggal mulai');
            e.preventDefault();
            return;
        }
    }

    const submitBtn = document.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
    submitBtn.disabled = true;

    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 5000);
});

document.addEventListener('DOMContentLoaded', function() {
    const now = new Date();
    const startDateInput = document.getElementById('id_start_date');
    if (startDateInput && !startDateInput.value) {
        startDateInput.value = now.toISOString().slice(0, 16);
    }

    // Delay updatePreview to ensure all elements are loaded
    setTimeout(updatePreview, 100);
});
</script>
{% endblock %}