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

{% block content %}
<style>
    .record-container {
        min-height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }
    
    .record-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);
    }
    
    .record-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;
    }
    
    .submit-btn {
        width: 100%;
        background: var(--primary);
        color: var(--white);
        padding: 0.8rem;
        font-weight: 700;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
    }
    
    .submit-btn:hover {
        background: var(--primary-dark);
    }
    
    .amount-hint {
        font-size: 0.7rem;
        color: var(--gray);
        margin-top: 0.25rem;
    }
    
    .info-box {
        background: #e3f2fd;
        padding: 0.8rem;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.85rem;
    }
</style>

<div class="record-container">
    <div class="record-card">
        <h2><i class="fas fa-receipt"></i> Rekodi Mchango</h2>
        <p>Kikundi: <strong>{{ group.name }}</strong></p>
        
        <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>Mwanachama</label>
                {{ form.member }}
            </div>
            
            <div class="form-group">
                <label>Kiasi (Tsh)</label>
                <input type="text" name="amount" id="id_amount" class="form-control" placeholder="K.m. 60000" autocomplete="off">
                <div class="amount-hint">Kiasi cha jumla anacholipa</div>
            </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 (hiari)</label>
                {{ form.notes }}
            </div>
            
            <button type="submit" class="submit-btn">
                <i class="fas fa-save"></i> Hifadhi Mchango
            </button>
        </form>
    </div>
</div>

<script>
    const amountInput = document.getElementById('id_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 removeNonNumeric(e) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
    
    function calculateAndPreview() {
        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;
                if (monthly >= 1000) {
                    console.log(`Miezi: ${months}, Kiasi cha mwezi: Tsh ${monthly.toLocaleString()}`);
                }
            }
        }
    }
    
    if (amountInput) {
        amountInput.addEventListener('input', removeNonNumeric);
        amountInput.addEventListener('input', calculateAndPreview);
    }
    if (fromMonth) fromMonth.addEventListener('change', calculateAndPreview);
    if (fromYear) fromYear.addEventListener('change', calculateAndPreview);
    if (toMonth) toMonth.addEventListener('change', calculateAndPreview);
    if (toYear) toYear.addEventListener('change', calculateAndPreview);
</script>
{% endblock %}