@extends('layouts.app')
@section('title', 'New Visitor')
@section('page_title', 'Register Visitor')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('visitors.index') }}">Visitors</a></li><li class="breadcrumb-item active">New</li>
@endsection

@section('content')
    <div class="card"><div class="card-body">
        <form method="POST" action="{{ route('visitors.store') }}">
            @csrf
            <div class="row g-3">
                <div class="col-md-5"><label class="form-label">Visitor Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
                <div class="col-md-4"><label class="form-label">CNIC</label>
                    <input type="text" name="cnic" value="{{ old('cnic') }}" class="form-control js-cnic @error('cnic') is-invalid @enderror" maxlength="15" placeholder="00000-0000000-0">
                    @error('cnic')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
                <div class="col-md-3"><label class="form-label">Phone</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" class="form-control js-phone @error('phone') is-invalid @enderror" maxlength="12" placeholder="0300-1234567">
                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
                <div class="col-md-5"><label class="form-label">Whom to Meet</label>
                    <input type="text" name="whom_to_meet" value="{{ old('whom_to_meet') }}" class="form-control" placeholder="e.g. Principal, Accounts"></div>
                <div class="col-md-5"><label class="form-label">Purpose</label>
                    <input type="text" name="purpose" value="{{ old('purpose') }}" class="form-control"></div>
                <div class="col-md-2"><label class="form-label">Party Size</label>
                    <input type="number" name="party_size" value="{{ old('party_size', 1) }}" min="1" class="form-control"></div>
                <div class="col-12"><label class="form-label">Remarks</label>
                    <input type="text" name="remarks" value="{{ old('remarks') }}" class="form-control"></div>
            </div>
            <div class="mt-3 d-flex gap-2">
                <button class="btn btn-primary"><i class="bi bi-box-arrow-in-right me-1"></i>Check In &amp; Issue Pass</button>
                <a href="{{ route('visitors.index') }}" class="btn btn-light border">Cancel</a>
            </div>
        </form>
    </div></div>
@endsection
