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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/beneficiaries/beneficiaries-form.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 #667eea;
}

.form-section h5 i {
    color: #667eea;
    margin-right: 0.5rem;
}

.required-field::after {
    content: " *";
    color: red;
}

.form-control, .form-select {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
}

.btn-primary:hover {
    background-color: #5568d3;
    border-color: #5568d3;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}
</style>
{% endblock %}


{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">
                    <i class="fas fa-gift me-2"></i>
                    {{ title }}
                </h2>
                <div>
                    <a href="{% url 'admin_panel:beneficiaries_aid_programs' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Kembali
                    </a>
                </div>
            </div>

            <form method="post" id="aidProgramForm">
                {% csrf_token %}
                
                <!-- Informasi Dasar -->
                <div class="form-section">
                    <h5><i class="fas fa-gift"></i> Informasi Dasar Program</h5>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label required-field">{{ form.name.label }}</label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">{{ form.name.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Contoh: Bantuan Langsung Tunai, Program Keluarga Harapan</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.aid_type.id_for_label }}" class="form-label required-field">{{ form.aid_type.label }}</label>
                                {{ form.aid_type }}
                                {% if form.aid_type.errors %}
                                    <div class="invalid-feedback d-block">{{ form.aid_type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.source.id_for_label }}" class="form-label required-field">{{ form.source.label }}</label>
                                {{ form.source }}
                                {% if form.source.errors %}
                                    <div class="invalid-feedback d-block">{{ form.source.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <div class="form-check form-switch mt-4">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        <strong>{{ form.is_active.label }}</strong>
                                    </label>
                                </div>
                                {% if form.is_active.errors %}
                                    <div class="invalid-feedback d-block">{{ form.is_active.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted d-block">Program aktif dapat menerima penerima baru</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="form-group mb-3">
                                <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                    <div class="invalid-feedback d-block">{{ form.description.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Jelaskan detail program bantuan, tujuan, dan manfaat untuk penerima</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Anggaran & Target -->
                <div class="form-section">
                    <h5><i class="fas fa-money-bill-wave"></i> Anggaran & Target Penerima</h5>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="{{ form.value_per_beneficiary.id_for_label }}" class="form-label required-field">{{ form.value_per_beneficiary.label }}</label>
                                {{ form.value_per_beneficiary }}
                                {% if form.value_per_beneficiary.errors %}
                                    <div class="invalid-feedback d-block">{{ form.value_per_beneficiary.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Bantuan per penerima dalam Rupiah</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="{{ form.target_beneficiaries.id_for_label }}" class="form-label required-field">{{ form.target_beneficiaries.label }}</label>
                                {{ form.target_beneficiaries }}
                                {% if form.target_beneficiaries.errors %}
                                    <div class="invalid-feedback d-block">{{ form.target_beneficiaries.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Jumlah target penerima bantuan</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="{{ form.total_budget.id_for_label }}" class="form-label required-field">{{ form.total_budget.label }}</label>
                                {{ form.total_budget }}
                                {% if form.total_budget.errors %}
                                    <div class="invalid-feedback d-block">{{ form.total_budget.errors.0 }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Otomatis dihitung dari nilai × target</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Periode Program -->
                <div class="form-section">
                    <h5><i class="fas fa-calendar-alt"></i> Periode Program</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">{{ form.start_date.label }}</label>
                                {{ form.start_date }}
                                {% if form.start_date.errors %}
                                    <div class="invalid-feedback d-block">{{ form.start_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.end_date.id_for_label }}" class="form-label required-field">{{ form.end_date.label }}</label>
                                {{ form.end_date }}
                                {% if form.end_date.errors %}
                                    <div class="invalid-feedback d-block">{{ form.end_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Persyaratan -->
                <div class="form-section">
                    <h5><i class="fas fa-clipboard-list"></i> Persyaratan Penerima</h5>
                    
                    <div class="form-group mb-3">
                        <label for="{{ form.requirements.id_for_label }}" class="form-label">{{ form.requirements.label }}</label>
                        {{ form.requirements }}
                        {% if form.requirements.errors %}
                            <div class="invalid-feedback d-block">{{ form.requirements.errors.0 }}</div>
                        {% endif %}
                        <small class="form-text text-muted">Tuliskan syarat yang harus dipenuhi calon penerima bantuan</small>
                    </div>
                </div>

                <!-- Tombol Aksi -->
                <div class="form-section">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{% url 'admin_panel:beneficiaries_aid_programs' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>Batal
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i>
                            {% if aid_program %}Update Program{% else %}Simpan Program{% endif %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ form.media }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto calculate total budget
    const valueInput = document.getElementById('{{ form.value_per_beneficiary.id_for_label }}');
    const targetInput = document.getElementById('{{ form.target_beneficiaries.id_for_label }}');
    const totalInput = document.getElementById('{{ form.total_budget.id_for_label }}');
    
    function calculateTotal() {
        const value = parseFloat(valueInput.value) || 0;
        const target = parseFloat(targetInput.value) || 0;
        totalInput.value = value * target;
    }
    
    if (valueInput && targetInput && totalInput) {
        valueInput.addEventListener('input', calculateTotal);
        targetInput.addEventListener('input', calculateTotal);
        
        // Calculate on page load if editing
        calculateTotal();
    }
});
</script>
{% endblock %}