@extends('layouts.app')

@section('page_title', 'Login')

@section('content')
    <div class="auth-card">
        <div class="auth-cover">
            <h2 style="margin-top:0; font-size: 30px;">Smart Staff Monitoring</h2>
            <p style="opacity:.9; line-height:1.6;">Manage attendance, lunch, tasks, proof submission and salary automation from one modern dashboard.</p>

            <div class="soft-card" style="background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); color:#fff; margin-top: 24px;">
                <strong>What you can monitor</strong>
                <ul style="margin-bottom:0; padding-left:18px; line-height: 1.9;">
                    <li>Configurable office start deadline (admin-set)</li>
                    <li>Start/Stop one-minute video policy</li>
                    <li>Task progress, review and point approval</li>
                    <li>Point-based salary calculations</li>
                </ul>
            </div>
        </div>

        <div class="auth-form-wrap">
            <h3 style="margin-top: 0; font-size: 24px;">Welcome Back</h3>
            <p class="small">Sign in with your company account to continue.</p>

            <form method="POST" action="{{ route('login.submit') }}" class="card" style="margin-bottom: 12px;">
                @csrf
                <label>Email</label>
                <input type="email" name="email" value="{{ old('email') }}" required>

                <label>Password</label>
                <input type="password" name="password" required>

                <label style="display:flex; gap:8px; align-items:center; margin-bottom: 12px;">
                    <input type="checkbox" name="remember" style="width:auto; margin:0;"> Remember me
                </label>

                <button class="btn" type="submit" style="width:100%;">Login to Dashboard</button>
            </form>

            <div class="soft-card">
                <strong>Demo Accounts</strong>
                <div class="small" style="margin-top:4px; margin-bottom:8px;">Password for all: <b>password</b></div>
                
                <div class="small">Admin: admin@company.test</div>
                <div class="small">Staff: staff@company.test</div>
            </div>
        </div>
    </div>
@endsection
