@extends('admin.layouts.app')

@section('title', 'Add User')

@section('content')
<div class="space-y-6">
    <div class="bg-white border border-slate-200 rounded-xl shadow-sm">
        <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
            <div>
                <h1 class="text-lg font-bold text-slate-900">Add User</h1>
                <p class="text-sm text-slate-600">Create a healthcare user account with profile details.</p>
            </div>
            <a href="{{ route('admin.nurses.index') }}" class="text-sm text-blue-600 hover:text-blue-700 font-semibold">Back to list</a>
        </div>

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

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Full Name</label>
                    <input type="text" name="full_name" value="{{ old('full_name') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('full_name') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800 flex items-center justify-between">
                        <span>Password</span>
                        <span class="text-xs text-slate-500">Leave blank to auto-generate</span>
                    </label>
                    <input type="text" name="password" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" placeholder="Optional">
                    @error('password') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Country</label>
                    <select name="country" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select country</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->name }}" @selected(old('country') === $country->name)>{{ $country->name }}</option>
                        @endforeach
                    </select>
                    @error('country') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">City</label>
                    <input type="text" name="city" value="{{ old('city') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                    @error('city') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Specialty</label>
                    <select name="primary_specialty" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select specialty</option>
                        @foreach($specialties as $specialty)
                            <option value="{{ $specialty->name }}" @selected(old('primary_specialty') === $specialty->name)>{{ $specialty->name }}</option>
                        @endforeach
                    </select>
                    @error('primary_specialty') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Years of Experience</label>
                    <input type="number" name="experience_years" value="{{ old('experience_years') }}" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500" min="0" step="1">
                    @error('experience_years') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">NCLEX Status</label>
                    <select name="nclex_status" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select status</option>
                        @foreach(['passed' => 'Passed', 'pending' => 'Pending', 'scheduled' => 'Scheduled', 'not_taken' => 'Not taken'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('nclex_status') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('nclex_status') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800 flex items-center gap-2">
                        <input type="checkbox" name="willing_to_relocate" value="1" class="rounded border-slate-300" @checked(old('willing_to_relocate'))>
                        <span>Ready to relocate</span>
                    </label>
                    @error('willing_to_relocate') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800">Account Status</label>
                    <select name="status" class="w-full rounded-lg border-slate-300 focus:ring-blue-500 focus:border-blue-500">
                        <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
                        <option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
                    </select>
                    @error('status') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-slate-800 flex items-center gap-2">
                        <input type="checkbox" name="verified" value="1" class="rounded border-slate-300" @checked(old('verified'))>
                        <span>Mark as verified</span>
                    </label>
                </div>
            </div>

            <div class="flex items-center justify-end">
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg">
                    Create User
                </button>
            </div>
        </form>
    </div>
</div>
@endsection