@extends('layouts.portal')

@section('title', 'Panduan akses')
@section('page_heading', 'Panduan akses')
@section('page_subheading', 'Satu portal untuk laporan owner — terpisah dari aplikasi operasional kasir.')

@section('content')
    <div class="mx-auto max-w-3xl space-y-6">
        <div class="rounded-2xl border border-sky-200 bg-sky-50 p-6">
            <h2 class="text-sm font-semibold text-sky-900">URL laporan gabungan (bookmark)</h2>
            <code class="mt-2 block break-all rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800">{{ $appUrl }}/laporan</code>
            <p class="mt-3 text-sm text-slate-600">Laporan dibagi <strong>tab</strong> (URL berbeda per bagian, mis. <code class="rounded bg-slate-100 px-1 text-xs">/laporan/harian</code>) — tidak perlu scroll panjang satu halaman.</p>
            <p class="mt-2 text-sm text-slate-600">Set <code class="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-xs">APP_URL</code> di <code class="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-xs">.env</code> agar sesuai domain publik portal owner (mis. <code class="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-xs">https://owner.sysorder.my.id</code>).</p>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-sm font-semibold text-slate-900">Perbandingan</h2>
            <div class="mt-4 overflow-hidden rounded-lg border border-slate-200">
                <table class="min-w-full divide-y divide-slate-200 text-sm">
                    <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                        <tr>
                            <th class="px-4 py-3">Peran</th>
                            <th class="px-4 py-3">Aplikasi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        <tr>
                            <td class="px-4 py-3 font-medium text-slate-900">Laporan owner (2 usaha)</td>
                            <td class="px-4 py-3">{{ $portalName }} — path <code class="rounded bg-slate-100 px-1.5">/laporan</code></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3">Operasional FnB</td>
                            <td class="px-4 py-3">SysOrder (POS) — bukan laporan gabungan</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3">Operasional refleksologi</td>
                            <td class="px-4 py-3">sysReflex — bukan laporan gabungan</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-sm font-semibold text-slate-900">Langkah singkat</h2>
            <ol class="mt-3 list-decimal space-y-2 pl-5 text-sm text-slate-600">
                <li>Deploy portal ini pada subdomain khusus owner.</li>
                <li>Isi <strong>Pengaturan</strong> di menu samping (atau gunakan <code class="rounded bg-slate-100 px-1">.env</code>).</li>
                <li>Buat user owner (seed dev atau manual produksi).</li>
                <li>Login → buka <strong>Laporan</strong> — selesai.</li>
            </ol>
        </div>
    </div>
@endsection
