@extends('layouts.app')

@section('title', 'Dashboard')

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Dashboard</h1>
        </div>
        <div class="section-body">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-primary">
                            <i class="fas fa-home"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Jumlah Peternakan</h4>
                            </div>
                            <div class="card-body">
                                {{ $jumlahPeternakan }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-danger">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Jumlah User</h4>
                            </div>
                            <div class="card-body">
                                {{ $jumlahUser }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="card card-statistic-1">
                        <div class="card-icon bg-success">
                            <i class="fas fa-truck"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Jumlah Sopir</h4>
                            </div>
                            <div class="card-body">
                                {{ $jumlahSopir }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h4>Grafik Penen Tahun {{date("Y")}}</h4>
                </div>
                <div class="card-body">
                    <div id="perkembanganChart"></div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    // document.addEventListener("DOMContentLoaded", function () {
    //     var grafikData = @json($grafikData);
    //     var bulan = grafikData.map(data => data.bulan);
    //     var pakanPakai = grafikData.map(data => data.total_pakan_pakai);
    //     // var pakanSisa = grafikData.map(data => data.total_pakan_sisa);
    //     var bobot = grafikData.map(data => data.total_bobot);
    //     var afkir = grafikData.map(data => data.total_afkir);
    //     var kematian = grafikData.map(data => data.total_kematian);

    //     var trace1 = {
    //         x: bulan,
    //         y: pakanPakai,
    //         type: 'scatter',
    //         mode: 'lines',
    //         name: 'Pakan Pakai'
    //     };

    //     // var trace2 = {
    //     //     x: bulan,
    //     //     y: pakanSisa,
    //     //     type: 'scatter',
    //     //     mode: 'lines',
    //     //     name: 'Pakan Sisa'
    //     // };

    //     var trace3 = {
    //         x: bulan,
    //         y: bobot,
    //         type: 'scatter',
    //         mode: 'lines',
    //         name: 'Tonase'
    //     };

    //     var trace4 = {
    //         x: bulan,
    //         y: afkir,
    //         type: 'scatter',
    //         mode: 'lines',
    //         name: 'Afkir'
    //     };

    //     var trace5 = {
    //         x: bulan,
    //         y: kematian,
    //         type: 'scatter',
    //         mode: 'lines',
    //         name: 'Kematian'
    //     };

    //     var data = [trace1, trace3, trace4, trace5];

    //     var layout = {
    //         title: 'Grafik Perkembangan',
    //         xaxis: {
    //             title: 'Bulan'
    //         },
    //         yaxis: {
    //             title: 'Jumlah'
    //         }
    //     };

    //     // Plotly.newPlot('perkembanganChart', data, layout);
    // });
    
</script>
<script>
	TESTER = document.getElementById('perkembanganChart');
	Plotly.newPlot( TESTER, [{
	x: @json($label),
	y: @json($hasil_panen), type: 'bar' }],
     {
	margin: { t: 0 } } );
</script>
@endsection