@php
    $outdoorInstallationUrl = \Illuminate\Support\Facades\Route::has('outdoor-installations.index')
        ? route('outdoor-installations.index')
        : url('/outdoor-installations');

    $outdoorHistoryUrl = \Illuminate\Support\Facades\Route::has('outdoor-installations.index')
        ? route('outdoor-installations.index', ['status' => 'all'])
        : url('/outdoor-installations?status=all');

    /*
     * HOTFIX:
     * Jangan langsung route('outdoor-installations.realtime.summary')
     * karena kalau route belum didaftarkan, dashboard langsung error.
     */
    $realtimeSummaryUrl = \Illuminate\Support\Facades\Route::has('outdoor-installations.realtime.summary')
        ? route('outdoor-installations.realtime.summary')
        : url('/outdoor-installations/realtime/summary');
@endphp

<div class="space-y-6"
     x-data="instalasiDashboardRealtime('{{ $realtimeSummaryUrl }}')"
     x-init="start()">

    <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-brand-600 dark:text-brand-400">Dashboard Instalasi</p>
                <h2 class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">Pemasangan Outdoor</h2>
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    Pantau pekerjaan pemasangan outdoor secara realtime. Data akan refresh otomatis tanpa reload halaman.
                </p>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ $outdoorInstallationUrl }}"
                   class="inline-flex items-center justify-center rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700">
                    Pemasangan Outdoor
                </a>
                <a href="{{ $outdoorHistoryUrl }}"
                   class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-sm transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800">
                    Riwayat
                </a>
            </div>
        </div>
    </div>

    <div class="rounded-2xl border p-4 shadow-sm"
         :class="summary.waiting_count > 0
            ? 'border-red-200 bg-red-50 dark:border-red-500/20 dark:bg-red-500/10'
            : 'border-emerald-200 bg-emerald-50 dark:border-emerald-500/20 dark:bg-emerald-500/10'">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div class="flex items-start gap-3">
                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl"
                     :class="summary.waiting_count > 0 ? 'bg-red-600 text-white' : 'bg-emerald-600 text-white'">
                    <template x-if="summary.waiting_count > 0">
                        <svg class="h-5 w-5 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 00-12 0v3.2a2 2 0 01-.6 1.4L4 17h5m6 0a3 3 0 01-6 0" />
                        </svg>
                    </template>
                    <template x-if="summary.waiting_count <= 0">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </template>
                </div>

                <div>
                    <h3 class="text-base font-bold"
                        :class="summary.waiting_count > 0 ? 'text-red-800 dark:text-red-200' : 'text-emerald-800 dark:text-emerald-200'"
                        x-text="summary.message">
                        Memuat notifikasi pemasangan...
                    </h3>
                    <p class="mt-1 text-xs"
                       :class="summary.waiting_count > 0 ? 'text-red-700/80 dark:text-red-200/80' : 'text-emerald-700/80 dark:text-emerald-200/80'">
                        Update terakhir: <span x-text="summary.checked_at || '-'"></span>. Sistem mengecek otomatis setiap 10 detik.
                    </p>
                </div>
            </div>

            <a href="{{ $outdoorInstallationUrl }}"
               class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-bold shadow-sm transition"
               :class="summary.waiting_count > 0
                    ? 'bg-red-600 text-white hover:bg-red-700'
                    : 'bg-emerald-600 text-white hover:bg-emerald-700'">
                Buka Pemasangan
            </a>
        </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Menunggu</p>
            <div class="mt-3 text-3xl font-black text-red-600" x-text="summary.waiting_count">0</div>
            <p class="mt-1 text-xs text-gray-500">Belum dikerjakan instalasi</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Sedang Dipasang</p>
            <div class="mt-3 text-3xl font-black text-blue-600" x-text="summary.in_progress_count">0</div>
            <p class="mt-1 text-xs text-gray-500">Dalam proses lapangan</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Selesai Hari Ini</p>
            <div class="mt-3 text-3xl font-black text-emerald-600" x-text="summary.done_today_count">0</div>
            <p class="mt-1 text-xs text-gray-500">Pemasangan selesai</p>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Lewat Target</p>
            <div class="mt-3 text-3xl font-black text-orange-600" x-text="summary.overdue_count">0</div>
            <p class="mt-1 text-xs text-gray-500">Butuh perhatian</p>
        </div>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">Update Pemasangan Terbaru</h3>
                <p class="text-sm text-gray-500">Daftar ini ikut refresh otomatis.</p>
            </div>
        </div>

        <template x-if="summary.latest.length === 0">
            <div class="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-gray-700">
                Belum ada data pemasangan outdoor.
            </div>
        </template>

        <div class="space-y-3">
            <template x-for="item in summary.latest" :key="item.id">
                <a :href="item.url" class="block rounded-xl border border-gray-200 p-4 transition hover:border-brand-300 hover:bg-brand-50 dark:border-gray-800 dark:hover:border-brand-500/40 dark:hover:bg-brand-500/10">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <div class="font-bold text-gray-900 dark:text-white" x-text="item.invoice + ' — ' + item.customer"></div>
                            <div class="mt-1 text-xs text-gray-500" x-text="item.product"></div>
                        </div>
                        <div class="text-left sm:text-right">
                            <div class="text-xs font-bold text-brand-600 dark:text-brand-400" x-text="item.status"></div>
                            <div class="mt-1 text-xs text-gray-500">Target: <span x-text="item.target_date"></span></div>
                        </div>
                    </div>
                </a>
            </template>
        </div>
    </div>
</div>

<script>
    document.addEventListener('alpine:init', function () {
        Alpine.data('instalasiDashboardRealtime', function (summaryUrl) {
            return {
                summaryUrl: summaryUrl,
                timer: null,
                summary: {
                    waiting_count: 0,
                    in_progress_count: 0,
                    done_today_count: 0,
                    overdue_count: 0,
                    latest: [],
                    checked_at: '-',
                    message: 'Memuat notifikasi pemasangan...'
                },

                start() {
                    this.fetchSummary();
                    this.timer = setInterval(() => this.fetchSummary(), 10000);

                    window.addEventListener('beforeunload', () => {
                        if (this.timer) clearInterval(this.timer);
                    });
                },

                async fetchSummary() {
                    try {
                        const response = await fetch(this.summaryUrl, {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });

                        if (!response.ok) {
                            this.summary.message = 'Route realtime belum aktif. Tambahkan route /outdoor-installations/realtime/summary.';
                            this.summary.checked_at = new Date().toLocaleTimeString('id-ID');
                            return;
                        }

                        const data = await response.json();

                        if (data && data.success) {
                            this.summary = {
                                waiting_count: Number(data.waiting_count || 0),
                                in_progress_count: Number(data.in_progress_count || 0),
                                done_today_count: Number(data.done_today_count || 0),
                                overdue_count: Number(data.overdue_count || 0),
                                latest: Array.isArray(data.latest) ? data.latest : [],
                                checked_at: data.checked_at || '-',
                                message: data.message || 'Belum ada pemasangan outdoor baru.'
                            };
                        }
                    } catch (error) {
                        console.error('Gagal mengambil notifikasi instalasi:', error);
                    }
                }
            };
        });
    });
</script>