@extends('adminlte::page')

@section('title', 'IPRS | Dashboard')

@section('content_header')

@stop

@section('content')
    <main class="d-flex flex-column flex-lg-row">
        <div class="col-lg-8">
            <div>
                <div class="d-flex flex-column flex-sm-row justify-content-between">
                    <x-adminlte-info-box title="Total Current Population" text="53,568,898" icon="fas fa-lg fa-users text-success" class="mr-3"/>
                    <x-adminlte-info-box title="Current Population; 0-18 Years" text="23,984,343" icon="fas fa-lg fa-users text-success"/>
                </div>

                <div class="d-flex flex-column flex-sm-row justify-content-between">
                    <x-adminlte-info-box title="Current Population; 18-45 Years" text="17,763,238" icon="fas fa-lg fa-users text-success" class="mr-3"/>
                    <x-adminlte-info-box title="Current Population 45+ Years" text="11,821,317" icon="fas fa-lg fa-users text-success"/>
                </div>
            </div>
            <div>
                <div class="container-fluid d-flex flex-column p-3 bg-white rounded">
                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
                        <div>
                            <span class="h4">Population by Counties</span>
                        </div>
                        <div>
                            Census
                            <select class="form-select" aria-label="Default select example">
                                <option value="2019">2019</option>
                                <option value="2009">2009</option>
                                <option value="1999">1999</option>
                            </select>
                        </div>
                    </div>
                    <div class="">
                        @php
                            $heads = [
                                'Code',
                                'County',
                                'Population',
                                'Percentage',
                                ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                            ];

                            $config = [
                                'data' => [
                                    ['001', 'Mombasa', '1,208,333', 14],
                                    ['002', 'Kwale', '866,820', 7],
                                    ['003', 'Kilifi', '1,453,787', 15],
                                    ['004', 'Tana River', '315,493', 1.6],
                                    ['005', 'Lamu', '143,920', 0.08],
                                ],
                                'order' => [[1, 'asc']],
                                'columns' => [null, null, null, null, ['orderable' => false]],
                            ];
                        @endphp

                        @section('plugins.Datatables', true)
                        @section('plugins.DatatablesPlugin', true)

                        <x-adminlte-datatable id="populationByCounties" bordered :heads="$heads" hoverable striped>
                            @foreach($config['data'] as $row)
                                <tr>
                                    @foreach($row as $cell)
                                        <td>{!! $cell !!}</td>
                                    @endforeach

                                    <td>
                                        <a href="#">
                                            <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                <i class="fa fa-lg fa-fw fa-eye"></i>
                                            </button>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </x-adminlte-datatable>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
                <x-adminlte-small-box title="10.8k" text="Remaining Tokens" icon="fas fa-lg fa-coins text-success"
                                      theme="white" url="#" url-text="View details" class="w-50 mr-3"/>
                <x-adminlte-small-box title="308" text="Searches Performed" icon="fas fa-lg fa-poll text-danger"
                                      theme="white" url="#" url-text="View details" class="w-50"/>
            </div>
            <div class="">
                <div class="container-fluid d-flex flex-column p-3 bg-white rounded">
                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
                        <div>
                            <span class="h4">Recent Searches</span>
                        </div>
                    </div>
                    <div class="">
                        @php
                            $heads = [
                                'ID',
                                'Contract',
                                'Client',
                                'Search Type',
                                'DateTime',
                                ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                            ];

                            $config = [
                                'data' => [
                                    [124, 1211140228, 'JAMBOPAY EXPRESS', 'Bulk', '15-07-2024 13:42:36'],
                                    [136, 1303120450, '	ICEA LION GENERAL INSURANCE', 'Normal', '17-07-2024 08:21:13'],
                                    [142, 1308260460, 'SANLAM KENYA PLC', 'Normal', '16-07-2024 12:01:59'],
                                    [143, 1403140390, 'NATIONAL BANK OF KENYA', 'Bulk', '16-07-2024 14:28:00'],
                                    [144, 1508110768, 'GIRO BANK OF KENYA', 'Bulk', '17-07-2024 15:11:48'],
                                ],
                                'order' => [[1, 'asc']],
                                'columns' => [null, null, null, null, ['orderable' => false]],
                            ];
                        @endphp

                        @section('plugins.Datatables', true)
                        @section('plugins.DatatablesPlugin', true)

                        <x-adminlte-datatable id="recentSearches" bordered :heads="$heads" hoverable striped>
                            @foreach($config['data'] as $row)
                                <tr>
                                    @foreach($row as $cell)
                                        <td>{!! $cell !!}</td>
                                    @endforeach

                                    <td>
                                        <a href="#">
                                            <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                <i class="fa fa-lg fa-fw fa-eye"></i>
                                            </button>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </x-adminlte-datatable>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 d-flex flex-column">
            <div>
                <div>
                    <div class="container-fluid d-flex flex-column mb-3 p-3 bg-white rounded">
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
                            <div>
                                <span class="h4">Client Onboarding Drafts</span>
                            </div>
                        </div>
                        <div class="">
                            @php
                                $heads = [
                                    'ID',
                                    'Client',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $config = [
                                    'data' => [
                                        [2, 'Jonas Quinn'],
                                        [7, 'Ryder Christian'],
                                        [21, 'Steven Taylor'],
                                        [29, 'Delta Elephant Firm'],
                                        [37, 'Alphabet Consultants LImited'],
                                    ],
                                    'order' => [[1, 'asc']],
                                    'columns' => [null, null, ['orderable' => false]],
                                ];
                            @endphp

                            @section('plugins.Datatables', true)
                            @section('plugins.DatatablesPlugin', true)

                            <x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
                                @foreach($config['data'] as $row)
                                    <tr>
                                        @foreach($row as $cell)
                                            <td>{!! $cell !!}</td>
                                        @endforeach

                                        <td>
                                            <div class="d-flex">
                                                <a href="#">
                                                    <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                        <i class="fa fa-lg fa-fw fa-eye"></i>
                                                    </button>
                                                </a>
                                                <a href="#">
                                                    <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                        <i class="fa fa-lg fa-fw fa-pen"></i>
                                                    </button>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </x-adminlte-datatable>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="m-2">
                        <span class="h5">Population Distribution by Age Groups</span>
                    </div>
                    <div class="py-4">
                        <canvas id="population1"></canvas>
                    </div>
                </div>

                <div class="card">
                    <div class="m-2">
                        <span class="h5">Population Registration Numbers</span>
                    </div>
                    <div class="px-2 py-4">
                        <canvas id="population2"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </main>
@stop

@section('css')

@stop

@section('js')
    <script src='/vendor/chart.js/Chart.min.js'></script>
    <script>
        let chart1;
        let chart2;

        $(document).ready(() => {
            chart1 = document.getElementById('population1');
            chart2 = document.getElementById('population2');

            new Chart(chart1, {
                type: 'doughnut',
                data: {
                    labels: ['0-18', '18-45', '45+'],
                    datasets: [{
                        label: 'Population Dataset',
                        data: [300, 50, 100],
                        backgroundColor: [
                            'rgb(255,99,132)',
                            'rgb(54,162,235)',
                            'rgb(255,205,86)',
                        ],
                        hoverOffset: 4
                    }]
                }
            });

            new Chart(chart2, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [
                        {
                            label: '0-18',
                            data: [150, 176, 144, 160, 170, 140],
                            fill: false,
                            borderColor: 'rgb(255,99,132)',
                            backgroundColor: [
                                'rgb(255,99,132)',
                                'rgb(54,162,235)',
                                'rgb(255,205,86)',
                                'rgb(86,255,179)',
                                'rgb(192,31,68)',
                                'rgb(16,218,188)',
                            ],
                            hoverOffset: 4
                        },
                        {
                            label: '18-45',
                            data: [132, 178, 114, 189, 151, 123],
                            fill: false,
                            borderColor: 'rgb(54,162,235)',
                            backgroundColor: [
                                'rgb(255,99,132)',
                                'rgb(54,162,235)',
                                'rgb(255,205,86)',
                                'rgb(86,255,179)',
                                'rgb(192,31,68)',
                                'rgb(16,218,188)',
                            ],
                            hoverOffset: 4
                        },
                        {
                            label: '45+',
                            data: [108, 192, 147, 173, 102, 111],
                            fill: false,
                            borderColor: 'rgb(255,205,86)',
                            backgroundColor: [
                                'rgb(255,99,132)',
                                'rgb(54,162,235)',
                                'rgb(255,205,86)',
                                'rgb(86,255,179)',
                                'rgb(192,31,68)',
                                'rgb(16,218,188)',
                            ],
                            hoverOffset: 4
                        },
                    ]
                }
            });
        });
    </script>
@stop
