@extends('admin.layouts.app')

@section('title', 'Dashboard')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet"
        href="{{ asset('admin/library/jqvmap/dist/jqvmap.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('admin/library/summernote/dist/summernote-bs4.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('admin/library/owl.carousel/dist/assets/owl.carousel.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('admin/library/owl.carousel/dist/assets/owl.theme.default.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('admin/library/flag-icon-css/css/flag-icon.min.css') }}">
@endpush

@section('main')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-stats ">
                            <div class="card-stats-title">Jumlah Kopi Masuk</div>
                            <div class="card-stats-items">
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiRobustamasuk }}Kg</div>
                                    <div class="card-stats-item-label">Robusta</div>
                                </div>
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiArabicamasuk }}Kg</div>
                                    <div class="card-stats-item-label">Arabica</div>
                                </div>
                            </div>
                        </div>

                        <div class="card-icon shadow-primary bg-warning">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Keseluruhan</h4>
                            </div>
                            <div class="card-body">
                                {{ $totalStokMasuk }}Kg /
                                {{ $totalStokKopiTon2 }}Ton
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-stats">
                            <div class="card-stats-title">Jumlah Kopi Keluar</div>
                            <div class="card-stats-items">
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiRobustakeluar }}Kg</div>
                                    <div class="card-stats-item-label">Robusta</div>
                                </div>
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiArabicakeluar }}Kg</div>
                                    <div class="card-stats-item-label">Arabica</div>
                                </div>
                            </div>
                        </div>
                        {{-- <br><br><br><br><br><br> --}}
                        <div class="card-icon shadow-primary bg-info">
                            <i class="fas fa-box"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Keseluruhan</h4>
                            </div>
                            <div class="card-body">
                                {{ $totalStokKeluar }}Kg /
                                {{ $totalStokKopiTon1 }}Ton
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-stats">
                            <div class="card-stats-title">Rincian Isi Gudang</div>
                            <div class="card-stats-items">
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiRobusta }}Kg</div>
                                    <div class="card-stats-item-label">Robusta</div>
                                </div>
                                <div class="card-stats-item" style="flex-grow: 1">
                                    <div class="card-stats-item-count">{{ $stokKopiArabica  }}Kg</div>
                                    <div class="card-stats-item-label">Arabica</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-icon shadow-primary bg-success">
                            <i class="fas fa-archive"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Keseluruhan</h4>
                            </div>
                            <div class="card-body">
                                {{ $totalStokKopi }}Kg /
                                {{ $totalStokKopiTon }}Ton
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-md-12 col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h4>Grafik Gudang (kapasitas maximum 50Ton)
                                @if ($kapasitasGudangSaatIni == 100)
                                    <span style="color: red!important"> - Kapasitas Penuh</span>
                                @elseif ($kapasitasGudangSaatIni > 100)
                                    <span style="color: red!important"> - Melebihi Kapasitas</span>
                                @endif
                            </h4>
                        </div>
                        <div class="card-body">
                            <canvas id="doughnutChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-4">

                    <div class="card">
                        <div class="card-header" style="padding-bottom: 0px!important">
                            <h4>Rincian Kopi</h4>
                        </div>
                        <div class="card-body" style="padding-top: 0px!important">
                            <div class="summary">
                                <div class="summary-item">
                                    {{-- <h6>Item List <span class="text-muted">(3 Items)</span></h6> --}}
                                    <ul class="list-unstyled list-unstyled-border">
                                        @foreach ($kopis as $item)
                                            <li class="media">
                                                <a href="#">
                                                    <img class="mr-3 rounded"
                                                        width="50"
                                                        src="{{ asset('storage/' . $item->gambar) }}"
                                                        alt="product">
                                                </a>
                                                <div class="media-body">
                                                    <div class="media-right">{{ $item['stok'] }} Kg</div>
                                                    <div class="media-title"><a href="#">{{ $item['nama_kopi'] }}</a></div>
                                                    <div class="text-muted text-small"> @currency($item->harga_beli)                                                        {{-- <div class="bullet"></div> Sunday --}}
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
@endsection

@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('admin/library/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('admin/library/chart.js/dist/Chart.js') }}"></script>
    <script src="{{ asset('admin/library/owl.carousel/dist/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('admin/library/summernote/dist/summernote-bs4.min.js') }}"></script>
    <script src="{{ asset('admin/library/chocolat/dist/js/jquery.chocolat.min.js') }}"></script>
    <script src="{{ asset('admin/library/chart.js/dist/Chart.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('admin/js/page/index.js') }}"></script>

    <script>
        var ctx = document.getElementById("doughnutChart").getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            datasets: [{
            data: [
                @json($dataKapasitas['stokPersen']),
                @json($dataKapasitas['sisaGudang'])
            ],
            backgroundColor: [
                '#4a341d',
                '#4a341',
            ],
            label: 'Dataset 1'
            }],
            labels: [
            `Stok Kopi (%)`,
            `Sisa Kapasitas (%)`
            ],
        },
        options: {
            responsive: true,
            legend: {
            position: 'bottom',
            },
            labels: {
                // This more specific font property overrides the global property
                font: {
                    size: 44
                }
            }
        }
        });
    </script>
@endpush