@extends('admin.layouts.app')

    @section('title', 'Beranda Admin')

    @section('content')
    <div class="w-full min-h-screen admin-dashboard bg-[#f1f2f6]">

        {{-- Header --}}
        <div class="px-4 pt-3">
            <div class="mb-5 rounded-2xl bg-white/90 backdrop-blur-md shadow-sm overflow-hidden">
                <div class="px-4 py-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

                    <div class="flex items-center gap-3">
                        

                        <div>
                            <h1 class="text-[20px] font-extrabold tracking-tight text-slate-700">
                                Selamat Datang, Admin
                            </h1>
                            <p class="mt-0.5 text-sm font-medium text-slate-500">
                                Kelola, monitor, dan evaluasi proses audit dengan lebih efisien
                            </p>
                        </div>
                    </div>

                    <a href="{{ route('admin.notifikasi.index') }}"
                    class="group inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition-all duration-300 ease-in-out hover:brightness-110 hover:saturate-150 hover:shadow-[0_10px_24px_rgba(59,130,246,.35)] active:scale-[.98]"
                    style="background:#3b82f6; box-shadow:0 8px 20px rgba(59,130,246,.18);">
                        <div class="flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-white/15 transition-all duration-300 group-hover:bg-white/25">
                            <i class="fas fa-paper-plane text-[10px]"></i>
                        </div>
                        <span>Kirim Notifikasi</span>
                    </a>

                </div>
            </div>
        </div>

        {{-- Content --}}
        <div class="px-4 pb-3">

            {{-- Cards --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mb-5">

                {{-- Total Audit --}}
                <div class="rounded-xl bg-white px-4 py-4 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300">
                    <div class="flex items-start gap-4">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl"
                            style="background-color:#f3f0ff;  solid #ddd6fe;">
                            <i data-lucide="clipboard-list"
                            class="h-5 w-5"
                            style="color:#7c3aed;"
                            stroke-width="2.3"></i>
                        </div>

                        <div>
                            <div class="text-[14px] font-bold text-slate-500">Total Audit</div>
                            <div class="mt-1 text-[30px] leading-none font-extrabold text-slate-700">
                                {{ $totalAuditAll }}
                            </div>
                            <div class="mt-5 text-[11px] font-semibold text-slate-500">
                                Dari seluruh audit yang tercatat
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Audit Selesai --}}
                <div class="rounded-xl bg-white px-4 py-4 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300">
                    <div class="flex items-start gap-4">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl"
                            style="background-color:#ecfdf3;  solid #c8f2d8;">
                            <i data-lucide="badge-check"
                            class="h-5 w-5"
                            style="color:#22c55e;"
                            stroke-width="2.3"></i>
                        </div>

                        <div>
                            <div class="text-[14px] font-bold text-slate-500">Audit Selesai</div>
                            <div class="mt-1 text-[30px] leading-none font-extrabold text-slate-700">
                                {{ $auditSelesai }}
                            </div>
                            <div class="mt-5 text-[11px] font-semibold text-slate-500">
                                Status Close
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Audit Belum Selesai --}}
                <div class="rounded-xl bg-white px-4 py-4 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300">
                    <div class="flex items-start gap-4">
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl"
                            style="background-color:#fff1f2;  solid #ffd5da;">
                            <i data-lucide="hourglass"
                            class="h-5 w-5"
                            style="color:#ef4444;"
                            stroke-width="2.3"></i>
                        </div>

                        <div>
                            <div class="text-[14px] font-bold text-slate-500">Audit Belum Selesai</div>
                            <div class="mt-1 text-[30px] leading-none font-extrabold text-slate-700">
                                {{ $auditProses }}
                            </div>
                            <div class="mt-5 text-[11px] font-semibold text-slate-500">
                                Status Open
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Grafik & Catatan --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

                {{-- Grafik --}}
                <div class="bg-white rounded-2xl shadow-sm  p-4 lg:col-span-2">
                    <h4 class="text-sm sm:text-base font-bold text-slate-700 mb-3 flex items-center">
                        <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl mr-2"
                            style="background-color:#f3f0ff;  solid #ddd6fe;">
                            <i data-lucide="bar-chart-3"
                            class="h-4 w-4"
                            style="color:#7c3aed;"
                            stroke-width="2.3">
                            </i>
                        </span>
                        Grafik Berdasarkan Tema
                    </h4>

                    <div class="w-full h-[180px] sm:h-[200px] lg:h-[210px]">
                        <canvas id="grafikAuditTemaGrouped" class="w-full h-full"></canvas>
                    </div>
                </div>

                {{-- Catatan --}}
                <div class="space-y-3">

                    {{-- Catatan Audit --}}
                    <div class="bg-white rounded-2xl shadow-sm  p-3">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="inline-flex w-8 h-8 items-center justify-center rounded-xl"
                                style="background-color:#f3f0ff;  solid #ddd6fe;">
                                <i data-lucide="clipboard-list" class="h-4 w-4" style="color:#7c3aed;" stroke-width="2.3"></i>
                            </span>

                            <h4 class="text-sm font-extrabold text-slate-700">
                                Tema Audit Masih Open
                            </h4>
                        </div>


                        @if (!empty($temaMasihOpenNama))
                            <div class="flex flex-wrap items-center gap-2">
                                @foreach ($temaMasihOpenNama as $t)
                                    <span class="inline-flex items-center gap-2 rounded-full bg-[#eaf0ff] px-3 py-1 text-[11px] font-bold text-slate-700">
                                        <span class="h-1.5 w-1.5 rounded-full bg-[#315de8]"></span>
                                        {{ $t }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <p class="text-[12px] text-gray-500 italic">
                                Tidak ada tema berstatus Open.
                            </p>
                        @endif
                    </div>

                    {{-- Divisi Temuan --}}
                    <div class="bg-white rounded-2xl shadow-sm  p-3">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="inline-flex w-8 h-8 items-center justify-center rounded-xl"
                                style="background-color:#f3f0ff;  solid #ddd6fe;">
                                <i data-lucide="trophy" class="h-4 w-4" style="color:#7c3aed;" stroke-width="2.3"></i>
                            </span>

                            <h4 class="text-sm font-extrabold text-slate-700">
                                Divisi Temuan Paling Sedikit
                            </h4>
                        </div>

                        @if (!empty($bagianPalingSedikit) && count($bagianPalingSedikit) > 0)
                            <ul class="divide-y divide-slate-100">
                                @foreach ($bagianPalingSedikit as $bagian)
                                    <li class="py-2 flex items-center justify-between gap-3">
                                        <div class="flex items-center gap-2 min-w-0">
                                            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                                            <span class="text-[12px] font-bold text-slate-700 truncate">
                                                {{ $bagian->nama_bagian }}
                                            </span>
                                        </div>

                                        <span class="shrink-0 rounded-full bg-emerald-100 px-3 py-1 text-[11px] font-extrabold text-emerald-700">
                                            {{ $bagian->jumlah_temuan }} temuan
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div class="py-3 text-center text-gray-500">
                                <i class="fas fa-circle-check text-emerald-500 mr-1"></i>
                                <span class="text-sm italic">Belum ada data audit periode ini.</span>
                            </div>
                        @endif
                    </div>

                </div>

            </div>
        </div>
    </div>
    @endsection

    <style>
        .admin-dashboard {
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        #grafikAuditTemaGrouped {
            height: 180px !important;
        }

        @media (min-width:640px) {
            #grafikAuditTemaGrouped {
                height: 200px !important;
            }
        }

        @media (min-width:1024px) {
            #grafikAuditTemaGrouped {
                height: 210px !important;
            }
        }
    </style>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        if (window.lucide) lucide.createIcons();

        const ctx = document.getElementById('grafikAuditTemaGrouped').getContext('2d');

        const gradOpen = ctx.createLinearGradient(0, 0, 0, 400);
        gradOpen.addColorStop(0, 'rgba(248, 113, 113, 0.58)');
        gradOpen.addColorStop(1, 'rgba(248, 113, 113, 0.22)');

        const gradClose = ctx.createLinearGradient(0, 0, 0, 400);
        gradClose.addColorStop(0, 'rgba(74, 222, 128, 0.58)');
        gradClose.addColorStop(1, 'rgba(74, 222, 128, 0.22)');

        function wrapLabel(label, max = 18) {
            const words = String(label).split(' '), lines = [];
            let line = '';

            for (const w of words) {
                const t = (line + ' ' + w).trim();

                if (t.length <= max) {
                    line = t;
                } else {
                    if (line) lines.push(line.trim());
                    line = w;
                }
            }

            if (line) lines.push(line.trim());
            return lines;
        }

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($labelsTema),
                datasets: [
                    {
                        label: 'Audit Open',
                        data: @json($jumlahOpen),
                        backgroundColor: gradOpen,
                        borderWidth: 0,
                        borderSkipped: false,
                        maxBarThickness: 42,
                        categoryPercentage: 0.62,
                        barPercentage: 0.85,
                        borderRadius: 8
                    },
                    {
                        label: 'Audit Close',
                        data: @json($jumlahClose),
                        backgroundColor: gradClose,
                        borderWidth: 0,
                        borderSkipped: false,
                        maxBarThickness: 42,
                        categoryPercentage: 0.62,
                        barPercentage: 0.85,
                        borderRadius: 8
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                layout: {
                    padding: { top: 6 }
                },
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: '#64748b',
                            boxWidth: 12,
                            boxHeight: 12,
                            font: {
                                size: 12,
                                weight: '600'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(17,24,39,0.95)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        callbacks: {
                            label: (ctx) => `${ctx.dataset.label}: ${ctx.formattedValue}`
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: {
                            color: '#64748b',
                            font: { size: 11 },
                            autoSkip: false,
                            maxRotation: 0,
                            minRotation: 0,
                            callback: function(v) {
                                return wrapLabel(this.getLabelForValue(v), 18);
                            }
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(148, 163, 184, 0.22)'
                        },
                        ticks: {
                            color: '#64748b',
                            stepSize: 1
                        }
                    }
                }
            }
        });
    </script>
    @endpush