@extends('layouts.admin')

@section('title', 'Dashboard Petani')
@section('page-title', 'Overview Toko')

@section('content')
    <section class="row">
        <div class="col-12 col-lg-12">
            
            {{-- ROW 1: Card Ringkasan --}}
            <div class="row">
                {{-- Card 1: Produk Saya --}}
                <div class="col-6 col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body px-3 py-4-5">
                            <div class="row">
                                <div class="col-md-4 d-flex justify-content-center align-items-center">
                                    <div class="stats-icon purple"><i class="bi bi-people-fill"></i></div>
                                </div>
                                <div class="col-md-8">
                                    <h6 class="text-muted font-semibold">Produk Saya</h6>
                                    <h6 class="font-extrabold mb-0">{{ $totalProduk }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 2: Pemesanan --}}
                <div class="col-6 col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body px-3 py-4-5">
                            <div class="row">
                                <div class="col-md-4 d-flex justify-content-center align-items-center">
                                    <div class="stats-icon blue">
                                        <i class="bi bi-receipt"></i>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <h6 class="text-muted font-semibold">Pemesanan</h6>
                                    <h6 class="font-extrabold mb-0">{{ $totalPemesanan }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Card 3: Total Pendapatan --}}
                <div class="col-6 col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-body px-3 py-4-5">
                            <div class="row">
                                <div class="col-md-4 d-flex justify-content-center align-items-center">
                                    <div class="stats-icon green">
                                        <i class="bi bi-cash"></i>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <h6 class="text-muted font-semibold">Total Pendapatan</h6>
                                    <h6 class="font-extrabold mb-0">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ROW 2: Grafik Pendapatan --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Grafik Pendapatan Tahun {{ date('Y') }}</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="revenueChart" width="100%" height="30"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Selamat Datang, {{ Auth::guard('petani')->user()->nama_lengkap }}!</h4>
                        </div>
                        <div class="card-body">
                            <p>Kelola produk dan pantau pesanan Anda melalui menu di sebelah kiri.</p>
                            <a href="{{ route('petani.produk.create') }}" class="btn btn-primary">Tambah Produk Baru</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var ctx = document.getElementById("revenueChart").getContext('2d');
            
            var revenueChart = new Chart(ctx, {
                type: 'bar', 
                data: {
                    labels: {!! json_encode($labels) !!}, 
                    datasets: [{
                        label: 'Pendapatan (Rp)',
                        data: {!! json_encode($dataGrafik) !!}, 
                        backgroundColor: '#57ca22',
                        borderColor: '#4fac1d',
                        borderWidth: 1,
                        borderRadius: 5 
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value, index, values) {
                                    if(parseInt(value) >= 1000){
                                        return 'Rp ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                                    } else {
                                        return 'Rp ' + value;
                                    }
                                }
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush