@extends('layouts.app')

@section('title', 'Login')

@section('content')
<div class="max-w-md mx-auto py-12 px-4 sm:px-6">
    <div class="bg-white shadow-xl rounded-2xl p-8 border border-gray-100">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-secondary mb-2">Welcome Back</h2>
            <p class="text-gray-600">Login to access your Academy dashboard</p>
        </div>

        @if ($errors->any())
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <ul class="list-disc list-inside text-red-800 text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                <p class="text-green-800 text-sm">{{ session('success') }}</p>
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="mb-6">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                    Username / Email / Mobile
                </label>
                <input type="text" 
                       id="username" 
                       name="username" 
                       value="{{ old('username') }}" 
                       required 
                       class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 @error('username') border-red-500 ring-2 ring-red-200 @enderror">
            </div>

            <div class="mb-8">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                    Password
                </label>
                <input type="password" 
                       id="password" 
                       name="password" 
                       required 
                       class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 @error('password') border-red-500 ring-2 ring-red-200 @enderror">
            </div>

            <button type="submit" 
                    class="w-full bg-primary hover:bg-primary-hover text-white font-semibold py-3 px-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 text-lg">
                Sign In
            </button>
        </form>

        <div class="mt-8 text-center border-t border-gray-100 pt-6">
            <p class="text-sm text-gray-600">
                Use test credentials: <strong>shahzadkhan317</strong> / <strong>abcd1234</strong>
            </p>
        </div>
    </div>
</div>
@endsection