ladill-frontdesk/resources/views/frontdesk/visits/schedule.blade.php

<x-app-layout title="Schedule visit">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-xl font-semibold text-slate-900">Pre-register visitor</h1>
        <p class="mt-1 text-sm text-slate-500">Schedule an expected arrival without checking in.</p>

        <form method="GET" class="mt-4">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search returning visitors…"
                   class="w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </form>

        @if ($returningVisitors->isNotEmpty())
            <div class="mt-4 rounded-xl border border-slate-200 bg-white">
                <p class="border-b border-slate-100 px-4 py-2 text-xs font-medium uppercase text-slate-500">Returning visitors</p>
                @foreach ($returningVisitors as $visitor)
                    <button type="button" onclick="document.getElementById('visitor_id').value='{{ $visitor->id }}'; document.getElementById('full_name').value='{{ $visitor->full_name }}'; document.getElementById('company').value='{{ $visitor->company }}'; document.getElementById('phone').value='{{ $visitor->phone }}'; document.getElementById('email').value='{{ $visitor->email }}';"
                            class="flex w-full items-center gap-3 border-b border-slate-50 px-4 py-3 text-left last:border-0 hover:bg-slate-50">
                        <span class="font-medium text-slate-800">{{ $visitor->full_name }}</span>
                        @if ($visitor->is_frequent)
                            <span class="rounded bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700">Frequent</span>
                        @endif
                    </button>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('frontdesk.visits.schedule.store') }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf
            <input type="hidden" name="visitor_id" id="visitor_id">

            <div>
                <label for="full_name" class="block text-sm font-medium text-slate-700">Full name</label>
                <input type="text" name="full_name" id="full_name" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="scheduled_at" class="block text-sm font-medium text-slate-700">Expected arrival</label>
                    <input type="datetime-local" name="scheduled_at" id="scheduled_at" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                </div>
                <div>
                    <label for="visitor_type" class="block text-sm font-medium text-slate-700">Visitor type</label>
                    <select name="visitor_type" id="visitor_type" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                        @foreach (config('frontdesk.visitor_types') as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="branch_id" class="block text-sm font-medium text-slate-700">Branch</label>
                    <select name="branch_id" id="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                        <option value="">Select branch…</option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="host_id" class="block text-sm font-medium text-slate-700">Host</label>
                    <select name="host_id" id="host_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                        <option value="">Select host…</option>
                        @foreach ($hosts as $host)
                            <option value="{{ $host->id }}">{{ $host->name }} @if($host->department)({{ $host->department }})@endif</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="company" class="block text-sm font-medium text-slate-700">Company</label>
                    <input type="text" name="company" id="company" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                </div>
                <div>
                    <label for="phone" class="block text-sm font-medium text-slate-700">Phone</label>
                    <input type="tel" name="phone" id="phone" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                </div>
            </div>

            <div>
                <label for="email" class="block text-sm font-medium text-slate-700">Email</label>
                <input type="email" name="email" id="email" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <div>
                <label for="purpose" class="block text-sm font-medium text-slate-700">Purpose of visit</label>
                @include('frontdesk.partials.purpose-select', ['id' => 'purpose'])
            </div>

            <div>
                <label for="notes" class="block text-sm font-medium text-slate-700">Notes</label>
                <textarea name="notes" id="notes" rows="2" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></textarea>
            </div>

            <button type="submit" class="btn-primary btn-primary-lg w-full">
                Schedule visit
            </button>
        </form>
    </div>
</x-app-layout>