{% extends 'base.html' %}

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



    <div class="add_product_main">
        <div class="receipt-search-section container-fluid">
    
            <div class="update_product_table_container">

                <h2>Search Receipts by</h2>               
        
                <form method="get">
                    <!-- {{ form.as_p }} -->
                    <div class="receiptSearch">
                        <div class="receiptItem">
                            <label for="bill_number">Bill Number</label>
                            {{form.bill_number}}
                    
                        </div>
                    
                        <div class="receiptItem">
                            <label for="admission_number">Admission Number</label>
                            {{form.admission_number}}
                    
                        </div>

                        <div class="receiptItem">
                            <label for="student_name">Student Name</label>
                            {{form.student_name}}
                    
                        </div>
                        
                        <div class="receiptItem">
                            <label for="student_name">Category</label>
                            {{form.category}}
                    
                        </div>
                        
                        <div class="receiptItem">
                            <label for="student_name">Size</label>
                            {{form.size}}
                    
                        </div>

                        
                        <div class="receiptItem">
                            <label for="student_name">Student Name</label>
                            {{form.date_from}}
                    
                        </div>

                        <div class="receiptItem">
                            <label for="student_name">Student Name</label>
                            {{form.date_to}}
                    
                        </div>
                        <div class="receiptItem">
                            <label for="student_name"></label>
                        <button type="submit" class="btn">Search</button>
                        </div>
                    </div>
                    
               
                </form>
            
                <h2>Receipts</h2>

                <table class="update_table">
                    <tr>
                        <th>Recipet Number</th>
                        <th>Admission Number</th>
                        <th>Student Name</th>
                        <th>Item</th>
                        <th>Size</th>
                        <th>Quantity</th>
                        <th>Amount</th>
                        <th>Date</th>
                    </tr>
                    {% for receipt in page_obj %}    
                    <tr>
                        <th>{{ receipt.bill_number }}</th>
                        <th>{{ receipt.admission_number }}</th>
                        <th>{{ receipt.student_name }}</th>
                        <th>{{ receipt.category }}</th>
                        <th>{{ receipt.size }}</th>
                        <th>{{ receipt.quantity }}</th>
                        <th>{{ receipt.price }}</th>
                        <th>{{ receipt.date_time }} - </th>
                        <th><a href="#">view</a></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 %}