<%@ Page Title="InventoryBatchAdjust" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true" CodeBehind="InventoryBatchAdjust.aspx.cs" Inherits="SUNWEB.InventoryBatchAdjust" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <style type="text/css">
        div {
            font-weight: 100; /* Change the value to your desired font-weight */
            color: black;
            font-size: 14px;
            font-family: Verdana, sans-serif;
        }

        .modal {
            font-weight: 100; /* Change the value to your desired font-weight */
            color: black;
            font-size: 14px;
            font-family: Verdana, sans-serif;
        }

        .table thead tr th {
            font-family: Verdana, sans-serif;
            font-size: 16px;
            font-weight: 600;
        }

        @media only screen and (min-height: 900px) {
            .modal-dialog {
                margin-top: 10vh;
            }

            #divInventoryAdjust {
                min-height: 50vh;
                max-height: 50vh;
            }

            #divtblAdjustDetail {
                min-height: 60vh;
                max-height: 60vh;
            }
        }

        @media only screen and (min-height: 780px) and (max-height: 899px) {

            #divInventoryAdjust {
                min-height: 35vh;
                max-height: 35vh;
            }


            #divtblAdjustDetail {
                min-height: 50vh;
                max-height: 50vh;
            }
        }

        input[type="search"]::-webkit-search-cancel-button {
            /* Remove default */
            -webkit-appearance: none;
            /* Now your own custom styles */
            height: 14px;
            width: 14px;
            display: block;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
            /* setup all the background tweaks for our custom icon */
            background-repeat: no-repeat;
            /* icon size */
            background-size: 14px;
        }

   

        /*    .modal-backdrop.show:nth-of-type(even) {
        z-index: 1051 !important;
        position: absolute;
    }

    .modal:nth-of-type(even) {
        z-index: 1052 !important;
    }*/
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--    <asp:UpdatePanel ID="updatepanel1" UpdateMode="Conditional">--%>
    <asp:UpdatePanel ID="updatepanel1" runat="server">
        <ContentTemplate>
            <div class="row d-none">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-row">
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2 d-none">
                                    <caption>
                                        <label for="validationCustom03">
                                            FROM DATE
                                        </label>
                                        <asp:TextBox ID="txtStartDt" class="form-control" runat="server"></asp:TextBox>
                                        <asp:CalendarExtender ID="calFirstDueDate" Format="yyyy-MM-dd" runat="server" TargetControlID="txtStartDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                    </caption>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2 d-none">
                                    <label for="validationCustom03">
                                        TO DATE
                                    </label>
                                    <asp:TextBox ID="txtEndDt" class="form-control" runat="server"></asp:TextBox>
                                    <asp:CalendarExtender ID="CalendarExtender1" Format="yyyy-MM-dd" runat="server" TargetControlID="txtEndDt" PopupPosition="BottomLeft" FirstDayOfWeek="Sunday"></asp:CalendarExtender>
                                </div>

                                <%--<div class="container">
                                    <label for="validationCustom03">
                                        <asp:Label ID="lblBranchAliasName" ForeColor="Gray" runat="server" Text="Branch"></asp:Label></label>
                                    <asp:DropDownList ID="cmbBranches" CssClass="custom-select"
                                        runat="server" AutoPostBack="true"
                                        OnSelectedIndexChanged="cmbBranches_SelectedIndexChanged">
                                    </asp:DropDownList>
                                </div>--%>


                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2  d-none   ">
                                    <asp:Button ID="btnGetReports" runat="server" Text="Apply"
                                        CssClass="btn btn-primary" OnClick="btnGetReports_Click" OnClientClick="return validate()" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="body" class="d-flex justify-content-end my-2">
                <div class="col-2 align-content-center text-right">
                    <asp:Label ID="lblcurrentdb" runat="server" Style="color: transparent"></asp:Label>
                </div>
                <div class="col-2 align-content-center text-right">
                    Branch
                </div>
                <div class="dropdown text-end" style="width: 240px">
                    <asp:DropDownList ID="cmbBranches" CssClass="custom-select"
                        runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="cmbBranches_SelectedIndexChanged">
                    </asp:DropDownList>
                </div>
            </div>


            <div class="container-fluid bg-white overflow-auto" style="min-height: 70vh">
                <div class="d-flex justify-content-end my-3">
                    <button id="btn-viewgroup" class="btn p-1 align-middle" type="button"><i class="bi bi-folder-plus fs-4 px-2"></i>Add Group</button>



                </div>
                <div class="d-flex justify-content-end my-3">
                    <%--<div class="input-group mb-2 w-50">
                        <button id="dpSearchBy" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Search By</button>
                        <ul class="dropdown-menu" id="ulSearchBy">
                            <li><a class="dropdown-item">Name</a></li>
                            <li><a class="dropdown-item">Description</a></li>
                        </ul>
                        <input id="inputCategory" type="text" class="form-control">
                    </div>--%>

                    <div class="container-fluid p-0">
                        <div class="row py-1 ">
                            <div class="col-sm-5 col-md-3">
                                <label for="input-datalist-category">Category</label>

                                <input type="search" class="form-control" placeholder="Search Category" list="list-category" id="input-datalist-category" name="input-datalist">
                                <datalist id="list-category"></datalist>
                            </div>
                            <div class="col-sm-5 col-md-3">
                                <label for="searchby">Search By</label>
                                <select id="selectedsearch" class="form-select rounded-0" aria-label="size 3 select example">
                                    <option value="1">Barcode</option>
                                    <option value="2">Name</option>
                                    <option value="3">Description</option>
                                </select>
                            </div>
                            <div class="col-sm-5 col-md-3">
                                <label for="fname">Search</label>
                                <br />
                                <input type="search" id="inputsearch" class="form-control" placeholder="Search">
                            </div>
                        </div>

                    </div>
                </div>

                <%--          <div class="row border-top border-bottom fs-6 fw-bold text-middle">
                    <div class="visually-hidden">ID</div>
                    <div class="col-2 border-end p-1 align-content-center">Barcode</div>
                    <div class="col-2 border-end p-1 align-content-center">Name</div>
                    <div class="col-4  border-end p-1 align-content-center">Description</div>
                    <div class="col-1 border-end text-center p-1 align-content-center">QOH</div>
                    <div class="col-3 border-end text-center py-1">Action</div>
                </div>
                <div id="divInventoryData"></div>--%>
                <div class=" overflow-auto">
                <table id="tblInventory" class="table fw-light mb-1">
                    <thead>
                        <tr>
                            <th class="col-2 border-start border-end p-1 align-content-center" scope="col">Barcode</th>
                            <th class="col-2 border-end p-1 align-content-center" scope="col">Name</th>
                            <th class="col-2 border-end p-1 align-content-center" scope="col">Description</th>
                            <th class="col-2 border-end p-1 align-content-center" scope="col">Category</th>
                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">QOH</th>
                            <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody">
                    </tbody>
                </table>
                </div>
            </div>

            <div class="container-fluid p-3 bg-white">
                <section class="col-4 d-flex" id="inventory-list"></section>
                <div id="paggination"></div>
            </div>

            <!--modal spinner -->
            <%--<div class="modal show" id="modalspinner">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Show a second modal and hide this one with the button below.
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
                        </div>
                    </div>
                </div>
            </div>--%>

            <!-- Modal -->
            <%--<div id="modalInventoryAdjust" class="modal fade overflow-hidden" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">--%>
            <div id="modalInventoryAdjust" class="modal fade overflow-hidden" data-bs-backdrop="static" tabindex="-1">
                <div class="modal-dialog" style="margin-top: 2vh; min-width: 85vw; margin-left: 10vw; margin-right: 10vw; min-height: 90vh; max-height: 90vh">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light" id="staticBackdropLabel">Stock Adjust</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>

                        <div class="modal-body overflow-auto py-0">
                            <div class="container-fluid lh-sm">
                                <div>
                                    <div class="row py-1 ">
                                        <div class="col-sm-5 col-md-3">
                                            <label for="inputbarcode" class="form-label">Barcode</label>
                                            <input type="text" id="inputbarcode" readonly class="form-control-plaintext fs-5 fw-bold" value="A002">
                                        </div>
                                        <div class="col-sm-5 col-md-3">
                                            <label for="inputname" class="form-label">Name</label>
                                            <input type="text" id="inputname" readonly class="form-control-plaintext fs-5 fw-bold" value="Coke">
                                        </div>
                                        <div class="col-sm-5 offset-sm-2 col-md offset-md-0">
                                            <label for="inputdesc" class="form-label">Description</label>
                                            <input type="text" id="inputdesc" readonly class="form-control-plaintext fs-5 fw-bold" value="Coke">
                                        </div>
                                    </div>

                                    <div class="row py-1">
                                        <div class="col-sm-5 col-md-3">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label for="inputunit" class="form-label">Group Unit</label>
                                                    <div class="dropdown">
                                                        <button id="btnGroupUnit" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown">
                                                        </button>
                                                        <ul id="ddGroupUnit" class="dropdown-menu text-start">
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <label for="inputunit" class="form-label">Unit</label>
                                                    <div class="dropdown">
                                                        <button id="btnUnit" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown">
                                                            PCS
                                                        </button>
                                                        <ul id="ddUnit" class="dropdown-menu">
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="col-sm-5 col-md-3">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label id="lblNo" for="inputnumberofqty" class="form-label">No.</label>
                                                    <input type="number" id="inputnumberofqty" class="form-control" min="1" value="0" readonly>
                                                </div>

                                                <div class="col-6">
                                                    <label for="inputqty" class="form-label">Quantity</label>
                                                    <input type="number" id="inputqty" class="form-control" min="1" value="1">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5 col-md-3">
                                            <label for="inputcost" class="form-label">Cost(per piece/qty)</label>
                                            <input type="number" id="inputcost" class="form-control" value="0.00">
                                        </div>
                                    </div>

                                    <div class="row py-1">
                                        <div class="col-sm-5 col-md-3">
                                            <label for="inputexp" class="form-label">Exp</label>
                                            <%--<input type="text" id="inputexp" class="form-control" value="2024-11-08">--%>
                                            <div class="input-group date" id="datepicker">
                                                <input type="date" class="form-control" id="date" pattern="\d{4}-\d{2}-\d{2}" />

                                            </div>
                                        </div>

                                        <div class="col-sm-5 col-md-3">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label for="inputalarm" class="form-label">Alarm</label>
                                                    <%--<input type="text" id="inputalarm" class="form-control" value="0">--%>
                                                    <div class="dropdown">
                                                        <button id="btnalarm" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown">
                                                            No
                                                        </button>
                                                        <ul id="ddalarm" class="dropdown-menu">
                                                            <li><a class="dropdown-item">NO</a></li>
                                                            <li><a class="dropdown-item">YES</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="row py-1">
                                        <div class="col-sm-5 offset-sm-2 col-md-3 offset-md-0">
                                            <label for="inputbatchid" class="form-label">Batch ID</label>
                                            <input type="text" id="inputbatchid" class="form-control" value="" readonly>
                                        </div>
                                    </div>

                                    <div class="row py-1">
                                        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0 text-start">
                                            <button type="button" class="btn  btn-outline-success">Confirm Stock In</button>
                                        </div>
                                    </div>
                                </div>

                                <!--table-->
                                <div id="divInventoryAdjust" class="container-fluid p-0 overflow-auto border">
                                    <table id="tblInventoryAdjust" class="table fw-light mb-1">
                                        <thead>
                                            <tr>
                                                <th class="col-2 border-start border-end p-1 align-content-center text-center" scope="col">Batch ID</th>
                                                <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Date</th>
                                                <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Cost</th>
                                                <th class="col-1 border-end p-1 align-content-center text-center" scope="col">QTY IN</th>
                                                <th class="col-1 border-end p-1 align-content-center text-center" scope="col">QTY OUT</th>
                                                <th class="col-1 border-end p-1 align-content-center text-center" scope="col">On Hand</th>
                                                <th class="col-2 border-end p-1 align-content-center text-center" scope="col">EXP</th>
                                                <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Alert</th>
                                                <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tblBodyAdjust">
                                        </tbody>
                                    </table>
                                </div>
                                <section class="col-4 mt-2 d-flex d-none" id="card-list"></section>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Stockout-->
            <div class="modal fade" id="modalstockout" data-bs-backdrop="static">
                <div class="modal-dialog ">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light">Stock Out</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex justify-content-start">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsobarcode" class="form-label m-0 px-2">Barcode :</label>
                                </div>
                                <div class="col-md px-2">
                                    <input type="text" id="inputsobarcode" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>

                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsoname" class="form-label m-0 px-2">Name :</label>
                                </div>
                                <div class="col-md px-2">
                                    <input type="text" id="inputsoname" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>

                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsodesc" class="form-label m-0 px-2">Description :</label>
                                </div>
                                <div class="col-md px-2">
                                    <input type="text" id="inputsodesc" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>

                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsobatchid" class="form-label m-0 px-2">Batch ID :</label>
                                </div>
                                <div class="col-md-3 px-2">
                                    <input type="text" id="inputsobatchid" readonly class="form-control-plaintext fs-6 fw-bold">
                                </div>
                            </div>

                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputalarm" class="form-label m-0 px-2">Alarm :</label>
                                </div>
                                <div class="col-md-3 px-2">
                                    <input type="text" id="inputalarm" readonly class="form-control-plaintext fs-6 fw-bold">
                                </div>
                            </div>

                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsounitcost" class="form-label m-0 px-2">Unit Cost :</label>
                                </div>
                                <div class="col-md-3 px-2">
                                    <input type="input" id="inputsounitcost" class="form-control" value="" readonly>
                                </div>

                            </div>

                            <div class="d-flex justify-content-start pt-2">

                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="inputsoqty" class="form-label m-0 px-2">Quantity :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <input type="number" id="inputsoqty" class="form-control" min="1" value="1">
                                </div>
                            </div>


                            <%--  <div class="row">
                               <div class="col-sm-5 col-md">
                                    <label for="inputsobarcode" class="form-label">Barcode</label>
                                    <input type="text" id="inputsobarcode" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-5 col-md">
                                    <label for="inputsoname" class="form-label">Name</label>
                                    <input type="text" id="inputsoname" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 col-md">
                                    <label for="inputsodesc" class="form-label">Description</label>
                                    <input type="text" id="inputsodesc" readonly class="form-control-plaintext fs-6 fw-bold" value="Coke">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 col-md">
                                    <label for="inputsobatchid" class="form-label">Batch ID</label>
                                    <input type="text" id="inputsobatchid" readonly class="form-control-plaintext fs-5 fw-bold" readonly>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 col-md-3">
                                    <label for="inputsounitcost" class="form-label">Unit Cost</label>
                                    <input type="input" id="inputsounitcost" class="form-control" value="" readonly>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-5 col-md-3">
                                    <label for="inputsoqty" class="form-label">Quantity</label>
                                    <input type="number" id="inputsoqty" class="form-control" min="1" value="1">
                                </div>
                            </div>
                            --%>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-danger btn-md m-0">Confirm Stock Out</button>
                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--Modal View Detail-->
            <div class="modal fade" id="modalviewdetail" data-bs-backdrop="static">
                <div class="modal-dialog" style="margin-top: 2vh; min-width: 85vw; margin-left: 10vw; margin-right: 10vw; min-height: 90vh; max-height: 90vh">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light">Stock Detail</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body">
                            <div class="row py-1 ">
                                <div class="col-sm-5 col-md-3">
                                    <label for="inputdetailbarcode">Barcode</label>
                                    <input type="text" id="inputdetailbarcode" readonly class="form-control-plaintext fs-5 fw-bold" value="A002">
                                </div>
                                <div class="col-sm-5 col-md-3">
                                    <label for="inputdetailname" class="form-label">Name</label>
                                    <input type="text" id="inputdetailname" readonly class="form-control-plaintext fs-5 fw-bold" value="Coke">
                                </div>
                                <div class="col-sm offset-sm-2 col-md offset-md-0">
                                    <label for="inputdetaildesc" class="form-label">Description</label>
                                    <input type="text" id="inputdetaildesc" readonly class="form-control-plaintext fs-5 fw-bold" value="Coke">
                                </div>
                            </div>



                            <div class="row py-1 ">
                                <div class="col-sm-5 col-md-3">
                                    <label for="inputqoh">On Hand</label>
                                    <input type="text" id="inputqoh" readonly="" class="form-control-plaintext px-0 fs-4 fw-bold text-left text-success" value="Coke">

                                    <div class="col-sm-5 col-md-3">
                                    </div>
                                    <div class="col-sm-5 offset-sm-2 col-md-3 offset-md-0">
                                    </div>
                                    </label>
                                </div>
                            </div>

                            <div class="row py-1 px-4">
                                <div class="col-sm-5 col-md-3">
                                    <input class="form-check-input" type="checkbox" value="" id="chkshownegative">
                                    <label class="form-check-label" for="chkshownegative">
                                        View Negative Stock
                                    </label>
                                </div>
                            </div>

                            <!--table-->
                            <div id="divtblAdjustDetail" class="container-fluid p-0 overflow-auto border">
                                <table id="tblAdjustDetail" class="table fw-light mb-1">
                                    <thead>
                                        <tr>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Batch ID</th>
                                            <%--<th class="col-2 border-end p-1 align-content-center text-center" scope="col">Barcode</th>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Name</th>
                                            <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Description</th>--%>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Cost</th>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">IN QTY</th>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">OUT QTY</th>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">On Hand</th>
                                            <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Expiry Date</th>
                                            <th class="col-1 border-end p-1 align-content-center text-center" scope="col">Alarm</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblBodyStockDetail">
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>

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

            <!--Modal Group Unit-->
            <div class="modal fade" id="modal-addgroup" data-bs-backdrop="static">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light">Group</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                            <div class="row py-1 visually-hidden" style="height:10px">
                                <div class="col-sm-5 col-md">
                                    <label>ID</label>
                                    <input type="text" id="input-groupid" readonly class="form-control-plaintext  fw-bold border p-2">
                                </div>
                            </div>
                            <div class="row py-1 ">

                                <div class="col-sm-5 col-md">
                                    <label>Group Name</label>
                                    <input type="search" id="input-groupname" class="form-control-plaintext  fw-bold border p-2">
                                </div>
                            </div>
                            <div class="py-3">
                                <button type="button" id="btn-save-group" class="btn btn-primary">Save</button>
                            </div>
                            <!--table-->
                            <div id="divtbl-groupunit" class="container-fluid p-0" style="max-height: 30vh; overflow-y: auto;">
                                <table id="tbl-groupunit" class="table fw-light mb-1">
                                    <thead>
                                        <tr>                                           
                                            <th class="border-start  p-1 align-content-center text-center" scope="col" >ID</th>
                                            <th class="col-1 border-start  p-1 align-content-center text-center" scope="col">Group Name</th>
                                            <th class="col-1 border-start   border-end p-1 align-content-center text-center" scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblbody-groupunit">
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>

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

            <!--Modal Unit-->
            <div class="modal fade bd-example-modal-lg" id="modal-viewunit" data-bs-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light">Unit</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body" style="max-height: 70vh; min-height: 70vh; ">
                                <div class="row py-1 visually-hidden" style="height:10px">
                                <div class="col-sm-5 col-md">
                                    <label>ID</label>
                                    <input type="text" id="input-unitid" class="form-control-plaintext  fw-bold border p-2" readonly>
                                </div>
                            </div>
                            <div class="row py-1 ">
                                <div class="col-sm-5 col-md">
                                    <label>Unit name</label>
                                    <input type="search" id="input-unitname" class="form-control-plaintext  fw-bold border p-2">
                                </div>
                            </div>
                            <div class="row py-1 ">
                                <div class="col-sm-5 col-md">
                                    <label>Total Quantity</label>
                                    <input type="number" id="input-totalqty" class="form-control-plaintext  fw-bold border p-2" placeholder="1">
                                </div>
                            </div>
                            <div class="row py-1 ">
                                <div class="col-sm-5 col-md">
                                    <%--  <div class="btn-group">--%>
                                    <label>Group</label>
                                    <button type="button" id="btn-group" class="btn btn-primary dropdown-toggle text-capitalize" data-bs-toggle="dropdown" aria-expanded="false" style="width: 100%; height: 35px; text-align: left; display: flex; justify-content: space-between; align-items: center">
                                        Select Group
                                    </button>
                                    <ul class="dropdown-menu" id="ul-group" style="width: 90%; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(290px, 357px);" data-popper-placement="bottom-start">
                                        <li id="u-groups"></li>
                                    </ul>
                                    <%--   </div>--%>
                                </div>
                            </div>

                            <div class="py-3">
                                <button type="button" id="btn-save-unit" class="btn btn-primary">Save</button>
                            </div>
                            <!--table-->
                            <div id="divtbl-unit" class="container-fluid p-0 overflow-auto"  style="max-height: 25vh; overflow-y: auto;">
                                <table id="tbl-unit" class="table fw-light mb-1">
                                    <thead>
                                        <tr>
                                            <th class="border-start border-end p-1 align-content-center text-center" scope="col">ID</th>
                                            <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Unit Name</th>
                                            <th class="col-2 border-end p-1 align-content-center text-center" scope="col">Total Qty</th>
                                            <th class="border-end p-1 align-content-center text-center" scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblbody-unit">
                                    </tbody>
                                </table>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </ContentTemplate>
    </asp:UpdatePanel>


    <script type="text/javascript">  
        function readWebConfig() {
            var conStr = '<%=ConfigurationManager.ConnectionStrings["API_BaseURL"].ConnectionString %>'
            return conStr
        }

        function loadDB() {         
            return document.getElementById("<%=lblcurrentdb.ClientID %>").innerHTML;
        }

// script.js file

function domReady(fn) {
    if (
        document.readyState === "complete" ||
        document.readyState === "interactive"
    ) {
        setTimeout(fn, 1000);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

/*domReady(function () {

    // If found you qr code
    function onScanSuccess(decodeText, decodeResult) {
        alert("You Qr is : " + decodeText, decodeResult);
    }

    let htmlscanner = new Html5QrcodeScanner(
        "my-qr-reader",
        { fps: 10, qrbos: 250 }
    );
    htmlscanner.render(onScanSuccess);
});*/

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.js"></script>
    <script src="sunScript/InventoryAdjust.js"></script>
    <script src="sunScript/api.js"></script>
    <style>
        .dropdown-menu {
            position: absolute !important;
            transform: translate3d(0, 0, 0) !important;
            inset: auto !important;
            z-index: 999999 !important;
        }
  </style>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</asp:Content>

