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

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container {
        width: 100% !important;
    }
    .new-category-section {
        margin-top: 10px;
        display: none;
    }
    .select2-container--default .select2-selection--single {
        height: 38px;
        padding: 5px 10px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
    .expense-form-card {
        max-width: 600px;
        margin: 2rem auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="card expense-form-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            {% if form.instance.id %}
                <i class="fas fa-edit me-2"></i>Edit Expense #{{ form.instance.reference }}
            {% else %}
                <i class="fas fa-plus-circle me-2"></i>Add New Expense
            {% endif %}
        </h5>
        <a href="{% url 'expenses:expense_list' %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> Back to List
        </a>
    </div>
    
    <!-- Display messages -->
    {% if messages %}
    <div class="messages-container">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show m-3" role="alert">
            {% if message.tags == 'success' %}
                <i class="fas fa-check-circle me-2"></i>
            {% elif message.tags == 'error' %}
                <i class="fas fa-exclamation-circle me-2"></i>
            {% endif %}
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    <form method="post" enctype="multipart/form-data" id="expense-form">
        {% csrf_token %}
        <div class="card-body">
            <div class="mb-3">
                <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                {{ form.description }}
            </div>
            
            <div class="mb-3">
                <label for="{{ form.category.id_for_label }}" class="form-label">Category</label>
                <div class="input-group">
                    {{ form.category }}
                    <button class="btn btn-outline-secondary" type="button" id="add-category-btn">
                        <i class="fas fa-plus"></i> New
                    </button>
                </div>
                <div id="new-category-section" class="mt-2" style="display: none;">
                    <div class="input-group">
                        {{ form.new_category }}
                        <button class="btn btn-success" type="button" id="save-category-btn">
                            <i class="fas fa-check"></i> Save
                        </button>
                    </div>
                    <small class="form-text text-muted">Enter a name for the new category and click Save.</small>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="{{ form.payment_method.id_for_label }}" class="form-label">Payment Method</label>
                    {{ form.payment_method }}
                </div>
                <div class="col-md-6 mb-3">
                    <label for="{{ form.amount.id_for_label }}" class="form-label">Amount</label>
                    <div class="input-group">
                        <span class="input-group-text">Ksh</span>
                        {{ form.amount }}
                    </div>
                </div>
            </div>
            
            <!-- Hidden fields that are required but not shown -->
            {{ form.status.as_hidden }}
            {{ form.expense_date.as_hidden }}
            {% if form.created_by %}
                {{ form.created_by }}
            {% endif %}
            {% if form.instance and form.instance.branch %}
                <input type="hidden" name="branch" value="{{ form.instance.branch.id }}">
            {% endif %}
            
            <div class="d-flex justify-content-between mt-4 pt-3 border-top">
                <div>
                    <a href="{% url 'expenses:expense_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i> Cancel
                    </a>
                </div>
                <div class="btn-group">
                    <button type="submit" name="save" class="btn btn-primary" id="submit-btn">
                        <i class="fas fa-save me-1"></i> 
                        <span class="btn-text">Save Expense</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                    <button type="submit" name="save_and_add_another" class="btn btn-outline-primary">
                        <i class="fas fa-save me-1"></i> Save & Add Another
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2 for category dropdown
    $('#id_category').select2({
        placeholder: 'Select a category',
        allowClear: true,
        width: '100%'
    });

    // Toggle new category input
    $('#add-category-btn').click(function() {
        $('#new-category-section').show();
        $(this).prop('disabled', true);
        $('#id_category').prop('disabled', true);
        $('#id_new_category').focus();
    });

    // Handle save new category
    $('#save-category-btn').click(function() {
        const categoryName = $('#id_new_category').val().trim();
        if (categoryName) {
            // Send AJAX request to create new category
            $.ajax({
                url: '{% url "expenses:category_quick_add" %}',
                method: 'POST',
                data: {
                    'name': categoryName,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function(response) {
                    if (response.success) {
                        // Add new category to select and select it
                        const newOption = new Option(response.category.name, response.category.id, true, true);
                        $('#id_category').append(newOption).trigger('change');
                        
                        // Reset and hide the new category input
                        $('#id_new_category').val('');
                        $('#new-category-section').hide();
                        $('#add-category-btn').prop('disabled', false);
                        $('#id_category').prop('disabled', false);
                    }
                }
            });
        }
    });

    // Handle Enter key in new category input
    $('#id_new_category').keypress(function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#save-category-btn').click();
        }
    });
});
</script>
<script>
$(document).ready(function() {
    // Initialize Select2 for dropdowns
    $('select').select2({
        theme: 'bootstrap4',
        width: '100%',
        dropdownParent: $('#expense-form')
    });

    // Toggle new category input
    $('select[name="category"]').on('change', function() {
        if ($(this).val() === 'new') {
            $('.new-category-section').show();
            $('input[name="new_category"]').focus();
        } else {
            $('.new-category-section').hide();
        }
    });

    // Format amount input
    $('input[name="amount"]').on('blur', function() {
        let value = parseFloat($(this).val()) || 0;
        $(this).val(value.toFixed(2));
    });

    // Handle form submission with better feedback
    $('#expense-form').on('submit', function(e) {
        const $submitBtn = $('#submit-btn');
        const $btnText = $submitBtn.find('.btn-text');
        const $spinner = $submitBtn.find('.spinner-border');
        
        // Show loading state
        $submitBtn.prop('disabled', true);
        $btnText.text('Saving...');
        $spinner.removeClass('d-none');
        
        // Re-enable the button after 5 seconds in case of network issues
        setTimeout(function() {
            if ($submitBtn.prop('disabled')) {
                $submitBtn.prop('disabled', false);
                $btnText.text('Save Expense');
                $spinner.addClass('d-none');
                
                // Show error message if still on the same page
                if (window.location.pathname === '{{ request.path }}') {
                    alert('The request is taking longer than expected. Please try again.');
                }
            }
        }, 10000);
        
        return true;
    });
});
</script>
{% endblock %}