{% extends 'base.html' %}

{% load static %}
{% block content %}
    <div class="add_product_main">
        <div class="restock-items container-fluid">
    
            <div class="restockForm">    
                <h1>Restock Product</h1>
                <form method="POST">
                    {% csrf_token %}
                    <div class="restock-item">
                        <h4>Product Name</h4> {{ form.category }}
                    </div>

                    <div class="restock-item">
                        <h4>Product Size</h4>  {{ form.size }}
                    </div>

                    <div class="restock-item">
                        <h4>Existing Quantity</h4>  {{form.quantity}}
                    </div>

                    <hr>

                    <div class="restock-item">
                        <h4>Add New Quantity</h4>  <input type="number" class="restock-input form-control" onchange="calculateNewStock()" id="add_new_qty" name="add_new_qty">
                    </div>

                    <div class="restock-item">
                        <h4>Final Quantity </h4>  <input type="number" class="restock-input form-control" id="final_qty" name="final_qty">
                    </div>

    
                   
                   
                    <button type="submit" class="btn">Update Product</button>
                </form>   
            </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>

    <script>
        function calculateNewStock() {
            var existing_qty = document.getElementById('existing_qty')
            var new_qty = document.getElementById('add_new_qty');
            var final_quantity = document.getElementById('final_qty');
            var new_quantity = parseInt(new_qty.value);
            var existing_quantity = parseInt(existing_qty.value);
            var total = existing_quantity + new_quantity;
            final_quantity.value = total
        }
    </script>


</body>

</html>
{% endblock %}