{% extends "admin/base.html" %}

{% block title %}{% if is_edit %}Edit{% else %}Tambah{% endif %} Announcement HMI{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                {% if is_edit %}Edit{% else %}Tambah{% endif %} Announcement HMI
            </h1>
            <p class="text-gray-600 mt-1">
                {% if is_edit %}Perbarui informasi announcement{% else %}Tambahkan announcement baru{% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:announcement' %}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Informasi Announcement</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">Title <span class="text-red-500">*</span></label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                   id="title" name="title" value="{% if announcement %}{{ announcement.title }}{% endif %}" required>
                        </div>

                        <div class="mb-4">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description <span class="text-red-500">*</span></label>
                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                      id="description" name="description" rows="4" required>{% if announcement %}{{ announcement.description }}{% endif %}</textarea>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="icon" class="block text-sm font-medium text-gray-700 mb-2">Icon</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="icon" name="icon" value="{% if announcement %}{{ announcement.icon }}{% else %}fas fa-bullhorn{% endif %}"
                                       placeholder="fas fa-bullhorn">
                                <p class="text-sm text-gray-500 mt-1">Gunakan class FontAwesome (contoh: fas fa-bullhorn)</p>
                            </div>
                            <div>
                                <label for="icon_color" class="block text-sm font-medium text-gray-700 mb-2">Icon Color</label>
                                <input type="color" class="w-full h-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="icon_color" name="icon_color" value="{% if announcement %}{{ announcement.icon_color }}{% else %}#f59e0b{% endif %}">
                                <p class="text-sm text-gray-500 mt-1">Pilih warna untuk icon</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="link_url" class="block text-sm font-medium text-gray-700 mb-2">Link URL</label>
                                <input type="url" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="link_url" name="link_url" value="{% if announcement %}{{ announcement.link_url }}{% endif %}"
                                       placeholder="https://example.com">
                            </div>
                            <div>
                                <label for="link_text" class="block text-sm font-medium text-gray-700 mb-2">Link Text</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="link_text" name="link_text" value="{% if announcement %}{{ announcement.link_text }}{% else %}Lihat Detail{% endif %}"
                                       placeholder="Lihat Detail">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                            <div>
                                <label for="order" class="block text-sm font-medium text-gray-700 mb-2">Order</label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                                       id="order" name="order" value="{% if announcement %}{{ announcement.order }}{% else %}0{% endif %}" min="0">
                            </div>
                            <div class="flex items-center">
                                <div class="mt-6">
                                    <div class="flex items-center">
                                        <input class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" type="checkbox" id="is_active" name="is_active" 
                                               {% if not announcement or announcement.is_active %}checked{% endif %}>
                                        <label class="ml-2 text-sm text-gray-700" for="is_active">Aktif</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-save mr-2"></i>
                                {% if is_edit %}Perbarui{% else %}Simpan{% endif %}
                            </button>
                            <a href="{% url 'admin_panel:tentang_hmi:announcement' %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                <i class="fas fa-times mr-2"></i>Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Preview Announcement</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <div class="border rounded-lg p-4">
                        <div class="flex items-start">
                            <div id="icon-preview" class="flex-shrink-0 mr-3">
                                <i class="{% if announcement %}{{ announcement.icon }}{% else %}fas fa-bullhorn{% endif %} text-2xl" 
                                   style="color: {% if announcement %}{{ announcement.icon_color }}{% else %}#f59e0b{% endif %}"></i>
                            </div>
                            <div class="flex-1">
                                <div id="title-preview" class="text-lg font-semibold text-gray-900 mb-2">
                                    {% if announcement %}{{ announcement.title }}{% else %}Title Announcement{% endif %}
                                </div>
                                <div id="description-preview" class="text-sm text-gray-600 mb-3">
                                    {% if announcement %}{{ announcement.description|truncatechars:150 }}{% else %}Description announcement akan ditampilkan di sini...{% endif %}
                                </div>
                                {% if announcement and announcement.link_url %}
                                    <a href="{{ announcement.link_url }}" target="_blank" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800">
                                        <span id="link-text-preview">{{ announcement.link_text }}</span>
                                        <i class="fas fa-external-link-alt ml-1"></i>
                                    </a>
                                {% else %}
                                    <div id="link-preview" class="text-sm text-gray-400">
                                        {% if announcement and announcement.link_url %}{{ announcement.link_text }}{% else %}Link akan ditampilkan jika ada{% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm">
                <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                    <h6 class="text-lg font-semibold text-gray-900">Tips</h6>
                </div>
                <div class="p-4 sm:p-6">
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Gunakan title yang menarik perhatian</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Description harus informatif dan jelas</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Icon dan warna harus sesuai tema</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1"></i>
                            <span class="text-sm text-gray-700">Link URL harus valid jika ada</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const iconInput = document.getElementById('icon');
    const iconColorInput = document.getElementById('icon_color');
    const titleInput = document.getElementById('title');
    const descriptionInput = document.getElementById('description');
    const linkUrlInput = document.getElementById('link_url');
    const linkTextInput = document.getElementById('link_text');
    
    const iconPreview = document.getElementById('icon-preview');
    const titlePreview = document.getElementById('title-preview');
    const descriptionPreview = document.getElementById('description-preview');
    const linkPreview = document.getElementById('link-preview');
    const linkTextPreview = document.getElementById('link-text-preview');
    
    function updatePreview() {
        const iconClass = iconInput.value || 'fas fa-bullhorn';
        const iconColor = iconColorInput.value || '#f59e0b';
        const title = titleInput.value || 'Title Announcement';
        const description = descriptionInput.value || 'Description announcement akan ditampilkan di sini...';
        const linkUrl = linkUrlInput.value;
        const linkText = linkTextInput.value || 'Lihat Detail';
        
        iconPreview.innerHTML = `<i class="${iconClass} text-2xl" style="color: ${iconColor}"></i>`;
        titlePreview.textContent = title;
        descriptionPreview.textContent = description.length > 150 ? description.substring(0, 150) + '...' : description;
        
        if (linkUrl) {
            linkPreview.innerHTML = `<a href="${linkUrl}" target="_blank" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800">
                <span>${linkText}</span>
                <i class="fas fa-external-link-alt ml-1"></i>
            </a>`;
        } else {
            linkPreview.textContent = 'Link akan ditampilkan jika ada';
        }
    }
    
    iconInput.addEventListener('input', updatePreview);
    iconColorInput.addEventListener('input', updatePreview);
    titleInput.addEventListener('input', updatePreview);
    descriptionInput.addEventListener('input', updatePreview);
    linkUrlInput.addEventListener('input', updatePreview);
    linkTextInput.addEventListener('input', updatePreview);
});
</script>
{% endblock %}