<!doctype html>
<html lang="id">
<head>
    <?php
        $businessName = \App\Support\AppSettings::businessName();
        $businessLogo = \App\Support\AppSettings::logoUrl();
        $showPortalNav = session()->has('customer_id') || (($previewMode ?? false) === true);
        $portalHomeUrl = (($previewMode ?? false) === true)
            ? ($previewBackUrl ?? route('portal-preview.index'))
            : route('portal.dashboard');
        $portalNavDashboard = (($previewMode ?? false) === true)
            ? ($previewHomeUrl ?? url()->current())
            : route('portal.dashboard');
        $portalRequestUrl = $portalRequestUrl ?? ((($previewMode ?? false) === true) ? ($portalNavDashboard.'#requests') : route('portal.requests'));
        $portalAccountUrl = $portalAccountUrl ?? ((($previewMode ?? false) === true) ? ($portalNavDashboard.'#account') : route('portal.account'));
    ?>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0f172a">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($title ? $title.' - '.$businessName : 'Portal '.$businessName); ?></title>
    <link rel="manifest" href="/portal-manifest.webmanifest">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-slate-100 text-slate-900">
<main class="mx-auto min-h-screen max-w-md bg-slate-100 px-4 pb-28 pt-5">
    <header class="mb-5 rounded-2xl bg-white p-4 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <a href="<?php echo e($portalHomeUrl); ?>" class="flex min-w-0 items-center gap-3">
                <span class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl border bg-slate-50">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($businessLogo): ?>
                        <img src="<?php echo e($businessLogo); ?>" alt="<?php echo e($businessName); ?>" class="h-10 w-10 object-contain">
                    <?php else: ?>
                        <span class="text-base font-bold"><?php echo e(strtoupper(substr($businessName, 0, 1))); ?></span>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </span>
                <span class="min-w-0">
                    <span class="block truncate text-base font-semibold"><?php echo e($businessName); ?></span>
                    <span class="block truncate text-xs text-slate-500">Portal pelanggan</span>
                </span>
            </a>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session()->has('customer_id')): ?>
                <form method="post" action="<?php echo e(route('portal.logout')); ?>"><?php echo csrf_field(); ?><button class="rounded-md border bg-white px-3 py-1.5 text-xs">Logout</button></form>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    </header>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session()->has('customer_id') && (($previewMode ?? false) !== true)): ?>
        <div class="-mt-2 mb-4 grid grid-cols-2 gap-2">
            <button type="button" id="portal-install-button" class="rounded-xl border bg-white px-3 py-2 text-xs font-medium text-slate-700 shadow-sm">Install PWA</button>
            <button type="button" id="portal-notification-button" class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-medium text-white shadow-sm">Aktifkan Notifikasi</button>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($showPortalNav): ?>
        <nav class="fixed inset-x-0 bottom-0 z-20 mx-auto max-w-md border-t border-slate-200 bg-white/95 px-3 pb-3 pt-2 shadow-[0_-10px_30px_rgba(15,23,42,.08)] backdrop-blur">
            <div class="grid grid-cols-4 gap-1 text-[11px] font-medium">
                <a href="<?php echo e($portalNavDashboard); ?>" class="flex flex-col items-center gap-1 rounded-xl px-2 py-2 <?php echo e(request()->routeIs('portal.dashboard') || request()->routeIs('portal-preview.customer') ? 'bg-slate-900 text-white' : 'text-slate-600'); ?>">
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 10 9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/></svg>
                    <span>Beranda</span>
                </a>
                <a href="<?php echo e($portalNavDashboard); ?>#orders" class="flex flex-col items-center gap-1 rounded-xl px-2 py-2 <?php echo e(request()->routeIs('portal.orders.show') || request()->routeIs('portal-preview.order') ? 'bg-slate-900 text-white' : 'text-slate-600'); ?>">
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 3h10l2 4v14H5V7z"/><path d="M7 7h10"/><path d="M8 12h8"/><path d="M8 16h5"/></svg>
                    <span>Nota</span>
                </a>
                <a href="<?php echo e($portalRequestUrl); ?>" class="flex flex-col items-center gap-1 rounded-xl px-2 py-2 <?php echo e(request()->routeIs('portal.requests') || request()->routeIs('portal-preview.requests') ? 'bg-slate-900 text-white' : 'text-slate-600'); ?>">
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a4 4 0 0 1-4 4H7l-4 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/><path d="M8 9h8"/><path d="M8 13h5"/></svg>
                    <span>Request</span>
                </a>
                <a href="<?php echo e($portalAccountUrl); ?>" class="flex flex-col items-center gap-1 rounded-xl px-2 py-2 <?php echo e(request()->routeIs('portal.account') || request()->routeIs('portal-preview.account') ? 'bg-slate-900 text-white' : 'text-slate-600'); ?>">
                    <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/></svg>
                    <span>Akun</span>
                </a>
            </div>
        </nav>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('status')): ?>
        <div class="mb-4 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800"><?php echo e(session('status')); ?></div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
        <div class="mb-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800"><?php echo e($errors->first()); ?></div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php echo e($slot); ?>

</main>
<script>
const portalVapidPublicKey = <?php echo json_encode(config('services.webpush.vapid_public_key'), 15, 512) ?>;
const portalCsrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
let portalInstallPrompt = null;

window.addEventListener('beforeinstallprompt', event => {
    event.preventDefault();
    portalInstallPrompt = event;
});

document.getElementById('portal-install-button')?.addEventListener('click', async () => {
    if (portalInstallPrompt) {
        portalInstallPrompt.prompt();
        await portalInstallPrompt.userChoice;
        portalInstallPrompt = null;
        return;
    }

    alert('Jika tombol install belum muncul, gunakan menu browser lalu pilih Install app / Tambahkan ke layar utama.');
});

document.getElementById('portal-notification-button')?.addEventListener('click', async () => {
    if (!('Notification' in window) || !('serviceWorker' in navigator)) {
        alert('Browser ini belum mendukung notifikasi web.');
        return;
    }

    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
        alert('Izin notifikasi belum aktif.');
        return;
    }

    const registration = await navigator.serviceWorker.ready;

    if (portalVapidPublicKey && registration.pushManager) {
        const subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(portalVapidPublicKey),
        });

        await fetch(<?php echo json_encode(route('portal.push-subscriptions.store'), 15, 512) ?>, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': portalCsrfToken,
            },
            body: JSON.stringify(subscription.toJSON()),
        });
    }

    new Notification('Notifikasi aktif', { body: 'Update laundry akan muncul di portal pelanggan.' });
});

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = atob(base64);
    return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
}

navigator.serviceWorker?.register('/portal-service-worker.js');
</script>
</body>
</html>
<?php /**PATH /Users/dedehermawan/Dokumen/project/laundry/resources/views/layouts/portal.blade.php ENDPATH**/ ?>