{% 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;
    }
    .form-card {
        max-width: 1000px;
        margin: 2rem auto;
    }
    .form-section {
        margin-bottom: 2rem;
    }
    .form-section-header {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
    }
    /* Fix for crispy forms with horizontal layout */
    .form-horizontal label {
        padding-top: 0.375rem;
        margin-bottom: 0;
    }
    /* Fix for checkboxes */
    .form-check {
        padding-left: 0;
    }
    .form-check-input {
        margin-left: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="card form-card">
    <div class="card-header">
        <h5 class="mb-0">
            {% if form.instance.id %}
                Edit Supplier: {{ form.instance.name }}
            {% else %}
                Add New Supplier
            {% endif %}
        </h5>
    </div>
    <form method="post" id="supplier-form" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="card-body">
            {{ form|crispy }}
        </div>
        <div class="card-footer d-flex justify-content-end">
            <a href="{% url 'suppliers:supplier_list' %}" class="btn btn-secondary me-2">
                <i class="fas fa-times me-2"></i> Cancel
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-2"></i> Save Supplier
            </button>
        </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 select fields
    $('select').select2({
        theme: 'bootstrap4',
        width: '100%',
        dropdownParent: $('.form-card')
    });

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

    // Handle form submission
    $('#supplier-form').on('submit', function(e) {
        // Show loading state
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true);
        submitBtn.html('<i class="fas fa-spinner fa-spin me-2"></i> Saving...');
        return true;
    });
});
</script>
{% endblock %}