@extends('adminlte::page')


@section('title', 'Dashboard')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome {{ Auth::user()->name }}.</p>

    <div class="row">
        
        <div class="col-md-3">
        <!-- <x-adminlte-info-box title="{{ \App\Models\Children::all()->count() }}" text="Total Registered" icon="fas fa-lg fa-user-plus text-primary"
        theme="gradient-primary" icon-theme="white"/> -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{ \App\Models\Children::all()->count() }}</h3>

                <p>Total Registered</p>
              </div>
              <div class="icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <a href="{{ route('children.index') }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
              </a>
            </div>
            <!-- <div class="info-box">
                <span class="info-box-icon bg-info"><i class="fa fa-user"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Registered</span>
                    <span class="info-box-number">{{ \App\Models\Children::all()->count() }}</span>
                </div>
            </div> -->
        </div>
        <div class="col-md-3">
        <!-- <x-adminlte-info-box title="{{ \App\Models\Children::where('approval_status', 'approved')->count() }}" text="Total Approved" icon="fas fa-lg fa-user-plus text-success"
        theme="gradient-success" icon-theme="white"/> -->
        <div class="small-box bg-success">
              <div class="inner">
                <h3>{{ \App\Models\Children::where('approval_status', 'approved')->count() }}</h3>

                <p>Total Approved</p>
              </div>
              <div class="icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <a href="{{ route('children.index') }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
              </a>
            </div>
            <!-- <div class="info-box">
                <span class="info-box-icon bg-success"><i class="fa fa-user"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Approved</span>
                    <span class="info-box-number">{{ \App\Models\Children::where('approval_status', 'approved')->count() }}</span>
                </div>
            </div> -->
        </div>
        <div class="col-md-3">
        <!-- <x-adminlte-info-box title="{{ \App\Models\Children::where('approval_status', 'rejected')->count() }}" text="Total Rejected" icon="fas fa-lg fa-user-plus text-danger"
        theme="gradient-danger" icon-theme="white"/> -->
        <div class="small-box bg-danger">
              <div class="inner">
                <h3>{{ \App\Models\Children::where('approval_status', 'rejected')->count() }}</h3>

                <p>Total Rejected</p>
              </div>
              <div class="icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <a href="{{ route('children.index') }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
              </a>
            </div>
            <!-- <div class="info-box">
                <span class="info-box-icon bg-danger"><i class="fa fa-user"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Rejected</span>
                    <span class="info-box-number">{{ \App\Models\Children::where('approval_status', 'rejected')->count() }}</span>
                </div>
            </div> -->
        </div>
        <div class="col-md-3">
        <!-- <x-adminlte-info-box title="{{ \App\Models\Country::all()->count() }}" text="Total Countries" icon="fas fa-lg fa-user-plus text-warning"
        theme="gradient-warning" icon-theme="white"/> -->
            <!-- <div class="info-box">
                <span class="info-box-icon bg-secondary"><i class="fa fa-globe"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Countries</span>
                    <span class="info-box-number">{{ \App\Models\Country::all()->count() }}</span>
                </div>
            </div> -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>{{ \App\Models\Country::all()->count() }}</h3>

                <p>Total Countries</p>
              </div>
              <div class="icon">
                <i class="fas fa-user-plus"></i>
              </div>
              <a href="{{ route('children.index') }}" class="small-box-footer">
                More info <i class="fas fa-arrow-circle-right"></i>
              </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Number of Childrens per Country</h3>
                 
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- <script>
            $(function () {
                var areaChartData = {
                    labels: [
                        @foreach (\App\Models\Country::all() as $country)
                            "{{ $country->name }}",
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Number of Childrens',
                        backgroundColor: 'rgba(60,141,188,0.9)',
                        borderColor: 'rgba(60,141,188,0.8)',
                        pointRadius: false,
                        pointColor: '#3b8bba',
                        pointStrokeColor: 'rgba(60,141,188,1)',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data: [
                            @foreach (\App\Models\Country::all() as $country)
                                "{{ \App\Models\Children::where('country', $country->id)->count() }}",
                            @endforeach
                        ]
                    }]
                };

                var barChartCanvas = $('#barChart').get(0).getContext('2d');
                var barChart = new Chart(barChartCanvas);
                var barChartOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    datasetFill: false
                };

                barChart.Bar(areaChartData, barChartOptions);
            });
        </script> -->
        <script>
    $(function () {
        // Prepare data
        var areaChartData = {
            labels: [
                @foreach (\App\Models\Country::all() as $country)
                    "{{ $country->name }}",
                @endforeach
            ],
            datasets: [{
                label: 'Number of Children',
                backgroundColor: 'rgba(60,141,188,0.9)',
                borderColor: 'rgba(60,141,188,0.8)',
                borderWidth: 1,
                borderRadius: 4, // Modern rounded bars
                data: [
                    @foreach (\App\Models\Country::all() as $country)
                        {{ \App\Models\Children::where('country', $country->id)->count() }},
                    @endforeach
                ]
            }]
        };

        // Get canvas element (vanilla JS alternative shown in comments)
        var barChartCanvas = document.getElementById('barChart').getContext('2d');
        // Alternative if using jQuery: 
        // var barChartCanvas = $('#barChart')[0].getContext('2d');

        // Create chart with modern v3 syntax
        var barChart = new Chart(barChartCanvas, {
            type: 'bar',
            data: areaChartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0 // No decimal places for count data
                        }
                    }
                }
            }
        });
    });
</script>
    </div>
@stop
@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@stop