@extends('layouts.admin.admin-app')
@section('title','Statistics')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<div class="main-content statistics_page">
    <div class="content_wrapper">
        <div class="content_header">
            <div class="search_section">
                <div class="row align-items-center">
                    <div class="col col-sm-7">
                        <div class="page_title">
                            <h2>Statistics</h2>
                        </div>
                    </div>
                    <div class="col col-sm-5" id="print">
                        <ul class="filter_right list-inline text-right mb-0">
                            <li class="list-inline-item">
                                <a onclick="printGraph()" href="javascript:void(0);" class="btn ripple-effect" data-toggle="tooltip" data-placement="top" title="" data-original-title="Print"><i class="fas fa-print"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row">
                <div class="col-lg-6">
                    <div class="d-sm-flex align-items-center mb-3">
                        <h4 class="sub_title mb-0">Jobs </h4>
                        <div class="action ml-auto mt-2 mt-sm-0 mb-3 mb-sm-0">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                    <select class="selectpicker select-custom" title="Select Duration"  data-size="2" id="selJobDuration" name="selJobDuration" onchange="getJobChart();">
                                        <option value="1">Select Duration</option>
                                        <option value="3">Last 3 Months</option>
                                        <option value="6">Last 6 Months</option>
                                        <option value="12">Last 12 Months</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="bar_box bg-white">
                        <canvas id="jobChart" class="common_chart" width="592" height="400" ></canvas>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="d-sm-flex align-items-center mb-3">
                        <h4 class="sub_title mb-0">Registered Customers </h4>
                        <div class="action ml-auto mt-2 mt-sm-0 mb-3 mb-sm-0">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                    <select class="selectpicker select-custom" title="Select Duration"  data-size="2" id="selDuration" name="selDuration" onchange="getRegisterChart();">
                                        <option value="1">Select Duration</option>
                                        <option value="3">3 Months</option>
                                        <option value="6">6 Months</option>
                                        <option value="12">12 Months</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="bar_box bg-white">
                        <canvas id="registerChart" class="common_chart" width="592" height="400" ></canvas>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="d-sm-flex align-items-center mb-3">
                        <h4 class="sub_title mb-0">Total Generated Amount </h4>
                        <div class="action ml-auto mt-2 mt-sm-0 mb-3 mb-sm-0">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item">
                                    <select class="selectpicker select-custom" name="selAmountDuration" title="Select Duration"  data-size="2" id="selAmountDuration" onchange="getGeneratedAmountChart();">
                                        <option value="1">Select Duration</option>
                                        <option value="3">3 Months</option>
                                        <option value="6">6 Months</option>
                                        <option value="12">12 Months</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="bar_box bg-white">
                        <canvas id="generatedAmountChart" class="common_chart" width="1253" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        getJobChart();
        getRegisterChart();
        getGeneratedAmountChart();
    });

    //Ajax load content
    function getJobChart() {
        $("#jobChart").html('{{ajaxLoader()}}');
        var url = '{{url("admin/load-job-chart")}}';
        var duration = $("#selJobDuration").val();
        $.ajax({type: "GET", url: url, data: {duration: duration},
            success: function (response) {
                $("#jobChart").html("");
                $("#jobChart").html(response);
            }
        });
    }
    function getRegisterChart() {
        $("#registerChart").html('{{ajaxLoader()}}');
        var url = '{{url("admin/load-register-chart")}}';
        var duration = $("#selDuration").val();
        $.ajax({type: "GET", url: url, data: {duration: duration},
            success: function (response) {
                $("#registerChart").html("");
                $("#registerChart").html(response);
            }
        });
    }
    function getGeneratedAmountChart() {
        $("#generatedAmountChart").html('{{ajaxLoader()}}');
        var url = '{{url("admin/load-generated-amount-chart")}}';
        var duration = $("#selAmountDuration").val();
        $.ajax({type: "GET", url: url, data: {duration: duration},
            success: function (response) {
                $("#generatedAmountChart").html("");
                $("#generatedAmountChart").html(response);
            }
        });
    }
    
    function printGraph() {
        $('#print').hide();
        window.print();
        $('#print').show();
    }
</script>
@endsection