@extends('layouts.app')
@section('title', 'Walk-in Registration')

@section('content')
<form method="POST" enctype="multipart/form-data" action="{{ route('walkins.store') }}" novalidate>
    @csrf
    <div class="row g-3">
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header bg-white fw-semibold"><i class="bi bi-person-vcard"></i> Visitor details</div>
                <div class="card-body">@include('partials.visitor-fields')</div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header bg-white fw-semibold"><i class="bi bi-person-badge"></i> Whom to meet</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label" for="host_id">Host <span class="text-danger">*</span></label>
                        <select id="host_id" name="host_id" class="form-select @error('host_id') is-invalid @enderror" required>
                            <option value="">— Select host —</option>
                            @foreach ($hosts as $h)
                                <option value="{{ $h->id }}" @selected(old('host_id') == $h->id)>{{ $h->name }}@if($h->department) — {{ $h->department }}@endif</option>
                            @endforeach
                        </select>
                        @error('host_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="purpose">Purpose <span class="text-danger">*</span></label>
                        <input type="text" id="purpose" name="purpose" list="purposes" value="{{ old('purpose') }}" class="form-control @error('purpose') is-invalid @enderror" required>
                        <datalist id="purposes">
                            <option value="Business meeting"><option value="Interview"><option value="Delivery"><option value="Maintenance / Service"><option value="Personal visit">
                        </datalist>
                        @error('purpose')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="vehicle_number">Vehicle no.</label>
                        <input type="text" id="vehicle_number" name="vehicle_number" value="{{ old('vehicle_number') }}" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="notes">Notes</label>
                        <textarea id="notes" name="notes" rows="3" class="form-control">{{ old('notes') }}</textarea>
                    </div>
                    <div class="alert alert-light border small mb-0">
                        <i class="bi bi-info-circle"></i> The host is notified to approve or reject. Once approved, the visitor receives an OTP to complete check-in.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-end gap-2 mt-3">
        <a href="{{ route('dashboard') }}" class="btn btn-light">Cancel</a>
        <button class="btn btn-primary"><i class="bi bi-send"></i> Request host approval</button>
    </div>
</form>
@endsection