@extends('layouts.app')

@section('title', 'Issue OPD Token / Visit')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Issue OPD Consultation Token</h1>
            <p class="text-sm text-slate-500">Queue assignment and walk-in consultation registration</p>
        </div>
        <a href="{{ route('opd.index') }}" class="inline-flex items-center text-sm font-semibold text-hospital-600 hover:text-hospital-700">
            <i class="fa-solid fa-arrow-left mr-2"></i> Back to Queue
        </a>
    </div>

    @if(session('error'))
        <div class="mb-6 p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-700 rounded-r-lg flex items-center">
            <i class="fa-solid fa-circle-exclamation mr-3 text-lg"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <form action="{{ route('opd.store-visit') }}" method="POST" class="p-6 md:p-8 space-y-6">
            @csrf

            <!-- Patient Selection / Verification Banner -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">Patient Information</label>
                @if($patient)
                    <input type="hidden" name="patient_id" value="{{ $patient->id }}">
                    <div class="p-4 bg-teal-50 border border-teal-200 rounded-lg flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 rounded-full bg-teal-600 text-white font-bold text-lg flex items-center justify-center">
                                {{ substr($patient->first_name, 0, 1) }}{{ substr($patient->last_name, 0, 1) }}
                            </div>
                            <div>
                                <div class="font-bold text-slate-900 text-base flex items-center space-x-2">
                                    <span>{{ $patient->full_name }}</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-teal-200 text-teal-800 font-semibold">{{ $patient->patient_id }}</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-slate-200 text-slate-700 font-semibold">UHID: {{ $patient->uhid }}</span>
                                </div>
                                <div class="text-xs text-slate-600 mt-0.5">
                                    <span>{{ $patient->age_formatted }}</span> • 
                                    <span>{{ ucfirst($patient->gender) }}</span> • 
                                    <span>Blood: {{ $patient->blood_group ?? 'Unknown' }}</span> • 
                                    <span><i class="fa-solid fa-phone text-slate-400 mr-1"></i>{{ $patient->mobile }}</span>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('patients.index') }}" class="text-xs text-hospital-600 hover:underline">Change Patient</a>
                    </div>
                @else
                    <div class="p-6 border-2 border-dashed border-slate-300 rounded-lg text-center bg-slate-50">
                        <i class="fa-solid fa-user-plus text-3xl text-slate-400 mb-2"></i>
                        <p class="text-sm font-semibold text-slate-700">No Patient Selected</p>
                        <p class="text-xs text-slate-500 mb-4">Please select an existing registered patient or register a new patient first.</p>
                        <div class="flex justify-center space-x-3">
                            <a href="{{ route('patients.index') }}" class="px-4 py-2 bg-white border border-slate-300 rounded-lg text-xs font-semibold text-slate-700 hover:bg-slate-100 shadow-sm">
                                <i class="fa-solid fa-users mr-1.5"></i> Browse Patients
                            </a>
                            <a href="{{ route('patients.create') }}" class="px-4 py-2 bg-hospital-600 hover:bg-hospital-700 text-white rounded-lg text-xs font-semibold shadow-sm">
                                <i class="fa-solid fa-user-plus mr-1.5"></i> Register New Patient
                            </a>
                        </div>
                    </div>
                @endif
            </div>

            @if($patient)
            <!-- Consultation Routing -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-200">
                <!-- Department Selection -->
                <div>
                    <label for="department_id" class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">
                        Clinical Department <span class="text-rose-500">*</span>
                    </label>
                    <select name="department_id" id="department_id" required class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-hospital-500 focus:bg-white">
                        <option value="">-- Choose Department --</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                {{ $dept->name }} ({{ $dept->code }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Doctor Selection with Consultation Fees -->
                <div>
                    <label for="doctor_id" class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">
                        Consultant Doctor <span class="text-rose-500">*</span>
                    </label>
                    <select name="doctor_id" id="doctor_id" required class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-hospital-500 focus:bg-white">
                        <option value="">-- Choose Doctor --</option>
                        @foreach($doctors as $doc)
                            <option value="{{ $doc->id }}" 
                                data-fee="{{ $doc->opd_consultation_fee }}"
                                data-followup="{{ $doc->followup_consultation_fee }}"
                                data-emergency="{{ $doc->emergency_consultation_fee }}"
                                {{ old('doctor_id') == $doc->id ? 'selected' : '' }}>
                                {{ $doc->full_name }} — {{ $doc->designation }} (₹{{ number_format($doc->opd_consultation_fee, 2) }})
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Visit Type & Financials -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-2">
                        Visit Type <span class="text-rose-500">*</span>
                    </label>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="flex items-center p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 has-[:checked]:border-hospital-500 has-[:checked]:bg-hospital-50/50">
                            <input type="radio" name="visit_type" value="new" checked class="text-hospital-600 focus:ring-hospital-500">
                            <span class="ml-2 text-xs font-semibold text-slate-800">New Consultation</span>
                        </label>
                        <label class="flex items-center p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 has-[:checked]:border-hospital-500 has-[:checked]:bg-hospital-50/50">
                            <input type="radio" name="visit_type" value="follow_up" class="text-hospital-600 focus:ring-hospital-500">
                            <span class="ml-2 text-xs font-semibold text-slate-800">Follow-up Visit</span>
                        </label>
                        <label class="flex items-center p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 has-[:checked]:border-hospital-500 has-[:checked]:bg-hospital-50/50">
                            <input type="radio" name="visit_type" value="emergency" class="text-hospital-600 focus:ring-hospital-500">
                            <span class="ml-2 text-xs font-semibold text-slate-800">Emergency OPD</span>
                        </label>
                        <label class="flex items-center p-3 border border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 has-[:checked]:border-hospital-500 has-[:checked]:bg-hospital-50/50">
                            <input type="radio" name="visit_type" value="free_review" class="text-hospital-600 focus:ring-hospital-500">
                            <span class="ml-2 text-xs font-semibold text-slate-800">Free Review (7 days)</span>
                        </label>
                    </div>
                </div>

                <!-- Fee Overview Card -->
                <div class="bg-slate-50 border border-slate-200 rounded-xl p-5 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center justify-between text-xs text-slate-500 mb-1">
                            <span>Applicable Consultation Fee</span>
                            <span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-bold uppercase text-[10px]">Instant Receipt</span>
                        </div>
                        <div class="text-3xl font-extrabold text-slate-900" id="feeDisplay">₹500.00</div>
                        <p class="text-xs text-slate-500 mt-1">Consultation fee includes triage vitals recording and doctor prescription.</p>
                    </div>
                    <div class="mt-4 pt-3 border-t border-slate-200 flex items-center text-xs text-slate-600">
                        <i class="fa-solid fa-receipt text-hospital-600 mr-2"></i>
                        <span>Printed token slip generated with thermal/barcode compatibility</span>
                    </div>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="pt-4 border-t border-slate-200 flex items-center justify-end space-x-4">
                <a href="{{ route('opd.index') }}" class="px-5 py-2.5 border border-slate-300 rounded-lg text-sm font-semibold text-slate-700 hover:bg-slate-100">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 bg-hospital-600 hover:bg-hospital-700 text-white rounded-lg text-sm font-semibold shadow-sm flex items-center">
                    <i class="fa-solid fa-ticket mr-2"></i> Generate OPD Token Slip
                </button>
            </div>
            @endif
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const doctorSelect = document.getElementById('doctor_id');
        const visitTypes = document.querySelectorAll('input[name="visit_type"]');
        const feeDisplay = document.getElementById('feeDisplay');

        function updateFee() {
            if (!doctorSelect || !feeDisplay) return;
            const selectedDoc = doctorSelect.options[doctorSelect.selectedIndex];
            if (!selectedDoc || !selectedDoc.value) {
                feeDisplay.textContent = '₹0.00';
                return;
            }

            let type = 'new';
            visitTypes.forEach(r => { if (r.checked) type = r.value; });

            let fee = 0;
            if (type === 'new') fee = selectedDoc.dataset.fee || 0;
            else if (type === 'follow_up') fee = selectedDoc.dataset.followup || 0;
            else if (type === 'emergency') fee = selectedDoc.dataset.emergency || 0;
            else if (type === 'free_review') fee = 0;

            feeDisplay.textContent = '₹' + parseFloat(fee).toFixed(2);
        }

        if (doctorSelect) doctorSelect.addEventListener('change', updateFee);
        visitTypes.forEach(r => r.addEventListener('change', updateFee));
        updateFee();
    });
</script>
@endsection