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

{% block title %}{{ title }} - Admin Panel{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block extra_css %}
{{ form.media.css }}
<style>
    .file-upload-area {
        border: 2px dashed #cbd5e1;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .file-upload-area:hover {
        border-color: #3b82f6;
        background-color: #f8fafc;
    }
    
    .file-upload-area.dragover {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }
    
    .preview-image {
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between">
        <div class="flex-1 min-w-0">
            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                <i class="fas fa-calendar-alt mr-2 text-green-600"></i>
                {{ title }}
            </h2>
            <p class="mt-1 text-sm text-gray-500">
                {% if action == 'create' %}Buat kegiatan baru{% else %}Edit kegiatan yang sudah ada{% endif %}
            </p>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
            <a href="#" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 action-button">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali
            </a>
        </div>
    </div>
    
    <!-- Form -->
    <form method="POST" enctype="multipart/form-data" class="space-y-6">
        {% csrf_token %}
        
        <!-- Informasi Dasar -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-info-circle text-green-500 mr-3"></i>
                Informasi Dasar
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="{{ form.judul.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-heading text-green-500 mr-2"></i>
                        Judul Kegiatan *
                    </label>
                    <input type="text" 
                           name="judul" 
                           id="{{ form.judul.id_for_label }}" 
                           value="{{ form.judul.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                           placeholder="Masukkan judul kegiatan">
                    {% if form.judul.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.judul.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div class="md:col-span-2">
                    <label for="{{ form.deskripsi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                        Deskripsi Kegiatan *
                    </label>
                    {{ form.deskripsi }}
                    {% if form.deskripsi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.deskripsi.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Lokasi & Waktu -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-map-marker-alt text-red-500 mr-3"></i>
                Lokasi & Waktu
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.lokasi.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-building text-red-500 mr-2"></i>
                        Lokasi *
                    </label>
                    <input type="text" 
                           name="lokasi" 
                           id="{{ form.lokasi.id_for_label }}" 
                           value="{{ form.lokasi.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
                           placeholder="Masukkan lokasi kegiatan">
                    {% if form.lokasi.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.lokasi.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tanggal_mulai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar text-green-500 mr-2"></i>
                        Tanggal Mulai *
                    </label>
                    <input type="datetime-local" 
                           name="tanggal_mulai" 
                           id="{{ form.tanggal_mulai.id_for_label }}" 
                           value="{{ form.tanggal_mulai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors">
                    {% if form.tanggal_mulai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tanggal_mulai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.tanggal_selesai.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar text-green-500 mr-2"></i>
                        Tanggal Selesai *
                    </label>
                    <input type="datetime-local" 
                           name="tanggal_selesai" 
                           id="{{ form.tanggal_selesai.id_for_label }}" 
                           value="{{ form.tanggal_selesai.value|default:'' }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors">
                    {% if form.tanggal_selesai.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.tanggal_selesai.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Media & Status -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-200 pb-3">
                <i class="fas fa-images text-purple-500 mr-3"></i>
                Media & Status
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="{{ form.gambar.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-image text-purple-500 mr-2"></i>
                        Gambar Kegiatan
                    </label>
                    <div class="file-upload-area" onclick="document.getElementById('id_gambar').click()">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                        <p class="text-lg font-medium text-gray-700 mb-2">Klik untuk upload gambar</p>
                        <p class="text-sm text-gray-500">JPG, PNG, GIF (Max 10MB)</p>
                        <input type="file" 
                               name="gambar" 
                               id="id_gambar" 
                               accept="image/*"
                               class="hidden">
                    </div>
                    {% if form.gambar.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.gambar.errors.0 }}
                        </p>
                    {% endif %}
                    {% if action == 'edit' and kegiatan.gambar %}
                        <div class="mt-4">
                            <img src="{{ kegiatan.gambar.url }}" alt="Current image" class="preview-image">
                            <p class="text-xs text-gray-500 mt-1">Gambar saat ini</p>
                        </div>
                    {% endif %}
                </div>
                
                <div>
                    <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-flag text-blue-500 mr-2"></i>
                        Status Kegiatan *
                    </label>
                    <select name="status" 
                            id="{{ form.status.id_for_label }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">Pilih Status</option>
                        <option value="draft" {% if form.status.value == 'draft' %}selected{% endif %}>Draft</option>
                        <option value="published" {% if form.status.value == 'published' %}selected{% endif %}>Published</option>
                        <option value="completed" {% if form.status.value == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if form.status.value == 'cancelled' %}selected{% endif %}>Cancelled</option>
                    </select>
                    {% if form.status.errors %}
                        <p class="mt-2 text-sm text-red-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            {{ form.status.errors.0 }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
            <div class="flex flex-col sm:flex-row items-center justify-end space-y-3 sm:space-y-0 sm:space-x-4">
                <a href="#" 
                   class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 action-button transition-all duration-200">
                    <i class="fas fa-times mr-2"></i>
                    Batal
                </a>
                <button type="submit" 
                        class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 action-button transition-all duration-200">
                    <i class="fas fa-save mr-2"></i>
                    {% if action == 'create' %}Simpan Kegiatan{% else %}Update Kegiatan{% endif %}
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // File upload preview
    const fileInput = document.getElementById('id_gambar');
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const uploadArea = this.closest('.file-upload-area');
                if (uploadArea) {
                    const text = uploadArea.querySelector('p');
                    if (text) {
                        text.textContent = `File dipilih: ${file.name}`;
                    }
                }
            }
        });
    }
    
    // Form validation
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('border-red-500');
                    isValid = false;
                } else {
                    field.classList.remove('border-red-500');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Mohon lengkapi semua field yang wajib diisi!');
            }
        });
    }
});
</script>
{{ form.media.js }}
{% endblock %}