@extends('layouts.app')
@section('title', 'New Visit')
@section('content')
<div class="max-w-3xl mx-auto">
    <form method="POST" action="{{ route('visits.store.new') }}" id="newVisitForm" onsubmit="return lockNewVisitForm(this);">
        @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">

                <!-- Patient Search -->
                <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 number..." autocomplete="off">
                        <input type="hidden" name="patient_id" id="patient_id" required>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">Patient not found? <a href="{{ route('patients.create') }}" class="text-cr-600 font-medium">Register new patient →</a></p>
                </div>

                <!-- Visit Type -->
                <div>
                    <label class="form-label">Visit Type <span class="text-red-500">*</span></label>
                    <select name="visit_type" required class="form-input">
                        <option value="">Select visit type</option>
                        <optgroup label="Outpatient">
                            <option value="outpatient">General Consultation</option>
                            <option value="revisit">Revisit / Follow-up</option>
                            <option value="emergency">Emergency</option>
                        </optgroup>
                        <optgroup label="Specialist">
                            <option value="postnatal">Postnatal</option>
                            <option value="child_welfare">Child Welfare</option>
                        </optgroup>
                        <optgroup label="Diagnostics Only">
                            <option value="lab_only">Lab Only</option>
                            <option value="imaging_only">Imaging Only</option>
                        </optgroup>
                        <optgroup label="Other">
                            <option value="procedure">Procedure / Minor Surgery</option>
                            <option value="dressing">Wound Dressing</option>
                            <option value="injection">Injection</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Department -->
                <div>
                    <label class="form-label">Department <span class="text-red-500">*</span></label>
                    {{-- Lab and Radiology excluded — direct lab / direct
                         radiology walk-ins are created from the Queue
                         page's Start New Visit button, not from here. --}}
                    <select name="department_id" required class="form-input">
                        @include('partials._department-options', ['matchCode' => 'OPD', 'excludeDirect' => true])
                    </select>
                </div>

                <!-- Payment Mode -->
                <div>
                    <label class="form-label">Payment Mode <span class="text-red-500">*</span></label>
                    <select name="payment_mode" required class="form-input" id="pm_select" onchange="document.getElementById('ins_fields').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>

                <!-- Clinician -->
                <div>
                    <label class="form-label">Preferred Clinician</label>
                    {{-- Pool restricted to clinical roles via the
                         standard partial. --}}
                    <select name="clinician_id" class="form-input">
                        <option value="">Any available doctor</option>
                        @include('partials._clinician-options')
                    </select>
                </div>
            </div>

            <!-- Insurance Fields -->
            <div id="ins_fields" 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 insurer</option>
                        @foreach($insurers as $ins)
                            <option value="{{ $ins->id }}">{{ $ins->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Authorization Code</label>
                    <input type="text" name="authorization_code" class="form-input" placeholder="Pre-authorization code if any">
                </div>
            </div>

            <!-- Submit -->
            <div class="mt-6 flex gap-3 border-t border-gray-100 pt-5">
                <button type="submit" id="newVisitSubmitBtn" 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>
                    <span id="newVisitSubmitLabel">Create Visit &amp; Send to Queue</span>
                </button>
                <a href="{{ route('queue.board') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
    <script>
        // Round 7 — defensive double-submit prevention. The server has
        // a hard duplicate-visit guard (VisitController::store +
        // AppointmentController::storeNewVisit) but this client guard
        // kills the cause at the source: a receptionist accidentally
        // double-clicking the Save button before the page navigates.
        // If the form re-renders for any reason (validation error,
        // duplicate-redirect bounce-back) the button comes back enabled
        // because the script re-runs on the fresh page.
        let _newVisitSubmitting = false;
        function lockNewVisitForm(form) {
            if (_newVisitSubmitting) return false;
            _newVisitSubmitting = true;
            const btn   = document.getElementById('newVisitSubmitBtn');
            const label = document.getElementById('newVisitSubmitLabel');
            if (btn)   btn.disabled = true;
            if (btn)   btn.classList.add('opacity-60', 'cursor-not-allowed');
            if (label) label.textContent = 'Creating visit…';
            return true; // allow normal submit
        }
    </script>
</div>
@endsection