@extends('layouts.admin')

@section('content')
<div class="p-6 max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold font-display text-ink-900">Create User</h1>
        <a href="{{ route('admin.users.index') }}" class="text-graphite-400 hover:text-ink-600">&larr; Back</a>
    </div>

    <form action="{{ route('admin.users.store') }}" method="POST" class="bg-white border border-graphite-400/30 rounded p-6 space-y-6">
        @csrf

        <div>
            <label for="name" class="block text-sm font-medium text-ink-600 mb-1">Name *</label>
            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
            @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="email" class="block text-sm font-medium text-ink-600 mb-1">Email *</label>
            <input type="email" name="email" id="email" value="{{ old('email') }}" required
                class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
            @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-ink-600 mb-1">Password *</label>
            <input type="password" name="password" id="password" required
                class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
            @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="password_confirmation" class="block text-sm font-medium text-ink-600 mb-1">Confirm Password *</label>
            <input type="password" name="password_confirmation" id="password_confirmation" required
                class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
        </div>

        <div>
            <label for="role" class="block text-sm font-medium text-ink-600 mb-1">Role *</label>
            <select name="role" id="role" required class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
                <option value="">Select Role</option>
                <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                <option value="institute_admin" {{ old('role') == 'institute_admin' ? 'selected' : '' }}>Institute Admin</option>
                <option value="examiner" {{ old('role') == 'examiner' ? 'selected' : '' }}>Examiner</option>
                <option value="private_candidate" {{ old('role') == 'private_candidate' ? 'selected' : '' }}>Private Candidate</option>
            </select>
            @error('role') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="institute_id" class="block text-sm font-medium text-ink-600 mb-1">Institute</label>
            <select name="institute_id" id="institute_id" class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
                <option value="">None</option>
                @foreach($institutes as $institute)
                    <option value="{{ $institute->id }}" {{ old('institute_id') == $institute->id ? 'selected' : '' }}>
                        {{ $institute->name }}
                    </option>
                @endforeach
            </select>
            @error('institute_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="status" class="block text-sm font-medium text-ink-600 mb-1">Status *</label>
            <select name="status" id="status" required class="w-full border border-graphite-400/50 rounded px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
                <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            @error('status') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.users.index') }}" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50">Cancel</a>
            <button type="submit" class="px-4 py-2 bg-seal-blue-700 text-white rounded hover:bg-seal-blue-700/90">Create</button>
        </div>
    </form>
</div>
@endsection