@extends('layouts.DataCollector.app')
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('storage/plugins/morris/morris.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('storage/css/style.css') }}">
@endsection
@section('page-wrapper')
    <div class="content container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-lg-6">
                @if ($farmers->count() > 0)
                    <a >
                        <div class="dash-widget clearfix card-box" style="color: #333;">
                            <span class="dash-widget-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
                            <div class="dash-widget-info">
                                <h3>{{ $farmers->count() }}</h3>
                                <span>{{ Str::plural('Affiliate Farmer', $farmers->count()) }}</span>
                            </div>
                        </div>
                    </a>
                @else
                    <div class="dash-widget clearfix card-box inactiveWidget">
                        <span class="dash-widget-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
                        <div class="dash-widget-info">
                            <h3>No</h3>
                            <span>Entry</span>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-md-6 col-sm-6 col-lg-6">
                @if ($entries->count() > 0)
                    <a href="{{ route('data-collector-admin.entries') }}" target="_blank">
                        <div class="dash-widget clearfix card-box" style="color: #333;">
                            <span class="dash-widget-icon"><i class="fa fa-plus"></i></span>
                            <div class="dash-widget-info">
                                <h3>{{ $entries->count() }}</h3>
                                <span>{{ Str::plural('Entry', $entries->count()) }}</span>
                            </div>
                        </div>
                    </a>
                @else
                    <div class="dash-widget clearfix card-box inactiveWidget">
                        <span class="dash-widget-icon"><i class="fa fa-plus" aria-hidden="true"></i></span>
                        <div class="dash-widget-info">
                            <h3>No</h3>
                            <span>Entry</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6 text-center">
                        <div class="card-box">
                            <h3 class="card-title">Monthly Affiliate Farmers Overview</h3>
                            <div id="bar-charts-stacked"></div>
                        </div>
                    </div>
                    <div class="col-md-6 text-center">
                        <div class="card-box">
                            <h3 class="card-title">Annual Affiliate Farmers Overview</h3>
                            <div id="area-charts"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{ asset('storage/plugins/morris/morris.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('storage/plugins/raphael/raphael-min.js') }}"></script>
    {{--<script type="text/javascript" src="{{ asset('storage/js/chart.js') }}"></script>--}}
    <script type="text/javascript" src="{{ asset('storage/js/app.js') }}"></script>
    <script type="text/javascript">
        //Bar Chart

        Morris.Bar({
            element: 'bar-charts-stacked',
            data: [
                @foreach($dataCollectorMonthlyOverview as $dataCollectorMonthlyOverviewData)
                {!! json_encode($dataCollectorMonthlyOverviewData->toArray(), JSON_HEX_TAG) !!},
                @endforeach
            ],
            xkey: 'y',
            ykeys: ['a', 'b', 'c', 'd'],
            labels: [ 'Total Assets (Kshs)', 'Total Income (Kshs)', 'Total Expenses (Kshs)', 'Total Dataset(s)'],
            lineColors: ['#ecab1a', '#29942a', '#000', '#cc4e02'],
            lineWidth: '3px',
            barColors: ['#ecab1a', '#29942a', '#000', '#cc4e02'],
            resize: true,
            stacked: true,
            redraw: true
        });

        // Area Chart

        Morris.Area({
            element: 'area-charts',
            data: [
                @foreach($dataCollectorAnnualOverview as $dataCollectorAnnualOverviewData)
                {!! json_encode($dataCollectorAnnualOverviewData, JSON_HEX_TAG) !!},
                @endforeach
            ],
            xkey: 'g',
            ykeys: ['a', 'b', 'c', 'd'],
            labels: [ 'Total Assets (Kshs)', 'Total Income (Kshs)', 'Total Expenses (Kshs)', 'Total Dataset(s)'],
            lineColors: ['#ecab1a','#29942a', '#000', '#cc4e02'],
            lineWidth: '3px',
            resize: true,
            redraw: true
        });

    </script>
@endsection