<!-- ADMIN DASHBOARD -->

@extends('adminlte::page')

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

@section('content_header')

@stop

@section('content')
    <main>
        <div class="col d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-3">
            <div class="d-flex flex-row align-items-center mb-3 mb-sm-0">
                <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 44px; height: 44px; background-color: #F94A7A;">
                    <span class="h4 mb-0 text-white"><b>{{ Auth::user()->name[0] }}</b></span>
                </div>
                <div class="d-flex flex-column ml-3">
                    <p class="text-secondary mb-0">Welcome back!</p>
                    <h5>{{ Auth::user()->name }} | {{ Auth::user()->contract->client->name_fl }}</h5>
                </div>
            </div>
        </div>

        <div class="d-flex flex-column flex-lg-row">
            <div class="col-lg-7">
                <x-adminlte-card title="Records Received" theme="" icon="" collapsible>
                    <!-- Month/Year Selector Row -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Month</label>
                                <select class="form-control select2" style="width: 100%;">
                                    @foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
                                        <option value="{{ $month }}" {{ $month == 'May' ? 'selected' : '' }}>{{ $month }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Year</label>
                                <select class="form-control select2" style="width: 100%;">
                                    @foreach(range(date('Y'), date('Y') - 15) as $year)
                                        <option value="{{ $year }}" {{ $year == 2024 ? 'selected' : '' }}>{{ $year }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Info Boxes Grid -->
                    <div class="row">
                        <div class="col-md-6">
                            <x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" />
                        </div>
                        <div class="col-md-6">
                            <x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <x-adminlte-info-box title="Department of Immigration" text="17,763,238" icon="fas fa-lg fa-flag text-success" />
                        </div>
                        <div class="col-md-6">
                            <x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success" />
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" />
                        </div>
                    </div>
                </x-adminlte-card>

                <div>
                    <x-adminlte-card title="Active Integrations by Industry" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Active Integrations by Industry</h4>
                        </x-slot>

                        <div class="">
                            @php
                                $heads = [
                                    'Industry',
                                    'Organization Name',
                                    'API Key',
                                    'Data Type',
                                    'Monthly API Calls',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $data = [
                                    ['Telco', 'Safaricom', 'API-1243', 'ID + Birth', '45,000'],
                                    ['Telco', 'Airtel', 'API-9421', 'ID Only', '33,500'],
                                    ['FBSI', 'Equity Bank', 'API-5521', 'All', '64,200'],
                                    ['FBSI', 'NCBA', 'API-6211', 'ID + Passport', '22,700'],
                                    ['Gov', 'NHIF', 'API-7710', 'Birth Only', '17,000'],
                                ];

                                $config = [
                                    'order' => [[0, 'asc']],
                                    'columns' => [null, null, null, null, null, ['orderable' => false]],
                                ];
                            @endphp

                            <x-adminlte-datatable id="activeIntegrationsByIndustry" :heads="$heads" :config="$config" bordered hoverable striped>
                                @foreach($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>
                    </x-adminlte-card>
                </div>

                
                <div>
                    <x-adminlte-card title="Revenue Growth Rate" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Revenue Growth Rate</h4>
                        </x-slot>
                        <div class="d-flex justify-content-center mb-3">
                            <div class="btn-group">
                                <button id="showMonthly" class="btn btn-sm btn-success">Monthly</button>
                                <button id="showYearly" class="btn btn-sm btn-outline-success">Yearly</button>
                            </div>
                        </div>
                        <div class="chart">
                            <canvas id="revenueGrowthChart" height="250"></canvas>
                        </div>
                    </x-adminlte-card>
                </div>
            </div>

            <div class="col-lg-5 d-flex flex-column">
                <div>
                    <div>
                        <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
                            <x-slot name="titleSlot">
                                <h4 class="card-title">Total API Requests Processed</h4>
                            </x-slot>
                            <div class="">
                                @php
                                    $heads = [
                                        'Organization',
                                        'Industry',
                                        'API Key',
                                        'Total Requests',
                                        'Success Rate (%)',
                                        ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                    ];

                                    $data = [
                                        ['Safaricom', 'Telco', 'API-1243', '1,203,421', '98.2'],
                                        ['Airtel', 'Telco', 'API-9421', '834,775', '97.5'],
                                        ['Equity Bank', 'FBSI', 'API-5521', '1,509,342', '96.9'],
                                        ['NCBA', 'FBSI', 'API-6211', '675,312', '95.3'],
                                        ['NHIF', 'Gov', 'API-7710', '321,008', '92.6'],
                                    ];

                                    $config = [
                                        'order' => [[3, 'desc']],
                                        'columns' => [null, null, null, null, null, ['orderable' => false]],
                                    ];
                                @endphp

                                <x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
                                    @foreach($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>
                        </x-adminlte-card>
                    </div>

                    <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Data Sources</h4>
                        </x-slot>
                        <div class="py-4">
                            <canvas id="dataSource1"></canvas>
                        </div>
                    </x-adminlte-card>
                </div>
            </div>
        </div>
    </main>
@stop

@section('css')

@stop

@section('js')
    <script src='/vendor/chart.js/Chart.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

        let chart1;

        $(document).ready(() => {
            chart1 = document.getElementById('dataSource1');

            new Chart(chart1, {
                type: 'doughnut',
                data: {
                    labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'],
                    datasets: [{
                        label: 'Population Dataset',
                        data: [300, 50, 100, 150, 125],
                        backgroundColor: [
                            'rgb(255,99,132)',
                            'rgb(54,162,235)',
                            'rgb(255,205,86)',
                            'rgb(16,203,23)',
                            'rgb(159,8,234)',
                        ],
                        hoverOffset: 4
                    }]
                }
            });

        });

        $(document).ready(function() {
            // Initialize Select2 for better dropdown UX
            $('.select2').select2({
                theme: 'bootstrap4'
            });

            // You can add change handlers here if needed
            $('.select2').on('change', function() {
                console.log('Month/Year changed - would reload data here');
                // In a real app, you would fetch new data here
            });
        });

        $(document).ready(function() {
            // Dummy data - replace with your actual data
            const monthlyData = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                revenue: [65000, 59000, 80000, 81000, 56000, 55000, 40000, 72000, 88000, 94000, 102000, 118000],
                growth: [0, -9.2, 35.6, 1.3, -30.9, -1.8, -27.3, 80.0, 22.2, 6.8, 8.5, 15.7]
            };

            const yearlyData = {
                labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
                revenue: [850000, 920000, 1050000, 1120000, 1250000, 1420000],
                growth: [0, 8.2, 14.1, 6.7, 11.6, 13.6]
            };

            const ctx = document.getElementById('revenueGrowthChart').getContext('2d');
            let chart;

            function renderChart(data) {
                if (chart) {
                    chart.destroy();
                }

                chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: 'Revenue ($)',
                                data: data.revenue,
                                backgroundColor: 'rgba(20, 176, 76, 1)',
                                borderColor: 'rgba(20, 176, 76, 1)',
                                borderWidth: 1,
                                yAxisID: 'y'
                            },
                            {
                                label: 'Growth Rate (%)',
                                data: data.growth,
                                type: 'line',
                                borderColor: 'rgba(230, 57, 70, 1)',
                                backgroundColor: 'rgba(230, 57, 70, 0.1)',
                                borderWidth: 2,
                                pointBackgroundColor: 'rgba(230, 57, 70, 1)',
                                yAxisID: 'y1'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.datasetIndex === 1) {
                                            label += context.raw + '%';
                                        } else {
                                            label += '$' + context.raw.toLocaleString();
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                title: {
                                    display: true,
                                    text: 'Revenue ($)'
                                }
                            },
                            y1: {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                title: {
                                    display: true,
                                    text: 'Growth Rate (%)'
                                },
                                grid: {
                                    drawOnChartArea: false
                                },
                                min: -50,
                                max: 100
                            }
                        }
                    }
                });
            }
            // Initial render with monthly data
            renderChart(monthlyData);

            // Toggle between views
            $('#showMonthly').click(function() {
                $(this).removeClass('btn-outline-success').addClass('btn-success');
                $('#showYearly').removeClass('btn-success').addClass('btn-outline-success');
                renderChart(monthlyData);
            });

            $('#showYearly').click(function() {
                $(this).removeClass('btn-outline-success').addClass('btn-success');
                $('#showMonthly').removeClass('btn-success').addClass('btn-outline-success');
                renderChart(yearlyData);
            });
        });
    </script>
@stop


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