@extends('layouts.auth')

@section('title', 'Customer Login — ' . config('app.name'))

@section('content')
    <h1 class="h4 fw-bold mb-1">Log in or sign up</h1>
    <p class="text-muted small mb-4">Enter your mobile number and we'll text you a one-time code.</p>

    <x-auth-session-status class="mb-3" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        <div class="mb-3">
            <x-input-label for="phone" :value="__('Mobile number')" />
            <div class="input-group">
                <span class="input-group-text">+91</span>
                <x-text-input id="phone" type="tel" name="phone" inputmode="numeric" autocomplete="tel"
                    maxlength="10" :value="old('phone')" placeholder="10-digit number" required autofocus />
            </div>
            <x-input-error :messages="$errors->get('phone')" />
        </div>

        <x-primary-button class="w-100 justify-content-center">{{ __('Send code') }}</x-primary-button>
    </form>

    <hr class="my-4">

    <p class="small text-center text-muted mb-0">
        {{ __('Are you a provider?') }}
        <a class="fw-semibold text-decoration-none" href="{{ route('provider.login') }}">{{ __('Provider login') }}</a>
    </p>
@endsection