<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeBehind="AppointList.aspx.cs" Inherits="Axium.Web.Appoint.AppointList" EnableViewState="true" %>
<%@ Register TagPrefix="axi" TagName="Pagination" Src="~/PatientAccess/Controls/Pagination.ascx" %>
<%@ Register TagPrefix="axi" TagName="Notification" Src="~/PatientAccess/Controls/Notification.ascx" %>
<%@ Register TagPrefix="axi" TagName="Copyright" Src="~/PatientAccess/Controls/CopyrightControl.ascx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>

    <meta http-equiv="X-UA-Compatible" content="IE=8" />
     
    <!-- css styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous" />
    <link href="../Includes/Css/PA2.0/common.css" rel="stylesheet" type="text/css" />
    <link href="../Includes/Css/appointList.css" rel="stylesheet" type="text/css" />

    <!-- plug in -->
    <script src="../Includes/JQueryUI/js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="../Includes/JQueryUI/js/jquery-migrate-3.3.2.min.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/json2.min.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jquery.numeric.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jqModal-r14.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/ui.datepicker.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/dateControl.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jquery.maxlength-1.0.3.min.js" type="text/javascript"></script>    
    <script src="../Includes/Scripts/jquery.timer.js" type="text/javascript"></script>    
    <script src="../Includes/Scripts/jquery.validate-1.19.2.min.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/PA2.0/common.js" type="text/javascript"></script>
    <script src="https://kit.fontawesome.com/95fbe47167.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    
    <!-- custom -->
    <script src="../Includes/Scripts/utilities.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/iframe.231520.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/PA2.0/appointList.js" type="text/javascript"></script>    

</head>
<body id="appointListPage">
<form id="form1" runat="server" class="form-container">
    <asp:HiddenField runat="server" ID="FromDateField"/>
    <asp:HiddenField runat="server" ID="ToDateField"/>
    <asp:HiddenField runat="server" ID="hdnTotalRowCount"/> <%--38809391--%>
    <axi:Notification ID="Notification" runat="server" />
<div id="AppointmentList" class="container bg-transparent pl-0 ml-0 mb-3">

    <div class="bg-white p-3">
        <div id="ListSearch">
            <div class="row">
                <a id="FilterBtn" class="filter-collapse-btn" data-bs-toggle="collapse" data-bs-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter" >
                    <strong><i class="fa-solid fa-caret-right fa-lg"></i>&emsp;Filter</strong>
                </a>
            </div>
            <div class="row collapse filter-expand" id="collapseFilter">
                <div class="col-xl-4">
                    <span id="FromDate">
                        <label for="DQ12345" class="Label">Date From:</label>
                        <br />
                        <asp:Panel runat="server" ID="FromDateControlDiv">
                            <input type="date" ID="DQ12345" class="form-control" pattern="\d{4}-\d{2}-\d{2}" min="1900-01-01" max="2100-12-31" runat="server"/>
                        </asp:Panel>
                    </span>
                </div>
                <div class="col-xl-4">
                    <span id="ToDate">
                        <label for="DQ54321" class="Label">Date To:</label>
                        <br />
                        <asp:Panel runat="server" ID="ToDateControlDiv">
                            <input type="date" ID="DQ54321" class="form-control" pattern="\d{4}-\d{2}-\d{2}" min="1900-01-01" max="2100-12-31" runat="server"/>
                        </asp:Panel>
                    </span>
                </div>
                <div class="col-xl-4">
                    <asp:Label ID="OptionsLabel" runat="server" Visible="False"></asp:Label>
                    <span id="TitleSpan" runat="server" class="Title">Show</span>
                    <div class="chkRow">
                        <span id="Planned" runat="server">
                            <input type="checkbox" id="PlannedChk" runat="server" class="form-check-input" />
                            <label class="form-check-label" for="PlannedChk">Planned</label>
                        </span>
                        <span id="Cancelled" runat="server">
                            <input type="checkbox" id="CancelledChk" runat="server" class="ms-3 form-check-input" /> 
                            <label class="form-check-label" for="CancelledChk">Cancelled</label>
                        </span>
                        <span id="Failed" runat="server">
                            <input type="checkbox" id="FailedChk" runat="server" class="ms-3 form-check-input" /> 
                            <label class="form-check-label" for="FailedChk">Failed</label>
                        </span>
                    </div>
                
                </div>
                <div id="Apply" class ="mt-4">
                    <asp:Button runat="server" Text="Apply" onclick="ApplyClick" OnClientClick="checkDates(); parent.openModalSpinner();" CssClass="btn btn-primary"/>
                </div>
            </div>
        </div>
    </div>
    <div id="Info" class="Info mt-4">
		<asp:Repeater ID="AppointRangeRepeater" runat="server" onitemdatabound="AppointRangeRepeaterItemDataBound" EnableViewState="true">
            <ItemTemplate> 
                <div id="ItemRow" runat="server">
                    <div id="AppointDiv" class="Appoint row ms-1 mt-2 mb-2">
                        <div class="col-xl-9 col-lg-6 AppointDateTime">
                            <asp:Label CssClass="AppointDate" ID="ApptDate" runat="server"></asp:Label>
                            <span class="AppointTime"><%#Eval("AppointTime")%></span>
                        </div>
                        <div class="col-xl-3 col-lg-6 Status">
                            <span class="ConfirmStatus me-3" id="ConfirmStatus" runat="server"><%#Eval("ConfirmStatusString")%></span>
                            <span class="AppointStatus me-3" id="AppointStatus" runat="server"><%#Eval("AppointStatus") %></span>
                            
                        </div>
                    </div>
                    <div class="row ms-1 mb-2">
                        <div class="col-xl-9">
                            <div id="ProviderDiv" class="Provider row">
                                <span id="ProviderSpan" runat="server" class="col-xl-9">
                                    <i class ="fa fa-user fa-xs"></i><span class="Label"> Provider:</span>
                                    <span class="Info"><%# Eval("PrimProvider")%></span>
                                </span>
                            </div>
                            <div id="ChairDiv" class="Chair row">
                                <span id="ClinicChairDiv" runat="server" >
                                    <i class="fa fa-map-marker fa-xs"></i><span id="ClinicChairSpan" runat="server" class="Label" title="Clinic/Chair:"></span>
                                    <span id="ClinicSpan" runat="server" class="Info"><%# Eval("Clinic")%></span><span id="ChairSpan" runat="server" class="Info"><%#Eval("Chair")%></span>
                                </span>
                            </div>
                        </div>
                        <span id ="ConfirmSpan" runat="server" visible="false" class="col-xl-3 mb-2 ConfirmBtnSpan">
                            <asp:Button ID="ConfirmButton" runat="server" Text="Confirm" onclick="ConfirmButtonClick" OnClientClick="parent.openModalSpinner()" CssClass="ConfirmButton btn btn-pa" CommandArgument='<%#Eval("AppointId")%>'/> 
                        </span>
                        
                    </div>
                    
                </div>      
            </ItemTemplate>
            <FooterTemplate>        
                <asp:Literal ID="lblEmptyData"
                    Text="" runat="server" Visible="false">
                </asp:Literal>
            </FooterTemplate>
        </asp:Repeater>
        
        <axi:Pagination ID="Pagination" runat="server" />   
        <asp:HiddenField runat="server" ID="OptionsValue" />
    </div>
    
</div>
<asp:PlaceHolder ID="AutoLogout" runat="server" Visible="false" EnableViewState="false" />
</form>
<div class="mt-4">
    <axi:Copyright ID="Copyright" runat="server" />
</div>
<script type="text/javascript">
    $(window).on("load", function () {        // AX-24898.24919.2 $(window).bind("load", function () {
        $(".integer").numeric(false, function () { this.value = ""; this.focus(); });
        var childHeight = $('#AppointmentList').outerHeight();
        $('#AppointListId', window.parent.document).css('height', childHeight);
        parent.closeModalSpinner();

        /*
        if (target.getAttribute('data-has-spinner') === 'true') {
            if (window.openModalSpinner) {
                openModalSpinner.call();
            }
        }
        */
    });
    const Appoint = function () {
        const init = function () {
            setPageTitle("Appointments", true);
        };

        return {
            init
        };
    }
    jQuery(document).ready(function () {

        const appoint = new Appoint();

        appoint.init();
    });

    $(document).ready(function(){
        $('#FilterBtn').click(function(){
            $("i").toggleClass("fa-caret-down").toggleClass("fa-caret-right");
        });
    });
</script>
</body>
</html>
