@extends('layouts.app')

@section('title', 'Patient Registration')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex items-center justify-between bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
        <div>
            <h1 class="text-xl font-bold text-slate-900 tracking-tight">Comprehensive Patient Registration</h1>
            <p class="text-xs text-slate-500 mt-0.5">Generates permanent Patient ID (SNH-XXXXXXXX), Barcode, and UHID record</p>
        </div>
        <a href="{{ route('patients.index') }}" class="text-xs text-slate-600 font-semibold hover:underline">
            &larr; Back to Directory
        </a>
    </div>

    <form method="POST" action="{{ route('patients.store') }}" class="space-y-6">
        @csrf

        <!-- 1. Demographics & Identity -->
        <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <h2 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2 flex items-center">
                <i class="fa-solid fa-user text-teal-600 mr-2"></i> 1. Basic Demographics & Identification
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                <div>
                    <label class="block font-semibold text-slate-700 mb-1">First Name <span class="text-rose-500">*</span></label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" required class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Middle Name</label>
                    <input type="text" name="middle_name" value="{{ old('middle_name') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Last Name <span class="text-rose-500">*</span></label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" required class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Date of Birth</label>
                    <input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Age (Years)</label>
                    <input type="number" name="age" value="{{ old('age') }}" min="0" max="130" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Gender <span class="text-rose-500">*</span></label>
                    <select name="gender" required class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                        <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                        <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Blood Group</label>
                    <select name="blood_group" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                        @foreach(config('hospital.blood_groups') as $bg)
                            <option value="{{ $bg }}" {{ old('blood_group') == $bg ? 'selected' : '' }}>{{ $bg }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Marital Status</label>
                    <select name="marital_status" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                        @foreach(config('hospital.marital_statuses') as $ms)
                            <option value="{{ $ms }}" {{ old('marital_status') == $ms ? 'selected' : '' }}>{{ $ms }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Occupation</label>
                    <input type="text" name="occupation" value="{{ old('occupation') }}" placeholder="e.g. Service, Business, Homemaker" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>
            </div>
        </div>

        <!-- 2. Contact & Geographic Address -->
        <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <h2 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2 flex items-center">
                <i class="fa-solid fa-map-location-dot text-teal-600 mr-2"></i> 2. Contact & Geographic Address
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Primary Mobile <span class="text-rose-500">*</span></label>
                    <input type="text" name="mobile" value="{{ old('mobile') }}" required placeholder="10-digit Mobile Number" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Alternate Contact No</label>
                    <input type="text" name="alternate_mobile" value="{{ old('alternate_mobile') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ old('email') }}" placeholder="patient@example.com" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div class="md:col-span-3">
                    <label class="block font-semibold text-slate-700 mb-1">Street / House Address</label>
                    <input type="text" name="address" value="{{ old('address') }}" placeholder="House / Flat No, Street, Landmark" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Village / Town</label>
                    <input type="text" name="village" value="{{ old('village') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Post Office</label>
                    <input type="text" name="post_office" value="{{ old('post_office') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Police Station</label>
                    <input type="text" name="police_station" value="{{ old('police_station') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">District</label>
                    <input type="text" name="district" value="{{ old('district', 'North 24 Parganas') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">State</label>
                    <input type="text" name="state" value="{{ old('state', 'West Bengal') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">PIN Code</label>
                    <input type="text" name="pin" value="{{ old('pin') }}" placeholder="700..." class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>
            </div>
        </div>

        <!-- 3. Emergency Contact & Identification -->
        <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <h2 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2 flex items-center">
                <i class="fa-solid fa-phone-volume text-teal-600 mr-2"></i> 3. Emergency Contact & National ID
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Emergency Contact Person</label>
                    <input type="text" name="emergency_contact_name" value="{{ old('emergency_contact_name') }}" placeholder="Name of relative / friend" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Relationship</label>
                    <input type="text" name="emergency_contact_relationship" value="{{ old('emergency_contact_relationship') }}" placeholder="e.g. Spouse, Father, Mother" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Emergency Phone</label>
                    <input type="text" name="emergency_contact_phone" value="{{ old('emergency_contact_phone') }}" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">National ID Type</label>
                    <select name="national_id_type" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                        <option value="Aadhaar">Aadhaar Card (12 Digits)</option>
                        <option value="Voter ID">Voter ID (EPIC)</option>
                        <option value="Passport">Passport</option>
                        <option value="Driving License">Driving License</option>
                    </select>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">National ID Number</label>
                    <input type="text" name="national_id_number" value="{{ old('national_id_number') }}" placeholder="XXXX-XXXX-XXXX" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Preferred Language</label>
                    <select name="preferred_language" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                        <option value="Bengali">Bengali</option>
                        <option value="English">English</option>
                        <option value="Hindi">Hindi</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 4. Clinical Baseline & Allergies -->
        <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
            <h2 class="text-sm font-bold text-slate-900 border-b border-slate-100 pb-2 flex items-center">
                <i class="fa-solid fa-triangle-exclamation text-rose-600 mr-2"></i> 4. Clinical Baseline Alerts & Medical History
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                <div>
                    <label class="block font-semibold text-rose-700 mb-1">
                        <i class="fa-solid fa-ban mr-1"></i> Known Drug / Food Allergies
                    </label>
                    <textarea name="known_allergies" rows="2" placeholder="e.g. Penicillin, Sulfa drugs, Peanuts, NSAIDs" class="w-full px-3 py-2 border border-rose-200 rounded-lg bg-rose-50/30 focus:ring-2 focus:ring-rose-500 focus:outline-none">{{ old('known_allergies') }}</textarea>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Existing Chronic Diseases</label>
                    <textarea name="existing_diseases" rows="2" placeholder="e.g. Diabetes Mellitus, Hypertension, Asthma, CAD" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">{{ old('existing_diseases') }}</textarea>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Current Active Medications</label>
                    <textarea name="current_medications" rows="2" placeholder="List existing tablets/injections patient is currently taking" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">{{ old('current_medications') }}</textarea>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 mb-1">Referral Source</label>
                    <input type="text" name="referral_source" value="{{ old('referral_source') }}" placeholder="Self, Dr. Reference, Hospital Emergency..." class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end space-x-3 pt-2">
            <a href="{{ route('patients.index') }}" class="px-5 py-2.5 border border-slate-300 text-slate-700 text-xs font-semibold rounded-lg hover:bg-slate-50 transition">
                Cancel
            </a>
            <button type="submit" class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-lg shadow-md hover:shadow-lg transition flex items-center">
                <i class="fa-solid fa-check mr-2"></i> Register Patient & Generate Barcode
            </button>
        </div>
    </form>
</div>
@endsection