@{
    ViewData["Title"] = "Dashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div  class="container" id="invAdmin">
    <div class="row">
        <div class="text-center">
            <p><h1 class="display-4">Inventory Admin Dashboard</h1></p>
            <p v-show="currentUserCompanyDept.departmentName"><h2 class="display-6">Store: {{ currentUserCompanyDept.departmentName }}</h2></p>
        </div>
    </div>
    @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml");
    <div class="row card">
        <div class="card-header">
            <h3 class="card-title">Inventory Report</h3>
        </div>
        <div class="card-body">
            <div v-if="reportData">
                <div class="row justify-content-center">
                    <div class="col-3">
                        <h4>Statistic</h4>
                        <p>Total Number of Item Registered: {{ reportData.itemCountRegistered }}</p>
                        <p>Total Number of Item Still in Stock: {{ reportData.itemCountStillInStock }}</p>
                    </div>
                    <div class="col-3">
                        <h4>Item Registered </h4>
                        <p>This Month: {{ reportData.itemCountRegisteredThisMonth }}</p>
                        <p>Last Month: {{ reportData.itemCountRegisteredLastMonth }}</p>
                    </div>
                    <div class="col-3">
                        <h4>Item Stock Out </h4>
                        <p>This Month: {{ reportData.itemCountStockOutThisMonth }}</p>
                        <p>Last Month: {{ reportData.itemCountStockOutLastMonth }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
@{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
    $(function () {
            app.mount('#invAdmin');

            $('.closeModal').on('click', function () {
                // Show the modal with the ID 'addManufacturerModal'.
                $('.modal').modal('hide');
            });
    });
    const app = Vue.createApp({
        data() {
            return {
                currentUser: null,
                currentUserCompanyDept: {
                    departmentName: null,
                    departmentId: null
                },
                reportData: null,
            }
        },
        mounted() {
            this.fetchUser();
        },
        methods: {
            async fetchUser() {
                try {
                    const response = await fetch(`/IdentityAPI/GetUserInformation/`, {
                        method: 'POST',
                    });
                    if (response.ok) {
                        const data = await response.json();
                        this.currentUser = data?.userInfo || null;
                        const companyDeptData = await this.currentUser.department;
                        const userRole = this.currentUser.role;
                        if(userRole == "SuperAdmin" || userRole == "SystemAdmin"){
                            this.currentUserCompanyDept = {departmentId : 0, departmentName : "All"}
                            this.fetchInventoryReport(0);
                        }
                        else{
                            this.currentUserCompanyDept = companyDeptData;
                            this.fetchInventoryReport(companyDeptData.departmentId);
                        }
                    }
                    else {
                        console.error(`Failed to fetch user: ${response.statusText}`);
                    }
                }
                catch (error) {
                    console.error('There was a problem with the fetch operation:', error);
                }
            },
            async fetchInventoryReport(deptId){
                try {
                    const response = await fetch(`/InvMainAPI/GetInventoryReport/` + deptId, {
                        method: 'POST',
                    });
                    if (response.ok) {
                        const data = await response.json();
                        this.reportData = data;
                    }
                    else {
                        console.error(`Failed to fetch user: ${response.statusText}`);
                    }
                }
                catch (error) {
                    console.error('There was a problem with the fetch operation:', error);
                }
            },
        },
    });
</script>
}