{% extends 'base.html' %}

{% load static %}
{% block content %}


    <div class="add_product_main">
        <div class="inventory-items container-fluid">
    
           
    
                <h2>Add Products</h2>
                <form method="post" action="{% url 'add_jerseys' %}">
                    {% csrf_token %}
                    {{ form.as_p }}
                    <button type="submit" class="btn" name="jerseyAddForm_submit">Add </button>
                </form>
    
   
        </div>
<!--     
         {% if messages %}
        <div class="display-message">          
            <ul class="messages">
                {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
                    {% endfor %}
            </ul>
        </div>
        {% endif %} -->

        {% if messages %}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                {% for message in messages %}
                Swal.fire({
                    icon: '{% if message.tags %}{{ message.tags }}{% else %}info{% endif %}', // Use tags for icon type (e.g., 'success', 'error')
                    title: '{{ message }}',
                    showConfirmButton: false,
                    timer: 3000 // Auto close after 3 seconds
                });
                {% endfor %}
            });
        </script>
        {% endif %}

    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categoryField = document.querySelector('select[name="category"]');
            const sizeField = document.querySelector('select[name="size"]');

            categoryField.addEventListener('change', function () {
                const categoryId = this.value;
                fetchSizesForCategory(categoryId);
            });

            function fetchSizesForCategory(categoryId) {
                fetch(`/api/sizes/?category_id=${categoryId}`)
                    .then(response => response.json())
                    .then(data => {
                        sizeField.innerHTML = '';
                        data.forEach(size => {
                            const option = document.createElement('option');
                            option.value = size.id;
                            option.textContent = size.name;
                            sizeField.appendChild(option);
                        });
                    });
            }
        });
    </script>


</body>

</html>
{% endblock %}