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

{% block title %}New Material{% endblock %}

{% block content %}
<div class="container mt-4">
        <h2 class="mb-4">Add Product</h2>

    <div class="card p-4 shadow-sm">
        {% comment %} <div class="card-header bg-primary text-white">
            <h4 class="mb-0"><i class="bi bi-box-seam me-2"></i>Add New Product</h4>
        </div> {% endcomment %}
        <div class="card-body">
            <form method="POST" >
                {% csrf_token %}
                
                <div class="row g-3 mb-4">
                    <!-- Product Code -->
                    <div class="col-md-6">
                        <label for="id_product_code" class="form-label">
                            <i class="bi bi-upc me-1"></i>Product Code*
                        </label>
                        <input type="text" class="form-control" id="id_product_code" 
                               name="product_code" required
                               value="{{ form.product_code.value|default_if_none:'' }}">
                        <div class="invalid-feedback">
                            Please provide a product code.
                        </div>
                    </div>
                    
                   <div class="col-md-6">
                        <label for="id_name" class="form-label">
                            <i class="bi bi-box me-1"></i>Product Name*
                        </label>
                        <input type="text" class="form-control" id="id_name"
                               name="name" 
                               value="{{ form.name.value|default_if_none:'' }}">
                        <!-- {{ form.name }} -->
                    </div>
                </div>

                

                <!-- Material Type and Unit -->
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label for="id_material_type" class="form-label">
                            <i class="bi bi-diagram-3 me-1"></i>Material Type
                        </label>
                        {{ form.material_type }}
                    </div>
                    <div class="col-md-6">
                        <label for="id_unit_of_measurement" class="form-label">
                            <i class="bi bi-diagram-3 me-1"></i>Unit*
                        </label>
                        {{ form.unit_of_measurement }}
                    </div>
                </div>
                 <!-- Material Type and Unit -->
                 <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label for="id_material_type" class="form-label">
                            <i class="bi bi-diagram-3 me-1"></i>Min Stock Level
                        </label>
                        {{ form.min_stock_level }}
                    </div>
                    <div class="col-md-6">
                        <label for="id_unit_of_measurement" class="form-label">
                            <i class="bi bi-diagram-3 me-1"></i>Description
                        </label>
                        {{ form.description }}
                    </div>
                </div>


                <!-- Form Actions -->
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <button type="submit" class="btn btn-success">
                        Save Product
                    </button>
                    <a href="{% url 'product_list' %}" class="btn btn-secondary">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .card {
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .form-label {
        font-weight: 500;
        color: #495057;
    }
    .invalid-feedback {
        font-size: 0.875rem;
    }
    .form-control, .form-select {
        border-radius: 0.375rem;
    }
    .form-switch .form-check-input {
        width: 2.5em;
        height: 1.5em;
    }
    .btn {
        border-radius: 0.375rem;
    }
</style>

<script>
// Client-side validation
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('.needs-validation')
    
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            
            form.classList.add('was-validated')
        }, false)
    })
})
</script>
{% endblock %}