{% extends 'base.html' %}

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


<div class="main">
    <div class="issue_stock container-fluid">

        <!-- {% 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: 4000 // Auto close after 3 seconds
                    });
                    {% endfor %}
                });
            </script>
            {% endif %}

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

            <!-- {{form.as_p}} -->

            <div class="row mb-3">
                <div class="col issue-items">
                    <label for="category">Select Product</label>
                    {{ form.category }}
                </div>

                <div class="col issue-items">
                    <label for="Size">Size</label>
                    {{ form.size }}
                </div>
            </div>

            <div>
                <button type="submit" class="stock_issue_btn" name="check_availability">CHECK AVAILABILITY</button>
            </div>

            <div class="row mb-3">
                {% if quantity and price %}
                <div class="col issue-items">
                    <label for="quantityAvailable">Quantity Available</label>
                    <input type="number" name="quantityAvailable" value={{quantity}} class="form-control">
                </div>
                <div class="col issue-items">
                    <label for="price">Each Price</label>
                    <input type="number" name="price" value={{price}}  id="price" class="form-control">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col issue-items">
                    <label for="issueQuantity">Issue Qty</label>
                    <input type="number" value="{{ form.quantity.value }}" id="issue_quantity" name="quantity" class="form-control">
                </div>
                <div class="col issue-items">
                    <label for="Amount">Amount</label>
                    <input type="number" value="{{ form.price.value }}" name="amount" id="amount" class="form-control">
                </div>
            </div>

            <hr class="mb-3 mt-5">
            <div class="row mb-3">
                <div class="col issue-items">
                    <label for="admisionNumber">Enter Student Admission Number</label>
                    {{ form.admissionNumber }}
                </div>
                <div class="col issue-items">
                    <label for="studentName">Enter Student Name</label>
                    {{ form.studentName }}
                </div>
            </div>
            <div>
                <button type="submit" class="stock_issue_btn" name="issue_items">ISSUE ITEMS</button>
            </div>
            {% endif %}

        </form>


        <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 priceInput = document.getElementById('price');
        var quantity = parseInt(quanityIssued.value)||0;
        var price = parseInt(priceInput.value)||0;
        var fulAmount = quantity * price;
        var fulamount = parseInt(fulAmount)
        amountInput.value = fulAmount
    }

    document.getElementById('issue_quantity').addEventListener('input', calculateAmount);
    document.getElementById('price').addEventListener('input', calculateAmount);
</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 %}