@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row" style="margin-top: 150px;">
            <div class="col-xl-2 col-sm-2 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Karyawan</p>
                                    <h5 class="font-weight-bolder">{{ $total_karyawan }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-book-bookmark text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-2 col-sm-2 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Vendor</p>
                                    <h5 class="font-weight-bolder">{{ $vendor }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-archive-2 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-sm-2 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Jenis Seragam
                                    </p>
                                    <h5 class="font-weight-bolder">{{ $jenis_seragam }}</h5>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-box-2 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-sm-2 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Tipe Seragam</p>

                                    <h5 class="font-weight-bolder">{{ $tipe_seragam }}</h5>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-danger text-center rounded-circle">
                                    <i class="ni ni-book-bookmark text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-sm-2 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Pendataan</p>

                                    <h5 class="font-weight-bolder">{{ $seragamTercatat }}</h5>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-danger text-center rounded-circle">
                                    <i class="ni ni-single-copy-04 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-sm-2 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Penerimaan</p>

                                    <h5 class="font-weight-bolder">{{ $seragam_diterima }}</h5>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-danger text-center rounded-circle">
                                    <i class="ni ni-curved-next text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div id="chartJenis" style="width: 100%; height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div id="chartVendor" style="width: 100%; height:400px;"></div>
                    </div>
                </div>
            </div>



        </div>
    </div>
@endsection



@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        let chartJenis = echarts.init(document.getElementById('chartJenis'));
        let chartVendor = echarts.init(document.getElementById('chartVendor'));

        let jenisData = @json($distribusi_seragam);
        let performance_vendor = @json($performance_vendor);
        console.log(performance_vendor);
        let tahunSekarang = new Date().getFullYear();

        chartJenis.setOption({
            title: {
                text: `Distribusi per Jenis Seragam ${tahunSekarang}`
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: jenisData.map(j => j.jenis_seragam_nama)
            },
            yAxis: {
                minInterval: 1,
                type: 'value',
                axisLabel: {
                    formatter: function(value) {
                        return value; // bisa ditambah format lain
                    }
                }
            },
            series: [{
                name: 'Jumlah Terdistribusi',
                type: 'bar',
                data: jenisData.map(j => j.total_distribusi),
                itemStyle: {
                    color: function(params) {
                        // generate warna random setiap bar
                        let letters = '0123456789ABCDEF';
                        let color = '#';
                        for (let i = 0; i < 6; i++) {
                            color += letters[Math.floor(Math.random() * 16)];
                        }
                        return color;
                    }
                }
            }]
        });

        chartVendor.setOption({
            title: {
                text: `Rate Complain/Vendor ${tahunSekarang}`,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    let data = performance_vendor[params.dataIndex];
                    return `
                <b>${data.vendor}</b><br/>
                Distribusi: ${data.total_distribusi}<br/>
                Complain: ${data.total_complain}<br/>
                Rate: ${data.persen_complain}%
            `;
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                type: 'pie',
                radius: '60%',
                data: performance_vendor.map(j => ({
                    name: j.vendor,
                    value: j.persen_complain
                })),
                itemStyle: {
                    color: function(params) {
                        // generate warna random
                        let letters = '0123456789ABCDEF';
                        let color = '#';
                        for (let i = 0; i < 6; i++) {
                            color += letters[Math.floor(Math.random() * 16)];
                        }
                        return color;
                    }
                }
            }]
        });
    </script>
@endpush