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

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    .form-card {
        background: white;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .form-header {
        background: linear-gradient(135deg, #16a34a, #15803d);
        color: white;
        padding: 20px;
        border-radius: 8px 8px 0 0;
    }
    .form-body {
        padding: 30px;
    }
    .icon-preview {
        width: 80px;
        height: 80px;
        background: #f0f9ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #16a34a;
        margin: 0 auto 20px;
        border: 2px solid #e5e7eb;
    }
    .stat-preview {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        margin-top: 15px;
    }
    .stat-number {
        font-size: 3rem;
        font-weight: bold;
        color: #16a34a;
        margin-bottom: 10px;
    }
    .icon-options {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 10px;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 15px;
        background: #f8f9fa;
    }
    .icon-option {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        background: white;
    }
    .icon-option:hover {
        border-color: #16a34a;
        background: #f0f9ff;
    }
    .icon-option.selected {
        border-color: #16a34a;
        background: #dcfce7;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="form-card">
                <div class="form-header">
                    <h3 class="mb-0">
                        <i class="fas fa-trophy mr-2"></i>
                        {{ title }}
                    </h3>
                </div>
                <div class="form-body">
                    <form method="post" id="achievementForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-8">
                                <!-- Informasi Dasar -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="mb-0">Informasi Dasar</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="id_title">Judul Prestasi *</label>
                                            <input type="text" class="form-control" id="id_title" name="title" 
                                                   value="{{ form.title.value|default:'' }}" required>
                                            <small class="form-text text-muted">Contoh: Penghargaan Nasional, Anggota Aktif, dll</small>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="id_description">Deskripsi</label>
                                            <textarea class="form-control" id="id_description" name="description" rows="3" 
                                                      placeholder="Deskripsi singkat tentang prestasi ini">{{ form.description.value|default:'' }}</textarea>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="id_count">Jumlah *</label>
                                                    <input type="number" class="form-control" id="id_count" name="count" 
                                                           value="{{ form.count.value|default:0 }}" min="0" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="id_suffix">Suffix</label>
                                                    <input type="text" class="form-control" id="id_suffix" name="suffix" 
                                                           value="{{ form.suffix.value|default:'+' }}" placeholder="+, %, dll">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Pengaturan -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="mb-0">Pengaturan</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="id_order">Urutan Tampil</label>
                                                    <input type="number" class="form-control" id="id_order" name="order" 
                                                           value="{{ form.order.value|default:0 }}" min="0">
                                                    <small class="form-text text-muted">Semakin kecil, semakin atas</small>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <div class="form-check mt-4">
                                                        <input type="checkbox" class="form-check-input" id="id_is_active" name="is_active" 
                                                               {% if form.is_active.value %}checked{% endif %}>
                                                        <label class="form-check-label" for="id_is_active">
                                                            Tampilkan di Website
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <!-- Preview -->
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0">Preview</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        <div class="icon-preview" id="iconPreview">
                                            <i class="fas fa-trophy"></i>
                                        </div>
                                        <h4 id="titlePreview">Judul Prestasi</h4>
                                        <div class="stat-preview">
                                            <div class="stat-number" id="statPreview">0+</div>
                                            <p class="text-muted mb-0" id="descriptionPreview">Deskripsi prestasi</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Pilih Icon -->
                                <div class="card mt-4">
                                    <div class="card-header">
                                        <h5 class="mb-0">Pilih Icon</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="icon-options" id="iconOptions">
                                            <div class="icon-option" data-icon="fas fa-trophy">
                                                <i class="fas fa-trophy"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-medal">
                                                <i class="fas fa-medal"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-award">
                                                <i class="fas fa-award"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-star">
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-users">
                                                <i class="fas fa-users"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-calendar-check">
                                                <i class="fas fa-calendar-check"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-graduation-cap">
                                                <i class="fas fa-graduation-cap"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-university">
                                                <i class="fas fa-university"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-handshake">
                                                <i class="fas fa-handshake"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-heart">
                                                <i class="fas fa-heart"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-book">
                                                <i class="fas fa-book"></i>
                                            </div>
                                            <div class="icon-option" data-icon="fas fa-lightbulb">
                                                <i class="fas fa-lightbulb"></i>
                                            </div>
                                        </div>
                                        <input type="hidden" id="selectedIcon" name="icon" value="{{ form.icon.value|default:'fas fa-trophy' }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save mr-2"></i>
                                Simpan Prestasi
                            </button>
                            <a href="{% url 'admin_panel:achievement_list' %}" class="btn btn-secondary btn-lg ml-2">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('id_title');
    const descriptionInput = document.getElementById('id_description');
    const countInput = document.getElementById('id_count');
    const suffixInput = document.getElementById('id_suffix');
    const iconInput = document.getElementById('selectedIcon');
    
    const titlePreview = document.getElementById('titlePreview');
    const descriptionPreview = document.getElementById('descriptionPreview');
    const statPreview = document.getElementById('statPreview');
    const iconPreview = document.getElementById('iconPreview');
    
    // Update preview when inputs change
    function updatePreview() {
        titlePreview.textContent = titleInput.value || 'Judul Prestasi';
        descriptionPreview.textContent = descriptionInput.value || 'Deskripsi prestasi';
        statPreview.textContent = (countInput.value || '0') + (suffixInput.value || '+');
    }
    
    titleInput.addEventListener('input', updatePreview);
    descriptionInput.addEventListener('input', updatePreview);
    countInput.addEventListener('input', updatePreview);
    suffixInput.addEventListener('input', updatePreview);
    
    // Icon selection
    const iconOptions = document.querySelectorAll('.icon-option');
    iconOptions.forEach(option => {
        option.addEventListener('click', function() {
            // Remove selected class from all options
            iconOptions.forEach(opt => opt.classList.remove('selected'));
            // Add selected class to clicked option
            this.classList.add('selected');
            // Update hidden input and preview
            const iconClass = this.dataset.icon;
            iconInput.value = iconClass;
            iconPreview.innerHTML = `<i class="${iconClass}"></i>`;
        });
    });
    
    // Set initial selected icon
    const initialIcon = iconInput.value;
    const initialOption = document.querySelector(`[data-icon="${initialIcon}"]`);
    if (initialOption) {
        initialOption.classList.add('selected');
        iconPreview.innerHTML = `<i class="${initialIcon}"></i>`;
    }
    
    // Form validation
    const form = document.getElementById('achievementForm');
    form.addEventListener('submit', function(e) {
        const requiredFields = ['title', 'count'];
        let isValid = true;
        
        requiredFields.forEach(fieldName => {
            const field = document.getElementById('id_' + fieldName);
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi.');
        }
    });
    
    // Initial preview update
    updatePreview();
});
</script>
{% endblock %}