<!-- 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',
                                    'Data Type',
                                    'Monthly API Calls',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $data = [
                                    ['Telco', 'Safaricom', 'ID + Birth', '45,000'],
                                    ['Telco', 'Airtel', 'ID Only', '33,500'],
                                    ['FBSI', 'Equity Bank', 'All', '64,200'],
                                    ['FBSI', 'NCBA', 'ID + Passport', '22,700'],
                                    ['Gov', 'NHIF', '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">
                <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',
                                'Total Requests',
                                'Token Balance',
                                'Success Rate (%)',
                                ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                            ];

                            $data = [
                                ['Safaricom', 'Telco', '1,203,421','2,987,987', '98.2'],
                                ['Airtel', 'Telco', '834,775','24,654', '97.5'],
                                ['Equity Bank', 'FBSI', '1,509,342','234', '96.9'],
                                ['NCBA', 'FBSI', '675,312','654,000', '95.3'],
                                ['NHIF', 'Gov', '321,008','241,876,900', '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>

                <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Data Sources</h4>
                    </x-slot>
                    <canvas id="dataSource1" height="250"></canvas>
                    <div class="chart-legend text-center mt-3" id="dataSource1-legend"></div>
                </x-adminlte-card>
                
                
            </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>

        $(document).ready(() => {
            const ctx = document.getElementById('dataSource1');
            const data = [41.3, 6.9, 13.8, 20.7, 17.2];
            const labels = ['CRD', 'DOI', 'NRB', 'RAD', 'RG'];
            const colors = [
                'rgb(255,99,132)',
                'rgb(54,162,235)',
                'rgb(255,205,86)',
                'rgb(16,203,23)',
                'rgb(159,8,234)'
            ];

            // Calculate total for percentages
            const total = data.reduce((sum, value) => sum + value, 0);
            const percentages = data.map(value => ((value / total) * 100).toFixed(1) + '%');

            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                generateLabels: function(chart) {
                                    const data = chart.data;
                                    return data.labels.map((label, i) => {
                                        const value = data.datasets[0].data[i];
                                        const percentage = ((value / total) * 100).toFixed(1) + '%';
                                        return {
                                            text: `${label}: ${percentage}`,
                                            fillStyle: data.datasets[0].backgroundColor[i],
                                            hidden: false,
                                            index: i
                                        };
                                    });
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const percentage = ((value / total) * 100).toFixed(1) + '%';
                                    return `${label}: ${value} (${percentage})`;
                                }
                            }
                        }
                    }
                }
            });
        });

        $(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)
