@extends('layouts.school')
@section('title', 'Portal Account: ' . $teacher->full_name)
@section('header', 'Portal Account — ' . $teacher->full_name)
@section('content')
    <div class="mb-6">
        <a href="{{ route('school.teachers.show', [request()->route('schoolId'), $teacher->id]) }}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to teacher profile</a>
    </div>

    @if (session('account_password'))
        <div class="mb-6 rounded-xl bg-green-50 ring-1 ring-green-200 p-4 text-sm text-green-800">
            <p class="font-semibold">Account created. Share these credentials securely:</p>
            <p class="mt-1 font-mono">{{ $teacher->user->email }} &nbsp;/&nbsp; {{ session('account_password') }}</p>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
            <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Current Status</h3>
            @if ($teacher->user)
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between"><dt class="text-gray-500">Login email</dt><dd class="font-medium text-gray-900">{{ $teacher->user->email }}</dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Role</dt><dd class="font-medium capitalize text-gray-900">{{ $teacher->user->role->label() }}</dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Login enabled</dt><dd><span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $teacher->user->is_active ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700' }}">{{ $teacher->user->is_active ? 'Yes' : 'No' }}</span></dd></div>
                </dl>
                <div class="mt-5 flex flex-wrap gap-3 border-t border-gray-100 pt-5">
                    <form method="POST" action="{{ route('school.teachers.toggle-account', [request()->route('schoolId'), $teacher->id]) }}">
                        @csrf @method('PATCH')
                        <button type="submit" class="rounded-lg border {{ $teacher->user->is_active ? 'border-yellow-200 text-yellow-700 hover:bg-yellow-50' : 'border-green-200 text-green-700 hover:bg-green-50' }} bg-white px-4 py-2 text-sm font-medium">
                            {{ $teacher->user->is_active ? 'Disable portal access' : 'Enable portal access' }}
                        </button>
                    </form>
                    <a href="{{ route('school.teachers.permissions', [request()->route('schoolId'), $teacher->id]) }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Manage permissions</a>
                    <a href="{{ route('portal.login', [$teacher->school_id, 'teacher']) }}" target="_blank" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Open teacher login</a>
                </div>

                <form method="POST" action="{{ route('school.teachers.reset-password', [request()->route('schoolId'), $teacher->id]) }}" class="mt-6 border-t border-gray-100 pt-5" onsubmit="return confirm('Reset this teacher\'s password?')">
                    @csrf
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Reset password</h4>
                    <input type="password" name="password" required minlength="6" placeholder="New password (min 6 chars)"
                           class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <button type="submit" class="mt-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">Reset password</button>
                </form>
            @else
                <p class="text-sm text-gray-500">This teacher has no portal account yet. Create a new one or connect an existing staff user.</p>
            @endif
        </div>

        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
            <form method="POST" action="{{ route('school.teachers.save-account', [request()->route('schoolId'), $teacher->id]) }}">
                @csrf
                <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">{{ $teacher->user ? 'Relink Account' : 'Create / Connect Account' }}</h3>

                <div class="mb-4">
                    <fieldset class="rounded-lg border border-gray-200 p-4">
                        <legend class="px-1 text-xs font-semibold uppercase tracking-wide text-gray-400">Mode</legend>
                        <label class="flex items-center gap-2 py-1 text-sm">
                            <input type="radio" name="mode" value="create" checked class="h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500">
                            Create a brand-new account for this teacher
                        </label>
                        <label class="flex items-center gap-2 py-1 text-sm">
                            <input type="radio" name="mode" value="connect" class="h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500">
                            Connect an existing school user (teacher role)
                        </label>
                    </fieldset>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Email *</label>
                    <input type="email" name="email" value="{{ old('email', $teacher->email) }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">Password (create mode only)</label>
                    <input type="password" name="password" minlength="6" autocomplete="new-password" placeholder="Leave blank to auto-generate"
                           class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <p class="mt-1 text-xs text-gray-400">If left empty, a secure password is generated and shown once after creation.</p>
                </div>

                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Account Link</button>
            </form>
        </div>
    </div>
@endsection