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

{% block title %}
{% if form.instance.pk %}Edit Budget Allocation{% else %}Create Budget Allocation{% endif %} - Optinet Global Links
{% endblock %}

{% block extra_css %}
<style>
.form-section {
    background: white;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.form-section-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e3e6f0;
}

.form-section-header h5 {
    margin: 0;
    font-weight: 600;
}

.allocation-info {
    background: #f8f9fc;
    border-left: 4px solid #4e73df;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="bi bi-wallet2"></i>
                    {% if form.instance.pk %}Edit Budget Allocation{% else %}Create Budget Allocation{% endif %}
                </h1>
                <a href="{% url 'expenditure:budget_allocation_list' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Allocations
                </a>
            </div>

            <!-- Allocation Info -->
            <div class="allocation-info">
                <h6 class="mb-1"><i class="bi bi-info-circle"></i> Budget Allocation Information</h6>
                <p class="mb-0 text-muted">
                    Budget allocations allow you to pre-approve spending limits for employees in specific categories. 
                    This helps control expenses and provides employees with clear spending guidelines.
                </p>
            </div>

            <!-- Form -->
            <div class="form-section">
                <div class="form-section-header">
                    <h5 class="mb-0">
                        <i class="bi bi-person-check"></i> Allocation Details
                    </h5>
                </div>
                <div class="p-4">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.employee.id_for_label }}" class="form-label">Employee *</label>
                                {{ form.employee }}
                                {% if form.employee.errors %}
                                    <div class="text-danger">{{ form.employee.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.category.id_for_label }}" class="form-label">Category *</label>
                                {{ form.category }}
                                {% if form.category.errors %}
                                    <div class="text-danger">{{ form.category.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.allocated_amount.id_for_label }}" class="form-label">Allocated Amount (KSh) *</label>
                                {{ form.allocated_amount }}
                                {% if form.allocated_amount.errors %}
                                    <div class="text-danger">{{ form.allocated_amount.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.allocation_period.id_for_label }}" class="form-label">Allocation Period *</label>
                                {{ form.allocation_period }}
                                {% if form.allocation_period.errors %}
                                    <div class="text-danger">{{ form.allocation_period.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date *</label>
                                {{ form.start_date }}
                                {% if form.start_date.errors %}
                                    <div class="text-danger">{{ form.start_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.end_date.id_for_label }}" class="form-label">End Date *</label>
                                {{ form.end_date }}
                                {% if form.end_date.errors %}
                                    <div class="text-danger">{{ form.end_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                            {{ form.notes }}
                            {% if form.notes.errors %}
                                <div class="text-danger">{{ form.notes.errors.0 }}</div>
                            {% endif %}
                            <small class="form-text text-muted">
                                Optional notes about this budget allocation
                            </small>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{% url 'expenditure:budget_allocation_list' %}" class="btn btn-outline-secondary">
                                        <i class="bi bi-x-circle"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle"></i>
                                        {% if form.instance.pk %}Update Allocation{% else %}Create Allocation{% endif %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-calculate end date based on allocation period and start date
    const periodSelect = document.getElementById('{{ form.allocation_period.id_for_label }}');
    const startDateInput = document.getElementById('{{ form.start_date.id_for_label }}');
    const endDateInput = document.getElementById('{{ form.end_date.id_for_label }}');
    
    function calculateEndDate() {
        const startDate = new Date(startDateInput.value);
        const period = periodSelect.value;
        
        if (startDate && period) {
            let endDate = new Date(startDate);
            
            switch(period) {
                case 'monthly':
                    endDate.setMonth(endDate.getMonth() + 1);
                    endDate.setDate(endDate.getDate() - 1);
                    break;
                case 'quarterly':
                    endDate.setMonth(endDate.getMonth() + 3);
                    endDate.setDate(endDate.getDate() - 1);
                    break;
                case 'yearly':
                    endDate.setFullYear(endDate.getFullYear() + 1);
                    endDate.setDate(endDate.getDate() - 1);
                    break;
            }
            
            // Format date as YYYY-MM-DD for the input
            const formattedDate = endDate.toISOString().split('T')[0];
            endDateInput.value = formattedDate;
        }
    }
    
    if (periodSelect && startDateInput && endDateInput) {
        periodSelect.addEventListener('change', calculateEndDate);
        startDateInput.addEventListener('change', calculateEndDate);
    }
    
    // Validate that end date is after start date
    function validateDates() {
        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);
        
        if (startDate && endDate && endDate <= startDate) {
            endDateInput.setCustomValidity('End date must be after start date');
        } else {
            endDateInput.setCustomValidity('');
        }
    }
    
    if (startDateInput && endDateInput) {
        startDateInput.addEventListener('change', validateDates);
        endDateInput.addEventListener('change', validateDates);
    }
});
</script>
{% endblock %}