<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_FeeManagement_FeeSummaryDashboard, App_Web_xqowe3nu" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>
<%@ Register Src="~/UserControls/Common/EmployeeSearch/EmployeeSearch.ascx" TagName="EmployeeSearchControl" TagPrefix="hims" %>
<%@ Register Src="~/UserControls/DatePicker/DatePickerControl.ascx" TagName="DatePickerControl"
    TagPrefix="Date" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
    <link href="../../App_Themes/jquery-ui.css" rel="stylesheet" />
    <link href="../../App_Themes/newTheme/css/inner-db.css" rel="stylesheet" />
    <script src="../../App_Themes/newTheme/js/Chart.min.js"></script>
    <script src="../../App_Themes/newTheme/js/utils.js"></script>
    <style type="text/css">
        [data-tooltip]:before {
            position : absolute;
            content : attr(data-tooltip);
            opacity : 0;
            transition: all 0.15s ease;
            padding: 10px;
            color: #ffffff;
            border-radius: 10px;
            /*box-shadow: 2px 2px 1px silver;*/    

         }
        [data-tooltip]:hover:before {        
            opacity : 1;
            background: #434343;
            margin-top: -35px;
            margin-left: 20px; 
        }
    </style>
    <asp:UpdatePanel ID="ResonMasterUpdatePanel" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <hims:EmployeeSearchControl ID="EmployeeSearch" Visible="false" runat="server" />
            <div id="divContentPage" class="divcontentpagemargin">

                <div class="dashBoardLeftCont">
                    <div class="himssuHeader3WireBox">
                        <table>
                            <tr>
                                <td>
                                    <div class="leftUlMenu">
                                        <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="104"
                                            Visible="true" runat="server" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader1WireBox card card-box" id="DetailDiv" runat="server" visible="True">
                        <div class="himsBoxHeader card-head">
                            <div class="leftdiv">
                            </div>
                            <div class="himsBoxTitle">
                                <div class="headerText">
                                    <header>
                                        <i class="fas fa-level-up-alt"></i>
                                        <asp:Label ID="ReasonMasterDetailLabel" runat="server" Text="Student Fee Dashboard "></asp:Label>
                                    </header>
                                </div>
                            </div>
                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="contentHolder">
                                <div class="row mlr14 center-block">
                                    <%--    <div class="col-md-6 col-lg-3 col-xlg-3">
                                          <div class="card card-inverse card-grey hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="TotalStudentLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Total Student</h6>
                                            </div>
                                        </div>
                                    </div>--%>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-1 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-following"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalStudentLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Student</h6>
                                                </div>

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

                                    <%-- <div class="col-md-6 col-lg-3 col-xlg-3">
                                        <div class="card card-inverse card-success  hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="PaidFeesLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Paid Fees</h6>
                                            </div>
                                        </div>
                                    </div>--%>

                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-2  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-money-check-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="PaidFeesLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Paid Fees</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <%--                                        <div class="col-md-6 col-lg-3 col-xlg-3">
                                        <div class="card card-inverse card-red hover-expand-effect">
                                            <div class="box text-center">
                                                <h1 id="PendingFeesLabel" class="font-light text-white"></h1>
                                                <h6 class="text-white">Pending Fee</h6>
                                            </div>
                                        </div>
                                    </div>--%>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-3 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-exclamation-triangle"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="PendingFeesLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Pending Fee</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-4 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-money-bill-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="PartialFeesLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Partial Fee</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                     <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-8 hover-expand-effect" data-tooltip="Active Student Fee Collection...">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-money-check-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayCollectionLable" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today's Collection</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                     <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-10 hover-expand-effect" data-tooltip="Active Student Fee Collection...">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-money-check-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthlyCollectionLable" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Monthly Collection</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                     <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-6 hover-expand-effect" data-tooltip="Active Student Fee Collection...">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="fas fa-money-check-alt"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="UptoDateCollectionLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Upto Date Collection</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="ChartBar">
                                        <canvas id="chart-Bar"></canvas>
                                    </div>
                                    <div class="alignCenter pTop5">
                                        <asp:Button ID="DetailButton" runat="Server"
                                            SkinID="0" CssClass="btn-search btn fas" Text="Details" OnClick="DetailButton_Click" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <cc1:ModalPopupExtender ID="ViewFeeDetailsModalPopupExtender" runat="server" TargetControlID="HidenButton" PopupControlID="ModalPopUpPanel" BackgroundCssClass="modalBackground"
        Drag="True" PopupDragHandleControlID="dragPanel" Enabled="True" />
    <asp:LinkButton runat="server" ID="HidenButton" meta:resourcekey="HidenButtonResource1" />

    <asp:Panel ID="ModalPopUpPanel" runat="server" CssClass="dragControl" Width="900px" DefaultButton="HidenButton" meta:resourcekey="ModalPopUpPanelResource1">

        <div class="messagebox card card-box">

            <asp:Panel ID="dragPanel" runat="server" CssClass="dragMePanel" Width="100%" meta:resourcekey="dragPanelResource1">
                <div id="dragMe1" class="dragMe card-head" style="cursor: move">
                    <div class="himsPopupWireBox">
                        <div class="himsBoxTopper headerFont">
                            <div class="himsBoxTopper text-center headerFont card-head">
                                <div class="headerText">
                                    <asp:UpdatePanel ID="UpdatePanel3" runat="server" RenderMode="Inline">
                                        <ContentTemplate>
                                            <header>
                                                <asp:Label ID="DialogHeaderLabel" runat="server" meta:resourcekey="DialogHeaderLabelResource1" Text="Fee Summary"></asp:Label>
                                            </header>
                                            <span class="pull-right">
                                                <asp:ImageButton ID="ImageButtonClose" runat="server" Height="20PX" Width="20PX" ImageUrl="~/Images/closebox.png" OnClick="ImageButtonClose_Click" />
                                            </span>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </asp:Panel>
            <asp:UpdatePanel ID="CircularViewUpdatePanel" runat="server"
                RenderMode="Inline">
                <ContentTemplate>

                    <div id="bodyContainer" class="card-body">
                        <div class="himsPopupWireBox">

                            <div class="himsBoxContentmain" style="overflow: hidden">
                                <div id="divContentPage1">
                                    <div class="spacer">
                                        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/spacer.gif"
                                            meta:resourcekey="Image1Resource1" />
                                    </div>
                                    <div>
                                        <div class="himssuHeader5WireBox">
                                            <div class="himsBoxHeader">
                                                <div class="himsBoxHeader card-head">
                                                    <asp:Panel ID="ViewAssignmentHeaderPanel" runat="server" meta:resourcekey="ViewAssignmentPanelResource1">
                                                        <div class="leftdiv">
                                                        </div>
                                                        <div class="himsBoxTitle">
                                                            <div class="headerText">
                                                                <header>
                                                                    <asp:Label ID="ViewAssignmentLabel" runat="server" Text="Fee Summary"></asp:Label>
                                                                </header>
                                                            </div>
                                                        </div>
                                                    </asp:Panel>
                                                </div>
                                            </div>
                                            <div class="himsBoxContent col-md-12">
                                                <div class="alignCenter pTop5 col-md-6 center">
                                                    <div class="outerBox pTop5 col-md-3">
                                                        <div class="controlLabelWidth">
                                                            <asp:Label ID="StatusDropDownLabel" Text="Status" runat="server"></asp:Label>
                                                        </div>
                                                        <div class="fLeft pRight5" style="width:130px">
                                                            <asp:DropDownList runat="server" ID="StatusDropDownList" SkinID="CustomWidthDropDownList" OnSelectedIndexChanged="StatusDropDownList_SelectedIndexChanged"
                                                                CssClass="form-control" onmouseleave="showHideTooltip()" AutoPostBack="true" onmouseenter="showHideTooltip()">
                                                                <asp:ListItem Text="- ALL -" Value="-1"></asp:ListItem>
                                                                <asp:ListItem Text="Paid" Value="1"></asp:ListItem>
                                                                <asp:ListItem Text="Pending" Value="2"></asp:ListItem>
                                                                <asp:ListItem Text="Partial" Value="3"></asp:ListItem>
                                                            </asp:DropDownList>
                                                        </div>
                                                    </div>
                                                </div>
                                                <asp:Panel ID="Panel4" runat="server" meta:resourcekey="DetailPanelResource1">
                                                    <div class="contentHolder table-responsive">
                                                        <asp:Panel ID="Panel5" runat="server" meta:resourcekey="SearchCriteriaPanelResource1">
                                                            <div class="contentHolder">
                                                                <asp:UpdatePanel ID="CircularDetailUpdatePanel" runat="server" UpdateMode="Always">
                                                                    <ContentTemplate>
                                                                        <div id="Div13" runat="server" visible="True">
                                                                            <div id="Div14" runat="server" class="table-responsive">
                                                                                <div class="col-md-12">
                                                                                    <asp:GridView ID="FeeSummaryGridView" runat="server" Width="100%" AutoGenerateColumns="False"
                                                                                        CssClass="table table-striped table-bordered table-hover" OnRowDataBound="FeeSummaryGridView_RowDataBound" DataKeyNames="Partial,Pending"
                                                                                        AllowPaging="false" PageSize="10" SkinID="" ShowHeader="True" EmptyDataText="No Records Available">
                                                                                        <Columns>
                                                                                            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="Id" ItemStyle-Width="10%">
                                                                                                <ItemStyle HorizontalAlign="Center" />
                                                                                                <ItemTemplate>
                                                                                                    <asp:Label ID="CodeLabel" runat="server" Text='<%#Eval("Code") %>'></asp:Label>
                                                                                                </ItemTemplate>
                                                                                            </asp:TemplateField>
                                                                                            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="Class/Sec" ItemStyle-Width="10%">
                                                                                                <ItemStyle HorizontalAlign="Center" />
                                                                                                <ItemTemplate>
                                                                                                    <asp:Label ID="ClassDivisionLabelId" runat="server" Text='<%#Eval("ClassDivision") %>'></asp:Label>
                                                                                                </ItemTemplate>
                                                                                            </asp:TemplateField>
                                                                                            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="Roll No" ItemStyle-Width="10%">
                                                                                                <ItemStyle HorizontalAlign="Center" />
                                                                                                <ItemTemplate>
                                                                                                    <asp:Label ID="RollNoLabel" runat="server" Text='<%#Eval("RollNo") %>'></asp:Label>
                                                                                                </ItemTemplate>
                                                                                            </asp:TemplateField>
                                                                                            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="Student Name" ItemStyle-Width="30%">
                                                                                                <ItemStyle HorizontalAlign="Center" />
                                                                                                <ItemTemplate>
                                                                                                    <asp:Label ID="StudentNameLabel" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                                                                                                </ItemTemplate>
                                                                                            </asp:TemplateField>

                                                                                            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="Status" ItemStyle-Width="10%">
                                                                                                <ItemStyle HorizontalAlign="Center" />
                                                                                                <ItemTemplate>
                                                                                                    <asp:Label ID="StatusLabel" runat="server" Text='<%#Eval("Status") %>'></asp:Label>
                                                                                                </ItemTemplate>
                                                                                            </asp:TemplateField>
                                                                                        </Columns>
                                                                                    </asp:GridView>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </ContentTemplate>
                                                                </asp:UpdatePanel>
                                                            </div>
                                                        </asp:Panel>
                                                    </div>
                                                </asp:Panel>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="himsmainBoxBottom">
                            </div>
                            <div class="himsmainBoxFooter">
                                <div>
                                    <table>
                                        <tr>
                                            <td>&nbsp
                                            </td>
                                        </tr>

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

                        </div>
                    </div>

                    <asp:UpdateProgress ID="MainUpdateProgress" runat="server" DisplayAfter="200">
                        <ProgressTemplate>
                            <div style="position: absolute; top: 50%; left: 45%; font-size: 20px">
                                <asp:Image ID="LoadingImage4" runat="server" ImageUrl="~/Images/Loading.gif"
                                    meta:resourcekey="Image3Resource1" />
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </ContentTemplate>
            </asp:UpdatePanel>

        </div>
    </asp:Panel>
    <%-- <script data-main="../../JavaScript/rjs/encrypt/assign-organization-encrypt" src="../../JavaScript/rjs/require.js"></script>--%>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/assign-organization")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
    <script>

        $(document).ready(function () {
            AdmissionListDataGet();
            
        });

        function AdmissionListDataGet() {
            $.ajax({
                type: "POST",
                url: "FeeSummaryDashboard.aspx/AdmissionListDataGet",
                // data: JSON.stringify({ "AttendanceDate": AttendanceDate }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TotalStudentLabel").innerHTML = obj[0][0].value;
                            document.getElementById("PaidFeesLabel").innerHTML = obj[0][1].value;
                            document.getElementById("PendingFeesLabel").innerHTML = obj[0][2].value;
                            document.getElementById("PartialFeesLabel").innerHTML = obj[0][3].value;
                        });
                    }
                    FeeCollectionDataGet();
                    AdmissionGraphDataGet();
                }
            });
        }

        function AdmissionGraphDataGet() {

            $.ajax({
                type: "POST",
                url: "FeeSummaryDashboard.aspx/AdmissionGraphDataGet",
                // data: JSON.stringify({ "AttendanceDate": AttendanceDate, "ClassId": parseInt(ClassId), "DepartmentId": parseInt(DepartmentId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var chartdata = [];
                    var Class = [];
                    var Series1 = [];
                    var Series2 = [];
                    var Series3 = [];
                    $.each(obj, function (i, item) {
                        Class.push(item[1].value);
                        Series1.push(item[3].value);
                        Series2.push(item[4].value);
                    });
                    var barChartData = {
                        labels: Class,
                        datasets: [{
                            label: 'Paid Fees',
                            backgroundColor: window.chartColors.green,
                            data: Series1
                        }, {
                            label: 'Pending Fees',
                            backgroundColor: window.chartColors.red,
                            data: Series2
                        }]


                    };
                    $('#chart-Bar').remove();
                    $('#ChartBar').append('<canvas id="chart-Bar"></canvas>');
                    var ctx = document.getElementById('chart-Bar').getContext('2d');
                    window.myBar = new Chart(ctx, {
                        type: 'bar',
                        data: barChartData,
                        options: {
                            title: {
                                display: true,
                                text: 'Student Inquiry Chart'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: true
                            },
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            scales: {
                                xAxes: [{
                                    maxBarThickness: 50,
                                    stacked: true,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Class'
                                    }
                                }],
                                yAxes: [{
                                    stacked: true,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    });

                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
        }
        //function DateWise() {
        //    AttendanceDate = $('#AttendanceDate').val();
        //    AttendanceListDataGet();
        //}
        //function ClassFunction() {
        //    ClassId = $("#drpClass").val();
        //    $("#drpClass").val(ClassId);
        //    alert(ClassId);
        //    AttendanceListDataGet();
        //}
        //function DepartmentFunction() {
        //    DepartmentId = $("#drpDepartment").val();
        //    $("#drpDepartment").val(DepartmentId);
        //    AttendanceListDataGet();
        //}

        function FeeCollectionDataGet() {
            $.ajax({
                type: "POST",
                url: "FeeSummaryDashboard.aspx/FeeCollectionDataGet",
                // data: JSON.stringify({ "AttendanceDate": AttendanceDate }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    
                    var obj = (result.d);
                    if (obj != "") {
                        
                        document.getElementById("TodayCollectionLable").innerHTML = obj.TodayCollection;
                        document.getElementById("MonthlyCollectionLable").innerHTML = obj.MonthlyCollection;
                        document.getElementById("UptoDateCollectionLabel").innerHTML = obj.UptoDateCollection;
                        //$.each(obj, function (i, item) {
                        //    document.getElementById("TotalStudentLabel").innerHTML = obj[0][0].value;
                        //    document.getElementById("PaidFeesLabel").innerHTML = obj[0][1].value;
                        //    document.getElementById("PendingFeesLabel").innerHTML = obj[0][2].value;
                        //    document.getElementById("PartialFeesLabel").innerHTML = obj[0][3].value;
                        //});
                    }
                    AdmissionGraphDataGet();
                }
            });
        }
    </script>
</asp:Content>
