<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>Login · <?= e(setting('company_name', 'Rice & Curry RMS')) ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/app.css">
</head>
<body>
<div class="login-wrap">

    <div class="login-hero"<?php if (!empty(setting('login_background_path'))): ?> style="background-image: linear-gradient(135deg, rgba(22,48,92,0.90) 0%, rgba(14,31,66,0.92) 60%, rgba(122,46,46,0.55) 100%), url('<?= BASE_URL ?>/<?= e(setting('login_background_path')) ?>'); background-size: cover; background-position: center;"<?php endif; ?>>
        <div>
            <?php if (!empty(setting('logo_path'))): ?>
            <div class="hero-icon" style="padding:0;overflow:hidden;"><img src="<?= BASE_URL ?>/<?= e(setting('logo_path')) ?>" alt="" style="width:100%;height:100%;object-fit:cover;"></div>
            <?php else: ?>
            <div class="hero-icon"><i class="fa-solid fa-bowl-rice"></i></div>
            <?php endif; ?>
            <h1><?= e(setting('company_name', 'Rice & Curry')) ?></h1>
            <div class="hero-sub">
                <?= nl2br(e(setting('tagline', "Anuradhapura Office Ground eken start karana Rice & Curry business eka — online orders, free delivery, saha full restaurant operations ekama system ekakin."))) ?>
            </div>
        </div>

        <div class="hero-feature-list">
            <div class="hero-feature">
                <div class="f-icon"><i class="fa-solid fa-receipt"></i></div>
                <div>
                    <div class="f-title">Fast Order Taking &amp; POS</div>
                    <div class="f-sub">Dine-in, Takeaway, Online orders — single screen</div>
                </div>
            </div>
            <div class="hero-feature">
                <div class="f-icon"><i class="fa-solid fa-motorcycle"></i></div>
                <div>
                    <div class="f-title">Free Delivery Zones</div>
                    <div class="f-sub">Location-based delivery tracking end-to-end</div>
                </div>
            </div>
            <div class="hero-feature">
                <div class="f-icon"><i class="fa-solid fa-box-open"></i></div>
                <div>
                    <div class="f-title">Stock &amp; Recipe Control</div>
                    <div class="f-sub">Auto-deduct raw materials on every sale</div>
                </div>
            </div>
            <div class="hero-feature">
                <div class="f-icon"><i class="fa-solid fa-sack-dollar"></i></div>
                <div>
                    <div class="f-title">Payroll &amp; Finance</div>
                    <div class="f-sub">Attendance, wages, cash &amp; bank in one ledger</div>
                </div>
            </div>
        </div>
    </div>

    <div class="login-form-side">
        <div class="login-card">
            <h2>Welcome back</h2>
            <div class="form-sub">Sign in to continue to your dashboard</div>

            <?php if (!empty($error)): ?>
                <div class="alert alert-danger"><i class="fa-solid fa-triangle-exclamation"></i> <?= e($error) ?></div>
            <?php endif; ?>

            <form method="POST" action="<?= Router::url('login') ?>">
                <?= $csrf ?>
                <div class="form-group">
                    <label for="username">Username</label>
                    <div class="input-icon-wrap">
                        <span class="field-icon"><i class="fa-solid fa-user"></i></span>
                        <input type="text" id="username" name="username" class="form-control" autofocus required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row-between">
                        <label for="password" style="margin-bottom:0;">Password</label>
                        <span class="forgot-link">Forgot password?</span>
                    </div>
                    <div class="input-icon-wrap" style="margin-top:6px;">
                        <span class="field-icon"><i class="fa-solid fa-lock"></i></span>
                        <input type="password" id="password" name="password" class="form-control" required>
                        <button type="button" class="toggle-eye" id="rmsToggleBtn" onclick="rmsTogglePassword()"><i class="fa-solid fa-eye"></i></button>
                    </div>
                </div>

                <button type="submit" class="btn btn-signin"><i class="fa-solid fa-right-to-bracket"></i> Sign In</button>
            </form>

            <div class="secure-divider">Secure Login</div>

            <div class="login-footer">
                <div class="protected"><i class="fa-solid fa-shield-halved"></i> Protected by role-based access control</div>
                <div>© <?= date('Y') ?> MJ Systems — All rights reserved.</div>
            </div>
        </div>
    </div>
</div>

<script>
function rmsTogglePassword() {
    const input = document.getElementById('password');
    const icon = document.querySelector('#rmsToggleBtn i');
    const isHidden = input.type === 'password';
    input.type = isHidden ? 'text' : 'password';
    icon.className = isHidden ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye';
}
</script>
</body>
</html>
