<%- include('../partials/header') -%>

<div class="col-9">
    <div class="container p-3">
        <h1 class="my-4">Dashboard</h1>
        <%- include('../partials/messages') -%>

        <% let total = instock = outofstock = pricechanged = backinstock = updated = notupdated = 0 %>
        <% products.forEach((product) => { %>
        <% total++; %>
        <% if(product.newstock === 'In stock') { %>
        <%    instock++; %>
        <% } %>
        <% if(product.newstock === 'Out of stock') { %>
        <%    outofstock++; %>
        <% } %>
        <% if(product.newprice !== product.oldprice) { %>
        <%    pricechanged++; %>
        <% } %>
        <% if(product.oldstock === 'Out of stock' && product.newstock === 'In stock') { %>
        <%    backinstock++; %>
        <% } %>
        <% if(product.updatestatus === 'Updated') { %>
        <%    updated++; %>
        <% } %>
        <% if(product.updatestatus === 'Not Updated') { %>
        <%    notupdated++; %>
        <% } %>
        <% }); %>

        <div class="row">
            <div class="col-xl-12 col-sm-12 mb-3">
                <div class="card text-white bg-primary o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Total Products<br> <b><%= total %></b>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- CARD START HERE -->



        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-success o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">In Stock<br> <b><%= instock %></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/instock">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>



            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-danger o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Out of Stock<br> <b><%= outofstock %></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/outofstock">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>



            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-info o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Price Changed<br> <b><%= pricechanged %></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/pricechanged">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>



            <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-warning o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Back In Stock<br> <b><%= backinstock %></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/backinstock">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <!-- UPDATE CARD START HERE -->

        <h1 class="my-5">Products Update Information</h1>


        <div class="row">
            <div class="col-xl-6 col-sm-6 mb-3">
                <div class="card text-white bg-success o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Updated Products<br> <b><%= updated%></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/updated">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>




            <div class="col-xl-6 col-sm-6 mb-3">
                <div class="card text-white bg-danger o-hidden h-100">
                    <div class="card-body">
                        <div class="text-center card-font-size">Not Updated Products<br> <b><%= notupdated %></b></div>
                    </div>
                    <a class="card-footer text-white clearfix small z-1" href="/products/notupdated">
                        <span class="float-left">View Details</span>
                        <span class="float-right">
                            <i class="fas fa-angle-right"></i>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<%- include('../partials/footer') -%>