@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>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            {{--  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>

            {{--  Audit Rail  --}}
            <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="audit-table"
                    data-api-url="{{ route('auditrail.datatables') }}">
                    <div class="card-header bg-agi-50 py-5 flex-wrap">
                        <h3 class="card-title">
                            Audit Trail
                        </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="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"> Name </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="action_type">
                                        <span class="sort"> <span class="sort-label"> Action Type </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="action_description">
                                        <span class="sort"> <span class="sort-label"> Action Description</span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="target_table">
                                        <span class="sort"> <span class="sort-label"> Target Table </span>
                                            <span class="sort-icon"> </span> </span>
                                    </th>
                                    <th class="min-w-[100px]" data-datatable-column="target_record_id">
                                        <span class="sort"> <span class="sort-label"> Target Record Id </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', // tipe chart
            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-table');
            const apiUrlAudit = elementAudit.getAttribute('data-api-url');

            // Inisialisasi DataTable
            const dataTableAuditOptions = {
                apiEndpoint: apiUrlAudit,
                pageSize: 5,
                columns: {
                    nik: {
                        title: 'nik',
                        render: (item, data) => data?.user?.nik || 'Unknown',
                    },
                    name: {
                        title: 'name',
                        render: (item, data) => data?.user?.name || 'Unknown',
                    },
                    action_type: {
                        title: 'action_type',
                    },
                    action_description: {
                        title: 'action_description',
                    },
                    target_table: {
                        title: 'target_table',
                    },
                    target_record_id: {
                        title: 'target_record_id',
                    },
                },
            };
            const datatableAudit = new KTDataTable(elementAudit, dataTableAuditOptions);
        });
    </script>
@endpush