<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_Admission_AdmissionInquiryFollowup, App_Web_v5i34bxp" 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>
    <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="112"
                                            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="Admission Dashboard "></asp:Label>
                                    </header>
                                </div>
                            </div>
                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="col-md-6 p-0">
                                <div class="row mlr14 center-block">
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-1 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-info"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalInquiryLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Inquiry Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-2  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-note"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthlyInquiryLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Monthly Inquiry Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-3 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-graduation   "></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="InquiryConvertedLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Inquiry Converted Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="ChartBar">
                                        <canvas id="chart-Bar"></canvas>
                                    </div>
                                </div>
                                 
                            </div>

                            <div class="col-md-6 p-0">
                                <div class="row mlr14 center-block">
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-4 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-info"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotalAdmissionLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Admission Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-5  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-note"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthlyAdmissionLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Monthly Admission Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-xl-6 p3">
                                        <div class="card card-inverse gradient-6 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-graduation   "></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="ConvertedAdmissionLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Admission Converted Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="AdmissionChartBar">
                                        <canvas id="Admission"></canvas>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%-- <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 () {
            InquiryListDataGet();
            AdmissionListDataGet();
        });

        function InquiryListDataGet() {
            $.ajax({
                type: "POST",
                url: "AdmissionSummary.aspx/InquiryListDataGet",
                // 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("TotalInquiryLabel").innerHTML = obj[0][0].value;
                            document.getElementById("MonthlyInquiryLabel").innerHTML = obj[0][1].value;
                            document.getElementById("InquiryConvertedLabel").innerHTML = obj[0][2].value;
                        });
                    }
                    InquiryGraphDataGet();
                }
            });
        }

        function InquiryGraphDataGet() {

            $.ajax({
                type: "POST",
                url: "AdmissionSummary.aspx/InquiryGraphDataGet",
                // 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[2].value);
                        Series2.push(item[3].value);
                    });
                    var barChartData = {
                        labels: Class,
                        datasets: [{
                            label: 'Total Inquiry',
                            backgroundColor: window.chartColors.orange,
                            data: Series1
                        }, {
                            label: 'Inquiry Converted',
                            backgroundColor: window.chartColors.green,
                            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: false
                            },
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            scales: {
                                xAxes: [{
                                   
                                    barPercentage: 0.5,
                                    stacked: false,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Class'
                                    }
                                }],
                                yAxes: [{
                                    beginAtZero: true,
                                    stacked: false,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    });

                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
        }
       
        function AdmissionListDataGet() {
            $.ajax({
                type: "POST",
                url: "AdmissionSummary.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("TotalAdmissionLabel").innerHTML = obj[0][0].value;
                            document.getElementById("MonthlyAdmissionLabel").innerHTML = obj[0][1].value;
                            document.getElementById("ConvertedAdmissionLabel").innerHTML = obj[0][2].value;
                        });
                    }
                    AdmissionGraphDataGet();
                }
            });
        }

        function AdmissionGraphDataGet() {

            $.ajax({
                type: "POST",
                url: "AdmissionSummary.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 Class = [];
                    var Series1 = [];
                    var Series2 = [];
                    var Series3 = [];
                    $.each(obj, function (i, item) {
                        Class.push(item[1].value);
                        Series1.push(item[2].value);
                        Series2.push(item[3].value);
                    });
                    var barChartData = {
                        labels: Class,
                        datasets: [{
                            label: 'Total Admission',
                            backgroundColor: window.chartColors.orange,
                            data: Series1
                        }, {
                            label: 'Admission Converted',
                            backgroundColor: window.chartColors.green,
                            data:Series2
                           // data: [2,2,2]
                        }]


                    };
                    $('#Admission').remove();
                    $('#AdmissionChartBar').append('<canvas id="Admission"></canvas>');
                    var ctx = document.getElementById('Admission').getContext('2d');
                    window.myBar = new Chart(ctx, {
                        type: 'bar',
                        data: barChartData,
                        options: {
                            title: {
                                display: true,
                                text: 'Student Admission Chart'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false
                            },
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            scales: {
                                xAxes: [{
                                    barPercentage: 0.5,
                                    stacked: false,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Class'
                                    }
                                }],
                                yAxes: [{
                                    beginAtZero: true,
                                    barPercentage: 0.5,
                                    ticks: {                                       
                                        min: 0,
                                    },
                                    stacked: false,
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Count'
                                    }
                                }]
                            }
                        }
                    });

                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
        }
    </script>
</asp:Content>
