@extends('staff::layouts.default')
@section('title',trans('admin_default.membershipcard_report'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.membershipcard_report')}}</a></li>
@endsection

@section('content')

<div class="content-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <div class="rows"  style="margin-bottom:20px;">
                        <div class="col-lg-4">
                            <h6 class="panel-title"><h6 class="panel-title">{{trans('admin_default.issued_cards')}}</h6></h6>
                        </div>
                        <div class="col-lg-8">
                            <div class="rows">
                                <div class="col-lg-9" id="chart_filter_by_date_form">
                                    <div class="rows">
                                        <div class="col-lg-5">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="icon-calendar22"></i></span>
                                                <input type="text" name="chart_filter_start_date" id="chart_filter_start_date" autocomplete="off" class="form-control pickadate"  value="{{date('d F, Y', strtotime($from))}}"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-1 text-center" style="padding-top: 10px">To</div>
                                        <div class="col-lg-5">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="icon-calendar22"></i></span>
                                                <input type="text" name="chart_filter_end_date" id="chart_filter_end_date" autocomplete="off"  class="form-control pickadate"  value="{{date('d F, Y', strtotime($to))}}"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-1">
                                            <input type="submit" class="btn btn-sm btn-primary" value="Filter" id="btn_chart_filter"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 pull-right">
                                    <form class="heading-form" id="frmMembershipCardFilter" method="POST">
                                        {!! csrf_field() !!}
                                        <div class="form-group">
                                            <select class="change-date select-sm form-control" id="select_date" name="filter">
                                                <option value="0" selected='selected'>{{trans('admin_default.this_month')}}</option>
                                                <option value="1" >{{trans('admin_default.by_semester')}}</option>
                                                <option value="2" >{{trans('admin_default.by_year')}}</option>
                                                <option value="-1" >{{trans('admin_default.custom')}}</option>
                                            </select>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="div_newly_card_filter" class="chart-large-width"></div>    
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">{{trans('admin_default.issued_cards_by_type')}}</h6>
                </div>
                <div class="panel-body">
                    <div class="col-lg-6">
                        <div id="div_card_issues" class="chart-large-width"></div>
                    </div>
                    <div class="col-lg-6">
                        <p>{{trans('admin_default.total_issued_cards')}}:</p>
                        @foreach($arr_by_card as $key => $value)
                            <div class="text-size-small">
                                <span class="status-mark position-left" 
                                    style="border-color: {{$arr_colors[$key]}}; background-color: {{$arr_colors[$key]}}"></span> 
                                <span>{{$value->title . ": " . number_format($value->total)}}</span>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h6 class="panel-title">{{trans('admin_default.upcoming_expire_cards')}}</h6>
                        </div>
                        <div class="col-lg-6 pull-right text-right">
                            <a href="#" class="btn btn-success"​ id="export-upcoming-expire-excel"><i class="icon-file-download position-left"></i> Excel</a>
                        </div>
                    </div>

                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-framed">
                        <thead>
                            <tr>
                                <th>{{trans('admin_default.customer')}}</th>
                                <th>{{trans('admin_default.card_number')}}</th>
                                <th>{{trans('admin_default.expire_date')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($arr_upcoming_expire))
                                @foreach($arr_upcoming_expire as $key => $value)
                                    <tr>
                                        <td>
                                            <a href="{{url($shop_package . '/customer/detail') . '/' . $value->customer_id}}">
                                                {{$value->c_id . ": " . $value->name}}
                                            </a> 
                                        </td>
                                        <td>{{\Helper::formatMCardNumber($value->mcard_number)}}</td>
                                        <td>{{date("F-Y", strtotime($value->expired_date))}}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="10">{{trans('admin_default.no_records_found')}}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
    </div>

</div>

<style type="text/css">
h6
{
    font-weight: bold;
}
.chart-large-width
{
    width: 100%;
    height: 300px;
}
.chart-medium-width
{
    width: 50%;
    height: 300px;
}
.status-mark
{
    width: 10px;
    height: 10px;
}
#chart_filter_by_date_form{
    display: none;
}
</style>

@endsection

@section('script')

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

var arr_colors = ['#29B6F6', '#4CAF50', '#FF7043', '#7E57C2', '#607D8B', '#26A69A', '#F44336', '#66BB6A','#7E57C2'];
var json_this_month_chart = {!! $json_this_month_chart !!};
var json_card_issue = {!! $json_card_issue !!};
var json_by_filter = {!! $json_by_filter !!};

$(function(){
    $("#export-upcoming-expire-excel").click(function (e) {
        e.preventDefault();
        var url    = "{!! url($shop_package . '/report/export-upcoming-list') !!}";

        $.ajax({
            url     : url,
            data    : {},
            type    : 'GET',
            success: function( response ){
                var a = document.createElement("a");
                a.href = response.file;
                a.download = response.name;
                document.body.appendChild(a);
                a.click();
                a.remove();
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    });


    $("#btn_chart_filter").click(function () {
        var start_date = $("#chart_filter_start_date").val();
        var end_date = $("#chart_filter_end_date").val();
        start_date =  new Date(start_date);
        var start_date_year =  start_date.getFullYear(),
            start_date_month   = start_date.getMonth() < 10 ? '0' + (start_date.getMonth() + 1) : start_date.getMonth(),
            start_date_day     = start_date.getDate()  < 10 ? '0' + start_date.getDate()  : start_date.getDate();
        start_date = start_date_year + "-" + start_date_month + "-"+ start_date_day;

        end_date =  new Date(end_date);
        var end_date_year =  end_date.getFullYear(),
            end_date_month   = end_date.getMonth() < 10 ? '0' + (end_date.getMonth() + 1) : end_date.getMonth(),
            end_date_day     = end_date.getDate()  < 10 ? '0' + end_date.getDate()  : end_date.getDate();
        end_date = end_date_year + "-" + end_date_month + "-"+ end_date_day;

        var url    = "{!! url($shop_package . '/report/get-register-membership-card-by-date') !!}";

        $.ajax({
            url     : url,
            data    : { start_date:start_date, end_date: end_date },
            type    : 'GET',
            beforeSend: function() {
                $("#div_newly_card_filter").html("Loading...");
            },
            success: function( response ){
                drawMembershipCardFilterChart($.parseJSON(response.data));
            },
            error: function( err, msg ){
                console.log(err);
            }
        });
    });

    $('#select_date').change(function(){
        $("#chart_filter_by_date_form").hide();
        var me = $(this),
            val = me.val(),
            frm = me.closest('form');
        if(val == -1){
            $("#chart_filter_by_date_form").show();
            return false;
        }
        var url    = "{!! url($shop_package . '/report/get-register-membership-card') !!}";
        if (val == 1 || val == 2) {
            $.ajax({
                url     : url,
                data    : { filter:val },
                type    : 'GET',
                success: function( response ){
                    if( response.status == true ){
                        var data = response.data;
                        drawMembershipCardFilterChart(data);
                    }
                },
                error: function( err, msg ){
                    console.log(err);
                }
            });
        }else {
            drawMembershipCardFilterChart(json_this_month_chart);
        }
        
    });
});

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawMembershipCardFilterChart);

function drawChart() {

    // total card issues
    var pie_chart_data = google.visualization.arrayToDataTable(json_card_issue);
    var pie_chart_options = {
            title: '',
            colors: arr_colors,
            chartArea: {'width': '90%', 'height': '50%', 'top': '10', 'left': '10'},
            legend: {
                maxLines: 10,
                textStyle: {
                    fontSize: 11
                },
                position: 'none'
            },
    };
    var pie_chart = new google.visualization.PieChart(document.getElementById('div_card_issues'));
    pie_chart.draw(pie_chart_data, pie_chart_options);

}
function drawMembershipCardFilterChart(data) {

    if (data != undefined || data != null) {
        json_by_filter = data;
    }

    // newly card by yearly or semesterly
    var data = google.visualization.arrayToDataTable(json_by_filter);
    var view = new google.visualization.DataView(data);
    var registered_options = {
        title: "",
        bar: {groupWidth: "30"},
        legend: { position: "top" },
        chartArea: {'width': '85%', 'height': '80%'},
        // isStacked: true,
        seriesType: 'bars',
        series: {1: {type: 'line'}},
        colors: arr_colors,
        vAxis: { viewWindow:{ min: 0 } },
    };
    var chart = new google.visualization.ComboChart(document.getElementById("div_newly_card_filter"));
    chart.draw(view, registered_options);

}
</script>
@parent

@endsection