@extends('public._layout')

@section('title', 'Join ' . $classroom->name)

@section('content')
    <div class="badge-class">{{ $classroom->name }}</div>
    <h1>Join {{ $classroom->name }}</h1>
    <p class="lead">
        @if ($classroom->subject)
            {{ $classroom->subject }} ·
        @endif
        Welcome! Enter your email or phone and we'll send you a one-time code.
    </p>

    <form method="POST" action="{{ route('join.request-otp', ['code' => $code]) }}">
        @csrf
        <label for="contact">Email or phone</label>
        <input type="text" id="contact" name="contact" autofocus required
               placeholder="you@example.com  or  +6591234567"
               value="{{ old('contact') }}">
        @error('contact')
            <div class="error">{{ $message }}</div>
        @enderror

        <button type="submit" class="primary">SEND CODE →</button>
    </form>

    <p style="margin-top: 1.5rem; font-size: 0.85rem; color: #6B6B6B; text-align: center;">
        Code: <span style="font-family: ui-monospace, monospace; color: #BF9237; font-weight: 700;">{{ $code }}</span>
    </p>
@endsection