<%@ control language="VB" autoeventwireup="false" inherits="Client_InvoiceDetail, MachSol.MachPanel.Web" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Src="~/RCC/Billing/CC/AzureBillDetail.ascx" TagName="AzureBill" TagPrefix="EM" %>
<%@ Register Src="~/RCC/Billing/CC/UsageBasedBillDetail.ascx" TagName="UsageBasedBillDetail" TagPrefix="EM" %>
<%@ Register Src="~/RCC/Billing/CC/HyperVMeteredResouresBillDetail.ascx" TagName="HyperVMeteredResourcesBillDetail" TagPrefix="UC" %>
<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="header">
                <h3>
                    <asp:Literal ID="Literal4" runat="server" Text="<%$ Resources:Content,GN00001320%>" EnableViewState="false" />
                </h3>
            </div>
            <div class="body">
                <asp:Button ID="Btn_DownloadPDF" runat="server" class="btn btn-primary waves-effect" Text='<%$ Resources:Content, GN0000750 %>' />
                <asp:Button ID="Btn_Pay" runat="server" class="btn btn-primary waves-effect" Text="<%$ Resources:Content,L0080%>" />
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <%--General info box--%>
        <div class="card">
            <div class="header">
                <h3>
                    <asp:Literal ID="Div10" runat="server" Text='<%$ Resources:Content, GN0000578 %>' EnableViewState="false" />
                </h3>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div16" runat="server" Text='<%$ Resources:Content, String385 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12">

                        <asp:Label ID="lbl_Status" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div11" runat="server" Text='<%$ Resources:Content, GN0000718 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12" id="Td_Invoice" runat="server"></div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div12" runat="server" Text='<%$ Resources:Content, GN0000684 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12" id="Td_Payments" runat="server"></div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div14" runat="server" Text='<%$ Resources:Content, GN0000721 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12" id="Td_Date" runat="server"></div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div15" runat="server" Text='<%$ Resources:Content, GN0000722 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12" id="Td_DueDate" runat="server"></div>
                </div>
                <div class="row">
                    <div class="col-sm-3 col-xs-12 row-label">
                        <asp:Literal ID="Div17" runat="server" Text='<%$ Resources:Content, GN0000693 %>'
                            EnableViewState="false" />:
                    </div>
                    <div class="col-sm-9 col-xs-12" id="Td_Balance" runat="server"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <%--Invoiced Items Box--%>
        <div class="card">
            <div class="header">
                <h3>
                    <asp:Literal ID="Div19" runat="server" Text='<%$ Resources:Content, GN0000725 %>' EnableViewState="false" />
                </h3>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-xs-12">
                        <asp:GridView ID="GV_InvoiceDetail" runat="server" CssClass="table table-bordered table-striped table-hover" AutoGenerateColumns="False">

                            <Columns>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, String352 %>' HeaderStyle-CssClass="col-xs-2" ItemStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <div id="Div_Service" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000597 %>' HeaderStyle-CssClass="col-xs-3" ItemStyle-CssClass="col-xs-3">
                                    <ItemTemplate>
                                        <div id="Div_Description" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, string35 %>' HeaderStyle-CssClass="col-xs-1" ItemStyle-CssClass="col-xs-1">
                                    <ItemTemplate>
                                        <div id="Div_Quantity" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, M0123 %>' HeaderStyle-CssClass="col-xs-1" ItemStyle-CssClass="col-xs-1">
                                    <ItemTemplate>
                                        <div id="Div_Setup" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, GN000112 %>' HeaderStyle-CssClass="col-xs-2" ItemStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <div id="Div_Price" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000203 %>' HeaderStyle-CssClass="col-xs-1" ItemStyle-CssClass="col-xs-1">
                                    <ItemTemplate>
                                        <div id="Div_Discount" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000729 %>' HeaderStyle-CssClass="col-xs-2" ItemStyle-CssClass="col-xs-2">
                                    <ItemTemplate>
                                        <div id="Div_SubTotal" runat="server">
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <%--Totals box--%>
        <div class="card">
            <div class="header">
                <h3>
                    <asp:Literal ID="Div20" runat="server" Text='<%$ Resources:Content, GN0000730 %>' EnableViewState="false" />
                </h3>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-sm-7 hidden-xs">
                    </div>
                    <div class="col-sm-5 col-xs-12">

                        <div class="row" id="Div_VatTransferred" runat="server" visible="false">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Literal105" runat="server" Text="<%$ Resources:Content,TotalVATTrans%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="Div_TotalVATTrans" runat="server"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Ltl_SubTotal" runat="server" Text="<%$ Resources:Content,GN000112%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="TD_SubTotal" runat="server"></div>
                        </div>
                        <div class="row" id="Div_PayCouponDiscount" runat="server" visible="false">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Literal53" runat="server" Text="<%$ Resources:Content,CouponDiscount%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="TD_PayCouponDiscount" runat="server"></div>
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Literal69" runat="server" Text="<%$ Resources:Content,TotalAfterCouponDiscount%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="TD_PayTotalAfterCouponDiscount" runat="server"></div>
                        </div>
                        <div class="row" id="Div_Tax" runat="server">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Ltl_VAT" runat="server" Text="<%$ Resources:Content,GN000113%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12">
                                <asp:Literal ID="Lbl_SalesTax" runat="server"></asp:Literal>
                                <asp:LinkButton ID="Ltrl_SalesTaxNote" runat="server" EnableViewState="false" CausesValidation="false" Text='<%$ Resources:Content, strClick4Details %>' Visible="false" />
                            </div>
                        </div>
                        <div class="row" id="Div_VATShifted" runat="server" visible="false">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Ltl_VATShifted" runat="server" Text="<%$ Resources:Content,VATTransferred0%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="Div_VATTransferred0" runat="server"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Literal54" runat="server" Text="<%$ Resources:Content,GN000114%>" />:
                            </div>
                            <div class="col-sm-7 col-xs-12" id="TD_Total" runat="server"></div>
                        </div>

                        <div class="row">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Div24" runat="server" Text='<%$ Resources:Content, GN0000267 %>'
                                    EnableViewState="false" />:
                            </div>
                            <div class="col-sm-7 col-xs-12">
                                <asp:Label ID="Lbl_Paid" runat="server"></asp:Label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Div25" runat="server" Text='<%$ Resources:Content, GN0000693 %>'
                                    EnableViewState="false" />:
                            </div>
                            <div class="col-sm-7 col-xs-12">
                                <asp:Label ID="Lbl_Balance" runat="server"></asp:Label>
                            </div>
                        </div>

                        <div class="row" id="div_sipbilldetails" runat="server" visible="false">
                            <div class="col-sm-5 col-xs-12 row-label">
                                <asp:Literal ID="Literal26" runat="server" EnableViewState="false" Text='<%$ Resources:Content, strVoiceBillDetails %>' />:
                            </div>
                            <div class="col-sm-7 col-xs-12">
                                <asp:LinkButton ID="Lbtn_ExportSIPBillDetails" runat="server" Text="<%$ Resources:Content,Ex001 %>"></asp:LinkButton>
                                <asp:LinkButton ID="Lbtn_ExportSIPBillDetailsPDF" runat="server" Text="<%$ Resources:Content,strExportToPDF %>"></asp:LinkButton>
                                &nbsp;  

                            </div>
                        </div>

                        <asp:Panel ID="Pnl_AvalaraDetails" CssClass="width-modal-popup-auto" runat="server" Style="display: none">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="card">
                                        <div class="header container-fluid">
                                            <h3 class="pull-left"><%= Resources.Content.strTaxDetails%></h3>
                                            <span>
                                                <button type="button" class="close" onclick="$find('<%=MPE_AvalaraDetails.ClientID%>').hide();">&times;</button>
                                            </span>
                                        </div>
                                        <div class="body" id="Div_AvalaraDetails" runat="server">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </asp:Panel>
                        <EM:ModalPopupExtender runat="server" ID="MPE_AvalaraDetails" BackgroundCssClass="modalBackground"
                            DropShadow="false" PopupControlID="Pnl_AvalaraDetails" TargetControlID="Ltrl_SalesTaxNote">
                        </EM:ModalPopupExtender>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div class="panel-group" id="accordion_1" role="tablist" aria-multiselectable="true">
            <div class="panel panel-primary" id="Div_Payments" runat="server">
                <div class="panel-heading" role="tab" id="headingOne_1">
                    <h2 class="panel-title">
                        <a class="collapsed" id="A_Div_Payments" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseOne_1" aria-expanded="false" aria-controls="collapseOne_1">
                            <%= Resources.Content.GN0000684%>
                        </a>
                    </h2>
                </div>
                <div id="collapseOne_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne_1" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        <%--Payment box--%>
                        <div class="row">
                            <div class="col-xs-12">
                                <asp:GridView ID="GV_Payments" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered table-striped table-hover">
                                    <Columns>
                                        <asp:TemplateField HeaderText="<%$ Resources:Content,GN0000677%>" HeaderStyle-CssClass="col-xs-3" ItemStyle-CssClass="col-xs-3">
                                            <ItemTemplate>
                                                <div id="Div_Payment" runat="server">
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText='<%$ Resources:Content, GN000124 %>' HeaderStyle-CssClass="col-xs-3" ItemStyle-CssClass="col-xs-3">
                                            <ItemTemplate>
                                                <div id="Div_PaymentMethod" runat="server">
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000721 %>' HeaderStyle-CssClass="col-xs-3" ItemStyle-CssClass="col-xs-3">
                                            <ItemTemplate>
                                                <div id="Div_Date" runat="server">
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText='<%$ Resources:Content, GN0000737 %>' HeaderStyle-CssClass="col-xs-3" ItemStyle-CssClass="col-xs-3">
                                            <ItemTemplate>
                                                <div id="Div_Amount" runat="server">
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <AlternatingRowStyle CssClass="altRow" />
                                </asp:GridView>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary" id="divAzureBillDetail" runat="server" visible="false">
                <div class="panel-heading" role="tab" id="headingTwo_1">
                    <h4 class="panel-title">
                        <a class="collapsed" id="A_divAzureBillDetail" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseTwo_1" aria-expanded="false" aria-controls="collapseTwo_1">
                            <%= Resources.Content.strAzureBillDetail%>
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo_1" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        <%-- Azure Bill Detail --%>
                        <EM:AzureBill ID="UCAzureBillDetail" runat="server"></EM:AzureBill>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary" id="Div_ResellerUsageBasedBill" runat="server" visible="false">
                <div class="panel-heading" role="tab" id="headingThree_1">
                    <h4 class="panel-title">
                        <a class="collapsed" id="A_ResellerUsageBasedBill" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapseThree_1" aria-expanded="false" aria-controls="collapseThree_1">
                            <%= Resources.Content.BillDetail%>
                        </a>
                    </h4>
                </div>
                <div id="collapseThree_1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_1" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        <%--Reseller Usage Based Bill Details--%>
                        <EM:UsageBasedBillDetail ID="UsageBasedBillDetail1" runat="server"></EM:UsageBasedBillDetail>
                    </div>
                </div>
            </div>
            <%--Hyper-V Metered Resources Bill Detail--%>
            <div class="panel panel-primary" id="Div_HyperVMeteredResourcesBill" runat="server" visible="false">
                <div class="panel-heading" role="tab" id="Div6">
                    <h4 class="panel-title">
                        <a class="collapsed" id="A_HyperVMeteredResourcesBill" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#mrbd-collapse" aria-expanded="false" aria-controls="mrbd-collapse">
                            <%= Resources.Content.BillDetail%>
                        </a>
                    </h4>
                </div>
                <div id="mrbd-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree_1" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body">
                        <%--Hyper-V Metered Resources Bill Detail--%>
                        <UC:HyperVMeteredResourcesBillDetail ID="HypVMRBD" runat="server"></UC:HyperVMeteredResourcesBillDetail>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <asp:LinkButton ID="LB_Dummy" Style="display: none" runat="server"></asp:LinkButton>
    <asp:HiddenField ID="HF_Value" runat="server" />
</div>
