@php
/**
 * Notification settings (preferences) card — reused on the account pages of every
 * role and, for staff sub-accounts that have no account page, inline on their
 * notifications page. Self-contained: derives the user's preferences + role itself.
 * Posts to /notifications/prefs which redirects back to the hosting page.
 *
 * $returnTab — optional id of the tab panel hosting this card. A browser never sends
 * the fragment in the Referer, so a host that shows this inside a tab must name it or
 * the save bounces the member back to the first tab and loses their place. Left empty
 * on the pages where this card is not tabbed.
 *
 * Each row reads label-first with the switch right-aligned, and each category carries
 * its own accent chip so the card matches the chip treatment used by every other
 * dashboard card title. The chip is an <i> carrying both the glyph and the chip
 * classes (the form used in the account menu and account nav) rather than the usual
 * <span> wrapper, because `.qm-switch-row span` styles the row's text block as a flex
 * column and would otherwise capture the chip as well.
 */
$prefs = $prefs ?? notification_prefs((int) \App\Support\Auth::id());
$role  = $role ?? (string) (\App\Support\Auth::user()['role'] ?? '');
$cats  = notification_categories();
$returnTab = $returnTab ?? '';
// Hosts that already title the region above this card pass false; the default keeps the
// heading, which is load-bearing wherever the card sits inside a tab panel.
$showHeading = $showHeading ?? true;

// Accent per category, so a member learns the colour alongside the name.
$catAccent = [
    'orders'       => 'blue',
    'deliveries'   => 'violet',
    'reservations' => 'amber',
    'platform'     => 'teal',
    'system'       => 'slate',
    'account'      => 'green',
];
@endphp
<div class="qm-card qm-notif-prefs" id="notification-settings">
    @php // Hosted in a tab (account page / staff inbox): use the shared card-head so this
          // matches the Profile tab. On the customer page ($showHeading false) the region is
          // titled above, so keep the plain intro exactly as it was — no header, no divider.
@endphp
    @if ($showHeading)
    <div class="qm-card-head">
        <div class="d-flex align-items-center gap-2">
            <h2 class="mb-0">{{ t_raw('notif.settings_title') }}</h2>
            <button type="button" class="qm-tip" aria-label="{{ t_raw('notif.settings_intro') }}" data-qm-tip="{{ t_raw('notif.settings_intro') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
        </div>
    </div>
    <div class="qm-card-body">
    @else
    <div class="qm-ops-head">
        <div><p class="qm-ops-sub mb-0">{{ t_raw('notif.settings_intro') }}</p></div>
    </div>
    <div>
    @endif
    <form method="post" action="{{ route('notifications.prefs') }}">
        @csrf
        @if ($returnTab !== '')<input type="hidden" name="return_tab" value="{{ $returnTab }}">@endif
        <label class="qm-switch-row">
            <i class="fas fa-bolt qm-head-chip qm-head-chip--green" aria-hidden="true"></i>
            <span class="flex-grow-1"><strong>{{ t_raw('notif.pref_realtime_title') }}</strong><small>{{ t_raw('notif.pref_realtime_desc') }}</small></span>
            <input class="align-self-center" type="checkbox" name="realtime" value="1"{{ !empty($prefs['realtime']) ? ' checked' : '' }}>
        </label>
        <label class="qm-switch-row">
            <i class="fas fa-volume-up qm-head-chip qm-head-chip--pink" aria-hidden="true"></i>
            <span class="flex-grow-1"><strong>{{ t_raw('notif.pref_sound_title') }}</strong><small>{{ t_raw('notif.pref_sound_desc') }}</small></span>
            <input class="align-self-center" type="checkbox" name="sound" value="1"{{ !empty($prefs['sound']) ? ' checked' : '' }}>
        </label>

        <p class="qm-notif-prefs-lead">{{ t_raw('notif.notify_me_about') }}</p>
        @foreach ($cats as $key => $c)
            @php if (!in_array($role, $c['roles'], true)) { continue; } $col = $c['col']; $accent = $catAccent[$key] ?? 'slate';
@endphp
            <label class="qm-switch-row">
                <i class="fas {{ $c['icon'] }} qm-head-chip qm-head-chip--{{ $accent }}" aria-hidden="true"></i>
                <span class="flex-grow-1"><strong>{{ $c['label'] }}</strong><small>{{ $c['desc'] }}</small></span>
                <input class="align-self-center" type="checkbox" name="{{ $col }}" value="1"{{ !empty($prefs[$col]) ? ' checked' : '' }}>
            </label>
        @endforeach

        @php // Email opt-outs, shown only to roles that actually receive one of these mails.
@endphp
        @php $emailCats = array_filter(notification_email_categories(), static fn ($c) => in_array($role, $c['roles'], true));
@endphp
        @if ($emailCats)
        <p class="qm-notif-prefs-lead">{{ t_raw('notif.email_me_about') }}</p>
        @foreach ($emailCats as $key => $c)
@php $col = $c['col']; $accent = $catAccent[$key] ?? 'slate'; @endphp
            <label class="qm-switch-row">
                <i class="fas {{ $c['icon'] }} qm-head-chip qm-head-chip--{{ $accent }}" aria-hidden="true"></i>
                <span class="flex-grow-1"><strong>{{ $c['label'] }}</strong><small>{{ $c['desc'] }}</small></span>
                <input class="align-self-center" type="checkbox" name="{{ $col }}" value="1"{{ !empty($prefs[$col]) ? ' checked' : '' }}>
            </label>
        @endforeach
        <p class="qm-hint">{{ t_raw('notif.email_security_note') }}</p>
        @endif

        <div class="mt-3 d-flex justify-content-end"><button type="submit" class="qm-btn"><i class="fas fa-save" aria-hidden="true"></i> {{ t_raw('notif.save_preferences_btn') }}</button></div>
    </form>
    </div>
</div>