@extends('layouts.main')

@section('content')
    <div class="py-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            {{--  Count Form  --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 h-full">
                @forelse ($formCounts as $form)
                    <div
                        class="card bg-cover bg-no-repeat rtl:bg-[left_top_-1.7rem] bg-[right_top_-1.7rem] channel-stats-bg h-full p-5 transition duration-300 transform hover:shadow-lg hover:scale-[1.02] hover:bg-gradient-to-r hover:from-agi-50 hover:to-white cursor-pointer">
                        <div class="grid grid-cols-2 items-center h-full gap-2">
                            <div class="text-center text-4xl font-bold text-gray-900">
                                {{ $form['total'] }}
                                <div class="text-sm font-medium text-gray-500 mt-1">Data</div>
                            </div>

                            <div class="text-left">
                                <div class="text-sm text-primary font-semibold">
                                    {{ $form['kode_form'] }}
                                </div>
                                <div class="text-base text-gray-700">
                                    {{ $form['nama_form'] }}
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full">
                        <div class="alert alert-warning text-center">
                            Belum ada data permohonan.
                        </div>
                    </div>
                @endforelse
            </div>

            {{--  Chart  --}}
            <div class="card border border-agi-100 h-full w-full">
                <div class="card-header bg-agi-50 py-5 flex-wrap">
                    <h3 class="card-title">
                        Data Laporan Statistik Pengajuan
                    </h3>
                </div>
                <div class="card-body">
                    <div class="p-5">
                        <div class="chart-container flex justify-center items-center">
                            <canvas id="dashboardChart" class="max-w-full max-h-full"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{--  Report History User  --}}
        <div class="grid my-5 gap-5 lg:gap-7.5">
            <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="5"
                data-datatable-state-save="false" id="dashboardreport-table"
                data-api-url="{{ route('report.laporanhistory.datatables') }}">
                <div class="card-header bg-agi-50 py-5 flex-wrap">
                    <h3 class="card-title">
                        Report History User Akses
                    </h3>
                </div>
                <div class="card-body">
                    <div class="scrollable-x-auto">
                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
                            data-datatable-table="true">
                            <thead>
                                <tr>
                                    <th class="min-w-[100px]" data-datatable-column="nik">
                                        <span class="sort"> <span class="sort-label"> NIK </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="name">
                                        <span class="sort"> <span class="sort-label"> Nama User </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="unit">
                                        <span class="sort"> <span class="sort-label"> Unit </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="jenis_form">
                                        <span class="sort"> <span class="sort-label"> Akses Yang Di Miliki </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="jangka_waktu">
                                        <span class="sort"> <span class="sort-label"> Periode </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div
                        class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
                        <div class="flex items-center gap-2">
                            Show
                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select>
                            per
                            page
                        </div>
                        <div class="flex items-center gap-4">
                            <span data-datatable-info="true"> </span>
                            <div class="pagination" data-datatable-pagination="true">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            {{--  History User  --}}
            <div class="grid my-5 gap-5 lg:gap-7.5">
                <div class="card border border-agi-100 card-grid min-w-full" id="dashboardhistory">
                    <div class="card-header bg-agi-50 py-5 flex-wrap">
                        <h3 class="card-title">
                            History User Akses
                        </h3>
                    </div>
                    <div class="card-body">
                        @foreach (auth()->user()->unreadNotifications->take(5) as $notification)
                            <div class="flex items-center grow gap-2.5 px-5 py-4">
                                <div
                                    class="flex items-center justify-center size-8 bg-success-light rounded-full border border-success-clarity">
                                    <i class="ki-filled ki-check text-lg text-success">
                                    </i>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <span class="text-2sm font-medium text-gray-700">
                                        {{ formatNotifikasi($notification)['title'] }}<br>
                                        {{ formatNotifikasi($notification)['message'] }}<br>

                                    </span>
                                    <span class="font-medium text-gray-500 text-2xs">
                                        {{ $notification->created_at->diffForHumans() }}
                                    </span>
                                </div>
                            </div>
                            @if (!$loop->last)
                                <div class="border-b border-b-gray-200"></div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>

            {{--  Audit Rail  --}}
            <div class="grid my-5 gap-5 lg:gap-7.5">
                <div class="card border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="5"
                    data-datatable-state-save="false" id="audit-logs-table"
                    data-api-url="{{ route('logs.audit.datatables') }}">
                    <div class="card-header bg-agi-50 py-5 flex-wrap">
                        <h3 class="card-title">
                            Audit Logs
                        </h3>
                    </div>
                    <div class="scrollable-x-auto">
                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
                            data-datatable-table="true">
                            <thead>
                                <tr>
                                    <th class="min-w-[100px]" data-datatable-column="log_name">
                                        <span class="sort"> <span class="sort-label"> Log Type </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="subject_type">
                                        <span class="sort"> <span class="sort-label"> Subject Type </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="description">
                                        <span class="sort"> <span class="sort-label"> Description </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="causer_id">
                                        <span class="sort"> <span class="sort-label"> Causer ID </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[150px]" data-datatable-column="created_at">
                                        <span class="sort"> <span class="sort-label"> Date/Time </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div
                        class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
                        <div class="flex items-center gap-2">
                            Show
                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select>
                            per page
                        </div>
                        <div class="flex items-center gap-4">
                            <span data-datatable-info="true"> </span>
                            <div class="pagination" data-datatable-pagination="true">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const formCounts = @json($formCounts);

        const labels = formCounts.map(form => form.nama_form);
        const data = formCounts.map(form => form.total);
        const ctx = document.getElementById('dashboardChart').getContext('2d');

        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
                }]
            },
            options: {
                responsive: true,
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    title: {
                        display: true,
                        text: labels.length === 1 && labels[0] === 'Tidak ada data' ?
                            'Tidak ada data yang ditemukan' : 'Distribusi Jenis Pengajuan',
                        font: {
                            size: 16
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    </script>

    <script type="module">
        document.addEventListener('DOMContentLoaded', function() {
            const elementReport = document.querySelector('#dashboardreport-table');
            const apiUrlReport = elementReport.getAttribute('data-api-url');

            // Inisialisasi DataTable Report
            const dataTableReportOptions = {
                apiEndpoint: apiUrlReport,
                pageSize: 5,
                columns: {
                    nik: {
                        title: 'nik',
                    },
                    name: {
                        title: 'name',
                        render: (item, data) => data?.user?.name || 'Unknown',
                    },
                    unit: {
                        title: 'unit',
                        render: (item, data) => data?.user?.roles?.map(role => role.name).join(', ') ||
                            'No Role',
                    },
                    jenis_form: {
                        title: 'Jenis Pengajuan',
                        render: (item, data) => data?.jenis_form?.nama_form || 'No Form',
                    },
                    jangka_waktu: {
                        title: 'Jangka Waktu',
                        render: (item, data) => {
                            const months = [
                                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                            ];

                            const formatDate = (dateString) => {
                                const date = new Date(dateString);
                                const day = String(date.getDate()).padStart(2, '0');
                                const month = months[date.getMonth()];
                                const year = date.getFullYear();
                                return `${day} ${month} ${year}`;
                            };

                            if (data?.jangka_waktu?.rentang === 'Sementara') {
                                const tanggalMulai = formatDate(data?.jangka_waktu?.tanggal_mulai);
                                const tanggalSelesai = formatDate(data?.jangka_waktu?.tanggal_selesai);
                                return `${data?.jangka_waktu?.rentang} (${tanggalMulai} - ${tanggalSelesai})`;
                            } else {
                                return data?.jangka_waktu?.rentang;
                            }
                        }
                    },
                },
            };
            const datatableReport = new KTDataTable(elementReport, dataTableReportOptions);

            const elementAudit = document.querySelector('#audit-logs-table');
            const apiUrlAudit = elementAudit.getAttribute('data-api-url');

            // Inisialisasi DataTable Audit
            const dataTableAuditOptions = {
                apiEndpoint: apiUrlAudit,
                pageSize: 5,
                columns: {
                    log_name: {
                        title: 'Log Type',
                        render: (item, data) => {
                            return `<span class="badge badge-light-primary">${data.log_name || 'N/A'}</span>`;
                        }
                    },
                    description: {
                        title: 'Description',
                    },
                    subject_type: {
                        title: 'Subject Type',
                        render: (item, data) => {
                            if (!data.subject_type) return 'N/A';
                            return data.subject_type.split('\\').pop();
                        }
                    },
                    causer_id: {
                        title: 'Causer ID',
                        render: (item, data) => {
                            return data.creator_name || 'System';
                        }
                    },
                    created_at: {
                        title: 'Date/Time',
                        render: (item, data) => {
                            const date = new Date(data.created_at);
                            return window.formatTanggalWaktuIndonesia(date)
                        }
                    }
                },
            };
            const datatableAudit = new KTDataTable(elementAudit, dataTableAuditOptions);
        });
    </script>
@endpush