{% extends 'base.html' %}

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


<div class="main">
    <div class="main_dash">
        <div class="main_dash_left_shelf">
            <div class="stock_tabs">
                {% if low_stock_alert %}
                <div class="item">                
                    <div class="lowStockheading">
                        <h5>Low Stock Alert</h5>
                    </div>

                    <div class="marquee-container">
                        <div class="marquee">
                            {% for alert in low_stock_alert %}
                            {{ alert }}&nbsp;&nbsp;&nbsp;
                            {% endfor %}
                        </div>
                       
                    </div>
                </div>

                <hr>
                {% endif %}


                <div class="item_details">
                    <div class="itemsHeading">
                        <h2>Remaining Stock</h2>
                    </div>
                    <div class="row">
                        <div class="col">
                            <canvas id="boysJersys" width="auto" height="150px"></canvas>
                        </div>
                        <div class="col">
                            <canvas id="girlsJersys" width="auto" height="150px"></canvas>
                        </div>
                    </div>
                </div>

                <div class="item_details">
                    <div class="row">
                        <div class="col">
                            <canvas id="boysArmcuts" width="auto" height="150px"></canvas>
                        </div>
                        <div class="col">
                            <canvas id="ties" width="auto" height="150px"></canvas>
                        </div>
                    </div>
                </div>
                <div class="item_details">
                    <div class="row">
                        <div class="col">
                            <canvas id="iceCaps" width="auto" height="150px"></canvas>
                        </div>
                        <div class="col">
                            <canvas id="bags" width="auto" height="150px"></canvas>
                        </div>
                    </div>
                </div>

                <div class="item_details">
                    <div class="row">
                        <div class="col">
                            <canvas id="ECA_kits" width="auto" height="150px"></canvas>
                        </div>
                        <div class="col">
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="main_dash_right_shelf">
            <div>
                <h4>Inventory Control Section</h4>
            </div>
            <hr>
            <div class="issue_stock_section">
                <div class="stock_update_section">
                    <h4>Inventory Issue & Restock</h4>
                    <a href="#" onclick="openProdcutIssuePage()">ISSUE ITEMS</a>
                    <a href="#" onclick="openProductRestockList()">RESTOCK ITEMS</a>
                </div>
            </div>

            <hr>

            <div class="stock_operations">
                <div class="stock_update_section">
                    <h4>Manage Inventory</h4>
                    <a href="#" onclick="openJerseyPage()">Add Products</a>
                    <a href="#" onclick="openProductUpdatePage()">Update Products</a>
                    <a href="">Delete Products</a>
                </div>
            </div>

            <hr>

            <div class="issue_stock_section">
                <div class="stock_update_section">
                    <h4>Search Product</h4>
                    <a href="#" onclick="openRecieptSearchPage()">SEARCH ISSUED ITEM</a>
                    <a href="#" onclick="openStockSearchPage()">SEARCH STOCK</a>
                </div>
            </div>

            <div class="copyright">
                <p>&copy; 2024 Our Lady's School (Upper Section)</p>
                <p>App Developed by <span>Damith Graphics</span></p>

            </div>

          
        </div>

        <div class="operation-section">
            <div class="left-shelf">

                <div>



                </div>

                <a href="#" onclick="openJerseyPage()"><i class="fa-solid fa-shirt"></i>Jerseys</a>
                <a href="#" onclick="openTiePage()"><i class="fa-brands fa-black-tie"></i>Ties</a>
                <div class="close-pane">
                    <a href="#" onclick="closeOperationSection()">Close Pane</a>
                </div>
            </div>


        </div>





        <div class="addItempane">

            <div class="addItemOp">

                <div class="addItemOp_buttons">

                    <a href="#" onclick=" toggleFormVisibility ()">ADD ITEM</a>
                    <a href="#">UPDATE ITEM</a>
                    <!-- <a href="#" >ADD ITEM</a> -->
                </div>


            </div>

        </div>




        <div class="footer"></div>
    </div>




</div>
</div>
</div>

<div class="bottom-shelf">
    <div class="close-bottom-shelf">
        <button class="btn" onclick="closeBottomShelf()"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div class="stock-items">
        <div class="item-display">
            <a href="#" onclick="openJerseyStockPage()"><i class=" fa-solid fa-shirt"></i></a>
            <h6>Jerseys</h6>
        </div>

        <div class="item-display">
            <a href="#"><i class="fa-brands fa-black-tie"></i></a>
            <h6>Ties</h6>
        </div>

        <div class="item-display">
            <a href="#"><i class="fa-solid fa-shirt"></i></a>
            <h6>Jerseys</h6>
        </div>

        <div class="item-display">
            <a href="#"><i class="fa-solid fa-shirt"></i></a>
            <h6>Jerseys</h6>
        </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 %}




<!-- 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 drawOperationPallete() {
        var operationSection = document.querySelector('.operation-section');
        operationSection.classList.toggle('active');
    }

    function closeOperationSection() {
        var operationSection = document.querySelector('.operation-section');
        var addItempane = document.querySelector('.addItempane');
        operationSection.classList.remove('active');
        addItempane.classList.remove('active');

    }



    function drawAddOperation() {
        var addItempane = document.querySelector('.addItempane');
        addItempane.classList.toggle('active');
    }





    function toggleFormVisibility() {
        var form = document.getElementById('AddItemForm');

        if (form.classList.contains("hidden")) {
            form.classList.remove("hidden");
            form.classList.add('visible')
        }

        else {
            form.classList.remove('visible');
            form.classList.add('hidden')
        }

    }


    // function drawOperationPalleteIssueItems() {
    //     var bottomShelf = document.querySelector('.bottom-shelf');
    //     bottomShelf.classList.toggle('active')

    // }

    function closeBottomShelf() {
        var bottomShelf = document.querySelector('.bottom-shelf');
        bottomShelf.classList.remove('active')

    }
    // function closeAddOperations() {
    //     var operationPain = document.querySelector('.additem')
    //     operationPain.classList.remove('active')

    // }

</script>


<script>
    function openJerseyPage() {
        // Specify the URL of the add_items page in your application
        var url = "{% url 'add_jerseys' %}";
        var windowName = "_blank"; // Opens in a new tab or window
        var windowFeatures = "width=600,height=600"; // Optional features like width and height
        window.open(url, windowName, windowFeatures);
    }

    function openProductUpdatePage() {
        // Specify the URL of the add_items page in your application
        var url = "{% url 'update_product' %}";
        var windowName = "_blank"; // Opens in a new tab or window
        var windowFeatures = "width=600,height=600"; // Optional features like width and height
        window.open(url, windowName, windowFeatures);

    }

    function openProductRestockList() {
        // Specify the URL of the add_items page in your application
        var url = "{% url 'restock_products_list' %}";
        var windowName = "_blank"; // Opens in a new tab or window
        var windowFeatures = "width=600,height=600"; // Optional features like width and height
        window.open(url, windowName, windowFeatures);

    }

    function openTiePage() {

        var url = "{% url 'add_ties' %}";
        var windowName = "_blank";
        var windowFeatures = "width=600,height=600";
        window.open(url, windowName, windowFeatures);


    }

    function openJerseyStockPage() {

        var url = "{% url 'issue_products' %}";
        var windowName = "_blank";
        var windowFeatures = "width=600,height=600";
        window.open(url, windowName, windowFeatures);

    }

    function openProdcutIssuePage() {
        var url = "{% url 'issue_products' %}";
        var windowName = "_blank";
        var windowFeatures = "width=600,height=600";
        window.open(url, windowName, windowFeatures);



    }

    function openRecieptSearchPage() {
        var url = "{% url 'search_reciept' %}";
        var windowName = "_blank";
        var windowFeatures = "width=800,height=600";
        window.open(url, windowName, windowFeatures);

    }

    function openStockSearchPage() {
        var url = "{% url 'search_stocks' %}";
        var windowName = "_blank";
        var windowFeatures = "width=800,height=600";
        window.open(url, windowName, windowFeatures);

    }




</script>

<script>
    const jerseyBoysQuantities = {{ rev_jersey_boys_remaining_qty_list| safe}}
    const ctx = document.getElementById('boysJersys').getContext('2d');
    const boysJersys = new Chart(ctx, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['26', '28', '30', '32', '34'],
            datasets: [{
                label: 'Boys Jerseys',
                data: jerseyBoysQuantities,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

<script>
    const jerseyGirlsQuantities = {{ rev_jersey_girls_remaining_qty_list| safe }};
    const ctxg = document.getElementById('girlsJersys').getContext('2d');
    const girlsJersys = new Chart(ctxg, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['26', '28', '30', '32', '34', '36', '38', '40'],
            datasets: [{
                label: 'Girls Jerseys',
                data: jerseyGirlsQuantities,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


</script>

<script>
    const armcutBoysquantitites = {{ rev_arm_cuts_remaining_qty_list| safe}}
    const ctxba = document.getElementById('boysArmcuts').getContext('2d');
    const boysArmcuts = new Chart(ctxba, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['26', '30', '32', '34', '36', '38', '40'],
            datasets: [{
                label: 'Boys Armcuts',
                data: armcutBoysquantitites,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


</script>


<script>
    const tiesQuantities = {{ rev_ties_remaining_qty_list| safe}}
    const ctxti = document.getElementById('ties').getContext('2d');
    const ties = new Chart(ctxti, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['M',],
            datasets: [{
                label: 'Ties',
                data: tiesQuantities,

                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                barThickness: 30,
            }]
        },
        options: {
            // indexAxis: 'y',
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            elements: {
                bar: {
                    borderWidth: 1,
                }
            },
        }
    });

</script>

<script>
    const icecapsQuanitities = {{ rev_icecaps_remaining_qty_list| safe}}
    const ctxic = document.getElementById('iceCaps').getContext('2d');
    const iceCaps = new Chart(ctxic, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['S', 'M', 'L'],
            datasets: [{
                label: 'Ice Caps',
                data: icecapsQuanitities,

                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                barThickness: 30,
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


</script>

<script>
    const ecakitsQuanitities = {{ rev_eca_kits_remaining_qty_list| safe}}
    const ctxek = document.getElementById('ECA_kits').getContext('2d');
    const ECA_kits = new Chart(ctxek, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['S', 'M', 'L', '2XL', '3XL'],
            datasets: [{
                label: 'ECA Kits',
                data: ecakitsQuanitities,

                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                barThickness: 30,
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


</script>

<script>
    const bagsQuanitities = {{ rev_bags_remaining_qty_list| safe}}
    const ctxb = document.getElementById('bags').getContext('2d');
    const bags = new Chart(ctxb, {
        type: 'bar', // Specify the chart type here (e.g., 'bar', 'line', 'pie', etc.)
        data: {
            labels: ['S', 'L', 'A/L'],
            datasets: [{
                label: 'bags',
                data: bagsQuanitities,

                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                barThickness: 30,
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


</script>


</body>

</html>

{% endblock %}