@extends('app')
@section('title_header', 'Laman utama')
@section('header')
    Laman utama
@endsection
@section('content')
    <section>
        <div class="row">
            <div class="col-12 col-sm-6 col-md-4">
                <div class="info-box">
                    <span class="info-box-icon bg-success"><i class="fas fa-mosque"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total Masjid</span>
                        <span class="info-box-number">
                            {{ $total_masjid }}
                            <small>Masjid</small>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-warning"><i class="fas fa-hand-holding-usd"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Total Infaq</span>
                        <span class="info-box-number">RM {{ number_format($totalInfaq, 2) }}</span>
                    </div>
                </div>
            </div>
            <div class="clearfix hidden-md-up"></div>

            <div class="col-12 col-sm-6 col-md-4">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-primary"><i class="fas fa-users"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Total Pengguna</span>
                        <span class="info-box-number">{{ $total_pengguna }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <div class="card-title">
                            Infaq Perbulan
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="barChart" style="height:400px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <div class="card-title">
                            Total Pengguna
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="pieChart"
                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            // Bar Chart for Total Infaq
            const barChartCanvas = $('#barChart').get(0).getContext('2d');
            const barChartData = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug'],
                datasets: [{
                    label: 'Total Infaq',
                    backgroundColor: '#00c0ef',
                    borderColor: '#00acd6',
                    borderWidth: 1,
                    data: @json($infaqDataForChart),
                }]
            };

            const barChartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                layout: {
                    padding: {
                        top: 10,
                        bottom: 10,
                        left: 10,
                        right: 10
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontSize: 10,
                            callback: function(value) {
                                return 'RM ' + value;
                            }
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontSize: 10,
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return 'RM ' + tooltipItem.yLabel.toLocaleString();
                        }
                    }
                },
                legend: {
                    display: false
                }
            };

            new Chart(barChartCanvas, {
                type: 'bar',
                data: barChartData,
                options: barChartOptions
            });

            // Pie Chart for User Data
            const pieChartCanvas = $('#pieChart').get(0).getContext('2d');
            const pieData = {
                labels: ['Admin', 'Pengguna'],
                datasets: [{
                    data: [{{ $total_admin }}, {{ $total_pengguna }}],
                    backgroundColor: ['#f56954', '#00a65a'],
                }]
            };

            const pieOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                    labels: {
                        fontSize: 12,
                        boxWidth: 10,
                        padding: 10
                    }
                }
            };

            new Chart(pieChartCanvas, {
                type: 'pie',
                data: pieData,
                options: pieOptions
            });
        });
    </script>
@endpush