@extends('layouts.app')

@section('title', 'Login - Pamtech')

@section('content')
<div class="auth-container flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div class="text-center">
            <a href="/" class="inline-block mb-6">
                <img src="{{ asset('logo.png') }}" alt="Pamtech" class="h-10 w-auto mx-auto">
            </a>
            <span class="badge-outline">Admin Access</span>
            <h2 class="mt-4 text-2xl font-bold text-zinc-900">Sign in to your account</h2>
            <p class="mt-2 text-sm text-zinc-500">Authorized administrators only</p>
        </div>

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

            @if(session('status'))
                <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">{{ session('status') }}</div>
            @endif
            @if(session('error'))
                <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{{ session('error') }}</div>
            @endif
            @if(session('info'))
                <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg text-sm">{{ session('info') }}</div>
            @endif

            <div class="auth-card p-8 space-y-5">
                <div>
                    <label for="email" class="form-label">Email Address</label>
                    <input id="email" name="email" type="email" autocomplete="email" required value="{{ old('email') }}"
                        class="form-input @error('email') border-red-500 @enderror" placeholder="your@email.com">
                    @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="password" class="form-label">Password</label>
                    <input id="password" name="password" type="password" autocomplete="current-password" required
                        class="form-input @error('password') border-red-500 @enderror" 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">
                    <div class="flex items-center">
                        <input id="remember_me" name="remember" type="checkbox" class="h-4 w-4 text-pamtech-red focus:ring-pamtech-red border-zinc-300 rounded">
                        <label for="remember_me" class="ml-2 block text-sm text-zinc-500">Remember me</label>
                    </div>
                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="text-sm font-medium text-pamtech-red hover:text-pamtech-red-dark transition-colors">Forgot password?</a>
                    @endif
                </div>

                <button type="submit" class="btn-primary w-full py-3">Sign in</button>
            </div>

            <div class="text-center">
                <a href="/" class="text-sm text-zinc-500 hover:text-zinc-900 transition-colors">← Back to Home</a>
            </div>
        </form>
    </div>
</div>
@endsection