{{-- flow ج۱ step 1: the colleague types the mobile. every number gets the same next screen (پ۱-۳). --}}
@extends('layouts.mz')

@section('title', 'ورود همکار')

@section('content')
    <h1 class="mz-title">ورود همکار</h1>

    @error('mobile')
        <p class="mz-notice mz-notice--no" role="alert" id="mz-mobile-error">{{ $message }}</p>
    @enderror

    <form class="mz-card mz-form mz-form--narrow" method="post" action="{{ route('mz.colleague.login.attempt') }}">
        @csrf
        <div class="mz-field">
            <label class="mz-label" for="mz-mobile">شمارهٔ موبایل</label>
            <input class="mz-input mz-input--ltr" id="mz-mobile" name="mobile" type="tel" dir="ltr"
                   inputmode="tel" autocomplete="tel" required maxlength="20" autofocus
                   value="{{ old('mobile') }}" @error('mobile') aria-invalid="true" aria-describedby="mz-mobile-error" @enderror>
        </div>
        <p class="mz-hint">همان شماره‌ای که فروشنده برای شما ثبت کرده است. یک کد شش‌رقمی به آن پیامک می‌شود.</p>
        <div class="mz-actions">
            <button class="mz-btn" type="submit">دریافت کد</button>
            <a class="mz-btn mz-btn--quiet" href="{{ route('mz.home') }}">برگشت به صفحهٔ اول</a>
        </div>
    </form>
    {{-- slice 11 (flow ج۷): on an iPhone the app is best installed BEFORE signing in (its own sign-in), so the guide is here too --}}
    <p class="mz-install-link"><a href="{{ route('mz.install') }}">نصب مظنه روی گوشی</a></p>
@endsection