@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Item"] = "Item Information";
    Layout = null;
    var itemId = ViewData["ItemId"];
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords"
          content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstrap 5, css3 dashboard, bootstrap 5 dashboard, Matrix lite admin bootstrap 5 dashboard, frontend, responsive bootstrap 5 admin template, Matrix admin lite design, Matrix admin lite dashboard bootstrap 5 dashboard template" />
    <meta name="description"
          content="Matrix Admin Lite Free Version is powerful and clean admin dashboard template, inpired from Bootstrap Framework" />
    <meta name="robots" content="noindex,nofollow" />
    <title>Matrix Admin Lite Free Versions Template by WrapPixel</title>
    <!-- Favicon icon -->
    <link rel="icon"
          type="image/png"
          sizes="16x16"
          href="/assets/images/favicon.png" />
    <link href="https://fonts.googleapis.com/css2?family=OCR+A&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="~/assets/libs/select2/dist/css/select2.min.css" />
    <link rel="stylesheet" href="~/assets/libs/jquery-minicolors/jquery.minicolors.css" />
    <link rel="stylesheet" href="~/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
    <link rel="stylesheet" href="~/assets/libs/quill/dist/quill.snow.css" />
    <link href="~/dist/css/style.min.css" rel="stylesheet" />
    <link href="~/lib/printjs/print.min.css" rel="stylesheet" />
    <!-- DataTables CSS-->
    <link href="~/lib/datatables/datatables.css" rel="stylesheet" />
    <!-- Vue Js -->
    <script src="~/js/vue.global.js"></script>
    @* <script src="~/js/vue.global.prod.js"></script> *@
    <!-- QR Js -->
    <script src="~/lib/qrcode/qrcode.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container-fluid my-4" id="app">
    <div class="row-fluid" v-if="thisItem">
        <!-- Logo -->
        <div class="row m-3 d-flex align-items-center justify-content-center">
            <div class="col-lg-7 col-11 p-3 ">
                <div class="col-12 text-center">
                    <img src="@Url.Content("~/Media/System/Logo-PSTW-A4.svg")" alt="Product Image" class="img-fluid rounded" style="max-height: 300px; object-fit: contain; margin-top: -100px; margin-bottom: -100px" />
                </div>
            </div>
        </div>
        
        <!-- Product Image Section -->
        <div class="row m-3 d-flex align-items-center justify-content-center">
            <div class="col-lg-7 col-11 border rounded p-3 shadow-sm">
                <div class="col-12 text-center">
                    <img :src="thisItem.imageProduct" alt="Product Image" class="img-fluid rounded" data-toggle="modal" data-target="#imageModal" style="max-height: 300px;"/>
                </div>
                <div class="col-12 text-center mt-3">
                    <p class="h4 fw-bold text-primary">{{ thisItem.uniqueID }}</p>
                </div>
            </div>
        </div>

        <!-- Product Details Section -->
        <div class="row m-3 d-flex align-items-center justify-content-center">
            <div class="col-lg-7 col-11 border rounded p-3 shadow-sm">
                <!-- Item Name -->
                <div class="col-12 mb-3">
                    <p class="h5 fw-bold">
                        <i class="fas fa-tag me-2 text-secondary"></i>Item Name: 
                        <span class="text-muted">{{ thisItem.productName }}</span>
                    </p>
                </div>

                <!-- Part Number -->
                <div class="col-12 mb-3">
                    <p class="h5 fw-bold">
                        <i class="fas fa-barcode me-2 text-secondary"></i>Part Number: 
                        <span class="text-muted">{{ thisItem.partNumber }}</span>
                    </p>
                </div>

                <!-- Serial Number -->
                <div class="col-12 mb-3">
                    <p class="h5 fw-bold">
                        <i class="fas fa-hashtag me-2 text-secondary"></i>Serial Number: 
                        <span class="text-muted">{{ thisItem.serialNumber }}</span>
                    </p>
                </div>

                <!-- PIC -->
                <div class="col-12 mb-3">
                    <p class="h5 fw-bold">
                        <i class="fas fa-user-tie me-2 text-secondary"></i>PIC: 
                        <span class="text-muted">Station PIC</span>
                    </p>
                </div>

                <!-- Current Information Card -->
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">
                            <h5 class="card-title mb-4 text-primary">
                                <i class="fas fa-info-circle me-2"></i>Current Information
                            </h5>
                            <ul class="list-group list-group-flush">
                                <!-- User -->
                                <li class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <span class="fw-bold">
                                            <i class="fas fa-user me-2 text-secondary"></i>User:
                                        </span>
                                        <span class="text-muted text-end" style="max-width: 70%; word-wrap: break-word;">
                                            {{ thisItem.currentUser }}
                                        </span>
                                    </div>
                                </li>

                                <!-- Store -->
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span class="fw-bold">
                                        <i class="fas fa-store me-2 text-secondary"></i>Store:
                                    </span>
                                    <span class="text-muted">{{ thisItem.currentStore }}</span>
                                </li>

                                <!-- Station -->
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span class="fw-bold">
                                        <i class="fas fa-map-marker-alt me-2 text-secondary"></i>Station:
                                    </span>
                                    <span class="text-muted">{{ thisItem.currentStation || 'N/A' }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                    @* <div> *@
                    @*     <p v-if="isAdmin">Welcome, Admin! You have full access.</p> *@
                    @*     <p v-else-if="userRole === 'user'">Welcome, User! You have limited access.</p> *@
                    @*     <p v-else>Guest View: Please log in.</p> *@
                    @* </div> *@
            </div>
        </div>
    </div>
</div>
    <script src="~/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="~/dist/js/jquery-ui.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="~/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="~/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="~/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="~/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="~/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="~/dist/js/custom.min.js"></script>
    <!--Form JS-->
    <script src="~/assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
    <script src="~/dist/js/pages/mask/mask.init.js"></script>
    <script src="~/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="~/assets/libs/jquery-asColor/dist/jquery-asColor.min.js"></script>
    <script src="~/assets/libs/jquery-asGradient/dist/jquery-asGradient.js"></script>
    <script src="~/assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js"></script>
    <script src="~/assets/libs/jquery-minicolors/jquery.minicolors.min.js"></script>
    <script src="~/assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="~/assets/libs/quill/dist/quill.min.js"></script>
    <script src="~/lib/printjs/print.min.js"></script>
    <script src="~/lib/html2canvas/html2canvas.min.js"></script>
    <script src="~/lib/html2canvas/dom-to-image.min.js"></script>
    <!-- Datatables JS-->
    <script src="~/lib/datatables/datatables.js"></script>

    <script>
        $(function () {
            app.mount('#app');
        });
        const app = Vue.createApp({
                data() {
                    return {
                        thisItem: null,
                        itemId: '@itemId',
                        isAdmin: false,
                    }
            },
            mounted() {
                // Fetch companies, depts, and products from the API
                this.fetchItem();
                this.fetchUser();
            },
            methods: {
                async fetchItem() {
                    try {
                        const response = await fetch('/InvMainAPI/GetItem/' + this.itemId, {
                            method: 'POST',}
                        );
                        if (response.ok) {
                            this.thisItem = await response.json();
                            
                        } else {
                            console.error('Failed to fetch item information');
                            this.responseMessage = await response.text();
                        }
                    } catch (error) {
                        console.error('Error fetching item information:', error);
                    }
                },
                async fetchUser() {
                    try {
                        // var isAdmin = userRole.Contains("SystemAdmin") || userRole.Contains("SuperAdmin") || userRole.Contains("Finance");

                        const adminRoles = ["SystemAdmin", "SuperAdmin", "Finance"];


                        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;
                            this.currentUserCompanyDept = companyDeptData;
                            this.selectedCompany = companyDeptData?.companyId || "";
                            this.selectedDepartment = companyDeptData?.departmentId || "";
                            this.isAdmin = adminRoles.some(role => this.currentUser.role.includes(role));

                        }
                        else {
                            console.error(`Failed to fetch user: ${response.statusText}`);
                        }
                    }
                    catch (error) {
                        console.error('There was a problem with the fetch operation:', error);
                    }
                },
            }
        });
    </script>
</body>
</html>
