@extends('layouts.dashboard')

@section('content')
@php
use App\Models\Reservation;
/** @var iterable $list @var string $date @var string $q @var array $tableLabels @var array $labels */
$tableLabels = $tableLabels ?? [];
$labels = $labels ?? [];
// Occasion id => row (for list pills) and the active set (for the legend / dropdowns).
$labelMap = [];
$activeLabels = [];
foreach ($labels as $lbl) {
    $labelMap[(int) $lbl['id']] = $lbl;
    if ((int) ($lbl['is_active'] ?? 1) === 1) {
        $activeLabels[] = $lbl;
    }
}
// Friendly date for the empty state / chips (e.g. "Jun 26, 2026").
$dateLabel = fmt_day($date);
// Action button labels keyed by the target status.
$actionLabels = ['confirmed' => t_raw('vendor.reservations.action_confirm'), 'seated' => t_raw('vendor.reservations.action_seat'), 'completed' => t_raw('vendor.reservations.action_complete'), 'cancelled' => t_raw('common.cancel'), 'no_show' => t_raw('vendor.reservations.action_no_show'), 'waitlisted' => t_raw('vendor.reservations.action_waitlist')];
// Status changes that should ask for confirmation first.
$destructive  = ['cancelled', 'no_show'];
// Configuring occasions and closed dates is a management-level setting, not a host
// task. The controller already blocks other roles (requireManagement); we also hide the
// controls here so host staff aren't shown actions they cannot perform.
$isManagement = \App\Support\Auth::can('reservations.manage');
// Is the day's list narrowed by anything? Drives the Reset link's state and the empty
// state below, which otherwise announces "nothing is booked for this day" on a day
// that has bookings sitting outside the narrowed set.
$hasFilters = $q !== '' || ($filters['status'] ?? '') !== '' || ($filters['source'] ?? '') !== '' || (int) ($filters['occasion'] ?? 0) > 0;
// Carry the active date + search + status / source / occasion onto the export link.
$qs = http_build_query(array_filter([
    'date'     => $date,
    'status'   => $filters['status'] ?? '',
    'source'   => $filters['source'] ?? '',
    'occasion' => (int) ($filters['occasion'] ?? 0),
    'q'        => $q,
], static fn ($v) => (string) $v !== '' && (string) $v !== '0'));
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot (leaves the table card header for the
//      title + any table-scoped utility). ob_start captures the button HTML for the layout slot.
ob_start();
@endphp
<a class="qm-btn" href="{!! url('/vendor/reservations/new?date=' . e($date)) !!}"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.reservations.new_btn') }}</a>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-1"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.reservations.list_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.reservations.subtitle') }}</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <div class="qm-seg" role="group" aria-label="{{ t_raw('vendor.reservations.view_toggle_aria') }}">
            <button type="button" class="qm-seg-btn active" id="res-view-list" data-res-view="list" aria-pressed="true"><i class="fas fa-list" aria-hidden="true"></i> {{ t_raw('vendor.reservations.view_list') }}</button>
            <button type="button" class="qm-seg-btn" id="res-view-calendar" data-res-view="calendar" aria-pressed="false"><i class="fas fa-calendar-alt" aria-hidden="true"></i> {{ t_raw('vendor.reservations.view_calendar') }}</button>
        </div>
        <a class="qm-btn qm-btn-outline" href="{{ url('/vendor/reservations/export' . ($qs !== '' ? '?' . $qs : '')) }}"><i class="fas fa-file-csv me-2" aria-hidden="true"></i>{{ t_raw('common.export_csv') }}</a>
        @if ($isManagement)
        <button type="button" class="qm-btn qm-btn-outline" data-bs-toggle="modal" data-bs-target="#occasionsModal"><i class="fas fa-tags me-1" aria-hidden="true"></i> {{ t_raw('vendor.reservations.manage_occasions_btn') }}</button>
        @endif
        <button type="button" class="qm-btn qm-btn-outline" data-bs-toggle="modal" data-bs-target="#walkinModal"><i class="fas fa-walking me-1" aria-hidden="true"></i> {{ t_raw('status.reservation_source.walk_in') }}</button>
    </div>
</div>

<div class="qm-card" id="res-calendar-card" hidden>
    <div id="res-calendar" data-calendar-url="{{ route('vendor.reservations.calendar-data') }}" data-reschedule-url="{{ route('vendor.reservations.reschedule') }}"></div>
</div>

<div id="res-list-view">
<div class="qm-card">
    @php
    $filters = $filters ?? ['status' => '', 'source' => '', 'occasion' => 0];
    $sources = ['staff' => t_raw('status.reservation_source.staff'), 'website' => t_raw('status.reservation_source.website'), 'phone' => t_raw('status.reservation_source.phone'), 'walk_in' => t_raw('status.reservation_source.walk_in'), 'admin' => t_raw('status.reservation_source.admin')];
@endphp
    <form method="get" action="{{ route('vendor.reservations') }}" class="qm-order-filters">
        @partial('filter-collapse')
        <div class="qm-of-field">
            <label class="qm-of-label" for="res-date">{{ t_raw('common.date') }}</label>
            <input type="date" class="form-control" id="res-date" name="date" value="{{ $date }}" data-flatpickr data-fp-mode="date">
        </div>
        <div class="qm-of-field qm-of-grow">
            <label class="qm-of-label" for="res-q">{{ t_raw('common.search') }}</label>
            @php /* type="search", as every other filter bar's search box is: qm-table-tools.js
                     routes as-you-type filtering through `field.type === 'search'` only, so as a
                     plain text box this one was invisible to that handler and re-queried on blur
                     instead — via the change fallback written for the selects and date fields. */
@endphp
            <input type="search" class="form-control" id="res-q" name="q" value="{{ $q }}" placeholder="{{ t_raw('vendor.reservations.search_placeholder') }}">
        </div>
        <div class="qm-of-field">
            <label class="qm-of-label" for="res-fstatus">{{ t_raw('common.status') }}</label>
            <select class="form-select" id="res-fstatus" name="status">
                <option value="">{{ t_raw('common.all') }}</option>
                @foreach (Reservation::statuses() as $st)
                <option value="{{ $st }}"{{ ($filters['status'] ?? '') === $st ? ' selected' : '' }}>{{ Reservation::statusLabel($st) }}</option>
                @endforeach
            </select>
        </div>
        <div class="qm-of-field">
            <label class="qm-of-label" for="res-fsource">{{ t_raw('vendor.reservations.filter_source_label') }}</label>
            <select class="form-select" id="res-fsource" name="source">
                <option value="">{{ t_raw('common.all') }}</option>
                @foreach ($sources as $sv => $sl)
                <option value="{{ $sv }}"{{ ($filters['source'] ?? '') === $sv ? ' selected' : '' }}>{{ $sl }}</option>
                @endforeach
            </select>
        </div>
        @if ($activeLabels)
        <div class="qm-of-field">
            <label class="qm-of-label" for="res-foccasion">{{ t_raw('vendor.reservations.occasion_label') }}</label>
            <select class="form-select" id="res-foccasion" name="occasion">
                <option value="0">{{ t_raw('common.all') }}</option>
                @foreach ($activeLabels as $lbl)
                <option value="{{ (int) $lbl['id'] }}"{{ (int) ($filters['occasion'] ?? 0) === (int) $lbl['id'] ? ' selected' : '' }}>{{ $lbl['name'] }}</option>
                @endforeach
            </select>
        </div>
        @endif
        @php /* .qm-of-actions, not a bare flex row: this is the same actions slot every other
                 filter bar uses, and it carries the margin that pushes Reset to the far end. */
@endphp
        <div class="qm-of-actions">
            <a class="qm-filter-reset{{ $hasFilters ? ' is-active' : '' }}" href="{!! url('/vendor/reservations?date=' . e($date)) !!}">{{ t_raw('common.reset') }}</a>
        </div>
    </form>
    @php /* No status-count chip strip here: it duplicated the Status select in the
             filter row above as a second way to apply the same filter. */
@endphp
</div>

@if (count($list) === 0)
<div class="qm-card">
    <div class="qm-empty">
        <i class="fas fa-calendar-day d-block" aria-hidden="true"></i>
        @php /* An empty $list means one of two different things and they must not read alike: the
                 day is genuinely free, or the filters matched nothing on a day that is fully booked.
                 Same two-branch shape as the admin twin (admin/reservations.php:100), and when the
                 filters are what emptied it the useful action is clearing them, not adding a booking. */
@endphp
        @if ($hasFilters)
        <h3>{{ t_raw('vendor.reservations.empty_filtered_title', [':date' => $dateLabel]) }}</h3>
        <p>{{ t_raw('vendor.reservations.empty_filtered') }}</p>
        <a class="qm-btn" href="{!! url('/vendor/reservations?date=' . e($date)) !!}">{{ t_raw('common.reset') }}</a>
        @else
        <h3>{{ t_raw('vendor.reservations.empty_title', [':date' => $dateLabel]) }}</h3>
        <p>{{ t_raw('vendor.reservations.empty_text') }}</p>
        <a class="qm-btn" href="{!! url('/vendor/reservations/new?date=' . e($date)) !!}">{{ t_raw('vendor.reservations.add_reservation_btn') }}</a>
        @endif
    </div>
</div>
@else
<div class="qm-card">
    <h2 class="mb-3">{{ t_raw('vendor.reservations.list_table_heading', [':date' => $dateLabel]) }}</h2>
    <div class="table-responsive" role="region" tabindex="0" aria-label="{{ t_raw('vendor.reservations.table_scroll_aria_prefix', [':date' => $dateLabel]) }} {{ t_raw('common.scroll_horizontal_hint') }}">
    @php /* Time renders via fmt_clock ("3:40 PM"); Date.parse() can't read that format,
       so that column carries no data-sort. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr><th data-sort="text">{{ t_raw('vendor.reservations.col_booking') }}</th><th>{{ t_raw('common.time') }}</th><th data-sort="text">{{ t_raw('vendor.reservations.col_guest') }}</th><th data-sort="number">{{ t_raw('vendor.reservations.party_label') }}</th><th data-sort="text">{{ t_raw('vendor.reservations.table_label') }}</th><th data-sort="text">{{ t_raw('vendor.reservations.col_source') }}</th><th data-sort="text">{{ t_raw('common.note') }}</th><th data-sort="text">{{ t_raw('common.status') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody>
            @foreach ($list as $r)
            @php
            $rid = (int) $r['id'];
            $status = (string) $r['status'];
            $tableId = (int) ($r['table_id'] ?? 0);
            $transitions = Reservation::transitions()[$status] ?? [];
            $canEdit = !in_array($status, ['completed', 'cancelled', 'no_show'], true);
            // A walk-in seated without a name is stored EMPTY, not NULL (guest_name is NOT NULL,
            // and walkIn() writes ''), so `?? guest_fallback` was a guard that could never fire:
            // the monogram beside the name came out as "#" while the name beside it read "Guest".
            // Decided once here, on the trimmed value, and used by both — the same way the
            // dashboard's today-reservations card does it.
            $rName = trim((string) ($r['guest_name'] ?? '')) !== ''
                ? (string) $r['guest_name']
                : t_raw('vendor.reservations.guest_fallback');
@endphp
            <tr>
                <td>@if ($canEdit)<a class="qm-tbl-link" href="{{ url('/vendor/reservations/' . $rid . '/edit') }}"><strong>#{{ $rid }}</strong></a>@else<strong class="text-muted">#{{ $rid }}</strong>@endif</td>
                <td class="qm-cell-body">{!! fmt_clock($r['reserved_at']) !!}</td>
                <td>
                    <div class="qm-tbl-id">
                        {!! brandmark_html($r['avatar'] ?? null, $rName, 'md', 'qm-brandmark--round') !!}
                        <div class="qm-tbl-id-text">
                            <div class="qm-resv-nameline">
                                <strong>{{ $rName }}</strong>
                                @php
$lid = (int) ($r['label_id'] ?? 0);
@endphp
@if ($lid && isset($labelMap[$lid]))
                                <span class="qm-occasion-chip qm-occasion-chip-sm"><span class="qm-occasion-dot qm-swatch" style="--qm-sw: {{ $labelMap[$lid]['color'] }}"></span>{{ $labelMap[$lid]['name'] }}</span>
                                @endif
                            </div>
                            @if (!empty($r['guest_phone']))<small>{{ $r['guest_phone'] }}</small>@endif
                            @if (!empty($r['guest_email']))<small>{{ $r['guest_email'] }}</small>@endif
                            @php /* M46. notified_at is the guard that stops a second "your table is
                                      ready"; showing it is how a host answers "was that guest told?"
                                      without opening the SMS log. Same <small> line as the two above. */
@endphp
                            @if (!empty($r['notified_at']))<small>{!! t_raw('vendor.reservations.notified_at', [':time' => fmt_clock($r['notified_at'])]) !!}</small>@endif
                        </div>
                    </div>
                </td>
                <td>{{ (int) $r['party_size'] }}</td>
                <td>{!! or_dash($tableId ? ($tableLabels[$tableId] ?? null) : null) !!}</td>
                @php $srcKey = (string) ($r['source'] ?? 'staff');
@endphp
                <td class="qm-resv-srccol"><span class="qm-src-pill qm-src-{{ $srcKey }}" title="{{ t_raw('vendor.reservations.booked_via_title', [':source' => Reservation::sourceLabel($srcKey)]) }}"><i class="fas {{ Reservation::sourceIcon($srcKey) }}" aria-hidden="true"></i> {{ Reservation::sourceLabel($srcKey) }}</span></td>
                <td class="qm-resv-notecol">
                    @if (!empty($r['special_requests']))<div class="qm-cell-sub">{{ $r['special_requests'] }}</div>@endif
                    @if (!empty($r['staff_notes']))<div class="qm-cell-sub qm-staff-note"><i class="fas fa-lock" aria-hidden="true"></i> {{ $r['staff_notes'] }}</div>@endif
                    @if (empty($r['special_requests']) && empty($r['staff_notes'])){!! dash() !!}@endif
                </td>
                <td><span class="qm-pill {{ Reservation::statusPill($status) }}">{{ Reservation::statusLabel($status) }}</span></td>
                @php

                $advance = [];
                foreach ($transitions as $to) {
                    $isDestructive = in_array($to, $destructive, true);
                    $advance[] = [
                        'label'  => $actionLabels[$to] ?? ucfirst($to),
                        'icon'   => $isDestructive ? 'fa-ban' : 'fa-arrow-right',
                        'danger' => $isDestructive,
                        'form'   => [
                            'action'  => '/vendor/reservations/status',
                            'fields'  => ['id' => $rid, 'date' => $date, 'status' => $to],
                            'confirm' => $isDestructive ? t_raw('vendor.reservations.confirm_status_body', [':action' => $actionLabels[$to] ?? $to]) : '',
                        ],
                    ];
                }
@endphp
                <td class="qm-actions-cell">
                    @partial('row-actions', ['actions' => array_merge(
                        [$canEdit ? ['label' => t_raw('vendor.reservations.edit_aria'), 'icon' => 'fa-pen', 'href' => '/vendor/reservations/' . $rid . '/edit', 'primary' => true] : null],
                        $advance
                    )])
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    @php if (!empty($pagination)) { echo partial('table-toolbar', ['pager' => $pagination]); }
@endphp
</div>
@endif
</div>

@if ($activeLabels)
<div class="qm-occasion-legend mt-3">
    <span class="qm-occasion-legend-lbl">{{ t_raw('vendor.reservations.occasions_legend') }}</span>
    @foreach ($activeLabels as $lbl)
    <span class="qm-occasion-chip"><span class="qm-occasion-dot qm-swatch" style="--qm-sw: {{ $lbl['color'] }}"></span>{{ $lbl['name'] }}</span>
    @endforeach
</div>
@endif

<!-- Manage occasions modal (matches the project's table + modal styling) -->
<div class="modal fade" id="occasionsModal" tabindex="-1" aria-labelledby="occasionsModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title h5" id="occasionsModalTitle">{{ t_raw('vendor.reservations.occasions_modal_title') }}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button>
      </div>
      <div class="modal-body">
        <div class="table-responsive" role="region" tabindex="0" aria-label="{{ t_raw('vendor.reservations.occasions_table_scroll_aria_prefix') }} {{ t_raw('common.scroll_horizontal_hint') }}">
        <table class="qm-table">
            <thead><tr><th>{{ t_raw('vendor.reservations.occasion_label') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
            <tbody>
                @foreach ($labels as $lbl)
                <tr>
                    <td>
                        <span class="qm-occasion-chip"><span class="qm-occasion-dot qm-swatch" style="--qm-sw: {{ $lbl['color'] }}"></span>{{ $lbl['name'] }}</span>
                        @if ((int) $lbl['is_protected'] === 1) <span class="qm-pill qm-pill-grey">{{ t_raw('vendor.reservations.default_pill') }}</span>@endif
                    </td>
                    <td class="qm-actions-cell">
                        <button type="button" class="qm-icon-btn" aria-label="{{ t_raw('vendor.reservations.edit_occasion_aria') }}" data-occasion-edit data-id="{{ (int) $lbl['id'] }}" data-name="{{ $lbl['name'] }}" data-color="{{ $lbl['color'] }}" data-protected="{{ (int) $lbl['is_protected'] }}"><i class="fas fa-pen" aria-hidden="true"></i></button>
                        @if ((int) $lbl['is_protected'] !== 1)
                        <form method="post" action="{{ route('vendor.reservations.label.delete') }}" class="d-inline" data-confirm="{{ t_raw('vendor.reservations.delete_occasion_confirm') }}" data-confirm-title="{{ t_raw('vendor.reservations.delete_occasion_title') }}">@csrf<input type="hidden" name="id" value="{{ (int) $lbl['id'] }}"><button type="submit" class="qm-icon-btn danger" aria-label="{{ t_raw('vendor.reservations.delete_occasion_aria') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button></form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>

        <form method="post" action="{{ route('vendor.reservations.label.save') }}" id="occasionForm" class="mt-3"
              data-title-add="{{ t_raw('vendor.reservations.occasion_form_add_title') }}" data-title-edit="{{ t_raw('vendor.reservations.occasion_form_edit_title') }}"
              data-submit-add="{{ t_raw('vendor.reservations.add_occasion_btn') }}" data-submit-edit="{{ t_raw('vendor.reservations.save_changes_btn') }}">
            @csrf
            <input type="hidden" name="id" id="occasion-id" value="">
            <input type="hidden" name="color" id="occasion-color" value="#ec4899">
            <h3 class="h6 mb-2" id="occasion-form-title">{{ t_raw('vendor.reservations.occasion_form_add_title') }}</h3>
            <div class="mb-3">
                <label class="form-label" for="occasion-name">{{ t_raw('vendor.reservations.field_occasion_name') }}</label>
                <input type="text" class="form-control" id="occasion-name" name="name" maxlength="40" placeholder="{{ t_raw('vendor.reservations.occasion_name_placeholder') }}" required>
            </div>
            <label class="form-label">{{ t_raw('vendor.reservations.colour_label') }}</label>
            <div class="qm-swatches" id="occasion-swatches" role="group" aria-label="{{ t_raw('vendor.reservations.occasion_colour_aria') }}">
                @foreach (['#ec4899', '#f43f5e', '#f59e0b', '#f97316', '#10b981', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#64748b'] as $c)
                <button type="button" class="qm-swatch" data-color="{{ $c }}" style="--qm-sw: {{ $c }}" aria-label="{{ t_raw('vendor.reservations.swatch_colour_aria_prefix') }} {{ $c }}" aria-pressed="false"></button>
                @endforeach
            </div>
            <div class="d-flex gap-2 mt-3 justify-content-end">
                <button type="submit" class="qm-btn" id="occasion-submit">{{ t_raw('vendor.reservations.add_occasion_btn') }}</button>
                <button type="button" class="qm-btn qm-btn-outline" id="occasion-reset" hidden>{{ t_raw('vendor.reservations.cancel_edit_btn') }}</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Walk-in quick-seat modal -->
<div class="modal fade" id="walkinModal" tabindex="-1" aria-labelledby="walkinModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" method="post" action="{{ route('vendor.reservations.walk-in') }}">
      @csrf
      <div class="modal-header">
        <h2 class="modal-title h5" id="walkinModalTitle">{{ t_raw('vendor.reservations.walkin_modal_title') }}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
            <div class="col-7">
                <label class="form-label" for="wi-name">{{ t_raw('vendor.reservations.guest_name_label') }} <span class="text-muted">{{ t_raw('common.optional') }}</span></label>
                @php /* An example NAME, not the word "Walk-in". The SOURCE label was being reused as
                         the placeholder, which reads as though the guest were called Walk-in — and
                         walk-in is already recorded as the reservation's source. Same key the full
                         reservation form uses for this field. */
@endphp
                <input type="text" class="form-control" id="wi-name" name="guest_name" maxlength="120" placeholder="{{ t_raw('vendor.settings.contact_name_placeholder') }}">
            </div>
            <div class="col-5">
                <label class="form-label" for="wi-party">{{ t_raw('vendor.reservations.party_label') }}</label>
                <input type="number" class="form-control" id="wi-party" name="party_size" min="1" value="2" required placeholder="{{ t_raw('common.placeholder_count') }}">
            </div>
            <div class="col-12">
                <label class="form-label" for="wi-table">{{ t_raw('vendor.reservations.table_label') }}</label>
                @php /* data-choices: type-to-filter plus a scrolling list — the treatment the cuisine
                         and timezone selects already get. A room with thirty tables is unusable as a
                         plain select. */
@endphp
                <select class="form-select" id="wi-table" name="table_id" data-choices data-placeholder="{{ t_raw('vendor.reservations.table_label') }}">
                    <option value="">{{ t_raw('vendor.reservations.no_table_option') }}</option>
                    @foreach ($tableLabels as $tid => $tlabel)
                    <option value="{{ (int) $tid }}">{{ $tlabel }}</option>
                    @endforeach
                </select>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button>
        <button type="submit" name="waitlist" value="1" class="qm-btn qm-btn-outline"><i class="fas fa-clock me-1" aria-hidden="true"></i> {{ t_raw('vendor.reservations.add_waitlist_btn') }}</button>
        <button type="submit" class="qm-btn">{{ t_raw('vendor.reservations.seat_now_btn') }}</button>
      </div>
    </form>
  </div>
</div>
<script>
(function () {
  var form = document.getElementById('occasionForm');
  if (!form) { return; }
  var idF = document.getElementById('occasion-id'), colorF = document.getElementById('occasion-color'),
      nameF = document.getElementById('occasion-name'), submit = document.getElementById('occasion-submit'),
      reset = document.getElementById('occasion-reset'), title = document.getElementById('occasion-form-title'),
      swatches = document.querySelectorAll('#occasion-swatches .qm-swatch');
  function pick(color) {
    colorF.value = color;
    swatches.forEach(function (s) {
      var sel = (s.getAttribute('data-color') || '').toLowerCase() === color.toLowerCase();
      s.classList.toggle('is-sel', sel);
      s.setAttribute('aria-pressed', sel ? 'true' : 'false');
    });
  }
  swatches.forEach(function (s) { s.addEventListener('click', function () { pick(s.getAttribute('data-color')); }); });
  var titleAdd = form.getAttribute('data-title-add') || 'Add an occasion';
  var titleEdit = form.getAttribute('data-title-edit') || 'Edit occasion';
  var submitAdd = form.getAttribute('data-submit-add') || 'Add occasion';
  var submitEdit = form.getAttribute('data-submit-edit') || 'Save changes';
  function toAdd() { idF.value = ''; nameF.value = ''; nameF.disabled = false; pick('#ec4899'); submit.textContent = submitAdd; title.textContent = titleAdd; reset.hidden = true; }
  document.querySelectorAll('[data-occasion-edit]').forEach(function (b) {
    b.addEventListener('click', function () {
      idF.value = b.getAttribute('data-id');
      nameF.value = b.getAttribute('data-name');
      nameF.disabled = b.getAttribute('data-protected') === '1';
      pick(b.getAttribute('data-color'));
      submit.textContent = submitEdit;
      title.textContent = titleEdit;
      reset.hidden = false;
      nameF.focus();
    });
  });
  reset.addEventListener('click', toAdd);
  pick('#ec4899');
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection