{% extends 'base.html' %}

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


    <div class="">

        <div class="remainingItemSection container-fluid">
            <div>
                <h6>Issued {{qty}} nos of {{category_name}} of size {{ size_name }}</h6>
            </div>

            <div>
                <p>Remaining Stock: <span> {{ remaining_stock }} </span></p>
            </div>
        </div>
        <div>
        {% 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 %}
    </div>

    <div class="receipt_main">

        <div class="controlBoard">
       
            <a href="{% url 'issue_products' %}" class="">Issue Another Item</a>
            <a href="{% url 'search_reciept' %}" class="">View Transactions</a>
            <a href="{%url 'update_product%"} class="">Update Products</a>
            <a href="" class="">Print Report</a>
            <a href="{% url 'index' %}" class="" id="closeButton">Dashboard</a>
            
        </div>

        <div class="recieptSection" >
            <div class="receiptPrint_left">
            <div class="receiptContent" id="receiptContent">
                <h2>Our Lady's School (Upper Section)</h2>
                <div class="recieptTop">
                    
                    <h3>Receipt</h3>
                    <h3>#{{receipt_number}}</h3>
                </div>
                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Student Name :- </strong></p>
                    </div>
                    <div class="reciptRight">
                        <p>{{student_name}}</p>
                    </div>
                </div>

                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Admission Number:-</strong> </p>
                    </div>
                    <div class="reciptRight">
                        <p>{{admission_number}}</p>
                    </div>
                </div>

                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Item Issued :- </strong></p>
                    </div>
                    <div class="reciptRight">
                        <p>{{category_type}} <span> Size :- {{product_size}}</span></p>
                    </div>
                </div>

                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Quantity :- </strong></p>
                    </div>
                    <div class="reciptRight">
                        <p>{{qty}}</p>
                    </div>
                </div>

                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Amount Paid :-</strong> </p>
                    </div>
                    <div class="reciptRight">
                        <p>{{price}}</p>
                    </div>
                </div>

                <div class="reciept">
                    <div class="reciptLeft">
                        <p><strong>Date Issued :- </strong></p>
                    </div>
                    <div class="reciptRight">
                        <p>{{date_time}}</p>
                    </div>
                </div>
            </div>
                <a href="javascript:void(0);" id="printButton" class="btn" onclick="printReceipt()">Print Receipt</a>
            </div>

            <div class="receiptPrint_right">

            </div>
        </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>

<script>
    document.getElementById('closeButton').addEventListener('click', function(){

        window.close()
    });

</script>

<script>
    function printReceipt() {
      const printContent = document.getElementById('receiptContent').innerHTML;
      const printWindow = window.open('', '', 'height=600,width=800');
      printWindow.document.write('<html><head><title>Print Receipt</title>');
      printWindow.document.write('<style>.receiptPrint_left { border: 1px solid #000; padding: 20px; width: 300px; margin: 0 auto; } .recieptTop, .reciept { display: flex; justify-content: space-between; }</style>');
      printWindow.document.write('</head><body >');
      printWindow.document.write(printContent);
      printWindow.document.write('</body></html>');
      printWindow.document.close();
      printWindow.print();
    }
  </script>


</body>

</html>
{% endblock %}