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

<%@ 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>


    <style>
        #hiddenloader {
            display: none;
        }

        .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }


        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;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
        <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">
                                    <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">
                                    <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="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <label for="validationCustom03">
                                        <asp:Label ID="lblBranchAliasName" ForeColor="Gray" runat="server" Text="Branch Name"></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">
                                    <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 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 p-2 position-relative z-1">
                <div class="col-sm-5 col-md-3 p-1 ">
                     <label for="input"  class="fw-light">Search by </label>
                    <div class="dropdown">
                        <button id="btn-search-by" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown" aria-expanded="false">Barcode</button>
                        <ul id="ul-search" class="dropdown-menu text-start w-100" style="">
                            <li id="search1"><a class="dropdown-item">Barcode</a></li>
                            <li id="search2"><a class="dropdown-item">Name</a></li>
                            <li id="search3"><a class="dropdown-item">Description</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-sm-5 col-md-3 p-1 ">
                    <div class="form-group">                       
                        <div class="ui-widget">
                            <input type="search" id="input-search" class="form-control" placeholder="Search Barcode" autocomplete="off" data-validation="alphanumeric">
                        </div>

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

            <div class="container-fluid bg-white p-2">
                <div class="col-sm-5 col-md-3 p-1 ">
                    <label for="input" id="label-barcode" class="fw-light">Barcode </label>
                    <div class="input-group">
                        <input type="text" id="input-barcode" class="form-control" placeholder="" autocomplete="off" data-validation="alphanumeric" readonly>
                    </div>
                </div>

                <%--     <div class="input-group">
                    <input class="form-control border-end-0 border rounded-pill" type="search" value="search" id="example-search-input">
                    <span class="input-group-append">
                        <button class="btn btn-outline-secondary bg-.
                        </button>
                    </span>
                </div>--%>



                <div class="col-sm-5 col-md-3 p-1">
                    <label for="inputy" class="fw-light">Name</label>
                    <input type="text" id="input-name" class="form-control" readonly>
                </div>
                <div class="col-sm-5 col-md-3 p-1">
                    <label for="input" class="fw-light">Description</label>
                    <input type="text" id="input-desc" class="form-control" readonly>
                </div>
                <div class="col-sm-5 col-md-3 p-1">
                    <label for="input" class="fw-light">Quantity on Hand</label>
                    <input type="text" id="input-qoh" class="form-control" value="0" readonly>
                </div>
                <div class="col-sm-5 col-md-3 p-1">
                    <button type="button" id="btn-adjust" class="btn btn-outline-success btn-sm ">Adjust Stock</button>
                </div>

                <table id="tbl-detail" class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Batch#</th>
                            <th scope="col">Date</th>
                            <%-- <th scope="col">In</th>
                            <th scope="col">Out</th>--%>
                            <th scope="col">Cost</th>
                            <th scope="col">QOH</th>
                            <th scope="col">Stock Out</th>
                        </tr>
                    </thead>
                    <tbody id="tbl-body">
                    </tbody>
                </table>
            </div>

            <!-- Modal StockIn-->
            <div class="modal fade" id="modalstockadjust" 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 text-center">Stock In</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body">
                            <!--group unit-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="label-groupunit" class="form-label">Group Unit :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <div class="dropdown">
                                        <button id="btn-groupunit" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown">
                                        </button>
                                        <ul id="dd-groupunit" class="dropdown-menu text-start">
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!--unit-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="label-unit" class="form-label m-0 px-2">Unit :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <button id="btn-unit" type="button" class="btn btn-primary btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown">
                                    </button>
                                    <ul id="dd-unit" class="dropdown-menu text-start">
                                    </ul>
                                </div>
                            </div>

                            <!--number-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label id="lblNo" for="input-number-unit" class="form-label m-0 px-2">No :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <input type="number" id="input-number-unit" class="form-control">
                                </div>
                            </div>

                            <!--quantity-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="input-inqty" class="form-label m-0 px-2">Quantity :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <input type="number" id="input-inqty" class="form-control">
                                </div>
                            </div>

                            <!--cost-->
                            <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="number" id="input-unitcost" class="form-control" value="" placeholder="0.00">
                                </div>
                                
                            </div>


                        </div>
                        <div class="modal-footer">
                            <button id="btn-stockin" type="button" class="btn btn-outline-success btn-md m-0">Confirm</button>
                            <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 modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title text-black fw-light text-center">Stock Out</h3>
                            <%--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
                        </div>
                        <div class="modal-body">
                            <!--batch id-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="input-batchid" class="form-label m-0 px-2">Batch #</label>
                                </div>
                                <div class="col-md-3 px-2">
                                    <input type="text" id="input-batchid" class="form-control" value="" readonly>
                                </div>
                            </div>

                            <!--quantity-->
                            <div class="d-flex justify-content-start pt-2">
                                <div class="col-md-3 px-0 align-content-around text-end">
                                    <label for="input-outqty" class="form-label m-0 px-2">Quantity :</label>
                                </div>

                                <div class="col-md-3 px-2">
                                    <input type="number" id="input-outqty" class="form-control" placeholder="0.00">
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button id="btn-confirmstockout" type="button" class="btn btn-outline-success btn-md m-0">Confirm</button>
                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>


            <div id="loadingmodal" class="modal d-none" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="spinner-border m-5" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>


        </ContentTemplate>
    </asp:UpdatePanel>
    <script>
        function readWebConfig() {
            var conStr = '<%=ConfigurationManager.ConnectionStrings["API_BaseURL"].ConnectionString %>'
            return conStr
        }

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

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="sunScript/mobile_stockadjust.js"></script>
    <script type="text/javascript" src="sunScript/api.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>

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