@extends('layouts.auth')

@php
    $isStaff = ($area ?? 'admin') === 'staff';
@endphp

@section('title', $school->name . ' - ' . ($isStaff ? 'Staff' : 'Admin') . ' Login')
@section('subtitle', $isStaff ? 'Sign in to your staff workspace' : 'Sign in to the school admin dashboard')

@section('content')
    <div class="mb-4 flex items-center gap-3 rounded-lg bg-primary-50 border border-primary-100 px-4 py-3">
        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600 text-white text-xs font-bold">
            {{ $school->initials }}
        </div>
        <div>
            <p class="text-sm font-semibold text-primary-900">{{ $school->name }}</p>
            <p class="text-xs text-primary-600">{{ $school->city }}, {{ $school->state }}</p>
        </div>
    </div>

    <form method="POST" action="{{ $isStaff ? route('school.login.staff.submit', $school->id) : route('school.login.submit', $school->id) }}">
        @csrf

        <div class="space-y-4">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
                <input type="email"
                       id="email"
                       name="email"
                       value="{{ old('email') }}"
                       required
                       autofocus
                       autocomplete="email"
                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                       placeholder="your@email.com">
                @error('email')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password"
                       id="password"
                       name="password"
                       required
                       autocomplete="current-password"
                       class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                       placeholder="Enter your password">
                @error('password')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex items-center justify-between">
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="remember" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <span class="text-sm text-gray-600">Remember me</span>
                </label>
                <a href="{{ route('school.password.request', $school->id) }}" class="text-sm text-primary-600 hover:text-primary-500">Forgot password?</a>
            </div>

            <button type="submit"
                    class="w-full rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-colors">
                Sign in
            </button>
        </div>
    </form>

    <div class="mt-6 space-y-2 border-t pt-4 text-center">
        @if ($isStaff)
            <p class="text-xs text-gray-500">School administrator? <a href="{{ route('school.login', $school->id) }}" class="font-semibold text-primary-600 hover:text-primary-500">Use the Admin Login</a></p>
        @else
            <p class="text-xs text-gray-500">Teacher or staff member? <a href="{{ route('school.login.staff', $school->id) }}" class="font-semibold text-primary-600 hover:text-primary-500">Use the Staff Login</a></p>
        @endif
        <p class="text-xs text-gray-500">Student or parent? <a href="{{ route('portal.login', $school->id) }}" class="font-semibold text-primary-600 hover:text-primary-500">Go to the portal login</a></p>
        <p class="text-xs text-gray-500"><a href="{{ tenant_url('public.home', $school->slug) }}" class="font-semibold text-primary-600 hover:text-primary-500">&larr; Back to {{ $school->name }} website</a></p>
    </div>
@endsection