{{-- the colleague app's first page (flow ج۲, slice 1). without the script it is a plain page that F5 refreshes; with
     it, the cards are re-read every few seconds while the page is in front of the eye, and a failed read says so and
     disables every button until a read succeeds again (flow ج۲ «اتصال قطع»). --}}
@extends('layouts.mz')

@section('title', 'قیمت‌ها')
@section('nav')
    @include('colleague._nav')
@endsection

@section('content')
    <h1 class="mz-title">قیمت‌ها</h1>

    {{-- slice 5ج۱: outside the 5-second read, so a box the customer opened stays open --}}
    @include('colleague._message')

    <div x-data="mzPrices('{{ route('mz.colleague.prices') }}', {{ $pollSeconds }})" x-bind:class="{ 'mz-offline': offline }">
        <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 x-ref="cards">
            @include('colleague._cards')
        </div>
        <p class="mz-hint" role="status">آخرین خواندن قیمت‌ها: ساعت <span x-ref="readAt">{{ $readAt }}</span></p>
    </div>

    @if ($seller->contact_phone)
        <p class="mz-hint">تماس با {{ $seller->name }}: <x-mz-phone :number="$seller->contact_phone" :link="true"/></p>
    @endif
@endsection