{% extends 'base.html' %}

{% load static %}
{% block content %}
    <div class="add_product_main">
        <div class="inventory-items container-fluid">
    
            <div class="update_product_table_container">

                <h2>Search Available Stocks</h2>
                
                <form method="get">
                <div class="receiptSearch">
                    <div class="receiptItem">
                        <label for="bill_number">Category</label>
                        {{form.category}}
                
                    </div>
                
                    <div class="receiptItem">
                        <label for="admission_number">Size</label>
                        {{form.size}}                
                    </div>

                    <div class="receiptItem">
                        <label for="admission_number"></label>
                        <button type="submit" class="btn">Search</button>           
                    </div>
                </form>
                
               
                <table class="update_table">
                    <tr>
                        <th>Category</th>
                        <th>Size</th>
                        <th>Colour</th>
                        <th>Quantity</th>
                        <th>Price</th>
                    </tr>
                    {% for item in page_obj %}    
                    <tr>
                        <th>{{ item.category }}</th>
                        <th>{{ item.size }}</th>
                        <th>{{ item.color }}</th>
                        <th>{{ item.quantity }}</th>
                        <th>{{ item.price }}</th>  
                    {% endfor %}

                    </tr>
                </table>

                <div class="pagination">
                    <span class="step-links">
                        {% if page_obj.has_previous %}
                            <a href="?{% if form.data %}{{ form.data.urlencode }}&{% endif %}page=1">&laquo; first</a>
                            <a href="?{% if form.data %}{{ form.data.urlencode }}&{% endif %}page={{ page_obj.previous_page_number }}">previous</a>
                        {% endif %}
            
                        <span class="current">
                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                        </span>
            
                        {% if page_obj.has_next %}
                            <a href="?{% if form.data %}{{ form.data.urlencode }}&{% endif %}page={{ page_obj.next_page_number }}">next</a>
                            <a href="?{% if form.data %}{{ form.data.urlencode }}&{% endif %}page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
                        {% endif %}
                    </span>
                </div>
            </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 %}