{% extends 'base.html' %}
{% load humanize %}
{% block title %}Hariri Mchango - {{ group.name }}{% endblock %}

{% block content %}
<style>
    .edit-container {
        min-height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }
    
    .edit-card {
        background: var(--white);
        max-width: 600px;
        width: 100%;
        padding: 2rem;
        border-radius: 1.5rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    
    .edit-card h2 {
        color: var(--primary);
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
    }
    
    .form-group {
        margin-bottom: 1.2rem;
    }
    
    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--secondary);
    }
    
    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        padding: 0.8rem 1rem;
        border: 2px solid var(--light-gray);
        border-radius: 0.75rem;
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
    }
    
    .form-group input:focus, .form-group select:focus {
        outline: none;
        border-color: var(--primary);
    }
    
    .form-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.2rem;
    }
    
    .form-row .form-group {
        flex: 1;
        margin-bottom: 0;
    }
    
    .btn-save {
        width: 100%;
        background: var(--primary);
        color: var(--white);
        padding: 0.8rem;
        font-weight: 700;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
    }
    
    .btn-save:hover {
        background: var(--primary-dark);
    }
    
    .btn-cancel {
        width: 100%;
        background: var(--gray);
        color: var(--white);
        padding: 0.8rem;
        font-weight: 700;
        border-radius: 0.75rem;
        text-align: center;
        display: block;
        text-decoration: none;
        margin-top: 0.5rem;
    }
    
    .btn-cancel:hover {
        background: #5a6268;
    }
    
    .warning-box {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 0.8rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        font-size: 0.85rem;
    }
    
    .info-box {
        background: #e3f2fd;
        padding: 0.8rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        font-size: 0.85rem;
    }
</style>

<div class="edit-container">
    <div class="edit-card">
        <h2><i class="fas fa-edit"></i> Hariri Mchango</h2>
        <p>Mwanachama: <strong>{{ contribution.member.full_name }}</strong></p>
        
        {% if is_batch %}
        <div class="warning-box">
            <i class="fas fa-exclamation-triangle" style="color: #856404;"></i>
            <strong>⚠️ ONYO:</strong> Mchango huu umegawiwa kwa miezi {{ contribution.allocations.count }}.
            Kubadilisha kiasi au kipindi kita rekebisha mgawanyo wote.
        </div>
        {% endif %}
        
        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <strong>Mwongozo:</strong> Mwanachama akilipa kiasi kikubwa (mfano Tsh 60,000 kwa miezi 6),
            weka mwezi wa kuanza na mwezi wa kuishia. Mfumo utagawanya otomatiki.
        </div>
        
        <form method="POST">
            {% csrf_token %}
            
            <div class="form-group">
                <label>Kiasi (Tsh)</label>
                <input type="text" name="amount" value="{{ form.amount.value|default:contribution.amount }}" class="form-control" id="id_amount" placeholder="K.m. 60000">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Anza Mwezi</label>
                    {{ form.period_from_month }}
                </div>
                <div class="form-group">
                    <label>Anza Mwaka</label>
                    {{ form.period_from_year }}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Ishia Mwezi</label>
                    {{ form.period_to_month }}
                </div>
                <div class="form-group">
                    <label>Ishia Mwaka</label>
                    {{ form.period_to_year }}
                </div>
            </div>
            
            <div class="form-group">
                <label>Reference Number</label>
                {{ form.reference_number }}
            </div>
            
            <div class="form-group">
                <label>Tarehe ya malipo</label>
                {{ form.payment_date }}
            </div>
            
            <div class="form-group">
                <label>Maelezo</label>
                {{ form.notes }}
            </div>
            
            <button type="submit" class="btn-save">
                <i class="fas fa-save"></i> Hifadhi Mabadiliko
            </button>
        </form>
        
        <a href="{% url 'group_detail' group.id %}" class="btn-cancel">
            <i class="fas fa-times"></i> Ghairi
        </a>
    </div>
</div>

<script>
// Remove any non-numeric characters as user types
const amountInput = document.getElementById('id_amount');
if (amountInput) {
    amountInput.addEventListener('input', function(e) {
        this.value = this.value.replace(/[^0-9]/g, '');
    });
}

// Preview monthly amount
const fromMonth = document.querySelector('[name="period_from_month"]');
const fromYear = document.querySelector('[name="period_from_year"]');
const toMonth = document.querySelector('[name="period_to_month"]');
const toYear = document.querySelector('[name="period_to_year"]');

function calculateMonths() {
    const amount = parseFloat(amountInput?.value || 0);
    const fm = parseInt(fromMonth?.value || 0);
    const fy = parseInt(fromYear?.value || 0);
    const tm = parseInt(toMonth?.value || 0);
    const ty = parseInt(toYear?.value || 0);
    
    if (amount && fm && fy && tm && ty) {
        const months = (ty - fy) * 12 + (tm - fm) + 1;
        if (months > 0) {
            const monthly = amount / months;
            console.log(`Miezi: ${months}, Kiasi cha mwezi: Tsh ${monthly.toLocaleString()}`);
        }
    }
}

if (amountInput) amountInput.addEventListener('input', calculateMonths);
if (fromMonth) fromMonth.addEventListener('change', calculateMonths);
if (fromYear) fromYear.addEventListener('change', calculateMonths);
if (toMonth) toMonth.addEventListener('change', calculateMonths);
if (toYear) toYear.addEventListener('change', calculateMonths);
</script>
{% endblock %}