@extends('layouts.app')
@section('title', 'Front Desk')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3"><x-stat-card label="Expected Today" :value="$stats['expected']" icon="calendar-check" color="primary" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="Inside Now" :value="$stats['inside']" icon="door-open" color="success" :href="route('security.active')" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="Awaiting Host" :value="$stats['pending']" icon="hourglass-split" color="warning" :href="route('appointments.index', ['status' => 'pending'])" /></div>
    <div class="col-6 col-lg-3"><x-stat-card label="Checked Out Today" :value="$stats['checked_out_today']" icon="box-arrow-right" color="secondary" /></div>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-body p-4">
                <h2 class="h5"><i class="bi bi-key text-primary"></i> Verify visitor OTP</h2>
                <p class="text-muted small">Enter the one-time code the visitor received by SMS/email.</p>
                <form method="POST" action="{{ route('security.verify.submit') }}" autocomplete="off">
                    @csrf
                    <input type="text" name="otp" inputmode="numeric" maxlength="8" class="form-control otp-input mb-3 @error('otp') is-invalid @enderror" placeholder="••••••" required>
                    @error('otp')<div class="invalid-feedback d-block mb-2">{{ $message }}</div>@enderror
                    <button class="btn btn-primary w-100"><i class="bi bi-shield-check"></i> Verify &amp; Continue</button>
                </form>
                <hr>
                <a href="{{ route('walkins.create') }}" class="btn btn-outline-secondary w-100"><i class="bi bi-person-plus"></i> Register walk-in visitor</a>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-white d-flex justify-content-between">
                <span class="fw-semibold">Visitors inside ({{ $inside->count() }})</span>
                <a href="{{ route('security.active') }}" class="small">View all</a>
            </div>
            <ul class="list-group list-group-flush">
                @forelse ($inside->take(6) as $a)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-semibold">{{ $a->visitor->name }} @if($a->badge_number)<span class="badge text-bg-light">#{{ $a->badge_number }}</span>@endif</div>
                            <div class="small text-muted">Meeting {{ $a->host->name }} · in since {{ $a->checked_in_at->format('h:i A') }}</div>
                        </div>
                        <form method="POST" action="{{ route('security.checkout', $a) }}">@csrf
                            <button class="btn btn-outline-danger btn-sm" data-confirm="Check out {{ $a->visitor->name }}?"><i class="bi bi-box-arrow-right"></i> Check out</button>
                        </form>
                    </li>
                @empty
                    <li class="list-group-item text-center text-muted py-4">No visitors inside.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header bg-white fw-semibold">Expected today</div>
            @include('appointments._table', ['appointments' => $expected])
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header bg-white fw-semibold">Today's walk-ins</div>
            <ul class="list-group list-group-flush">
                @forelse ($walkIns as $a)
                    <a href="{{ route('appointments.show', $a) }}" class="list-group-item list-group-item-action 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 }} · {{ $a->created_at->format('h:i A') }}</div>
                        </div>
                        <x-status-badge :appointment="$a" />
                    </a>
                @empty
                    <li class="list-group-item text-center text-muted py-4">No walk-ins today.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@if ($stats['pending'])
    {{-- Refresh so the desk sees host approvals without clicking around. --}}
    <script nonce="{{ Vite::cspNonce() }}">vmsAutoReload(30000);</script>
@endif
@endsection