@extends('layouts.app')
@section('title', 'Verify OTP')

@section('content')
<div class="row justify-content-center g-3">
    <div class="col-md-8 col-lg-5">
        <div class="card">
            <div class="card-body p-4 p-md-5 text-center">
                <div class="display-6 text-primary mb-2"><i class="bi bi-shield-lock"></i></div>
                <h1 class="h4">Verify visitor OTP</h1>
                <p class="text-muted">Ask the visitor for the one-time code sent to their phone or email. Each code works only once.</p>
                <form method="POST" action="{{ route('security.verify.submit') }}" autocomplete="off">
                    @csrf
                    <input type="text" name="otp" inputmode="numeric" pattern="[0-9]*" maxlength="8" autofocus required
                           class="form-control form-control-lg otp-input my-3 @error('otp') is-invalid @enderror" placeholder="••••••" value="{{ old('otp') }}">
                    @error('otp')<div class="alert alert-danger py-2 small"><i class="bi bi-exclamation-triangle"></i> {{ $message }}</div>@enderror
                    <button class="btn btn-primary btn-lg w-100"><i class="bi bi-check2-circle"></i> Verify</button>
                </form>
            </div>
        </div>
    </div>

    @if ($awaiting->isNotEmpty())
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header bg-white fw-semibold">OTP verified — awaiting check-in</div>
                <ul class="list-group list-group-flush">
                    @foreach ($awaiting as $a)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-semibold">{{ $a->visitor->name }}</div>
                                <div class="small text-muted">For {{ $a->host->name }} · verified {{ $a->otp_used_at->diffForHumans() }}</div>
                            </div>
                            <a href="{{ route('security.checkin.form', $a) }}" class="btn btn-success btn-sm"><i class="bi bi-box-arrow-in-right"></i> Check in</a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
</div>
@endsection