@{
    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>
            <div style="text-align: center; margin: 20px 0;" v-if="displayStatus != null">
                <h2>Item Receive Information :</h2>
            </div>
            <div v-if="displayStatus != null" style="display: flex; justify-content: center; align-items: 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" 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>

                </div>
             
            </div>

            <form v-on:submit="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="resetForm" class="btn btn-secondary m-1">Return</button>
                                                <button type="submit" class="btn btn-primary m-1">Receive</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>


        </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,
                };
            },
            mounted() {
                this.fetchStation();
                this.fetchUser();
                this.startScanner();
            },
            methods: {
                async updateItemMovement() {
                    if (!confirm("Are you sure you already receive this item?")) {
                        return false;
                    }

                    try {

                        const formData = {
                            Id: this.thisItem.movementId,
                            LastStation: this.selectedStation,
                            receiveDate: new Date().toISOString(),
                            LatestStatus: "Delivered",
                            MovementComplete: true,
                        };

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

                        if (response.ok) {
                            alert('Success! Item movement has been successfully submitted.');
                            // this.displayStatus = "return";
                            // 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: 200
                    };

                    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.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.latestStatus == null && this.thisItem.currentUserId == this.currentUserId) {
                                this.displayStatus = "arrived";
                            } else if (this.thisItem.movementId != null && this.thisItem.toOther === "Delivered" && this.thisItem.currentUserId == this.currentUserId) {
                                this.displayStatus = "return";
                            } else {
                                this.displayStatus = "differentUser";
                                this.thisItem = null;
                                this.displayStatus = 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;
                }
            },
        });

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