<%@ page language="C#" masterpagefile="~/MasterFile/TimeCheck.master" autoeventwireup="true" inherits="Transactions_TA_UI_Transactions_CompressedWorkHoursApplicationAdd, App_Web_kub05hrk" enableeventvalidation="false" %>

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

<asp:Content ID="conCWHAdd" ContentPlaceHolderID="BodyContentPH" runat="Server">
    <!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="../css/anytimeIE.css" />
    <link rel="stylesheet" type="text/css" href="../css/ProgressforIE.css" />
    <![endif]-->

    <link href="../css/ProgressBar.css" rel="stylesheet" type="text/css" />

    <script src="../plugins/datepicker/jquery-1.11.1.min.js"></script>
    <script language="javascript" src="../js/DateTimeValidation.js" type="text/javascript"></script>
    <script language="javascript" src="../js/jquery.autocomplete.js" type="text/javascript"></script>
    <script language="javascript" src="../js/ShiftExchange.js" type="text/javascript"></script>
    <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
    <script language="javascript" src="../js/EmployeeNameAjax.js" type="text/javascript"></script>

    <script type="text/javascript">

        // ── Date-validation globals ──────────────────────────────────────────
        var Monthfourdigit         = 'Please enter valid date as month, day, and four digit year : Format MM/dd/yyyy.';
        var Datefourdigit          = 'Please enter valid date with correct format dd/MM/yyyy';
        var Invalidyearentry       = 'Invalid year entry';
        var Invalidmonthentry      = 'Invalid month entry';
        var Invaliddateentry       = 'Invalid date entry';
        var DateformatDDMONYYYY    = 'Incorrect date format. Enter as DD-MON-YYYY';
        var Entertime              = 'Enter time';
        var Valueforhours          = 'Invalid value for hours:';
        var Invalidvalueforminutes = 'Invalid value for minutes:';
        var Invalidtimeformat      = 'Invalid time format:';
        var EntervalidDateandTime  = 'Please enter valid Date and Time';
        var ValiddatemonthMMDDYYHHMM   = 'Please enter valid Date and Time MM/dd/yyyy HH:mm';
        var ValiddatemonthMMDDYYHHMMTT = 'Please enter valid Date and Time MM/dd/yyyy hh:mm tt';
        var Invalidvalueforhours   = 'Invalid value for hours:';
        var Invalidvalueforminites = 'Invalid value for minutes:';
        var ConfirmSave            = 'Are you sure to Save?';
        var MaxLength              = 'Maximum length is ';
        var Select                 = '-Select-';
        var EntertheEmployeeID     = 'Enter the Employee ID';
        var EntertheReason         = 'Enter the Reason';

        // ── CWH_AllowedDays injected from web.config by code-behind ──────────
        // e.g.  var CWH_AllowedDays = [1,2];  (1=Mon, 2=Tue — JS getDay() values)
        // Fallback to [1,2] if server variable is not yet injected.
        if (typeof CWH_AllowedDays === 'undefined') { var CWH_AllowedDays = [1, 2]; }
        // ─────────────────────────────────────────────────────────────────────

        function SetAlertCheckDate(monthfourdigit, datefourdigit, invalidyearentry, invalidmonthentry,
            invaliddateentry, dateformatDDMONYYYY, entertime, valueforhours, invalidvalueforminutes,
            invalidtimeformat, entervalidDateandTime, validdatemonthMMDDYYHHMM,
            validdatemonthMMDDYYHHMMTT, entervalidDateandTime2, invalidvalueforhours, invalidvalueforminites) {
            Monthfourdigit         = monthfourdigit;
            Datefourdigit          = datefourdigit;
            Invalidyearentry       = invalidyearentry;
            Invalidmonthentry      = invalidmonthentry;
            Invaliddateentry       = invaliddateentry;
            DateformatDDMONYYYY    = dateformatDDMONYYYY;
            Entertime              = entertime;
            Valueforhours          = valueforhours;
            Invalidvalueforminutes = invalidvalueforminutes;
            Invalidtimeformat      = invalidtimeformat;
            EntervalidDateandTime  = entervalidDateandTime;
            ValiddatemonthMMDDYYHHMM   = validdatemonthMMDDYYHHMM;
            ValiddatemonthMMDDYYHHMMTT = validdatemonthMMDDYYHHMMTT;
            Invalidvalueforhours   = invalidvalueforhours;
            Invalidvalueforminites = invalidvalueforminites;
        }

        function MaxLengthh(maxLength, select) {
            MaxLength = maxLength;
            Select    = select;
        }

        // ── Global date formatter — supports all three application formats ────
        // Format is read from the hidden field hdnDateFormat set by code-behind.
        // Supported values: "dd-MMM-yyyy" | "dd-MM-yyyy" | "MM/dd/yyyy"
        function FormatDateByAppFormat(dateObj) {
            var fmt = document.getElementById('ctl00_BodyContentPH_hdnDateFormat').value;
            var d   = dateObj.getDate();
            var m   = dateObj.getMonth();       // 0-based
            var y   = dateObj.getFullYear();
            var dd  = d < 10 ? '0' + d : '' + d;
            var MM  = (m + 1) < 10 ? '0' + (m + 1) : '' + (m + 1);
            var MonNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            var MMM = MonNames[m];

            if (fmt === 'dd-MMM-yyyy') return dd + '-' + MMM + '-' + y;
            if (fmt === 'dd-MM-yyyy')  return dd + '-' + MM + '-' + y;
            // Default / MM/dd/yyyy
            return MM + '/' + dd + '/' + y;
        }

        // ── Compute Monday and Friday of the week containing 'today' ─────────
        function GetWeekMonday(today) {
            var day  = today.getDay();               // 0=Sun … 6=Sat
            var diff = (day === 0) ? -6 : 1 - day;  // shift so Monday = 0
            var mon  = new Date(today);
            mon.setDate(today.getDate() + diff);
            return mon;
        }

        function GetWeekFriday(monday) {
            var fri = new Date(monday);
            fri.setDate(monday.getDate() + 4);       // Mon+4 = Friday
            return fri;
        }

        // ── Populate From/To date fields on page load ─────────────────────────
        function InitCWHDates() {
            var today  = new Date();
            var monday = GetWeekMonday(today);
            var friday = GetWeekFriday(monday);

            var fromFld = document.getElementById('ctl00_BodyContentPH_txt_FromDate');
            var toFld   = document.getElementById('ctl00_BodyContentPH_txt_ToDate');

            if (fromFld) fromFld.value = FormatDateByAppFormat(monday);
            if (toFld)   toFld.value   = FormatDateByAppFormat(friday);
        }

        window.addEventListener('load', InitCWHDates);

        // ── Dynamic Day Validation ────────────────────────────────────────────
        // Reads CWH_AllowedDays injected from web.config — NO hardcoded day numbers.
        // DayOfWeek: 0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat
        function isCWHApprovalAllowedToday() {
        debugger;
            var allowed = (typeof CWH_AllowedDays !== 'undefined') ? CWH_AllowedDays : [1, 2];
            var day = new Date().getDay();
            return allowed.indexOf(day) !== -1;
        }

        function IsTodayAllowedForSubmission() {

            if (!isCWHApprovalAllowedToday()) {
                alert('Compressed Work Hours application can only be submitted on the configured days as per company policy.');
                return false;
            }
            return true;
        }
        // ──────────────────────────────────────────────────────────────────────

        // ── Main validation ───────────────────────────────────────────────────
        function CWHEntryValidation() {

            // Day-of-week check first
            if (!IsTodayAllowedForSubmission()) {
                return false;
            }

            var txt_EmployeeId = document.getElementById('ctl00_BodyContentPH_txt_EmployeeId');
            if (txt_EmployeeId != null && txt_EmployeeId.style.display != 'none') {
                if (txt_EmployeeId.value.trim().length == 0) {
                    alert(EntertheEmployeeID);
                    txt_EmployeeId.focus();
                    return false;
                }
            }

            var txt_Reason = document.getElementById('ctl00_BodyContentPH_txt_Reason');
            if (txt_Reason.value.trim().length == 0) {
                alert(EntertheReason);
                txt_Reason.focus();
                return false;
            }

            if (confirm(ConfirmSave) == true) {
                return true;
            } else {
                return false;
            }
        }

    </script>

    <!-- PAGE HEADER -->
    <div class="content-header">
        <h1 style="background-image: url('../dist/img/compressedworkHours.png'); background-repeat: no-repeat; padding-left: 35px">
            <asp:Label ID="lbl_Header" runat="server"></asp:Label>
        </h1>
        <asp:SiteMapPath ID="site" runat="server" CssClass="breadcrumb">
            <NodeStyle CssClass="active" />
        </asp:SiteMapPath>
    </div>

    <div class="content">

        <asp:HiddenField ID="hdnDateFormat" runat="server" />
        <input id="hdnEmployeeId" type="hidden" runat="server" />

        <div class="col-md-12" style="color: Red; display: none">
            <asp:Label ID="lbl_Error" runat="server" ForeColor="Red"></asp:Label>
        </div>

        <!-- Employee search modal -->
        <div id="myModal" class="modal modal-default fade" role="dialog">
            <div class="modal-dialog" style="min-width: 85%;">
                <div class="modal-content" style="margin-top: 50px">
                    <div class="modal-header">
                        <button type="button" id="closemodal" class="close" data-dismiss="modal" style="border-radius: 50px;">&times;</button>
                        <h4 class="modal-title">
                            <asp:Label ID="lblSelectEmployee" runat="server" Text="Select Employee"></asp:Label>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <iframe id="iframePopup" runat="server" scrolling="auto" width="100%" height="700px" style="border-style: none"></iframe>
                    </div>
                    <div class="modal-footer" style="display: none">
                        <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mandatory fields indicator -->
        <div class="inr-ftr">
            <div class="row">
                <div class="col-sm-2"></div>
                <div class="col-sm-2 col-sm-offset-8">
                    <div class="pull-right">
                        <h6>
                            <span>
                                <span style="color: Red">|</span>
                                <span style="padding-left: 10px; padding-right: 10px">
                                    <asp:Label ID="lbl_IndicatesMandatoryFields" runat="server"></asp:Label>
                                    (<asp:Label ID="lblManCount" runat="server" Text="2"></asp:Label> No.)
                                </span>
                            </span>
                        </h6>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="emp-filter">
            <div class="row">

                <!-- Progress popup -->
                <asp:UpdatePanel ID="upCWH" runat="server">
                    <ContentTemplate>
                        <asp:Panel ID="pnlProgress" runat="server" Style="display: none;">
                            <asp:Panel ID="pnlLoading" runat="server" HorizontalAlign="center">
                                <div class="InsideProgressBar">
                                    <div class="row" style="margin-top: 10px">
                                        <img src="../dist/img/logo-Progress.png" />
                                    </div>
                                    <div class="row" style="min-width: 280px">
                                        <img src="../dist/img/default.gif" style="width: 100px" />
                                    </div>
                                    <div class="row" style="margin-bottom: 10px">
                                        <asp:Label ID="lblLoading" runat="server" ForeColor="black"
                                            Style="text-align: center" Font-Bold="true"
                                            Font-Size="12px" Font-Italic="true"
                                            Font-Family="Arial" Text="Please Wait..."></asp:Label>
                                    </div>
                                    <div class="clear clearfix"></div>
                                </div>
                            </asp:Panel>
                        </asp:Panel>
                        <asp:HiddenField ID="hdnProgress" runat="server" />
                        <cc1:ModalPopupExtender ID="popupProgress" runat="server"
                            TargetControlID="hdnProgress"
                            BackgroundCssClass="ModalPopup"
                            PopupControlID="pnlProgress"
                            BehaviorID="popupProgress">
                        </cc1:ModalPopupExtender>
                    </ContentTemplate>
                </asp:UpdatePanel>

                <div class="form-horizontal">

                    <!-- ══════════════════════════════════════════════════════
                         EMPLOYEE SECTION
                    ══════════════════════════════════════════════════════ -->
                    <div class="col-md-12 form-group">
                        <div class="col-md-12">

                            <!-- Employee ID row -->
                            <div class="form-group" id="trEmployeeID" runat="server">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_EmployeeId" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-sm">
                                        <asp:TextBox ID="txt_EmployeeId" runat="server"
                                            CssClass="form-control man-dat"
                                            MaxLength="15" onpaste="return true"
                                            onblur="EmpName('CWH');"
                                            onkeypress="return acceptCharsNum_MaxLength(event,this,15,MaxLength);">
                                        </asp:TextBox>
                                        <span class="input-group-btn">
                                            <asp:LinkButton ID="btn_Search"
                                                data-toggle="modal" data-target="#myModal"
                                                CssClass="btn save-btn fa-search" runat="server"
                                                OnClientClick="return OpenWindowShiftExchange('txt_EmployeeId','CWH');" />
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-5"></div>
                            </div>

                            <!-- Employee Name (always visible, ReadOnly) -->
                            <div class="row">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_EmployeeName" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:TextBox ID="txt_Name" runat="server"
                                        CssClass="form-control" ReadOnly="True"
                                        onpaste="return true"></asp:TextBox>
                                </div>
                                <div class="col-md-6"></div>
                            </div>

                        </div>
                    </div>

                    <!-- ══════════════════════════════════════════════════════
                         FORM BODY
                    ══════════════════════════════════════════════════════ -->
                    <div class="col-md-12 form-group" id="divManual" runat="server">
                        <div class="col-md-12">

                            <!-- Application Date -->
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_ManualTimeEntryDate" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_EntryDate" runat="server" CssClass="form-control"></asp:Label>
                                </div>
                            </div>

                            <!-- From Date — READ-ONLY, auto-filled (Monday of current week) -->
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_FromDate" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:TextBox ID="txt_FromDate" runat="server"
                                        CssClass="form-control"
                                        ReadOnly="true"
                                        Style="background-color:#f5f5f5; cursor:not-allowed;">
                                    </asp:TextBox>
                                </div>
                                <div class="col-md-6">
                                    <small style="color:#888; line-height:34px;">
                                        Auto-filled: Monday of current week
                                    </small>
                                </div>
                            </div>

                            <!-- To Date — READ-ONLY, auto-filled (Friday of current week) -->
                            <div class="row form-group" style="padding-top: 15px;">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_ToDate" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:TextBox ID="txt_ToDate" runat="server"
                                        CssClass="form-control"
                                        ReadOnly="true"
                                        Style="background-color:#f5f5f5; cursor:not-allowed;">
                                    </asp:TextBox>
                                </div>
                                <div class="col-md-6">
                                    <small style="color:#888; line-height:34px;">
                                        Auto-filled: Friday of current week
                                    </small>
                                </div>
                            </div>

                            <!-- Compressed Hours — READ-ONLY -->
                            <div class="row form-group" style="padding-top: 15px;">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_CompressedHours" runat="server" Text="Compressed Hours"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:TextBox ID="txt_CompressedHours" runat="server"
                                        CssClass="form-control"
                                        ReadOnly="true"
                                        Style="background-color:#f5f5f5; cursor:not-allowed;">
                                    </asp:TextBox>
                                </div>
                                <div class="col-md-6" style="display:none">
                                    <small style="color:#888; line-height:34px;">
                                        Configured value (not editable)
                                    </small>
                                </div>
                            </div>

                            <!-- Reason -->
                            <div class="row form-group" style="margin-top: 15px">
                                <div class="col-md-3">
                                    <asp:Label ID="lbl_Reason" runat="server"></asp:Label>
                                </div>
                                <div class="col-md-3">
                                    <asp:TextBox ID="txt_Reason" runat="server"
                                        CssClass="form-control man-dat"
                                        MaxLength="250" onpaste="return true"
                                        onCut="return false" onDrop="return false"
                                        onkeypress="return chkMaxLen(event,this,250,MaxLength);"
                                        TextMode="MultiLine" Style="resize: none">
                                    </asp:TextBox>
                                </div>
                            </div>

                            <!-- Inline error label -->
                            <div class="row">
                                <div class="col-md-12">
                                    <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                                </div>
                            </div>

                            <!-- Save / Back buttons -->
                            <div class="row">
                                <div class="col-md-5"></div>
                                <div class="col-md-7">
                                    <div class="pull-right-button">
                                        <asp:LinkButton ID="btn_Add" runat="server"
                                            CssClass="btn save-btn fa-floppy-o"
                                            CausesValidation="true"
                                            OnClick="btnSave_Click"
                                            OnClientClick="if(CWHEntryValidation()){ $find('popupProgress').show(); return true; } else return false;" />
                                        <asp:LinkButton ID="btn_Cancel" runat="server"
                                            CssClass="btn save-btn fa-angle-left"
                                            CausesValidation="false"
                                            OnClick="btnBack_Click" />
                                        <asp:ValidationSummary ID="ValidationSummary1" runat="server"
                                            ShowMessageBox="true" ShowSummary="false" />
                                        <asp:Label ID="lblname" runat="server"></asp:Label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- END divManual -->

                </div>
                <!-- END form-horizontal -->
            </div>
        </div>
        <!-- END emp-filter -->

    </div>
    <!-- END content -->

</asp:Content>