@{
    ViewData["Title"] = "QR Scanner";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    @@font-face {
        font-family: 'OCR-A';
        src: url('../assets/fonts/ocraext.ttf');
    }

    .QrPrintFont {
        font-family: 'OCR-A', monospace;
    }

    .table td img {
        display: block !important;
    }


</style>
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartialUser.cshtml");
<div id="registerItem" class="row">
    <div class="row card">
        <div class="card-header">
            <button v-if="displayStatus !== null" v-on:click="resetScanner" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Scanner
            </button>
        </div>
        <div class="card-body">

            <div id="app" v-if="displayStatus == null" data-aos="fade-right">
                <h1 data-aos="fade-right">QR & Barcode Scanner</h1>
                <div id="reader" data-aos="fade-right"></div>
            </div>

            <!--RECEIVE OR RETURN INTERFACE -->
            <div style="text-align: center; margin: 20px 0;" v-if="displayStatus === 'arrived'">
                <h2>Item Receive Information :</h2>
            </div>
            <div style="text-align: center; margin: 20px 0;" v-if="displayStatus === 'return'">
                <h2>Item Return Information :</h2>
            </div>

            <div v-if="displayStatus === 'arrived' || displayStatus === 'return'" style="display: flex; justify-content: center; align-items: center;">
                
                <div  class="col-lg-7 col-11 border rounded p-3 shadow-sm">
                    <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>

                    <!-- 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>

                    <!--RECIEVE INTERFACE -->
                    <div class="col-12" v-if="displayStatus === 'arrived'">
                        <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>Receiver 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="mdi mdi-factory 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>

                    <!--RETURN INTERFACE -->
                    <div class="col-12" v-if="displayStatus === 'return'">
                        <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>Receiver 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.toUserName }}
                                            </span>
                                        </div>
                                    </li>

                                    <!-- Store -->
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="fw-bold">
                                            <i class="mdi mdi-factory me-2 text-secondary"></i>Store:
                                        </span>
                                        <span class="text-muted">{{ thisItem.toStoreName }}</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.toStationName || 'N/A' }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
             
            </div>

            <!--RECIEVE INTERFACE -->
            <form v-on:submit.prevent="updateItemMovement" v-if="displayStatus === 'arrived'" data-aos="fade-right">
                <div class=" register" data-aos="fade-right">
                    <div class="row" data-aos="fade-right">

                        @*Right Side*@
                        <div class="col-md-12">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <br><br>
                                    <h3 style="text-align: center; margin: 20px 0; padding: 20px;" class="register-heading" style="margin: auto">Station Deploy :</h3>
                                    <div class="row register-form">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6">

                                            <!-- Station Dropdown -->
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label">Deploy Station : </label>
                                                <div class="col-sm-8">
                                                    <select class="btn btn-primary dropdown-toggle col-md-10" v-model="selectedStation" >
                                                        <option class="btn-light" value="" disabled selected>Select Station</option>
                                                        <option class="btn-light" v-for="(station, index) in stationList" :key="index" :value="station.stationId">{{ station.stationName}}</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                        @* Submit and Reset Buttons *@
                                        <div class="form-group row">
                                            <div class="col-sm-8 offset-sm-3">
                                                <button type="button" v-on:click="receiveReturnMessage" class="btn btn-secondary m-1">Return Item</button>
                                                <button type="submit" class="btn btn-primary m-1">Receive Item</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>

            <!--RETURN INTERFACE -->
            <form v-on:submit.prevent="returnItemMovement" v-if="displayStatus === 'return'" data-aos="fade-right">
                <div class=" register" data-aos="fade-right">
                    <div class="row" data-aos="fade-right">

                        @*Right Side*@
                        <div class="col-md-12">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <br><br>
                                    <h3 style="text-align: center; margin: 20px 0; padding: 20px;" class="register-heading" style="margin: auto">Station Deploy :</h3>
                                    <div class="row register-form">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6">

                                            <!-- Remark Input -->
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label">Remark : </label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control col-md-10" v-model="remark" />
                                                </div>
                                            </div>

                                            <!-- Consignment Note input -->
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label">Consignment Note : </label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control col-md-10" v-model="consignmentNote" />
                                                </div>
                                            </div>
                                        </div>

                                        @* Submit and Reset Buttons *@
                                        <div class="form-group row">
                                            <div class="col-sm-8 offset-sm-3">
                                                <button type="submit" class="btn btn-primary m-1">Return Item</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!--RECEIVE THEN RETURN INTERFACE -->
            <div class="modal fade" id="returnModal" tabindex="-1" role="dialog" aria-labelledby="returnModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="returnModalLabel">Return Item</h5>
                            <button type="button" class="close" data-dismiss="modal" v-on:click="closeModal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form v-on:submit.prevent="receiveReturnAPI">

                                <!-- Station Dropdown -->
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Deploy Station : </label>
                                    <div class="col-sm-8">
                                        <select class="btn btn-primary dropdown-toggle col-md-10" v-model="selectedStation">
                                            <option class="btn-light" value="" disabled selected>Select Station</option>
                                            <option class="btn-light" v-for="(station, index) in stationList" :key="index" :value="station.stationId">{{ station.stationName}}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Remark:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" v-model="remark" />
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Consignment Note:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" v-model="consignmentNote" />
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Return Item</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ALREADY RETURN ITEM INTERFACE -->
            <div v-if="displayStatus === 'requestAgain'" class="d-flex justify-content-center align-items-center vh-100">
                <div class="col-lg-10 col-11 border rounded p-5 shadow-lg text-center min-vh-50">
                    <h1 class="text-danger">The item has been register as returned.</h1>
                    <h3 class="text-muted">You need to request this item again to used it legally.</h3>
                </div>
            </div>

            <!-- NOT SIGN IN ITEM INTERFACE -->
            <div v-if="displayStatus === 'differentUser'" class="d-flex justify-content-center align-items-center vh-100">
                <div class="col-lg-10 col-11 border rounded p-5 shadow-lg text-center min-vh-50">
                    <h1 class="text-danger">The item is not assigned to you.</h1>
                    <h3 class="text-muted">You need to request this item to validly use it.</h3>
                </div>
            </div>

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

@section Scripts {

    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

    <script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    thisItem: null,
                    qrCodeResult: null,
                    html5QrCodeScanner: null,
                    debounceTimeout: null,
                    selectedUser: "",
                    selectedStation: "",
                    stationList: [],
                    displayStatus: null,
                    debounceTime: 500,
                    currentUser: null,
                    movementId: null,
                    currentUserId: null,
                    remark: null,
                    consignmentNote: null,
                    receiveReturn: null,
                    UniqueID : null,
                };
            },
            mounted() {
                this.fetchStation();
                this.fetchUser();
                this.startScanner();
            },
            methods: {
                async updateItemMovement() {

                    const requiredFields = ['selectedStation'];

                    for (let field of requiredFields) {
                        if (!this[field]) {
                            alert(`Request Error: Please fill in required field ${field}.`, 'warning');
                            return;
                        }
                    }

                    if (this.receiveReturn == null) {
                        if (!confirm("Are you sure you already received this item?")) {
                            return false;
                        }
                    }

                    try {
                        const now = new Date();
                        const formData = {
                            Id: this.thisItem.movementId,
                            LastStation: this.selectedStation,
                            LatestStatus: "Delivered",
                            ReceiveDate: new Date(now.getTime() + 8 * 60 * 60 * 1000).toISOString(),
                            MovementComplete: true
                        };

                        const response = await fetch('/InvMainAPI/UpdateItemMovementUser', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(formData)
                        });

                        if (response.ok) {
                            if (this.receiveReturn == null) {
                                alert('Success! Item has been successfully received.');
                                this.thisItem = await response.json();
                                this.displayStatus = "return";
                                this.fetchItem(this.UniqueID);
                                this.resetForm();
                            } else {
                                this.returnItemMovement();
                            }
                        } else {
                            throw new Error('Failed to submit form.');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        alert('Inventory PSTW Error: An error occurred.');
                    }
                },
                async returnItemMovement() {

                    const requiredFields = ['remark', 'consignmentNote'];

                    for (let field of requiredFields) {
                        if (!this[field]) {
                            alert(`Request Error: Please fill in required field ${field}.`, 'warning');
                            return;
                        }
                    }

                    if (!confirm("Are you sure you want to return this item?")) {
                        return false;
                    }

                    try {
                        const now = new Date();
                        const formData = {
                            ItemId: this.thisItem.itemID,
                            ToStation: this.thisItem.currentStationId,
                            ToStore: this.thisItem.currentStoreId,
                            ToUser: this.currentUserId,
                            ToOther: "Return",
                            SendDate: new Date(now.getTime() + 8 * 60 * 60 * 1000).toISOString(),
                            Action: "StockIn",
                            Quantity: this.thisItem.quantity,
                            Remark: this.remark,
                            ConsignmentNote: this.consignmentNote,
                            Date: new Date(now.getTime() + 8 * 60 * 60 * 1000).toISOString(),
                            LastUser: this.thisItem.toUser,
                            LastStore: this.thisItem.toStore,
                            LastStation: this.thisItem.toStation,
                            LatestStatus: null,
                            ReceiveDate: null,
                            MovementComplete: false,
                        };

                        const response = await fetch('/InvMainAPI/ReturnItemMovementUser', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(formData)
                        });

                        if (response.ok) {
                            alert('Success! Item is on the delivery to return to Inventory Master.');
                            this.thisItem = await response.json();
                            $('#returnModal').modal('hide');
                            this.displayStatus = "requestAgain";
                            this.resetForm();
                        } else {
                            throw new Error('Failed to submit form.');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        alert('Inventory PSTW Error: An error occurred.');
                    }
                },
                startScanner() {
                    const config = {
                        fps: 60,
                        qrbox: 400
                    };

                    navigator.mediaDevices.getUserMedia({ video: true })
                        .then(() => {
                            this.html5QrCodeScanner = new Html5QrcodeScanner("reader", config, false);
                            this.html5QrCodeScanner.render((decodedText) => {
                                if (!this.debounceTimeout) {
                                    this.debounceTimeout = setTimeout(() => {
                                        this.qrCodeResult = decodedText;
                                        this.UniqueID = decodedText.split('/').pop();
                                        this.fetchItem(decodedText.split('/').pop());
                                        this.debounceTimeout = null;
                                    }, this.debounceTime);
                                }
                            });
                        })
                        .catch((err) => {
                            console.error("Error accessing camera:", err);
                        });
                },
                async fetchItem(itemid) {
                    try {
                        const response = await fetch('/InvMainAPI/GetItem/' + itemid, {
                            method: 'POST',
                        }
                        );

                        if (response.ok) {
                            this.thisItem = await response.json();

                            if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus == null && this.thisItem.currentUserId == this.currentUserId) {
                                this.displayStatus = "arrived";
                            } else if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus != null && this.thisItem.currentUserId == this.currentUserId) {
                                this.displayStatus = "return";
                            } else if (this.thisItem.movementId != null && this.thisItem.toOther === "Return" && this.thisItem.latestStatus == null && this.thisItem.toUser == this.currentUserId) {
                                this.displayStatus = "requestAgain";
                            } else {
                                this.displayStatus = "differentUser";
                                this.thisItem = null;
                            }
                        } else {
                            console.error('Failed to fetch item information');
                        }
                    } catch (error) {
                        console.error('Error fetching item information:', error);
                    }
                },

                async fetchStation() {
                    try {
                        const response = await fetch('/InvMainAPI/StationList', {
                            method: 'POST', // Specify the HTTP method
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        });
                        if (!response.ok) {
                            throw new Error('Failed to fetch suppliers');
                        }
                        this.stationList = await response.json(); // Get the full response object

                    } catch (error) {
                        console.error('Error fetching suppliers:', error);
                    }
                },

                async fetchUser() {
                try {
                    const response = await fetch(`/IdentityAPI/GetUserInformation/`, {
                        method: 'POST',
                    });
                        if (response.ok) {
                            const data = await response.json();
                            this.currentUser = data?.userInfo || null;
                            this.currentUserId = this.currentUser.id;
                        }
                        else {
                            console.error('Failed to fetch user');
                        }
                    }
                    catch (error) {
                        console.error('There was a problem with the fetch operation:', error);
                    }
                },

                resetScanner() {
                    this.displayStatus = null;
                    this.qrCodeResult = null;
                    this.thisItem = null;

                    this.startScanner();
                },

                resetForm() {
                    this.selectedStation = null;
                },

                async receiveReturnAPI() {
                    this.receiveReturn = 1;
                    console.log("update");
                    this.updateItemMovement();
                },

                receiveReturnMessage() {
                    $("#returnModal").modal("show");
                },

                closeModal() {
                    $('#returnModal').modal('hide'); // Manually hide the modal
                },
            },
        });

        app.mount('#registerItem');

        $(function () {
            // Attach event listener to show modal
            $('#addItemBtn').on('click', function () {
                $('#registerItemModal').modal('show');
            });

            // Close modals
            $('.closeModal').on('click', function () {
                $('.modal').modal('hide');
            });
        });
    </script>
}