<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - {{ \App\Helpers\Settings::getSystemName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Nunito', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-wrapper {
            display: flex;
            width: 100%;
            max-width: 900px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .login-side {
            flex: 1;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .brand-logo {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 22px;
        }

        .brand-name {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .login-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 6px;
        }

        .login-subtitle {
            color: #6c757d;
            font-size: 0.95rem;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: 600;
            color: #1a1a2e;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 14px 16px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .form-control:focus {
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
            outline: none;
        }

        .form-control::placeholder {
            color: #adb5bd;
        }

        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            padding: 15px 24px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login:disabled {
            background: #adb5bd;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .quote-section {
            margin: 28px 0;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            border-left: 4px solid #667eea;
        }

        .quote-text {
            color: #495057;
            font-size: 0.9rem;
            font-style: italic;
            line-height: 1.6;
        }

        .quote-author {
            color: #667eea;
            font-size: 0.8rem;
            margin-top: 8px;
            font-weight: 600;
        }

        .contact-section {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e9ecef;
        }

        .contact-title {
            text-align: center;
            color: #6c757d;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .contact-options {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .contact-btn {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f8f9fa;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .contact-btn:hover {
            transform: translateY(-2px);
            color: #667eea;
        }

        .contact-btn.whatsapp:hover { background: #e8f5e9; color: #25D366; }
        .contact-btn.facebook:hover { background: #e3f2fd; color: #1877F2; }
        .contact-btn.email:hover { background: #fbe9e7; color: #EA4335; }
        .contact-btn.phone:hover { background: #e8f5e9; color: #34A853; }
        .contact-btn.website:hover { background: #f3e5f5; color: #9c27b0; }

        .info-side {
            flex: 0.8;
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .info-side::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
        }

        .info-side::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -30%;
            width: 80%;
            height: 80%;
            background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 60%);
        }

        .info-content {
            position: relative;
            z-index: 1;
        }

        .info-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 16px;
            line-height: 1.3;
        }

        .info-text {
            font-size: 0.95rem;
            opacity: 0.9;
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .info-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .info-features li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            font-size: 0.9rem;
        }

        .info-features li i {
            width: 28px;
            height: 28px;
            background: rgba(102, 126, 234, 0.4);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .alert {
            background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
            border: 1px solid #feb2b2;
            border-radius: 10px;
            padding: 12px 16px;
            color: #c53030;
            font-size: 0.875rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .login-wrapper {
                flex-direction: column;
            }
            
            .info-side {
                padding: 30px;
            }
            
            .login-side {
                padding: 30px;
            }
        }
    </style>
</head>
<body>
    <div class="login-wrapper">
        <div class="login-side">
            <div class="login-brand">
                <div class="brand-logo">
                    <i class="bi bi-shop-window"></i>
                </div>
                <span class="brand-name">{{ \App\Helpers\Settings::getSystemName() }}</span>
            </div>
            
            <h1 class="login-title">Welcome back!</h1>
            <p class="login-subtitle">Please sign in to continue to your account</p>

            @if($errors->any())
                <div class="alert">
                    <i class="bi bi-exclamation-circle-fill"></i>
                    {{ $errors->first() }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert">
                    <i class="bi bi-exclamation-circle-fill"></i>
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" id="loginForm">
                @csrf
                <input type="hidden" name="client_time" id="clientTime">
                
                <div class="form-group">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" class="form-control" placeholder="your@email.com" required autofocus>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" placeholder="Enter your password" required>
                </div>
                
                <button type="submit" class="btn-login" id="loginBtn">
                    <span id="btnText">Sign In</span>
                </button>
            </form>

            <div class="quote-section">
                <div class="quote-text" id="quoteText">Loading inspiration...</div>
                <div class="quote-author" id="quoteAuthor"></div>
            </div>

            <div class="contact-section">
                <div class="contact-title">Need help? Contact us</div>
                <div class="contact-options">
                    <a href="https://wa.me/0701980200?text=Hello%20POS%20Tokim001" target="_blank" class="contact-btn whatsapp" title="WhatsApp">
                        <i class="bi bi-whatsapp"></i>
                    </a>
                    <a href="https://www.facebook.com/destechsoftwares" target="_blank" class="contact-btn facebook" title="Facebook">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a href="mailto:1moonger@gmail.com" class="contact-btn email" title="Email">
                        <i class="bi bi-envelope"></i>
                    </a>
                    <a href="tel:0701980200" class="contact-btn phone" title="Phone">
                        <i class="bi bi-telephone"></i>
                    </a>
                    <a href="https://destechsoftwares.co.ke" target="_blank" class="contact-btn website" title="Website">
                        <i class="bi bi-globe"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="info-side">
            <div class="info-content">
                <h2 class="info-title">Your Smart Sales Companion</h2>
                <p class="info-text">
                    Manage your business smarter, faster, and more efficiently. Track sales, inventory, and customers all in one place.
                </p>
                <ul class="info-features">
                    <li><i class="bi bi-check-lg"></i> Real-time sales tracking</li>
                    <li><i class="bi bi-check-lg"></i> Inventory management</li>
                    <li><i class="bi bi-check-lg"></i> Customer database</li>
                    <li><i class="bi bi-check-lg"></i> Financial reports</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const quotes = [
            { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
            { text: "Success is not final, failure is not fatal: it is the courage to continue that counts.", author: "Winston Churchill" },
            { text: "Believe you can and you're halfway there.", author: "Theodore Roosevelt" },
            { text: "The future belongs to those who believe in the beauty of their dreams.", author: "Eleanor Roosevelt" },
            { text: "Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson" },
            { text: "Success usually comes to those who are too busy to be looking for it.", author: "Henry David Thoreau" },
            { text: "The best time to plant a tree was 20 years ago. The second best time is now.", author: "Chinese Proverb" },
            { text: "Your limitation—it's only your imagination.", author: "Unknown" },
            { text: "Push yourself, because no one else is going to do it for you.", author: "Unknown" },
            { text: "Great things never come from comfort zones.", author: "Unknown" },
            { text: "Dream it. Wish it. Do it.", author: "Unknown" },
            { text: "Success doesn't just find you. You have to go out and get it.", author: "Unknown" },
            { text: "The harder you work for something, the greater you'll feel when you achieve it.", author: "Unknown" },
            { text: "Dream bigger. Do bigger.", author: "Unknown" },
            { text: "Don't stop when you're tired. Stop when you're done.", author: "Unknown" },
            { text: "Wake up with determination. Go to bed with satisfaction.", author: "Unknown" },
            { text: "Do something today that your future self will thank you for.", author: "Sean Patrick Flanery" },
            { text: "Little things make big days.", author: "Unknown" },
            { text: "It's going to be hard, but hard does not mean impossible.", author: "Unknown" },
            { text: "Don't wait for opportunity. Create it.", author: "Unknown" }
        ];

        function displayRandomQuote() {
            const randomIndex = Math.floor(Math.random() * quotes.length);
            const quote = quotes[randomIndex];
            document.getElementById('quoteText').textContent = quote.text;
            document.getElementById('quoteAuthor').textContent = '- ' + quote.author;
        }

        displayRandomQuote();

        document.getElementById('loginForm').addEventListener('submit', function(e) {
            const localDate = new Date();
            const offset = localDate.getTimezoneOffset();
            const localTime = new Date(localDate.getTime() - offset * 60000);
            document.getElementById('clientTime').value = localTime.toISOString().slice(0, 19).replace('T', ' ');
            const btn = document.getElementById('loginBtn');
            const btnText = document.getElementById('btnText');
            btn.disabled = true;
            btnText.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Signing in...';
        });
    </script>
</body>
</html>
