{% extends 'base.html' %}

{% load static %}
{% block content %}
    <div class="main">
        <div class="issue_stock container-fluid">

            <table>
                <tr>
                    <th>Size</th>
                    <th>Colour</th>
                    <th>Quantity Available</th>
                    <th>Each Price</th>
                </tr>
                {% for jersey in jersey_list %}
                <tr>
                    <td>{{jersey.size}}</td>
                    <td>{{jersey.color}}</td>
                    <td>{{jersey.quantity}}</td>
                    <td>{{jersey.price}}</td>
                </tr>
                {% endfor %}
            </table>

            <form action="#" method="POST" class="stock_issue_form" id="stock_issue_Form">
                {% csrf_token %}

                <div class="row mb-3">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <label for="category">Category</label>
                        <input type="text" class="form-control" name="issue_category" value="{{ category }}" required>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <label for="size">Select Size </label>
                        <select class="form-select" aria-label="Default select example" name="size" id="size" required>
                            <option value="" selected disabled>Select Size</option>
                            <option value="32">32</option>
                            <option value="34">34</option>
                            <option value="36">36</option>
                        </select>
                    </div>
                </div>


                <div class="stock_issue_section">
                    <div class="col-lg-6 col-md-6 col-sm-6 mb-2">
                        <label for="studentName">Enter Student Name</label>
                        <input type="text" class="form-control" name="studentName" required>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <label for="admissionNumber">Enter Admission Number</label>
                        <input type="number" class="form-control" name="admissionNumber" required>
                    </div>
                </div>
                <div class="stock_issue_section">

                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <label for="quantity">Enter Quantity to issue</label>
                        <input type="number" class="form-control" name="issue_quantity" value="0" id="issue_quantity"
                            min="0" onchange="calculateAmount()" required>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <label for="quantity">Amount</label>
                        <input type="number" class="form-control" name="amount" id="amount" required>
                    </div>
                </div>

                <div>
                    <button type="submit" class="stock_issue_btn" name="jerseyIssueForm_submit">ISSUE ITEMS</button>
                </div>
            </form>

            <!-- {% if messages %}
            <ul class="messages">
                {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
                    {% endfor %}
            </ul>
            {% 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 class="issue_stock container-fluid">
                {% if issued_current_item %} 

                <div class="bill-heading" >
                    <h3>Our Lady's School</h3>
                    <h6>Upper Section</h6>

                    <h6>Receipt</h6>
                </div>
                <div class="issued-item">
                    <p>Category: {{ issued_current_item.category }}</p>
                    <p>Size: {{ issued_current_item.size }}</p>
                    <p>Student Name: {{ issued_current_item.student_name }}</p>
                    <p>Admission Number: {{ issued_current_item.admission_number }}</p>
                    <p>Quantity: {{ issued_current_item.quantity }}</p>
                    <p>Price: {{ issued_current_item.price }}</p>
                    <p>Date Time: {{ issued_current_item.date_time }}</p>
                    <p>Bill Number: {{ issued_current_item.bill_number }}</p>
                </div>
                
                <button class="btn">Print</button>
                {% endif %}
            </div>



        </div>
    </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>
        function calculateAmount() {
            var quanityIssued = document.getElementById('issue_quantity');
            var amountInput = document.getElementById('amount');
            var quantity = parseInt(quanityIssued.value);
            var fulAmount = quantity * 500;
            amountInput.value = fulAmount
        }

    </script>

    



</body>

</html>

{% endblock %}