@extends('admin.layouts.app')
@section('title', 'Laporan Audit')

@section('content')
<div class="h-[calc(100vh-112px)] overflow-hidden p-4">
    <div class="flex h-full min-h-0 flex-col gap-3">

        {{-- Judul Halaman + Tombol Export --}}
        <div class="shrink-0 rounded-2xl  bg-white px-4 py-3 shadow-sm">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-3">
                    <div
                        class="flex h-10 w-10 items-center justify-center rounded-xl shadow-sm"
                        style="background-color: rgba(47, 67, 91, 0.10);  solid rgba(47, 67, 91, 0.12);"
                    >
                        <i
                            data-lucide="file-bar-chart"
                            class="h-5 w-5"
                            style="color:#2f435b;"
                            stroke-width="2.3"
                        ></i>
                    </div>

                    <div>
                        <h2 class="text-base font-semibold tracking-tight text-slate-800">
                            Laporan Audit
                        </h2>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Ringkasan visual laporan audit berdasarkan filter yang dipilih.
                        </p>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <a
                        href="{{ route('admin.laporan.export.pdf', request()->query()) }}"
                        class="inline-flex h-9 items-center gap-2 rounded-xl bg-red-600 px-4 text-xs font-medium text-white shadow-sm transition duration-200 hover:bg-red-700">
                        <i data-lucide="file-text" class="h-4 w-4"></i>
                        PDF
                    </a>

                    <a
                        href="{{ route('admin.laporan.export.excel', request()->query()) }}"
                        class="inline-flex h-9 items-center gap-2 rounded-xl bg-green-600 px-4 text-xs font-medium text-white shadow-sm transition duration-200 hover:bg-green-700">
                        <i data-lucide="file-spreadsheet" class="h-4 w-4"></i>
                        Excel
                    </a>
                </div>
            </div>
        </div>

        {{-- Form Filter --}}
        <form
            method="GET"
            action="{{ route('admin.laporan') }}"
            class="shrink-0 rounded-2xl border border-slate-200/70 bg-white px-4 py-3 shadow-sm"
        >
            <div class="grid grid-cols-1 gap-2 md:grid-cols-5">

                <select
                    name="tema"
                    class="h-9 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-xs text-slate-600 outline-none transition focus:border-[#2f435b] focus:bg-white focus:ring-2 focus:ring-[#2f435b]/10"
                >
                    <option value="">-- Pilih Tema --</option>

                    @foreach($temaList as $tema)
                        <option value="{{ $tema }}" {{ request('tema') == $tema ? 'selected' : '' }}>
                            {{ $tema }}
                        </option>
                    @endforeach
                </select>

                <select
                    name="status"
                    class="h-9 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-xs text-slate-600 outline-none transition focus:border-[#2f435b] focus:bg-white focus:ring-2 focus:ring-[#2f435b]/10"
                >
                    <option value="">-- Pilih Status --</option>

                    <option value="Open" {{ request('status') == 'Open' ? 'selected' : '' }}>
                        Audit & Tema Open
                    </option>

                    <option value="CloseBelumFoto" {{ request('status') == 'CloseBelumFoto' ? 'selected' : '' }}>
                        Audit Open & Tema Close
                    </option>

                    <option value="CloseSesudah" {{ request('status') == 'CloseSesudah' ? 'selected' : '' }}>
                        Audit & Tema Close
                    </option>
                </select>

                <select
                    name="bulan_audit"
                    class="h-9 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-xs text-slate-600 outline-none transition focus:border-[#2f435b] focus:bg-white focus:ring-2 focus:ring-[#2f435b]/10"
                >
                    <option value="">-- Bulan Audit --</option>

                    @foreach($bulanAuditList as $bulan)
                        <option value="{{ $bulan }}" {{ request('bulan_audit') == $bulan ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::createFromFormat('Y-m', $bulan)->translatedFormat('F Y') }}
                        </option>
                    @endforeach
                </select>

                <select
                    name="bulan_verifikasi"
                    class="h-9 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-xs text-slate-600 outline-none transition focus:border-[#2f435b] focus:bg-white focus:ring-2 focus:ring-[#2f435b]/10"
                >
                    <option value="">-- Bulan Verifikasi --</option>

                    @foreach($bulanVerifikasiList as $bulan)
                        <option value="{{ $bulan }}" {{ request('bulan_verifikasi') == $bulan ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::createFromFormat('Y-m', $bulan)->translatedFormat('F Y') }}
                        </option>
                    @endforeach
                </select>

                <div class="grid grid-cols-2 gap-2">
                    <button
                        type="submit"
                        class="inline-flex h-9 items-center justify-center gap-1.5 rounded-xl bg-blue-500 px-3 text-xs font-medium text-white transition hover:bg-blue-600"
                    >
                        <i data-lucide="check" class="h-3.5 w-3.5"></i>
                        Filter
                    </button>

                    <a
                        href="{{ route('admin.laporan') }}"
                        class="inline-flex h-9 items-center justify-center gap-1.5 rounded-xl bg-gray-200 px-3 text-xs font-medium text-slate-600 transition hover:bg-gray-300"
                    >
                        <i data-lucide="rotate-ccw" class="h-3.5 w-3.5"></i>
                        Reset
                    </a>
                </div>

            </div>
        </form>

        {{-- Diagram --}}
        <div class="min-h-0 flex-1 rounded-2xl border border-slate-200/70 bg-white p-4 shadow-sm">

            <div class="mb-3 flex items-center gap-3">
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-xl shadow-sm"
                    style="background-color:#f3f0ff;  solid #ddd6fe;"
                >
                    <i
                        data-lucide="chart-pie"
                        class="h-5 w-5"
                        style="color:#7c3aed;"
                        stroke-width="2.3"
                    ></i>
                </div>

                <div>
                    <h3 class="text-sm font-semibold text-slate-800">
                        Diagram Status Audit
                    </h3>
                    <p class="mt-0.5 text-[11px] text-slate-500">
                        Perbandingan status audit berdasarkan filter.
                    </p>
                </div>
            </div>

            <div class="h-[calc(100%-54px)] min-h-0">
                <canvas id="pieChart"></canvas>
            </div>

        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const pieLabels = {!! json_encode($pieLabels ?: ['Tidak Ada Data']) !!};
    const pieCounts = {!! json_encode($pieCounts ?: [1]) !!};

    const pieCanvas = document.getElementById('pieChart');

    if (pieCanvas) {
        const pieCtx = pieCanvas.getContext('2d');

        new Chart(pieCtx, {
            type: 'doughnut',
            data: {
                labels: pieLabels,
                datasets: [{
                    data: pieCounts,
                    backgroundColor: [
                        '#2f435b',
                        '#2563eb',
                        '#16a34a',
                        '#f97316',
                        '#7c3aed',
                        '#0891b2',
                        '#eab308',
                        '#dc2626'
                    ],
                    borderColor: '#ffffff',
                    borderWidth: 4,
                    hoverOffset: 6,
                    cutout: '68%',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                layout: {
                    padding: 8
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            boxWidth: 7,
                            boxHeight: 7,
                            padding: 12,
                            color: '#64748b',
                            font: {
                                size: 10,
                                family: 'Poppins',
                                weight: '500'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: '#0f172a',
                        titleColor: '#ffffff',
                        bodyColor: '#e2e8f0',
                        padding: 10,
                        cornerRadius: 10,
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed}`;
                            }
                        }
                    }
                }
            }
        });
    }

    if (window.lucide) {
        window.lucide.createIcons();
    }
</script>
@endsection