@extends('layouts.app')
@section('title', 'New Visit')
@section('content')
<div class="max-w-3xl mx-auto">
    <form method="POST" action="{{ route('visits.store') }}">
        @csrf
        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="form-label">Patient <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        <input type="text" class="form-input pl-9 patient-search" data-target="patient_id" placeholder="Search patient by name, MRN, or phone..." autocomplete="off">
                        <input type="hidden" name="patient_id" id="patient_id" required>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">Not found? <a href="{{ route('patients.create') }}" class="text-cr-600 font-medium">Register new patient →</a></p>
                </div>
                <input type="hidden" name="visit_type" value="OPD">
                <div>
                    <label class="form-label">Department <span class="text-red-500">*</span></label>
                    <select name="department_id" required class="form-input">
                        @include('partials._department-options', ['matchCode' => 'OPD'])
                    </select>
                </div>
                <div>
                    <label class="form-label">Payer Type <span class="text-red-500">*</span></label>
                    <select name="payer_type" required class="form-input" onchange="document.getElementById('ins_row').style.display=this.value==='insurance'?'grid':'none'">
                        <option value="cash">Cash</option>
                        <option value="mpesa">M-Pesa</option>
                        <option value="insurance">Insurance</option>
                        <option value="corporate">Corporate</option>
                    </select>
                </div>
            </div>
            <div id="ins_row" class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5" style="display:none">
                <div><label class="form-label">Insurance Company</label><select name="insurance_company_id" class="form-input"><option value="">Select</option>@foreach($insurers as $i)<option value="{{ $i->id }}">{{ $i->name }}</option>@endforeach</select></div>
                <div><label class="form-label">Authorization Code</label><input type="text" name="authorization_code" class="form-input"></div>
            </div>
            <div class="mt-6 flex gap-3 border-t border-gray-100 pt-5">
                <button type="submit" class="btn-success flex items-center gap-2 px-6 py-2.5"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Create Visit</button>
                <a href="{{ route('visits.index') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection