<!-- 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-8">
                <x-adminlte-card title="Records Received" theme="" icon="fas fa-calendar-alt" removable 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>
                    <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">Data</span>
                            </div>
                        </div>
                        <div class="">
                            @php
                                $heads = [
                                    'Code',
                                    'Name',
                                    'Records',
                                    'API Calls',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $config = [
                                    'data' => [
                                        ['NRB', 'National Registration Bureau', '1,208,333', '651,665'],
                                        ['CRD', 'Civil Registration Department', '866,820', '530,046'],
                                        ['DOI', 'Department of Immigration', '1,453,787', '1,301,165'],
                                        ['RAD', 'Refugee Affairs Department', '315,493', '73,081'],
                                        ['RG', 'Registrar General', '143,920', '5,313,510'],
                                    ],
                                    'order' => [[1, 'asc']],
                                    'columns' => [null, null, null, null, ['orderable' => false]],
                                ];
                            @endphp

                            <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"></span>
                            </div>
                        </div>
                        <div class="">
                            <div class="card">
                                <div class="m-2">
                                    <span class="h5">Input Traffic</span>
                                </div>
                                <div class="px-2 py-4">
                                    <canvas id="dataInput"></canvas>
                                </div>
                            </div>
                        </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' => \App\Models\Onboarding::where(function ($query) {
                                            $query->orWhereNull("client_rid")->orWhereNull("contract_rid")->orWhereNull("user_id");
                                        })->get(),
                                        'order' => [[1, 'asc']],
                                        'columns' => [null, null, ['orderable' => false]],
                                    ];
                                @endphp

                                <x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
                                    @foreach($config['data'] as $row)
                                        <tr>
                                            <td>{{ $row->id }}</td>
                                            <td>{{ $row->client->name_fl ?? '-' }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    @if($row->client_rid != null)
                                                        <a href="{{ route('onboarding.show', $row->id) }}"
                                                           class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                            <i class="fa fa-lg fa-fw fa-eye"></i>
                                                        </a>
                                                    @endif
                                                    <a href="{{ route('onboarding.edit', $row->id) }}"
                                                       class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                                                        <i class="fa fa-lg fa-fw fa-pen"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </x-adminlte-datatable>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="m-2">
                            <span class="h5">Data Source</span>
                        </div>
                        <div class="py-4">
                            <canvas id="dataSource1"></canvas>
                        </div>
                    </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('dataSource1');
            chart2 = document.getElementById('dataInput');

            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
                    }]
                }
            });

            new Chart(chart2, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [
                        {
                            label: 'CRD',
                            data: [196, 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: 'DOI',
                            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: 'NRB',
                            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
                        },
                        {
                            label: 'RAD',
                            data: [115, 164, 123, 200, 85, 191],
                            fill: false,
                            borderColor: 'rgb(225,12,221)',
                            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: 'RG',
                            data: [98, 156, 110, 175, 84, 200],
                            fill: false,
                            borderColor: 'rgb(86,236,11)',
                            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
                        },
                    ]
                }
            });
        });

        $(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
            });
        });
    </script>
@stop


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