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

<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/timeduration.js"></script>
    <script type="text/javascript">
        var txtStartDate = '<%=txtStartDt.ClientID%>';
        var txtEndDate = '<%=txtEndDt.ClientID%>';    
              
        window.onload = function () {                     
            var ddlItem = document.getElementById("<%= cmbBranches.ClientID %>");
            var selectedBranch = ddlItem.options[ddlItem.selectedIndex].innerHTML;

            var BranchHQ = '<%=Session["Branch_HQ"]%>';
            var UserID = '<%=Session["UserId"]%>';
            var DB = GetDB(selectedBranch, BranchHQ, UserID);
            var TimeDuration = '00:' + GetTimeDuration(DB) + ':00';

            LoadData(DB);
            LoadDataFooter(DB);
            LoadDataExceed(DB,TimeDuration);
            LoadDataExceedFooter(DB, TimeDuration);
        }

        function btnApply() {
            var ddlItem = document.getElementById("<%= cmbBranches.ClientID %>");
            var BranchHQ = '<%=Session["Branch_HQ"]%>';
            var UserID = '<%=Session["UserId"]%>';
            var selectedBranch = ddlItem.options[ddlItem.selectedIndex].innerHTML;
            var DB = GetDB(selectedBranch, BranchHQ, UserID);
            var TimeDuration = '00:' + GetTimeDuration(DB) + ':00';
          
            if (document.getElementById('idType').value == "Standard") {
                document.getElementById('StandardBody').style = "display:block;";
                DeleteRow();
                LoadData(DB);
                LoadDataFooter(DB);
                LoadDataExceed(DB, TimeDuration);
                LoadDataExceedFooter(DB, TimeDuration)
            } else {
                DeleteRow();             
                //LoadData(DB);
                //LoadDataFooter(DB);
                document.getElementById('StandardBody').style = "display:none;";
                LoadDataExceed(DB, TimeDuration);
                LoadDataExceedFooter(DB, TimeDuration)
            }
           
        }


       <%-- function LoadHeader() {
            var StartDate = document.getElementById('<%=txtStartDt.ClientID%>').value;
            var EndDate = document.getElementById('<%=txtEndDt.ClientID%>').value;
            document.getElementById('<%=lblReportSearchResult.ClientID%>').innerHTML = "Search Result - from " + StartDate + " to " + EndDate;
        }--%>

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="section-block">
                <h6 class="section-title">TIME DURATION  REPORT
                </h6>
            </div>

            <div class="row">
                <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" onchange="btnApply()">
                                    </asp:DropDownList>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <label for="validationCustom03">
                                        View By
                                    </label>
                                    <%--  <asp:DropDownList ID="drpView" CssClass="custom-select"
                                        runat="server" AutoPostBack="true">                                        
                                    </asp:DropDownList>--%>
                                    <select name="Type" id="idType" class="custom-select">
                                        <option value="Standard">Standard</option>
                                        <option value="Exceed-Time">Exceed-Time</option>
                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                    <%--<label for="validationCustom03">
                                     
                                    </label>
                                 <asp:TextBox ID="TextBox2" class="form-control" runat="server"></asp:TextBox>
                                    <asp:CalendarExtender ID="CalendarExtender3" 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">
                                       
                                    </label>
                                    <asp:TextBox ID="TextBox3" class="form-control" runat="server"></asp:TextBox>
                                    <asp:CalendarExtender ID="CalendarExtender4" 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">
                                    <%--<asp:Button ID="btnGetReports" runat="server" Text="Apply"
                                        CssClass="btn btn-primary" OnClientClick="btnApply()" />--%>
                                    <input type="button" value="Apply" class="btn btn-primary" onclick="btnApply()" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <h4>&nbsp;<asp:Label ID="lblGreeting" runat="server"></asp:Label></h4>
                <%--<asp:Button ID="btnPdf" runat="server" Text="PDF" 
            ToolTip="To Export  the Report Click Here"  CssClass="btn btn-secondary" 
            onclick="btnPdf_Click"/>--%>
            </div>
            <div class="card" id="tblDiv">
                <h5 class="card-header" id="idGenReport" style="background-color: #4c4c4c; color: White; font-size: 14px" runat="server">
                    <%--<asp:Label ID="lblReportSearchResult" runat="server" CssClass="Labels">Search Result - from </asp:Label>--%>
                    <label id="lblReportSearchResult" class="Labels" style="color: white">Search Result - from</label>
                    <asp:Label ID="lblMsgTotalSelection" runat="server"> </asp:Label>
                </h5>
                <!--Default View-->
                <div class="card-header">
                    <div class="card-body" id="StandardBody">
                        <div id="divTimeDuration" class="table-responsive">
                            <input type="text" value="Default Report Structure" style="border: none; font-size: 18px; margin: 4px 0px;" />
                            <table id="tblData">
                                <thead>
                                    <tr id="trID">
                                        <th>TransID</th>
                                        <th>Ref. no</th>
                                        <th>Trans-Date</th>
                                        <th>Trans-Time</th>
                                        <th>Completed-Date</th>
                                        <th>Completed-Time</th>
                                        <th>Duration (hh:mm)</th>
                                    </tr>
                                </thead>
                                <tbody id="tblBodyData">
                                </tbody>
                                <tfoot id="tblFootData">
                                    <tr>
                                        <td id="tblFooterCol1" colspan="3">TransID</td>
                                        <td id="tblFooterCol2" colspan="3">Ref. no</td>
                                        <td id="tblFooterCol3">Duration (hh:mm)</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!--Exceed View-->
                <div class="card-header">
                    <div class="card-body" id="ExceedBody">
                        <div id="divTimeDurationExceed" class="table-responsive">
                            <input type="text" value="Filter by Over-Time" style="border: none; font-size: 18px; margin: 4px 0px;" />
                            <table id="tblDataExceed">
                                <thead>
                                    <tr id="trExceedID">
                                        <th>TransID</th>
                                        <th>Ref. no</th>
                                        <th>Trans-Date</th>
                                        <th>Trans-Time</th>
                                        <th>Completed-Date</th>
                                        <th>Completed-Time</th>
                                        <th>Duration (hh:mm)</th>
                                    </tr>
                                </thead>
                                <tbody id="tblBodyDataExceed">
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td id="tblFooterExceedCol1" colspan="3">TransID</td>
                                        <td id="tblFooterExceedCol2" colspan="3">Ref. no</td>
                                        <td id="tblFooterExceedCol3">Duration (hh:mm)</td>
                                    </tr>
                                </tfoot>

                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css?v=1.1" rel="stylesheet" />
  <!-- Bootstrap 5 -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
 <!-- Optional Bootstrap Icons -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
</asp:Content>
