{% extends 'base.html' %}

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

    <div class="add_product_main">
        <div class="inventory-items container-fluid">
    
            <div class="update_product_table_container">

                <h1>Restock Products</h1>

                <table class="update_table">
                    <tr>
                        <th>Product</th>
                        <th>action</th>

                    </tr>
                    {% for product in products %}    
                    <tr>
                        <th>{{ product }}</th>
                        <th><a href="{% url 'single_product_restock' product.pk %}">Update</a></th>

                    {% endfor %}

                    </tr>
                </table>
        
     
                
                <a href="{% url 'add_jerseys' %}">Back to Add Jersey</a>
    
            </div>
        </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: 2000 // 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 %}