{{-- Visitor detail inputs shared by appointment and walk-in forms. Expects optional $visitor. --}}
@php $visitor ??= new \App\Models\Visitor; @endphp
<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label" for="visitor_phone">Mobile number <span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="tel" id="visitor_phone" name="visitor_phone" value="{{ old('visitor_phone', $visitor->phone) }}" class="form-control @error('visitor_phone') is-invalid @enderror" placeholder="e.g. 9876543210" required>
            <button type="button" class="btn btn-outline-secondary" id="lookupBtn" title="Find returning visitor"><i class="bi bi-search"></i></button>
            @error('visitor_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-text" id="lookupHint">Enter the mobile number first; returning visitors are filled in automatically.</div>
    </div>
    <div class="col-md-6">
        <label class="form-label" for="visitor_name">Full name <span class="text-danger">*</span></label>
        <input type="text" id="visitor_name" name="visitor_name" value="{{ old('visitor_name', $visitor->name) }}" class="form-control @error('visitor_name') is-invalid @enderror" required>
        @error('visitor_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label" for="visitor_email">Email</label>
        <input type="email" id="visitor_email" name="visitor_email" value="{{ old('visitor_email', $visitor->email) }}" class="form-control @error('visitor_email') is-invalid @enderror">
        @error('visitor_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label" for="visitor_company">Company / Organisation</label>
        <input type="text" id="visitor_company" name="visitor_company" value="{{ old('visitor_company', $visitor->company) }}" class="form-control @error('visitor_company') is-invalid @enderror">
        @error('visitor_company')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
        <label class="form-label" for="id_type">ID proof type</label>
        <select id="id_type" name="id_type" class="form-select @error('id_type') is-invalid @enderror">
            <option value="">— None —</option>
            @foreach (\App\Models\Visitor::ID_TYPES as $t)
                <option value="{{ $t }}" @selected(old('id_type', $visitor->id_type) === $t)>{{ $t }}</option>
            @endforeach
        </select>
        @error('id_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-8">
        <label class="form-label" for="id_number">ID number</label>
        <input type="text" id="id_number" name="id_number" value="{{ old('id_number', $visitor->id_number) }}" class="form-control @error('id_number') is-invalid @enderror">
        @error('id_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
        <label class="form-label" for="address">Address</label>
        <input type="text" id="address" name="address" value="{{ old('address', $visitor->address) }}" class="form-control @error('address') is-invalid @enderror">
        @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>
@include('partials.visitor-media-fields', ['visitor' => $visitor, 'showCamera' => $showCamera ?? true])

@push('scripts')
<script nonce="{{ Vite::cspNonce() }}">
(function () {
    const phone = document.getElementById('visitor_phone');
    const hint = document.getElementById('lookupHint');
    const map = { name: 'visitor_name', email: 'visitor_email', company: 'visitor_company', id_type: 'id_type', id_number: 'id_number', address: 'address' };

    async function lookup() {
        const value = phone.value.trim();
        if (value.length < 10) return;
        try {
            const res = await fetch(@json(route('visitors.lookup')) + '?phone=' + encodeURIComponent(value), { headers: { 'Accept': 'application/json' } });
            if (!res.ok) return;
            const data = await res.json();
            if (data.found) {
                Object.entries(map).forEach(([key, id]) => {
                    const el = document.getElementById(id);
                    if (el && !el.value && data.visitor[key]) el.value = data.visitor[key];
                });
                hint.innerHTML = '<span class="text-success"><i class="bi bi-person-check"></i> Returning visitor (' + data.visits + ' previous visit(s)). Details loaded.</span>';
            } else {
                hint.innerHTML = '<span class="text-primary"><i class="bi bi-person-plus"></i> New visitor — please fill in the details.</span>';
            }
        } catch (e) { /* lookup is a convenience only */ }
    }

    phone.addEventListener('blur', lookup);
    document.getElementById('lookupBtn').addEventListener('click', lookup);
})();
</script>
@endpush