@extends('layouts.base')
@section('title', __('Sign up free').' — MediBook AI')

@section('body')
<div class="auth-wrap">
    <div class="mb-card auth-card" style="max-width:30rem">
        <a href="{{ route('landing') }}" class="fw-bold display-font text-decoration-none">🦷 MediBook <span style="color:var(--mb-primary)">AI</span></a>
        <h1 class="h4 fw-bold mt-3">{{ __('Create my clinic') }}</h1>
        <p class="mb-muted small">{{ __('14-day free trial') }} · {{ __('No card required') }}</p>

        <form method="POST" action="{{ route('register.store') }}" novalidate>
            @csrf
            <div class="mb-3">
                <label class="form-label">{{ __('Clinic name') }}</label>
                <input name="clinic_name" value="{{ old('clinic_name') }}" class="form-control @error('clinic_name') is-invalid @enderror" required>
                @error('clinic_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('Clinic address (subdomain)') }}</label>
                <div class="input-group slug-group" dir="ltr">
                    <input name="slug" value="{{ old('slug') }}" class="form-control @error('slug') is-invalid @enderror"
                           placeholder="smile-clinic" pattern="[a-z0-9-]+" required>
                    <span class="input-group-text">.{{ config('tenancy.central_domain') }}</span>
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('Your name') }}</label>
                    <input name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('Phone (WhatsApp)') }}</label>
                    <input name="phone" value="{{ old('phone') }}" class="form-control @error('phone') is-invalid @enderror" dir="ltr" placeholder="+964 7xx xxx xxxx" required>
                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('Email') }}</label>
                <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('Password') }}</label>
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" required>
                    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">{{ __('Confirm password') }}</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('Preferred language') }}</label>
                <select name="locale" class="form-select">
                    <option value="ar" @selected(old('locale', app()->getLocale()) === 'ar')>{{ __('Arabic') }}</option>
                    <option value="en" @selected(old('locale') === 'en')>{{ __('English') }}</option>
                </select>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox" name="terms" id="terms" required>
                <label class="form-check-label small" for="terms">{{ __('I agree to the Terms of Service') }}</label>
                @error('terms')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <button class="btn mb-btn-primary w-100">{{ __('Create my clinic') }}</button>
        </form>
    </div>
</div>
@endsection