<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="icon" type="image/png" href="{{ asset('kiyohr.png') }}">
    <title>Login - {{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ asset('vendor/fonts/manrope.css') }}">
    <link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('vendor/bootstrap-icons/css/bootstrap-icons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body class="login-page">
    <div class="container-fluid g-0 login-page-grid">
        <div class="row g-0 min-vh-100">
            <div class="col-lg-6 d-none d-lg-flex login-hero-panel flex-column justify-content-center">
                <div class="mx-auto w-100" style="max-width: 34rem;">
                    <a href="{{ route('website.home') }}" class="d-inline-block mb-4">
                        <img src="{{ asset('kiyohr.png') }}" alt="KiyoHR logo" height="40" class="d-block">
                    </a>

                    <h1 class="display-6 fw-bold mb-3">Welcome back to KiyoHR</h1>
                    <p class="text-muted mb-4">Sign in to manage attendance, leave, payroll, and your entire workforce from one secure dashboard.</p>

                    <img src="{{ asset('website/images/loginpageleftside.png') }}" alt="KiyoHR dashboard preview" class="login-hero-image mb-4">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="login-feature-chip d-flex align-items-start gap-2">
                                <span class="login-feature-icon"><i class="bi bi-shield-check"></i></span>
                                <div>
                                    <div class="fw-semibold small">Secure</div>
                                    <div class="text-muted small mb-0">Protected sign-in</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="login-feature-chip d-flex align-items-start gap-2">
                                <span class="login-feature-icon"><i class="bi bi-clock-history"></i></span>
                                <div>
                                    <div class="fw-semibold small">Efficient</div>
                                    <div class="text-muted small mb-0">Streamlined HR</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="login-feature-chip d-flex align-items-start gap-2">
                                <span class="login-feature-icon"><i class="bi bi-people"></i></span>
                                <div>
                                    <div class="fw-semibold small">Connected</div>
                                    <div class="text-muted small mb-0">Empower teams</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 login-form-panel">
                <div class="login-form-card">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <a href="{{ route('website.home') }}" class="login-back-link d-inline-flex align-items-center gap-1">
                            <i class="bi bi-arrow-left"></i> Home
                        </a>
                        <a href="{{ route('website.home') }}" class="d-lg-none">
                            <img src="{{ asset('kiyohr.png') }}" alt="KiyoHR logo" height="32">
                        </a>
                    </div>

                    <div class="text-center text-lg-start mb-4">
                        <p class="text-uppercase text-muted small fw-semibold mb-1" style="letter-spacing: 0.14em;">Sign in</p>
                        <h2 class="h3 fw-bold mb-1">Access your account</h2>
                        <p class="text-muted small mb-0">Enter your email and password to continue.</p>
                    </div>

                    @if(session('status'))
                        <div class="alert alert-success py-2 small mb-3" role="alert">{{ session('status') }}</div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger py-2 small mb-3" role="alert">{{ session('error') }}</div>
                    @endif

                    <form method="POST" action="{{ route('login') }}" class="needs-validation" novalidate>
                        @csrf

                        <div class="mb-3">
                            <label for="email" class="form-label small fw-semibold">Email address</label>
                            <input
                                id="email"
                                type="email"
                                name="email"
                                value="{{ old('email') }}"
                                required
                                autofocus
                                autocomplete="email"
                                inputmode="email"
                                class="form-control @error('email') is-invalid @enderror"
                                placeholder="you@company.com"
                            >
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="password" class="form-label small fw-semibold">Password</label>
                            <div class="position-relative login-input-group">
                                <input
                                    id="password"
                                    type="password"
                                    name="password"
                                    required
                                    autocomplete="current-password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter your password"
                                >
                                <button type="button" class="login-password-toggle" id="togglePassword" aria-label="Show password">
                                    <i class="bi bi-eye" id="togglePasswordIcon"></i>
                                </button>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label small" for="remember">Remember me</label>
                            </div>
                            <a href="{{ route('password.request') }}" class="small fw-semibold text-decoration-none" style="color: var(--kiyo-primary-dark);">Forgot password?</a>
                        </div>

                        <button type="submit" class="btn btn-kiyo w-100 login-submit-btn">Sign in</button>
                    </form>

                    <p class="text-center small text-muted mt-4 mb-2">
                        New to KiyoHR?
                        <a href="{{ route('register') }}" class="fw-semibold text-decoration-none" style="color: var(--kiyo-primary-dark);">Start free trial <i class="bi bi-arrow-right-short"></i></a>
                    </p>

                    <p class="text-center text-muted mb-0" style="font-size: 0.7rem;">
                        &copy; {{ date('Y') }} {{ config('app.vendor', 'Kiyo Solutions') }} | v{{ config('app.version', '1.0') }}
                    </p>
                </div>
            </div>

            <div class="col-12 d-lg-none login-mobile-strip">
                <div class="row g-2 g-sm-3">
                    <div class="col-4">
                        <div class="login-feature-chip d-flex flex-column align-items-center text-center h-100">
                            <span class="login-feature-icon mb-2"><i class="bi bi-shield-check"></i></span>
                            <div class="fw-semibold small">Secure</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="login-feature-chip d-flex flex-column align-items-center text-center h-100">
                            <span class="login-feature-icon mb-2"><i class="bi bi-clock-history"></i></span>
                            <div class="fw-semibold small">Efficient</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="login-feature-chip d-flex flex-column align-items-center text-center h-100">
                            <span class="login-feature-icon mb-2"><i class="bi bi-people"></i></span>
                            <div class="fw-semibold small">Connected</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const passwordInput = document.getElementById('password');
        const togglePassword = document.getElementById('togglePassword');
        const togglePasswordIcon = document.getElementById('togglePasswordIcon');

        togglePassword.addEventListener('click', () => {
            const isPassword = passwordInput.type === 'password';
            passwordInput.type = isPassword ? 'text' : 'password';
            togglePasswordIcon.classList.toggle('bi-eye', !isPassword);
            togglePasswordIcon.classList.toggle('bi-eye-slash', isPassword);
            togglePassword.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
        });
    </script>
</body>
</html>
