@extends('layouts.main')

@section('title','Dashoard')

@section('content')

<div class="card martop-1 bg-transparent" style="box-shadow: none">
    <div class="card-header">
        <h3 class="card-title">Dashboard</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h5>Total Company Approved</h5>
                        <h3 id="c_company">0</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-building-o" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h5>Total User Approved</h5>
                        <h3 id="c_approved">0</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h5>Total Trial User</h5>
                        <h3 id="c_trial">0</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-cogs"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h5>Total Subscription User Monthly</h5>
                        <h3 id="c_monthly">0</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-user-circle" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h5>Total Subscription User Yearly</h5>
                        <h3 id="c_yearly">0</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <hr>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-12 row">
                        <div class="col-md-3">
                            <input class="form-control form-control-sm" type="date" id="start_date" value="{{oneWeekAgo(date('Y-m-d'))}}">
                        </div>
                        <div class="col-md-1 text-center mt-1">
                             - TO - 
                        </div>
                        <div class="col-md-3">
                            <input class="form-control form-control-sm" type="date" id="end_date" value="{{date('Y-m-d')}}">
                        </div>
                        <div class="col-md-3">
                            <select class="form-control form-control-sm" id="select_type">
                                <!--<option value="DAILY" selected>DAILY</option>-->
                                <option value="WEEKLY">WEEKLY</option>
                                <option value="MONTHLY">MONTHLY</option>
                                <option value="YEARLY">YEARLY</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="select_chart_type">
                                <option >LINE</option>
                                <option >BAR</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <br>
        
        <div class="card top-border-cyan">
            <div class="card-header">
                <h4 class="card-title">User Subscriptions</h4>
            </div>
            <div class="card-body" id="card_income">
            </div>
            <div class="overlay display-none">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
        </div>
        
    </div>
</div>
<script>
    var param = { 
        chart_type: 'LINE'
    };
    
    $(document).ready(function () {
        loadThis(param);
        initDashboard(param)
    });
    function loadThis(param){
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this), url = '/home_data';
        
        $.ajax({
            url: url,
            type: "get",
            data: param
        }).done(function (result) {
            hideLoading(e_modal_wait);
            //totals
            var totals = result.totals;
            $('#c_company').html(totals[0].value);
            $('#c_approved').html(totals[1].value);
            $('#c_trial').html(totals[2].value);
            $('#c_monthly').html(totals[3].value);
            $('#c_yearly').html(totals[4].value);
            
        }).fail(ajax_fail);
    }
    
    $(document).on('change', '#start_date', function(e){
        e.preventDefault();
        var ini = $(this),
            val = ini.val();
        
        param.date_start = val;
        initDashboard(param)
    })
    $(document).on('change', '#end_date', function(e){
        e.preventDefault();
        var ini = $(this),
            val = ini.val();
        
        param.date_end = val;
        initDashboard(param)
    })
    $(document).on('change', '#select_type', function(e){
        e.preventDefault();
        var ini = $(this),
            val = ini.val();
        
        param.type = val;
        initDashboard(param)
    })
    $(document).on('change', '#select_chart_type', function(e){
        e.preventDefault();
        var ini = $(this),
            val = ini.val();
        
        param.chart_type = val;
        initDashboard(param)
    })
    
    function initDashboard(param){
        getIncome(param);
    }
    
    function getIncome(param){
        var card = $('#card_income').parents('.card');
        showOverlay(card);
        $.get('/home_data', param, function(response){
            var data = response.data;
            setIncome(data, param.chart_type);
            hideOverlay(card);
        });
    }
    
    function setIncome(data, type){
        var dataset = data.dataset,
            labels = data.labels;
            
        putChart($('#card_income'), 'income-chart', 'INCOME', '#007bff', labels, dataset, type);
    }
    
    function showOverlay(card){
        var overlay = card.find('.overlay');
        overlay.removeClass('display-none');
    }
    function hideOverlay(card){
        var overlay = card.find('.overlay');
        overlay.addClass('display-none');
    }
</script>

<script src="{{asset('js/setup_chart.js?v=1')}}"></script>
@endsection