@extends('layouts.dashboard')
@section('page-title')
    {{__('Income Vs Expense')}}
@endsection
@push('script-page')
    <script type="text/javascript" src="{{ asset('js/html2pdf.bundle.min.js') }}"></script>
    <script>
        var BarsChart = (function () {
            var $chart = $('#chart-finance');

            function initChart($chart) {
                var ordersChart = new Chart($chart, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($labels) !!},
                        datasets:  {!! json_encode($data) !!}
                    }
                });
                $chart.data('chart', ordersChart);
            }

            if ($chart.length) {
                initChart($chart);
            }
        })();

        var filename = $('#filename').val();

        function saveAsPDF() {
            var element = document.getElementById('printableArea');
            var opt = {
                margin: 0.3,
                filename: filename,
                image: {type: 'jpeg', quality: 1},
                html2canvas: {scale: 4, dpi: 72, letterRendering: true},
                jsPDF: {unit: 'in', format: 'A2'}
            };
            html2pdf().set(opt).from(element).save();

        }
    </script>

@endpush
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>{{__('Manage Income Vs Expense')}}</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{route('home')}}">{{__('Dashboard')}}</a></div>
                    <div class="breadcrumb-item">{{__('Income vs Expense Report')}}</div>
                </div>
            </div>
            <div class="section-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                {{ Form::open(array('route' => array('report.income-expense'),'method'=>'get')) }}
                                <div class="row">
                                    <div class="col">
                                        <h4 class="h4 mb-0">{{__('Filter')}}</h4>
                                    </div>
                                    <div class="col-md-2">
                                        {{Form::label('start_month',__('Start Month'))}}
                                        {{Form::month('start_month',isset($_GET['start_month'])?$_GET['start_month']:'',array('class'=>'form-control'))}}
                                    </div>
                                    <div class="col-md-2">
                                        {{Form::label('end_month',__('End Month'))}}
                                        {{Form::month('end_month',isset($_GET['end_month'])?$_GET['end_month']:'',array('class'=>'form-control'))}}
                                    </div>

                                    <div class="col-auto apply-btn">
                                        {{Form::submit(__('Apply'),array('class'=>'btn btn-outline-primary btn-sm'))}}
                                        <a href="{{route('report.income-expense')}}" class="btn btn-outline-danger btn-sm">{{__('Reset')}}</a>
                                        <a href="#" class="btn btn-outline-warning btn-sm mb-1" onclick="saveAsPDF()" id="">{{__('Download')}}</a>
                                    </div>
                                </div>
                                {{ Form::close() }}
                            </div>
                        </div>
                    </div>
                </div>
                <div id="printableArea">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-wrap">
                                    <div class="card-body">
                                        <input type="hidden" value="{{__('Income vs Expense Report of').' '}}{{$filter['startDateRange'].' to '.$filter['endDateRange']}}" id="filename">
                                        <div class="row">
                                            <div class="col">
                                                {{__('Report')}} : <h6>{{__('Income vs Expense Summary')}}</h6>
                                            </div>
                                            <div class="col">
                                                {{__('Duration')}} : <h6>{{$filter['startDateRange'].' to '.$filter['endDateRange']}}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="card card-statistic-1">
                                <div class="card-wrap">
                                    <div class="card-header">
                                        <h4>{{__('Total Income')}}</h4>
                                    </div>
                                </div>
                                <div class="card-stats">
                                    <div class="card-stats-title">
                                        <div class="progreess-status mt-2">
                                            <h6><strong>{{\Auth::user()->priceFormat($incomeCount)}}</strong></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="card card-statistic-1">
                                <div class="card-wrap">
                                    <div class="card-header">
                                        <h4>{{__('Total Expense')}}</h4>
                                    </div>
                                </div>
                                <div class="card-stats">
                                    <div class="card-stats-title">
                                        <div class="progreess-status mt-2">
                                            <h6><strong>{{\Auth::user()->priceFormat($expenseCount)}} </strong></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body min-height">
                                    <div class="chart">
                                        <div class="chartjs-size-monitor">
                                            <div class="chartjs-size-monitor-expand">
                                                <div class=""></div>
                                            </div>
                                            <div class="chartjs-size-monitor-shrink">
                                                <div class=""></div>
                                            </div>
                                        </div>
                                        <canvas id="chart-finance" class="chart-canvas chartjs-render-monitor"></canvas>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

