@extends('admin.layout')

@section('title', 'Admin Login')

@section('content')
<div class="d-flex align-items-center justify-content-center" style="min-height: 100vh; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);">
    <div class="card-premium" style="width: 100%; max-width: 450px; padding: 40px;">
        <div class="text-center mb-5">
            <div style="width: 60px; height: 60px; background: var(--primary-color); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 28px; margin-bottom: 20px; box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);">Z</div>
            <h2 style="font-weight: 800; color: var(--text-main); margin: 0;">Welcome Back</h2>
            <p style="color: var(--text-muted); margin-top: 10px;">Please enter your credentials to access the admin portal.</p>
        </div>
        <div class="text-center mt-3">
                <small class="text-muted">Hint( Username:  <strong>admin</strong> password:  <strong>password</strong> )</small>
            </div>

        @if(session('error'))
            <div class="alert alert-danger border-0 mb-4" style="border-radius: 12px; background: #fef2f2; color: #991b1b; font-weight: 600;">
                {{ session('error') }}
            </div>
        @endif

        <form action="{{ route('admin.login.post') }}" method="POST">
            @csrf
            <div class="form-group mb-4">
                <label style="font-weight: 700; color: #475569; margin-bottom: 8px;">Username</label>
                <div class="input-group" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 5px 15px;">
                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="fa fa-user"></i></span>
                    <input type="text" name="username" class="form-control bg-transparent border-0" placeholder="admin" required style="box-shadow: none;">
                </div>
            </div>

            <div class="form-group mb-5">
                <label style="font-weight: 700; color: #475569; margin-bottom: 8px;">Password</label>
                <div class="input-group" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 5px 15px;">
                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="fa fa-lock"></i></span>
                    <input type="password" name="password" class="form-control bg-transparent border-0" placeholder="password" required style="box-shadow: none;">
                </div>
            </div>

            <button type="submit" class="btn-premium w-100 justify-content-center py-3" style="font-size: 16px;">
                Sign In <i class="fa fa-arrow-right ml-2" style="font-size: 14px;"></i>
            </button>
            
        </form>

        <div class="text-center mt-5">
            <p style="font-size: 14px; color: var(--text-muted); margin: 0;">&copy; {{ date('Y') }} Zylu Admin Portal. All rights reserved.</p>
        </div>
    </div>
</div>
@endsection