@extends('layouts.dashboard')

@section('content')
@php

/**
 * Vendor floor-plan / table tracking — the workspace edition.
 *
 * The floor is a zoomable, pannable STAGE (panzoom) holding a fixed-size room;
 * tables render as top-down furniture and are dragged with grid snapping
 * (interact.js) while layout editing is ON. Service mode (default) is
 * read-and-act: click a table for its schedule, cycle its status in place.
 * Editing happens in a live inspector panel, not a popup: select a table (or
 * stamp a new one from the shape palette) and the form beside the floor is it.
 *
 * The server contract is unchanged: /save (form POST, accepts grid_x/grid_y on
 * create), /position (AJAX drag saves), /status (AJAX cycle), /delete, zone
 * CRUD — all the same endpoints, payloads and language keys as before.
 *
 * @var array $zones        Zone rows for this restaurant (tabs).
 * @var array $tables       ALL table rows (every zone) - filtered per zone below.
 * @var int   $activeZoneId Currently selected zone id (0 if none).
 * @var array $counts       Status -> count map for the legend.
 */
use App\Models\Table;

$statuses = Table::statuses();            // key => label

// Tables grouped per zone so we can show per-tab counts and render the active zone.
$byZone = [];
foreach ($tables as $t) {
    $byZone[(int) $t['zone_id']][] = $t;
}
$activeTables = $byZone[$activeZoneId] ?? [];

// Merge units: tables sharing a merge_group are one seating unit. Map each code to
// its member labels (across every zone) so a card can name its joined partner(s)
// and the timeline can flag joined rows — the connection is shown, not just implied.
$mergeMembers = [];                       // code => [label, ...]
foreach ($tables as $t) {
    $mg = (string) ($t['merge_group'] ?? '');
    if ($mg !== '') { $mergeMembers[$mg][] = (string) $t['label']; }
}
$mergePartners = static function (string $code, string $self) use ($mergeMembers, $__env): array {
    return array_values(array_filter($mergeMembers[$code] ?? [], static fn ($l) => $l !== $self));
};

/**
 * Chair slots for the furniture rendering: a table draws as a top-down tabletop
 * with its chairs placed around it by shape + seat count (the way reservation
 * floor plans draw a room). Returns one entry per DRAWN chair — display capped
 * at 10 so a banquet table stays readable; the true count still prints on the top.
 *  round      -> ['a' => degrees]                    (radial placement)
 *  square/rect-> ['side' => top|bottom|left|right, 'i' => n, 'of' => rowCount]
 */
$chairSlots = static function (string $shape, int $seats): array {
    $n = max(1, min(10, $seats));
    if ($shape === 'round') {
        $out = [];
        for ($i = 0; $i < $n; $i++) { $out[] = ['a' => (int) round($i * 360 / $n)]; }
        return $out;
    }
    $rowCap = $shape === 'rectangle' ? 3 : 2;
    $top = $bottom = $ends = [];
    for ($i = 0; $i < $n; $i++) {
        if (count($top) < $rowCap && count($top) <= count($bottom)) { $top[] = 1; }
        elseif (count($bottom) < $rowCap) { $bottom[] = 1; }
        elseif (count($ends) < 2) { $ends[] = 1; }
        else { break; }
    }
    $slots = [];
    foreach ($top as $i => $unused) { $slots[] = ['side' => 'top', 'i' => $i, 'of' => count($top)]; }
    foreach ($bottom as $i => $unused) { $slots[] = ['side' => 'bottom', 'i' => $i, 'of' => count($bottom)]; }
    if (isset($ends[0])) { $slots[] = ['side' => 'left', 'i' => 0, 'of' => 1]; }
    if (isset($ends[1])) { $slots[] = ['side' => 'right', 'i' => 0, 'of' => 1]; }
    return $slots;
};

// Room size: generous fixed logical canvas; existing grid_x/grid_y coordinates
// land unchanged (same origin, same pixels — the stage merely zooms the view).
$roomW = 2400;
$roomH = 1400;
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot. In the workspace this enters
//      layout editing with the shape palette open, ready to stamp a table.
ob_start();
@endphp
<button type="button" class="qm-btn" data-fp-add {!! count($zones) ? '' : 'disabled title="' . t('vendor.tables.add_table_disabled_title') . '"' !!}>
    <i class="fas fa-plus" aria-hidden="true"></i> {{ t_raw('vendor.tables.add_table_btn') }}
</button>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

@if (!count($zones))
    <div class="qm-card">
        <div class="qm-empty">
            <i class="fas fa-vector-square d-block" aria-hidden="true"></i>
            <p>{{ t_raw('vendor.tables.empty_zones_hint') }}</p>
            <button type="button" class="qm-btn" data-bs-toggle="modal" data-bs-target="#zoneModal" data-zone-add>{{ t_raw('vendor.tables.add_zone_btn') }}</button>
        </div>
    </div>
@else

<div class="qm-tables-views" data-tables-view="floor">
<section class="qm-tv-floor" aria-label="{{ t_raw('vendor.tables.view_floor') }}">

<div class="qm-fp" id="qm-fp" data-active-zone="{{ $activeZoneId }}">
    @php /* -------------------------------------------------- left tool rail ---
             The editor chrome: shape stamps (always visible — clicking one arms
             the ghost and switches edit mode on itself), the layout toggle, and
             the zoom column. One column, icon-first, like every canvas tool. */
@endphp
    <aside class="qm-fp-rail" aria-label="{{ t_raw('vendor.tables.view_label') }}">
        <div class="qm-fp-rail-grp" id="qm-fp-palette">
            <span class="qm-fp-rail-cap">{{ t_raw('vendor.tables.add_table_btn') }}</span>
            @php $shapeIcons = ['square' => 'qm-shape-ico-square', 'rectangle' => 'qm-shape-ico-rect', 'round' => 'qm-shape-ico-round'];
@endphp
            @foreach (Table::shapes() as $sKey => $sLabel)
            <button type="button" class="qm-fp-stamp" data-fp-stamp="{{ $sKey }}" title="{{ t_raw('vendor.tables.shape_table_suffix', [':shape' => $sLabel]) }}">
                <span class="qm-shape-ico {{ $shapeIcons[$sKey] }}" aria-hidden="true"></span>
                <span class="qm-fp-stamp-name">{{ $sLabel }}</span>
            </button>
            @endforeach
        </div>
        <div class="qm-fp-rail-grp">
            <button type="button" class="qm-fp-mode" data-fp-mode aria-pressed="false" title="{{ t_raw('common.edit') }}">
                <i class="fas fa-pencil-ruler" aria-hidden="true"></i>
                <span class="qm-fp-stamp-name">{{ t_raw('common.edit') }}</span>
            </button>
            <button type="button" class="qm-fp-lock" data-fp-lock aria-pressed="false" title="{{ t_raw('vendor.tables.lock_grid_label') }}">
                <i class="fas fa-lock-open" aria-hidden="true"></i>
                <span class="qm-fp-stamp-name">{{ t_raw('vendor.tables.lock_grid_label') }}</span>
            </button>
        </div>
        <span class="qm-fp-rail-spring" aria-hidden="true"></span>
        <div class="qm-fp-rail-grp qm-fp-zoom" role="group" aria-label="{{ t_raw('vendor.tables.view_label') }}">
            <button type="button" data-fp-zoom="in" aria-label="{{ t_raw('vendor.tables.expand_btn') }}"><i class="fas fa-plus" aria-hidden="true"></i></button>
            <span class="qm-fp-zoom-val" data-fp-zoom-val>100%</span>
            <button type="button" data-fp-zoom="out" aria-label="{{ t_raw('vendor.tables.collapse_btn') }}"><i class="fas fa-minus" aria-hidden="true"></i></button>
            <button type="button" data-fp-zoom="fit" title="{{ t_raw('vendor.tables.expand_btn') }}" aria-label="{{ t_raw('vendor.tables.expand_btn') }}"><i class="fas fa-expand" aria-hidden="true"></i></button>
        </div>
    </aside>

    @php /* ------------------------------------------- context strip + stage --- */
@endphp
    <div class="qm-fp-main">
        <div class="qm-fp-ctx">
            <nav class="qm-fp-zones" aria-label="{{ t_raw('vendor.tables.zones_nav_aria') }}">
                @foreach ($zones as $z)
                    @php $zid = (int) $z['id']; $zCount = isset($byZone[$zid]) ? count($byZone[$zid]) : 0; $zActive = $zid === $activeZoneId;
@endphp
                    <a href="{{ url('/vendor/tables?zone=' . $zid) }}" class="qm-fp-zone{{ $zActive ? ' is-active' : '' }}">
                        {{ $z['name'] }} <span class="qm-fp-zone-n">{{ $zCount }}</span>
                    </a>
                    @if ($zActive)
                    <button type="button" class="qm-fp-zone-edit" data-bs-toggle="modal" data-bs-target="#zoneModal"
                            data-zone-edit data-id="{{ $zid }}" data-name="{{ $z['name'] }}"
                            aria-label="{{ t_raw('vendor.tables.edit_zone_aria', [':name' => $z['name']]) }}" title="{{ t_raw('vendor.tables.edit_zone_title') }}">
                        <i class="fas fa-pen" aria-hidden="true"></i>
                    </button>
                    @endif
                @endforeach
                <button type="button" class="qm-fp-zone qm-fp-zone-add" data-bs-toggle="modal" data-bs-target="#zoneModal" data-zone-add title="{{ t_raw('vendor.tables.add_zone_btn') }}">
                    <i class="fas fa-plus" aria-hidden="true"></i> <span>{{ t_raw('vendor.tables.add_zone_btn') }}</span>
                </button>
            </nav>
            <span class="qm-fp-ctx-spring" aria-hidden="true"></span>
            <div class="qm-fp-legend" role="status">
                @foreach ($statuses as $key => $label)
                <span class="qm-fp-leg"><span class="qm-leg-dot is-{{ $key }}" aria-hidden="true"></span>{{ $label }} <b>{{ (int) ($counts[$key] ?? 0) }}</b></span>
                @endforeach
            </div>
            <div class="qm-seg qm-fp-viewseg" role="group" aria-label="{{ t_raw('vendor.tables.view_label') }}">
                <button type="button" class="qm-seg-btn active" data-tv-btn="floor" aria-pressed="true"><i class="fas fa-vector-square" aria-hidden="true"></i> <span>{{ t_raw('vendor.tables.view_floor') }}</span></button>
                <button type="button" class="qm-seg-btn" data-tv-btn="timeline" aria-pressed="false"><i class="fas fa-stream" aria-hidden="true"></i> <span>{{ t_raw('vendor.tables.view_timeline') }}</span></button>
            </div>
            <a href="{{ route('vendor.tables.qr') }}" class="qm-btn qm-btn-outline qm-btn-sm">
                <i class="fas fa-qrcode" aria-hidden="true"></i> {{ t_raw('vendor.tables.print_qr_btn') }}
            </a>
        </div>

        <div class="qm-fp-stage" data-fp-stage tabindex="-1">
            @php /* dir="ltr": the room is a physical map; grid_x is a physical left offset
                     and stays one for drag maths and RTL alike (see the old canvas note). */
@endphp
            <div class="qm-fp-floor{{ $activeTables ? '' : ' is-empty' }}" data-fp-floor dir="ltr"
                 style="width:{{ $roomW }}px;height:{{ $roomH }}px"
                 role="application" aria-roledescription="Floor plan editor"
                 aria-label="{{ t_raw('vendor.tables.floor_grid_aria') }}"
                 data-empty="{{ t_raw('vendor.tables.no_tables_in_zone') }}">
                @foreach ($activeTables as $t)
                    @php
                    $tid = (int) $t['id'];
                    $tStatus = $t['status'];
                    $tLabel = $t['label'];
                    $tSeats = (int) $t['seats'];
                    $tZone = (int) $t['zone_id'];
                    $tActive = (int) ($t['is_active'] ?? 1);
                    $tMerge = (string) ($t['merge_group'] ?? '');
                    $tShape = (string) ($t['shape'] ?? 'square');
                    // The self-order kiosk mounted on this table (managed via the inspector).
                    $tk = ($kioskByTable ?? [])[$tid] ?? null;
                    $tkActive = $tk ? (int) $tk['is_active'] : 0;
                    $tkUrl = $tk ? url('/restaurant/' . ($restaurant['slug'] ?? '') . '/kiosk?k=' . $tk['token']) : '';
                    // Today's booking for this table (occasion colour + tooltip), if any.
                    $ev = ($eventByTable ?? [])[$tid] ?? null;
                    $evColor = $ev ? ((string) ($ev['label_color'] ?? '') ?: '#64748b') : '';
                    $evTip = $ev ? (($ev['label_name'] ?? t_raw('vendor.tables.event_label_fallback')) . ' · ' . fmt_clock($ev['reserved_at']) . ' · ' . $ev['guest_name'] . ' (' . (int) $ev['party_size'] . ')') : '';
                    // Reservation correlation: today's booking timeline + derived state.
                    $sched        = ($scheduleByTable ?? [])[$tid] ?? null;
                    $bookingCount = $sched ? count($sched['list']) : 0;
                    $reservedSoon = !empty($sched['reservedSoon']) && $tStatus !== 'occupied';
                    $minsToNext   = $sched['minutesToNext'] ?? null;
                    $soonLabel    = $reservedSoon ? ($minsToNext <= 0 ? t_raw('vendor.tables.due_now') : t_raw('vendor.tables.in_n_min', [':n' => (int) $minsToNext])) : '';
                    $cardAria = $tLabel . ', ' . $tSeats . ' ' . t_raw('vendor.pos.seats_suffix') . ', ' . ($statuses[$tStatus] ?? $tStatus)
                        . ($tActive === 0 ? ', ' . t_raw('vendor.tables.aria_hidden_from_bookings') : '') . ($tMerge !== '' ? ', ' . t_raw('vendor.tables.aria_combined_with', [':code' => $tMerge]) : '') . ($ev ? ', ' . t_raw('vendor.tables.aria_booked_today') : '')
                        . ($reservedSoon ? ', ' . t_raw('vendor.tables.aria_reserved_soon', [':when' => $soonLabel]) : '');
@endphp
                    <div class="qm-table-card is-{{ $tStatus }} is-shape-{{ $tShape }}{{ $ev ? ' has-event' : '' }}{{ $reservedSoon ? ' is-reserved-soon' : '' }}{{ $bookingCount ? ' has-bookings' : '' }}{{ $tActive === 0 ? ' is-hidden-table' : '' }}{{ $tMerge !== '' ? ' is-merged' : '' }}"
                         style="left:{{ (int) $t['grid_x'] }}px;top:{{ (int) $t['grid_y'] }}px{!! $ev ? ';--ev:' . e($evColor) : '' !!}"
                         dir="{{ lang_dir() }}"
                         role="group" tabindex="0"
                         aria-label="{{ $cardAria }}"
                         aria-roledescription="{{ t_raw('vendor.tables.floor_table_roledescription') }}"
                         aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Enter Space Escape"
                         data-id="{{ $tid }}" data-zone="{{ $tZone }}"
                         data-label="{{ $tLabel }}" data-seats="{{ $tSeats }}" data-status="{{ $tStatus }}"
                         data-active="{{ $tActive }}" data-merge="{{ $tMerge }}" data-shape="{{ $tShape }}"
                         data-kiosk-active="{{ $tkActive }}" data-kiosk-url="{{ $tkUrl }}" data-bookings="{{ $bookingCount }}">
                        <div class="qm-tc-cues">
                            @if ($reservedSoon)<span class="qm-tc-cue is-soon" title="{{ t_raw('vendor.tables.reserved_soon_title', [':when' => $soonLabel]) }}"><i class="fas fa-clock" aria-hidden="true"></i></span>@endif
                            @if ($ev)<span class="qm-tc-cue is-event" title="{{ $evTip }}"><i class="fas fa-star" aria-hidden="true"></i></span>@endif
                            @if ($tActive === 0)<span class="qm-tc-cue is-hidden" title="{{ t_raw('vendor.tables.hidden_from_bookings') }}"><i class="fas fa-eye-slash" aria-hidden="true"></i></span>@endif
                        </div>
                        @php /* Furniture: the tabletop with chairs placed around it. */
@endphp
                        <div class="qm-tbl-unit" aria-hidden="true">
                            @foreach ($chairSlots($tShape, $tSeats) as $slot)
                                @if (isset($slot['a']))
                            <span class="qm-chair is-radial" style="transform: rotate({{ (int) $slot['a'] }}deg) translateY(calc(-1 * var(--tt-orbit)))"></span>
                                @else
                            <span class="qm-chair is-{{ $slot['side'] }}"{!! in_array($slot['side'], ['top', 'bottom'], true) ? ' style="left: ' . round((($slot['i'] + .5) / max(1, $slot['of'])) * 100, 2) . '%"' : '' !!}></span>
                                @endif
                            @endforeach
                            <div class="qm-tbl-top">
                                <span class="qm-tc-label">{{ $tLabel }}</span>
                                <span class="qm-tc-seats"><i class="fas fa-user-friends" aria-hidden="true"></i> {{ $tSeats }}</span>
                            </div>
                        </div>
                        @if ($tMerge !== '')
@php $tPartners = $mergePartners($tMerge, $tLabel); @endphp<span class="qm-tc-merge" title="{!! $tPartners ? t('vendor.tables.joined_with_title', [':names' => implode(', ', $tPartners)]) : t('vendor.tables.combined_with_code_title', [':code' => $tMerge]) !!}"><i class="fas fa-link" aria-hidden="true"></i> {!! $tPartners ? e(implode('+', $tPartners)) : e($tMerge) !!}</span>@endif
                        <button type="button" class="qm-tc-status is-{{ $tStatus }}" data-id="{{ $tid }}" aria-label="{{ t_raw('vendor.tables.cycle_status_aria', [':label' => $tLabel, ':status' => $statuses[$tStatus] ?? $tStatus]) }}"><span class="qm-tc-status-dot" aria-hidden="true"></span> {{ $statuses[$tStatus] ?? $tStatus }}</button>
                    </div>
                @endforeach
            </div>
        </div>

        @php /* Inspector: a slide-over on the canvas edge — the table form itself,
                 same fields, same action, same ids the old popup carried. Its shape
                 tiles and seats stepper redraw the selected table's furniture live;
                 grid_x/grid_y ride along so a stamped table lands where it was placed. */
@endphp
        <aside class="qm-fp-inspector" id="qm-fp-inspector" hidden aria-labelledby="table-modal-title">
            <form method="post" action="{{ route('vendor.tables.save') }}" id="qm-fp-form">
                @csrf
                <input type="hidden" name="id" id="table-id" value="">
                <input type="hidden" name="zone" id="table-current-zone" value="{{ $activeZoneId }}">
                <input type="hidden" name="grid_x" id="table-grid-x" value="">
                <input type="hidden" name="grid_y" id="table-grid-y" value="">
                <div class="qm-fp-insp-head">
                    <h2 class="qm-fp-insp-title" id="table-modal-title" data-title-add="{{ t_raw('vendor.tables.add_table_btn') }}" data-title-edit="{{ t_raw('vendor.tables.edit_table_title') }}">{{ t_raw('vendor.tables.add_table_btn') }}</h2>
                    <button type="button" class="qm-icon-btn" id="qm-fp-insp-close" aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
                </div>
                <div class="qm-fp-insp-body">
                    <div class="mb-3">
                        <label class="form-label" id="table-shape-label">{{ t_raw('vendor.tables.field_shape_label') }}</label>
                        <input type="hidden" name="shape" id="table-shape" value="square">
                        <div class="qm-shape-picker" role="radiogroup" aria-labelledby="table-shape-label">
                            @php $shapeIcons = ['square' => 'qm-shape-ico-square', 'rectangle' => 'qm-shape-ico-rect', 'round' => 'qm-shape-ico-round'];
@endphp
                            @foreach (Table::shapes() as $sKey => $sLabel)
@php $sOn = $sKey === 'square'; @endphp
                            <button type="button" class="qm-shape-opt{{ $sOn ? ' is-active' : '' }}" data-shape="{{ $sKey }}" role="radio" aria-checked="{{ $sOn ? 'true' : 'false' }}" title="{{ t_raw('vendor.tables.shape_table_suffix', [':shape' => $sLabel]) }}">
                                <span class="qm-shape-ico {{ $shapeIcons[$sKey] }}" aria-hidden="true"></span>
                                <span class="qm-shape-name">{{ $sLabel }}</span>
                            </button>
                            @endforeach
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-7">
                            <label class="form-label" for="table-label">{{ t_raw('vendor.tables.field_label_label') }}</label>
                            <input type="text" class="form-control" id="table-label" name="label" maxlength="40" placeholder="{{ t_raw('vendor.tables.table_label_placeholder') }}" required>
                        </div>
                        <div class="col-5">
                            <label class="form-label" for="table-seats">{{ t_raw('vendor.tables.field_seats_label') }}</label>
                            <div class="qm-fp-stepper">
                                <button type="button" data-fp-seats="-1" aria-label="{{ t_raw('common.decrease_quantity') }}"><i class="fas fa-minus" aria-hidden="true"></i></button>
                                <input type="number" class="form-control" id="table-seats" name="seats" min="1" max="30" value="2" placeholder="{{ t_raw('common.placeholder_count') }}">
                                <button type="button" data-fp-seats="1" aria-label="{{ t_raw('common.increase_quantity') }}"><i class="fas fa-plus" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-0">
                        <div class="col-7">
                            <label class="form-label" for="table-zone">{{ t_raw('vendor.tables.field_zone_label') }}</label>
                            <select class="form-select" id="table-zone" name="zone_id">
                                @foreach ($zones as $z)
                                    <option value="{{ (int) $z['id'] }}"{{ (int) $z['id'] === $activeZoneId ? ' selected' : '' }}>{{ $z['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-5">
                            <label class="form-label" for="table-status">{{ t_raw('common.status') }}</label>
                            <select class="form-select" id="table-status" name="status">
                                @foreach ($statuses as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mt-0 align-items-center">
                        <div class="col-7">
                            <label class="form-label" for="table-merge">{{ t_raw('vendor.tables.combine_code_label') }} <span class="text-muted">{{ t_raw('common.optional') }}</span></label>
                            <input type="text" class="form-control" id="table-merge" name="merge_group" maxlength="20" placeholder="{{ t_raw('vendor.tables.combine_code_placeholder') }}">
                            <span class="qm-hint">{{ t_raw('vendor.tables.combine_code_hint') }}</span>
                        </div>
                        <div class="col-5">
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" role="switch" id="table-active" name="is_active" value="1" checked>
                                <label class="form-check-label" for="table-active">{{ t_raw('vendor.tables.bookable_label') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="table-kiosk" name="kiosk_enabled" value="1">
                            <label class="form-check-label" for="table-kiosk">{{ t_raw('vendor.tables.kiosk_toggle_label') }}</label>
                        </div>
                        <div class="qm-hint mt-1" id="table-kiosk-link" hidden>
                            <i class="fas fa-tablet-alt" aria-hidden="true"></i>
                            <a href="" target="_blank" rel="noopener" id="table-kiosk-url">{{ t_raw('vendor.tables.open_kiosk_link') }}</a>
                        </div>
                    </div>
                </div>
                <div class="qm-fp-insp-foot">
                    <button type="button" class="qm-btn qm-btn-outline qm-btn-sm qm-btn-danger-line" id="qm-fp-insp-delete" data-table-delete hidden><i class="fas fa-trash-alt" aria-hidden="true"></i> {{ t_raw('common.delete') }}</button>
                    <span class="qm-fp-insp-spacer"></span>
                    <button type="button" class="qm-btn qm-btn-outline" id="qm-fp-insp-cancel">{{ t_raw('common.cancel') }}</button>
                    <button type="submit" class="qm-btn">{{ t_raw('vendor.tables.save_table_btn') }}</button>
                </div>
            </form>
        </aside>
    </div><!-- /qm-fp-main -->
</div><!-- /qm-fp -->

<div class="qm-h1-sr" id="qm-floor-live" aria-live="polite"></div>
</section><!-- /qm-tv-floor -->

@php
// ===================== TIMELINE VIEW (full-width reservation book) =====================
// Every table down the left, today's service window across the top, each table's
// bookings as blocks placed by start time + sized by turn time. Empty track = free.
$gwOpen = (int) ($serviceWindow['open'] ?? 600);
$gwClose = (int) ($serviceWindow['close'] ?? 1440);
$gwNow  = (int) ($serviceWindow['now'] ?? 720);
$gwSpan = max(60, $gwClose - $gwOpen);
$gPpm   = 2.0;                                  // px per minute (wide enough that a full
                                                 // service day fills the panel width)
// A lead/trailing gutter so the first hour label clears the sticky "Table" column and
// the last one isn't clipped at the right edge.
$gLead  = 26;
$gTrack = (int) round($gwSpan * $gPpm) + 2 * $gLead;
$gHour  = static fn (int $min): string => fmt_date(qm_pattern('hour'), mktime(intdiv($min, 60) % 24, 0, 0, 1, 1, 2000));
$gPos   = static fn (int $min) => (int) round(($min - $gwOpen) * $gPpm) + $gLead;
// Block status → visual bucket (upcoming / seated / done / next-up).
$gBucket = static function (array $b) use ($scheduleByTable, $__env): string {
    if (($b['status'] ?? '') === 'seated') { return 'seated'; }
    if (!empty($b['is_past']) || in_array($b['status'] ?? '', ['completed', 'no_show'], true)) { return 'past'; }
    return 'upcoming';
};
@endphp
<section class="qm-tv-timeline" aria-label="{{ t_raw('vendor.tables.view_timeline') }}">
    <div class="qm-card qm-gantt-card">
        <div class="qm-gantt" style="--g-track:{{ $gTrack }}px">
            <div class="qm-gantt-scroll">
                <div class="qm-gantt-head">
                    <div class="qm-gantt-corner"><i class="fas fa-clock" aria-hidden="true"></i> {{ t_raw('vendor.tables.timeline_today') }}</div>
                    <div class="qm-gantt-axis" style="width:{{ $gTrack }}px">
                        @for ($m = (int) (ceil($gwOpen / 60) * 60); $m <= $gwClose; $m += 60)
                        <span class="qm-gantt-hour" style="inset-inline-start:{!! $gPos($m) !!}px">{!! $gHour($m) !!}</span>
                        @endfor
                    </div>
                </div>
                <div class="qm-gantt-body">
                    @foreach ($zones as $z)
@php $zid = (int) $z['id']; $zt = $byZone[$zid] ?? []; if (!$zt) { continue; }; @endphp
                    <div class="qm-gantt-zone"><span class="qm-gantt-zone-name">{{ $z['name'] }}</span> <span class="qm-gantt-zone-n">{{ count($zt) }}</span></div>
                        @foreach ($zt as $gt)
@php $gid = (int) $gt['id']; $gStatus = (string) $gt['status'];
                            $gList = $scheduleByTable[$gid]['list'] ?? [];
                            $gMerge = (string) ($gt['merge_group'] ?? '');
                            $gPartners = $gMerge !== '' ? $mergePartners($gMerge, (string) $gt['label']) : []; @endphp
                        <div class="qm-gantt-row{{ $gPartners ? ' is-merged' : '' }}">
                            <a class="qm-gantt-tbl" href="{{ url('/vendor/reservations/new?table=' . $gid) }}" title="{{ t_raw('vendor.tables.reserve_this_table') }}" aria-label="{{ t_raw('vendor.tables.reserve_this_table') }} — {{ $gt['label'] }}">
                                <span class="qm-gantt-tnum">{{ $gt['label'] }}</span>
                                <span class="qm-gantt-tseat"><i class="fas fa-user-friends" aria-hidden="true"></i> {{ (int) $gt['seats'] }}</span>
                                @if ($gPartners)<span class="qm-gantt-tmerge" title="{{ t_raw('vendor.tables.joined_with_title', [':names' => implode(', ', $gPartners)]) }}"><i class="fas fa-link" aria-hidden="true"></i> {{ implode('+', $gPartners) }}</span>@endif
                                <span class="qm-gantt-tdot is-{{ $gStatus }}" title="{{ $statuses[$gStatus] ?? $gStatus }}"></span>
                                <i class="fas fa-calendar-plus qm-gantt-tbl-go" aria-hidden="true"></i>
                            </a>
                            <div class="qm-gantt-track" style="width:{{ $gTrack }}px">
                                @for ($m = (int) (ceil($gwOpen / 60) * 60); $m <= $gwClose; $m += 60)
                                <span class="qm-gantt-grid" style="inset-inline-start:{!! $gPos($m) !!}px"></span>
                                @endfor
                                @foreach ($gList as $b)
@php $bStart = ((int) substr((string) $b['reserved_at'], 11, 2)) * 60 + (int) substr((string) $b['reserved_at'], 14, 2);
                                    $bLeft = $gPos($bStart); $bW = max(44, (int) round(((int) $b['duration']) * $gPpm));
                                    $bTime = fmt_clock($b['reserved_at']);
                                    $bJoined = !empty($b['joined_group']);
                                    $bTip = $bTime . ' · ' . $b['guest_name'] . ' · ' . (int) $b['party_size'] . ' · ' . \App\Models\Reservation::statusLabel((string) $b['status'])
                                        . ($bJoined ? ' · ' . t_raw('vendor.tables.joined_unit', [':names' => (string) $b['joined_group']]) : ''); @endphp
                                <div class="qm-gantt-block is-{!! $gBucket($b) !!}{{ $bJoined ? ' is-joined' : '' }}" style="inset-inline-start:{{ $bLeft }}px;width:{{ $bW }}px" title="{{ $bTip }}">
                                    <span class="qm-gantt-b-time">@if ($bJoined)<i class="fas fa-link qm-gantt-b-join" aria-hidden="true"></i> @endif{{ $bTime }} <span class="qm-gantt-b-party"><i class="fas fa-user-friends" aria-hidden="true"></i> {{ (int) $b['party_size'] }}</span></span>
                                    <span class="qm-gantt-b-guest">{{ $b['guest_name'] }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    @endforeach
                    @if ($gwNow >= $gwOpen && $gwNow <= $gwClose)
                    <div class="qm-gantt-now" style="inset-inline-start:calc(var(--g-tbl-w) + {!! $gPos($gwNow) !!}px)"><span>{{ t_raw('vendor.tables.sched_now_line') }}</span></div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
</div><!-- /qm-tables-views -->

    @php

    // Today's booking timeline per table (JSON), read by qm-floorplan.js to fill the
    // schedule panel when a table is clicked. Today-only, so the payload is small.
    // Times are formatted server-side (fmt_date) so the client renders no dates itself.
    $schedJson = [];
    foreach (($scheduleByTable ?? []) as $sid => $srow) {
        $schedJson[$sid] = [
            'occupiedNow'   => (bool) ($srow['occupiedNow'] ?? false),
            'reservedSoon'  => (bool) ($srow['reservedSoon'] ?? false),
            'minutesToNext' => $srow['minutesToNext'] ?? null,
            'nextId'        => $srow['next']['id'] ?? null,
            'mergeLabel'    => $srow['mergeLabel'] ?? null,
            'list'          => array_map(static function (array $b): array {
                $hm = substr((string) $b['reserved_at'], 11, 5);
                $b['startMin'] = ((int) substr($hm, 0, 2)) * 60 + (int) substr($hm, 3, 2);
                $b['time'] = fmt_clock($b['reserved_at'], true);
                unset($b['reserved_at']);
                return $b;
            }, $srow['list'] ?? []),
        ];
    }
@endphp
    @php // JSON_HEX_TAG|JSON_HEX_AMP are required here: this block carries guest-supplied reservation
    // names, so without them a name containing </script> would break out and inject into the dashboard.
@endphp
    <script type="application/json" id="qm-floor-schedule">{!! json_encode($schedJson, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
    <script type="application/json" id="qm-floor-window">{!! json_encode($serviceWindow ?? ['open' => 600, 'close' => 1440, 'now' => 720], JSON_UNESCAPED_SLASHES) !!}</script>
    @php // Status ring the quick-cycle steps through — the model's own order.
@endphp
    <script type="application/json" id="qm-floor-statuses">{!! json_encode($statuses, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>

    <!-- Per-table schedule panel: opened by clicking a table in service mode. -->
    <aside class="qm-tsched" id="qm-table-schedule" hidden aria-labelledby="qm-tsched-title" role="dialog" aria-modal="false">
        <div class="qm-tsched-head">
            <div>
                <h2 class="qm-tsched-title" id="qm-tsched-title"></h2>
                <p class="qm-tsched-sub" id="qm-tsched-sub"></p>
            </div>
            <button type="button" class="qm-icon-btn" id="qm-tsched-close" aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
        </div>
        <div class="qm-tsched-body" id="qm-tsched-body"></div>
        <div class="qm-tsched-foot">
            <a href="{{ route('vendor.reservations.new') }}" class="qm-btn" id="qm-tsched-reserve" data-reserve-base="{{ route('vendor.reservations.new') }}"><i class="fas fa-calendar-plus" aria-hidden="true"></i> {{ t_raw('vendor.tables.reserve_this_table') }}</a>
        </div>
    </aside>
    @php // i18n strings the schedule panel renders client-side (status labels reuse the
          // canonical Reservation::statusLabel, so the panel matches the reservations page).
@endphp
    <script type="application/json" id="qm-tsched-i18n">{!! json_encode([
        'empty'         => t_raw('vendor.tables.sched_empty'),
        'reserved_soon' => t_raw('vendor.tables.sched_reserved_soon'),
        'free_until'    => t_raw('vendor.tables.sched_free_until'),
        'free_all'      => t_raw('vendor.tables.sched_free_all'),
        'now_line'      => t_raw('vendor.tables.sched_now_line'),
        'joined_with'   => t_raw('vendor.tables.joined_with_panel'),
        'statusLabels' => array_combine(
            \App\Models\Reservation::statuses(),
            array_map(static fn ($s) => \App\Models\Reservation::statusLabel($s), \App\Models\Reservation::statuses())
        ),
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>

@endif

<!-- Zone modal (add / edit) -->
<div class="modal fade" id="zoneModal" tabindex="-1" aria-labelledby="zone-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" method="post" action="{{ route('vendor.tables.zone') }}">
            @csrf
            <input type="hidden" name="id" id="zone-id" value="">
            <div class="modal-header">
                <h2 class="modal-title h5" id="zone-modal-title" data-title-add="{{ t_raw('vendor.tables.add_zone_btn') }}" data-title-edit="{{ t_raw('vendor.tables.edit_zone_title') }}">{{ t_raw('vendor.tables.add_zone_btn') }}</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="mb-0">
                    <label class="form-label" for="zone-name">{{ t_raw('common.name') }}</label>
                    <input type="text" class="form-control" id="zone-name" name="name" placeholder="{{ t_raw('vendor.tables.zone_name_placeholder') }}" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="qm-btn qm-btn-outline me-auto" id="zone-delete-btn" hidden><i class="fas fa-trash-alt" aria-hidden="true"></i> {{ t_raw('vendor.tables.delete_zone_btn') }}</button>
                <button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button>
                <button type="submit" class="qm-btn">{{ t_raw('vendor.tables.save_zone_btn') }}</button>
            </div>
        </form>
    </div>
</div>

<!-- Hidden table-delete form, submitted by JS after confirm. -->
<form id="tableDeleteForm" method="post" action="{{ route('vendor.tables.delete') }}" class="d-none">
    @csrf
    <input type="hidden" name="id" id="table-delete-id" value="">
    <input type="hidden" name="zone" id="table-delete-zone" value="">
</form>

<!-- Hidden zone-delete form, submitted by JS from the zone modal. -->
<form id="zoneDeleteForm" method="post" action="{{ route('vendor.tables.zone.delete') }}" class="d-none">
    @csrf
    <input type="hidden" name="id" id="zone-delete-id" value="">
</form>

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