{{-- the seller panel's first page = the live queue (PRD §3 پ۱, flow م۲; slice 3), with «سفارش‌های امروز» under it.
     without the script it is a plain page that F5 refreshes and whose buttons are plain posts. with it: the queue is
     re-read every 2 s, a new order appears without a reload and with a SOUND (demo #38) — the browser only lets a page
     play sound after one click, so the bar says so — the countdowns run, and a failed read says «اتصال برقرار نیست»
     and switches every button off until a read succeeds (no action on stale data). --}}
@extends('layouts.mz')

@section('title', 'صف سفارش‌ها')
@section('credit', '1')
@section('nav')
    @include('panel._nav')
@endsection

@section('content')
    <h1 class="mz-title">صف سفارش‌ها</h1>

    <div class="mz-queue" x-data="mzQueue('{{ $queueUrl }}', @js(array_column($cards, 'id')))" x-bind:class="{ 'mz-offline': offline }">
        {{-- slice 6ب (debt 21): the freshness of the central prices this seller's products follow, replaced by every read --}}
        <div x-ref="health">
            @include('panel._price-health', ['health' => $alerts['health']])
        </div>
        <p class="mz-notice mz-notice--warn" x-show="muted" x-cloak>
            مرورگر تا یک بار روی صفحه نزنید صدای هشدار سفارش تازه را پخش نمی‌کند.
            <button class="mz-btn mz-btn--quiet" type="button" x-on:click="unmute()">فعال کردن صدای هشدار</button>
        </p>
        <p class="mz-notice mz-notice--no" role="alert" x-show="offline" x-cloak>
            اتصال برقرار نیست؛ صف به‌روز نیست و دکمه‌ها تا برگشتن اتصال بسته‌اند.
            <button class="mz-btn mz-btn--quiet" type="button" x-on:click="read()">تلاش دوباره</button>
        </p>

        <div role="status" aria-live="polite">
            @if (session('mz.saved'))
                <p class="mz-notice mz-notice--ok">{{ session('mz.saved') }}</p>
            @endif
            @if (session('mz.refused'))
                <p class="mz-notice mz-notice--no">{{ session('mz.refused') }}</p>
            @endif
            <p class="mz-notice" x-show="message !== ''" x-bind:class="messageOk ? 'mz-notice--ok' : 'mz-notice--no'" x-text="message" x-cloak></p>
        </div>

        <p class="mz-queue__empty mz-card" x-ref="empty" @if ($cards !== []) hidden @endif>
            سفارشی در انتظار تأیید نیست. سفارش تازه بی بارگذاری دوباره و با صدا همین‌جا می‌آید.
        </p>
        <div class="mz-queue__cards" x-ref="cards">
            @foreach ($cards as $card)
                @include('panel._queue-card', ['card' => $card])
            @endforeach
        </div>
        <p class="mz-hint">آخرین خواندن صف: ساعت <span x-ref="readAt">{{ $readAt }}</span></p>

        {{-- slice 10 (PRD پ۳ «کنار صف … تراز امروز»): read with the page and every 30 seconds by its own script, never in the 2-second read --}}
        <div class="js-daily-card" data-url="{{ route('mz.seller.daily.today') }}">
            @include('panel._daily-card')
        </div>

        <h2 class="mz-card__title mz-queue__today-title">سفارش‌های امروز</h2>
        <div x-ref="today">
            @include('panel._today')
        </div>
    </div>
@endsection