@extends('backend.app')
@section('title')
    Dashboard
@endsection
@section('styles')
    <style>
        .avatar {
            height: 80px;
            width: 80px;
        }
    </style>
@endsection
@section('content')

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Dashboard</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-md-12">
            <h3 class="text-center">Top 20 Milking Employee</h3>
            @php
                $milk_employee_id = [];
                $milk_amount = [];
                foreach($top_milking_employee as $key => $top_milking_item)
                {
                    $item_id = $top_milking_item->employee->tag->uid;
                    $item_value = $top_milking_item->sum;

                    array_push($milk_employee_id,$item_id);
                    array_push($milk_amount,$item_value);
                }
            @endphp
            <canvas id="topTenMilkingEmployee" height="100px"></canvas>
        </div>

    </div>
    <div class="row mt-5">
        <div class="col-md-4">
            <h3 class="text-center">Top 10 Diseases</h3>
            @php
                $diseases = [];
                $total_employee = [];
                foreach($top_diseases as $d_key => $top_disease_item)
                {
                    $item_name = $top_disease_item->disease->name;
                    $total_item = $top_disease_item->total;

                    array_push($diseases,$item_name);
                    array_push($total_employee,$total_item);
                }
            @endphp
            <canvas id="topTenDiseases" height="80px"></canvas>
        </div>
        <div class="col-md-4">
            <h3 class="text-center">Top 10 Medicine Givens</h3>
            @php
                $medicineName = [];
                $totalMedicine = [];
                foreach($top_medicine_givens as $m_key => $medicine)
                {

                    $medicine_name = $medicine->name;
                    $total_medicine = $medicine->treatment_given->count();


                    if($total_medicine > 0) {
                        array_push($medicineName,$medicine_name);
                        array_push($totalMedicine,$total_medicine);100
                    }


                }

            @endphp

            <canvas id="topMedicine" height="80px"></canvas>
        </div>
        <div class="col-md-4">
            <h3 class="text-center">Top 10 Medicine Givens</h3>
            <canvas id="polor" height="80px"></canvas>
        </div>
    </div>
    <!-- end row -->
@endsection

@push('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script type="text/javascript">
        var labels = {{ Js::from($milk_employee_id) }};
        var users = {{ Js::from($milk_amount) }};

        const data = {
            labels: labels,
            datasets: [{
                label: 'Top 20 Milking Employee',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: users,
            }]
        };

        const config = {
            type: 'line',
            data: data,
            options: {}
        };

        const topTenMilkingEmployee = new Chart(
            document.getElementById('topTenMilkingEmployee'),
            config
        );

        // topTenDiseases
        var diseaseName = {{ Js::from($diseases) }};
        var totalEmployee = {{ Js::from($total_employee) }};
        const diseaseData = {
            labels: diseaseName,
            datasets: [{
                label: 'Top 10 Diseases',
                data: totalEmployee,
                backgroundColor: [
                    'rgb(255, 0, 0)',
                    'rgb(0, 64, 255)',
                    'rgb(54, 162, 235)',
                    'rgb(0, 255, 255)',
                    'rgb(128, 128, 128)',
                    'rgb(0, 0, 0)',
                    'rgb(128, 0, 0)',
                    'rgb(54, 162, 235)',
                    'rgb(54, 102, 0)',
                    'rgb(255, 205, 86)'
                ],
                hoverOffset: 4
            }]
        };

        const diseasConfig = {
            type: 'pie',
            data: diseaseData,
            options: {}
        };

        const topTenDiseases = new Chart(
            document.getElementById('topTenDiseases'),
            diseasConfig
        );


        // doughnut
        // Top 10 Medicine Givens
        var mediName = {{ Js::from($medicineName) }};
        var totalUsed = {{ Js::from($totalMedicine) }};

        const medicineData = {
            labels: mediName,
            datasets: [{
                label: 'Top 10 Medicine Givens',
                data: totalUsed,
                backgroundColor: [
                    'rgb(255, 0, 0)',
                    'rgb(0, 64, 255)',
                    'rgb(54, 162, 235)',
                    'rgb(0, 255, 255)',
                    'rgb(128, 128, 128)',
                    'rgb(0, 0, 0)',
                    'rgb(128, 0, 0)',
                    'rgb(54, 162, 235)',
                    'rgb(54, 102, 0)',
                    'rgb(255, 205, 86)'
                ],
                hoverOffset: 4
            }]
        };

        const medicineConfig = {
            type: 'doughnut',
            data: medicineData,
            options: {}
        };

        const doughnut = new Chart(
            document.getElementById('topMedicine'),
            medicineConfig
        );


        // polor
        const data2 = {
            labels: mediName,
            datasets: [{
                label: 'My First Dataset',
                data: totalUsed,
                backgroundColor: [
                    'rgb(255, 0, 0)',
                    'rgb(0, 64, 255)',
                    'rgb(54, 162, 235)',
                    'rgb(0, 255, 255)',
                    'rgb(128, 128, 128)',
                    'rgb(0, 0, 0)',
                    'rgb(128, 0, 0)',
                    'rgb(54, 162, 235)',
                    'rgb(54, 102, 0)',
                    'rgb(255, 205, 86)'
                ],
                hoverOffset: 4
            }]
        };

        const config2 = {
            type: 'polarArea',
            data: data2,
            options: {}
        };

        const polor = new Chart(
            document.getElementById('polor'),
            config2
        );


    </script>

    </html>

@endpush

