@extends('web_user.layouts.app')

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

@section('content')
<div class="w-full min-h-screen auditor-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, Auditor
                        </h1>
                        <p class="mt-0.5 text-sm font-medium text-slate-500">
                            Kelola dan evaluasi proses audit anda dengan mudah
                        </p>
                    </div>
                </div>

                <a href="{{ route('audit.create') }}"
                   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-plus text-[10px]"></i>
                    </div>
                    <span>Tambah Audit</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">

            <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">
                            {{ $totalAudit }}
                        </div>
                        <div class="mt-5 text-[11px] font-semibold text-slate-500">
                            Dari seluruh audit anda
                        </div>
                    </div>
                </div>
            </div>

            <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">
                            {{ $totalSelesai }}
                        </div>
                        <div class="mt-5 text-[11px] font-semibold text-slate-500">
                            Status Close
                        </div>
                    </div>
                </div>
            </div>

            <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">
                            {{ $totalBelum }}
                        </div>
                        <div class="mt-5 text-[11px] font-semibold text-slate-500">
                            Status Open
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- Grafik & Notifikasi --}}
        <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>

            {{-- Notifikasi --}}
            <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="bell" class="h-4 w-4" style="color:#7c3aed;" stroke-width="2.3"></i>
                    </span>

                    <h3 class="text-sm font-extrabold text-slate-700">
                        Notifikasi Belum Dibaca
                    </h3>
                </div>

                @php
                    $unread = auth()->user()->unreadNotifications()->take(3)->get();
                @endphp

                @if($unread->isNotEmpty())
                    <ul class="divide-y divide-slate-100">
                        @foreach($unread as $notif)
                            <li class="py-2 flex items-start gap-2">
                                <span class="mt-1.5 h-1.5 w-1.5 rounded-full bg-[#315de8]"></span>

                                <div class="flex-1 min-w-0">
                                    <p class="text-[12px] font-bold text-slate-700 truncate">
                                        {{ $notif->data['judul'] ?? 'Notifikasi' }}
                                    </p>
                                    <p class="text-[11px] text-slate-500 leading-snug">
                                        {{ \Illuminate\Support\Str::limit($notif->data['pesan'] ?? '-', 70) }}
                                    </p>
                                    <p class="text-[10px] text-slate-400 italic mt-1">
                                        {{ $notif->created_at->diffForHumans() }}
                                    </p>
                                </div>
                            </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">Semua notifikasi sudah dibaca.</span>
                    </div>
                @endif
            </div>

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

<style>
    .auditor-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