@include('components.theme.pages.header')
<section>
    <div class="row mb-4">
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Nasabah</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $alternatif }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Kriteria</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $kriteria }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Sub Kriteria</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $subkriteria }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-success shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Pengajuan Diterima</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pengajuanDiterima }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-danger shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Total Pengajuan Ditolak</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pengajuanDitolak }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-dark shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
                                Total Account Officer</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $accountOfficer }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-4">
            <div id="container2" style="width:100%; height:400px;"></div>
        </div>

    </div>
</section>
@push('scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
        var chart1; // globally available
        $(document).ready(function() {
            chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'container2',
                    type: 'column'
                },
                title: {
                    text: 'Grafik Nasabah {{ date('Y') }}'
                },
                xAxis: {
                    categories: ['Nama Nasabah']
                },
                yAxis: {
                    title: {
                        text: 'Bulan bergabung'
                    }
                },
                series:
                [
                    @foreach(\App\Models\Alternatif::where('created_at', 'like', '%'.date('Y').'%')->get() as $items)
                        {
                            name: '{{ $items->nama_alternatif }}',
                            data: [{{ date('m', strtotime($items->created_at)) }}]
                        },
                    @endforeach
                ]
            });
        });
    </script>
@endpush
@include('components.theme.pages.footer')