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

<x-app-layout title="Check in visitor">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-xl font-semibold text-slate-900">Check in visitor</h1>
        <p class="mt-1 text-sm text-slate-500">Register a new visit or search for a returning visitor.</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)
                    <div class="flex items-center justify-between border-b border-slate-50 px-4 py-3 last:border-0">
                        <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 flex-1 items-center gap-3 text-left 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>
                        <a href="{{ route('frontdesk.visitors.check-in', $visitor) }}" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-700">Quick check-in</a>
                    </div>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('frontdesk.visits.store') }}" enctype="multipart/form-data"
              x-data="{ selectedType: '{{ old('visitor_type', 'visitor') }}' }"
              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="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="visitor_type" class="block text-sm font-medium text-slate-700">Visitor type</label>
                    <select name="visitor_type" id="visitor_type" x-model="selectedType" 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>

            @include('frontdesk.partials.type-fields', ['typeConfigs' => $typeConfigs])

            <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="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>
                <label for="purpose" class="block text-sm font-medium text-slate-700">Purpose of visit</label>
                <input type="text" name="purpose" id="purpose" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>

            <label class="flex items-start gap-2 text-sm text-slate-600">
                <input type="checkbox" name="policies_accepted" value="1" required class="mt-1 rounded border-slate-300 text-indigo-600">
                Visitor has read and accepted visitor policies.
            </label>

            <button type="submit" class="btn-primary btn-primary-lg w-full">
                Check in & print badge
            </button>
        </form>
    </div>
</x-app-layout>