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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">

    <%--    <script src="../../App_Themes/newTheme/js/jquery-3.3.1.min.js"></script>--%>
    <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>
    <%-- <script src="../../JavaScript/Chart.min.js"></script>  --%>
    <script>
        var OrgGroupBatchId = 0;
        var LibraryId = 0;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/BatchDropDownList",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpBatch").html(result.d);
                    OrgGroupBatchId = $("#drpBatch").val();
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/LibraryDropDownList",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $("#drpLibrary").html(result.d);
                    LibraryId = $("#drpLibrary").val();
                    //alert($("#drpLibrary").val())

                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    console.log(err.Message);
                }
            });

            LoadData();
            DateWiseBookCount();
        });
        function LibraryFunction() {
            LibraryId = $("#drpLibrary").val();
            $("#drpLibrary").val(LibraryId);
            //CurrentBatchGet();
            LoadData();
            DateWiseBookCount();
        }
        function BatchFunction() {
            OrgGroupBatchId = $("#drpBatch").val();
            $("#drpBatch").val(OrgGroupBatchId);
            //CurrentBatchGet();
            LoadData();
            DateWiseBookCount();
        }
        function LoadData() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/LoadData",
                data: JSON.stringify({ "OrgGroupBatchId": parseInt(OrgGroupBatchId), "LibraryId": parseInt(LibraryId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    document.getElementById("TodayIssueBookLabel").innerHTML = obj[0][0].value;
                    document.getElementById("TodayReturnBookLabel").innerHTML = obj[0][1].value;
                    document.getElementById("TodayNewAddBookLabel").innerHTML = obj[0][2].value;
                    document.getElementById("TotlaDiscardedLostBookLabel").innerHTML = obj[0][3].value;
                    document.getElementById("TotlaBookCriculationsLabel").innerHTML = obj[0][4].value;
                    document.getElementById("TodayDueBookLabel").innerHTML = obj[0][5].value;
                    document.getElementById("TotlaOverDueBookLabel").innerHTML = obj[0][6].value;
                    document.getElementById("TotlaNoofBookLabel").innerHTML = obj[0][7].value;
                    document.getElementById("TotlaBookAvailabelLabel").innerHTML = obj[0][7].value - (obj[0][3].value + obj[0][4].value);
                    var config = {
                        type: 'pie',
                        data: {
                            datasets: [{
                                data: [
                                    obj[0][3].value,
                                    obj[0][4].value,
                                    obj[0][7].value - (obj[0][3].value + obj[0][4].value)
                                ],
                                backgroundColor: [
                                    window.chartColors.red,
                                    window.chartColors.orange,
                                    window.chartColors.yellow
                                ],
                                label: 'All Book Status'
                            }],
                            labels: [
                                'Total Discarded / Lost Book',
                                'Total Book Criculations',
                                'Total Book Available'
                            ]
                        },
                        options: {
                            responsive: true
                        }
                    };
                    $('#chart-area').remove();
                    $('#ChartArea').append('<canvas id="chart-area"></canvas>');
                    var ctx = document.getElementById('chart-area').getContext('2d');
                    window.myPie = new Chart(ctx, config);

                    //2nd Chart display///
                    var configDue = {
                        type: 'pie',
                        data: {
                            datasets: [{
                                data: [
                                    obj[0][6].value,
                                    obj[0][5].value,
                                    obj[0][8].value
                                ],
                                backgroundColor: [
                                    window.chartColors.red,
                                    window.chartColors.orange,
                                    window.chartColors.yellow
                                ],
                                label: 'All Book Status'
                            }],
                            labels: [
                                'Total Over DueBook',
                                'Today DueBook',
                                'Book Return in Future'
                            ]
                        },
                        options: {
                            responsive: true
                        }
                    };
                    $('#chart-Due').remove();
                    $('#ChartDue').append('<canvas id="chart-Due"></canvas>');
                    var ctx = document.getElementById('chart-Due').getContext('2d');
                    window.myPie = new Chart(ctx, configDue);
                }
            });
        }
        function DateWiseBookCount() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/DateWiseBookCount",
                data: JSON.stringify({ "LibraryId": parseInt(LibraryId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var chartdata = [];
                    var MONTHS = [];
                    var Series1 = [];
                    var Series2 = [];
                    $.each(obj, function (i, item) {
                        MONTHS.push(item[0].value);
                        Series1.push(item[1].value);
                        Series2.push(item[2].value);
                    });
                    console.log(MONTHS);
                    console.log(Series1);
                    console.log(Series2);
                    var config = {
                        type: 'line',
                        data: {
                            labels: MONTHS,
                            datasets: [{
                                label: 'IssueBook',
                                backgroundColor: window.chartColors.red,
                                borderColor: window.chartColors.red,
                                data: Series1,
                                fill: false,
                            }, {
                                label: 'ReturnBook',
                                fill: false,
                                backgroundColor: window.chartColors.blue,
                                borderColor: window.chartColors.blue,
                                data: Series2,
                            }]
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Return and Issued Book Last 30 Days'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Month'
                                    }
                                }],
                                yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Book Count'
                                    }
                                }]
                            }
                        }
                    };
                    $('#chart-line').remove();
                    $('#ChartLine').append('<canvas id="chart-line"></canvas>');
                    var ctx = document.getElementById('chart-line').getContext('2d');
                    window.myLine = new Chart(ctx, config);

                    NewBookArrival();
                }
            });
        }
        function NewBookArrival() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/NewBookArrival",
                data: JSON.stringify({ "LibraryId": parseInt(LibraryId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblNewBookArrival = "";
                    if (obj != "") {
                        tblNewBookArrival += "<tr><th>New Book</th></tr>";
                        $.each(obj, function (i, item) {
                            tblNewBookArrival += "<tr><td>" + item[0].value + "</td></tr>";
                        });
                    }
                    else { tblNewBookArrival += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblNewBookArrival").innerHTML = tblNewBookArrival;
                    TodayDueBook();
                }
            });
        }
        function TodayDueBook() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/TodayDueBook",
                data: JSON.stringify({ "LibraryId": parseInt(LibraryId), "OrgGroupBatchId": parseInt(OrgGroupBatchId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblTodayDueBook = "";
                    if (obj != "") {
                        tblTodayDueBook += "<tr><th>Accession No.</th><th>Book Name</th><th>Issue To</th></tr>";
                        $.each(obj, function (i, item) {
                            tblTodayDueBook += "<tr><td>Today</td><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblTodayDueBook += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblTodayDueBook").innerHTML = tblTodayDueBook;
                    BookTypeDetail();
                }
            });
        }
        function BookTypeDetail() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/BookTypeDetail",
                data: JSON.stringify({ "LibraryId": parseInt(LibraryId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblBookTypeDetail = "";
                    if (obj != "") {
                        tblBookTypeDetail += "<tr><th>Book Type</th><th>No of Books</th></tr>";
                        $.each(obj, function (i, item) {
                            tblBookTypeDetail += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblBookTypeDetail += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblBookTypeDetail").innerHTML = tblBookTypeDetail;
                    NoofIssueBook();
                }
            });
        }
        function NoofIssueBook() {
            $.ajax({
                type: "POST",
                url: "LibrarySummaryDashboard.aspx/NoofIssueBook",
                data: JSON.stringify({ "LibraryId": parseInt(LibraryId), "OrgGroupBatchId": parseInt(OrgGroupBatchId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblNoofIssueBook = "";
                    if (obj != "") {
                        tblNoofIssueBook += "<tr><th>Book Name</th><th>No of Issue</th></tr>";
                        $.each(obj, function (i, item) {
                            tblNoofIssueBook += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblNoofIssueBook += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblNoofIssueBook").innerHTML = tblNoofIssueBook;
                }
            });
        }


    </script>
    <asp:UpdatePanel ID="ResonMasterUpdatePanel" runat="server">
        <ContentTemplate>
            <div id="divContentPage" class="divcontentpagemargin">
                <div class="dashBoardLeftCont" valign="top">
                    <div class="himssuHeader3WireBox">
                        <div class="himsBoxContent">
                            <div class="leftUlMenu">
                                <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="120"
                                    Visible="true" runat="server" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader5WireBox card card-box">
                        <div class="himsBoxHeader card-head">
                            <div class="leftdiv">
                            </div>
                            <div class="himsBoxTitle">
                                <div class="headerText">
                                    <i class="fas fa-mouse-pointer"></i>
                                    <asp:Label ID="SelectLibraryLabel" runat="server" Text="LibrarySummaryDashboard"></asp:Label>
                                </div>
                            </div>

                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="contentHolder">
                                <div class="row">
                                    <div class="top-btn col-md-12">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Batch</label>
                                                <select id='drpBatch' class="form-control custom-select col-12" onchange="BatchFunction()">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Library</label>
                                                <select id='drpLibrary' class="form-control custom-select col-12" onchange="LibraryFunction()">
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mlr14 center-block">
                                    <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-question"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayIssueBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today Issue Book</h6>
                                                </div>

                                            </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="icon-login"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayReturnBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today Return Book</h6>
                                                </div>
                                            </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="icon-plus"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayNewAddBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today New Added Book</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="icon-trash"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotlaDiscardedLostBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Book Lost</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-5  hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-refresh"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotlaBookCriculationsLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Book Circulations</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">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-calendar"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayDueBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today Due Book</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-7 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-calendar"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotlaOverDueBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Over Due Book </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">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-notebook"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotlaNoofBookLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total No of Book</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-9 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-layers"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TotlaBookAvailabelLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Total Book Available in library</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mlr14 ptb20">
                                    <div class="himsBoxHeader card-head inner">
                                        <div class="himsBoxTitle">
                                            <div class="headerText fLeft">
                                                <header>
                                                    <span>All Book Status</span>
                                                </header>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-sm-12 col-xs-12" id="ChartArea">
                                        <canvas id="chart-area"></canvas>

                                    </div>
                                    <div class="col-xl-6 col-sm-12 col-xs-12" id="ChartDue">
                                        <canvas id="chart-Due"></canvas>

                                    </div>
                                </div>
                                <div class="row mlr14 ptb20">
                                    <div class="col-xl-12 col-sm-12 col-xs-12" id="ChartLine">
                                        <canvas id="chart-line"></canvas>
                                    </div>
                                </div>
                                <div class="row mlr14 ptb20">
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="table-box card" >

                                            <div class="himsBoxHeader card-head inner">
                                                <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>New Book Arrival</span>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>

                                            <%--<h3 class="table-topic"></h3>--%>
                                            <div class='himsBoxContent card-body'>
                                                <div class='table-responsive'>
                                                    <table id='tblNewBookArrival' class='table table-striped table-bordered'>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="table-box card">
                                            <div class="himsBoxHeader card-head inner">
                                                <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>Today Due Book</span>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>
                                            <%--<h3 class="table-topic">Today Due Book</h3>--%>
                                            <div class='himsBoxContent card-body'>
                                                <div class='table-responsive'>
                                                    <table id='tblTodayDueBook' class='table table-striped table-bordered' style="height: 10px;">
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="table-box card">
                                            <div class="himsBoxHeader card-head inner">
                                                <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>Book Type Wise Book Detail</span>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>
                                            <%--<h3 class="table-topic">Book Type Wise Book Detail</h3>--%>
                                            <div class='himsBoxContent card-body'>
                                                <div class='table-responsive'>
                                                    <table id='tblBookTypeDetail' class='table table-striped table-bordered'>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                        <div class="table-box card">
                                           <div class="himsBoxHeader card-head inner">
                                                <div class="himsBoxTitle">
                                                    <div class="headerText fLeft">
                                                        <header>
                                                            <span>No of Issue Book</span>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>
                                            <%--<h3 class="table-topic">No of Issue Book</h3>--%>
                                            <div class='himsBoxContent card-body'>
                                                <div class='table-responsive'>
                                                    <table id='tblNoofIssueBook' class='table table-striped table-bordered'>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%--<script data-main="../../JavaScript/rjs/encrypt/select-library-encrypt" src="../../JavaScript/rjs/require.js"></script>--%>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/select-library")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>

</asp:Content>
