@props([
    'title',
    'subtitle' => null,
    'meta' => [],
    'size' => 'A4 landscape',
    'legend' => null,
])

@php
    // The logo used to be emitted as its raw storage path — `branding/1/logo/x.png`
    // straight into an <img src> — so it was broken on every printed sheet.
    // BrandingService returns finished URLs and nothing else.
    $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy();
    $brandLogo = $brand->logoUrl;
    $brandPrimary = $brand->primary;
    $academyName = $brand->academyName;
    $footerText = $brand->receiptFooterText;
@endphp
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
    <style>
        /* These sheets live on a wall or in a hand, not on a screen.
           Sized for reading at distance, printed on whatever laser is nearest. */
        @page { size: {{ $size }}; margin: 8mm; }

        *, *::before, *::after { box-sizing: border-box; }

        html, body {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #111827;
            font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
            font-size: 12px;
            line-height: 1.45;
            -webkit-font-smoothing: antialiased;
        }

        /* Without this browsers strip every fill on print and the whole
           colour-coded board arrives as blank boxes. */
        body, .sheet, .band, .cell, .chip, .card {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .sheet { padding: 6mm 4mm; }

        /* ── Masthead ─────────────────────────────────────── */
        .band {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            background: {{ $brandPrimary }};
            color: #fff;
            padding: 10px 16px;
            border-radius: 6px;
        }
        .band .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .band img { height: 34px; width: auto; object-fit: contain; }
        .band .academy { font-size: 12px; font-weight: 600; opacity: .82; }
        .band h1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
        .band .sub { font-size: 12.5px; font-weight: 600; opacity: .92; }
        .band .meta {
            text-align: left;
            font-size: 11px;
            line-height: 1.7;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .band .meta b { font-weight: 700; }

        /* ── Legend ───────────────────────────────────────── */
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 14px;
            padding: 8px 4px 0;
            font-size: 11px;
        }
        .legend .item { display: flex; align-items: center; gap: 5px; }
        .legend .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }

        /* ── Shared table shell ───────────────────────────── */
        table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        thead { display: table-header-group; }   /* repeat header on page 2+ */
        tr { break-inside: avoid; }
        th, td { border: 1px solid #D1D5DB; padding: 5px 6px; vertical-align: top; }
        th {
            background: #F3F4F6;
            font-size: 10.5px;
            font-weight: 700;
            color: #374151;
            text-align: center;
        }
        .time-col {
            width: 62px;
            text-align: center;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            background: #F9FAFB;
            white-space: nowrap;
        }
        .num { font-variant-numeric: tabular-nums; }

        /* ── Footer ───────────────────────────────────────── */
        .foot {
            margin-top: 10px;
            padding-top: 6px;
            border-top: 1px solid #E5E7EB;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            font-size: 10px;
            color: #6B7280;
        }

        /* ── Screen-only toolbar ──────────────────────────── */
        .toolbar {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 10px 14px;
            background: #F9FAFB;
            border-bottom: 1px solid #E5E7EB;
        }
        .toolbar button, .toolbar a {
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid #D1D5DB;
            background: #fff;
            color: #374151;
            cursor: pointer;
            text-decoration: none;
        }
        .toolbar .primary {
            background: {{ $brandPrimary }};
            border-color: {{ $brandPrimary }};
            color: #fff;
        }
        @media print { .toolbar { display: none !important; } }
    </style>
    @stack('styles')
</head>
<body>

<div class="toolbar">
    <a href="javascript:history.back()">{{ __('رجوع') }}</a>
    <button class="primary" onclick="window.print()">{{ __('طباعة') }}</button>
</div>

<div class="sheet">
    <div class="band">
        <div class="who">
            @if($brandLogo)
                <img src="{{ $brandLogo }}" alt="">
            @endif
            <div>
                <div class="academy">{{ $academyName }}</div>
                <h1>{{ $title }}</h1>
                @if($subtitle)<div class="sub">{{ $subtitle }}</div>@endif
            </div>
        </div>
        @if($meta)
            <div class="meta">
                @foreach($meta as $label => $value)
                    <div><b>{{ $value }}</b> — {{ $label }}</div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- An unpassed slot is still an object, so test the rendered string. --}}
    @if(isset($legend) && trim((string) $legend) !== '')
        <div class="legend">{{ $legend }}</div>
    @endif

    {{ $slot }}

    <div class="foot">
        <span>{{ $footerText }}</span>
        <span class="num">{{ __('طُبع في') }} {{ now()->format('Y-m-d H:i') }}</span>
    </div>
</div>

</body>
</html>
