<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>Login - TyreCare 360</title>
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/variables.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/base.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/components.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/animations.css">
    <style>
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .login-card {
            width: 100%;
            max-width: 420px;
            padding: 40px;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .login-logo {
            width: 2400px;
            height: 80px;
            margin-bottom: 20px;
        }
        
        .login-title {
            font-size: 1.75rem;
            font-weight: 700;
            background: #FD4326;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        
        .login-form .form-group {
            margin-bottom: 24px;
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            font-size: 1rem;
        }
        
        .login-footer {
            text-align: center;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--glass-border);
        }
        
        .login-footer a {
            color: #FD4326;
        }
        
        .error-message {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--accent-red);
            padding: 12px 16px;
            border-radius: var(--border-radius-md);
            margin-bottom: 20px;
            display: none;
        }
        
        .error-message.show {
            display: block;
        }
    </style>
</head>
<body>

    <div class="login-container">

        <div class="glass-card login-card fade-in">

            <!-- HEADER -->
            <div class="login-header">
                <img src="<?= ($ASSET_PATH) ?>/images/logo.png"
                     alt="INWAY Service Hub"
                     class="login-logo"
                     onerror="this.style.display='none'">

                <h1 class="login-title">
                    Inway Service Hub
                </h1>

                <p class="login-subtitle">
                    Subscription & Renewal Management System
                </p>
            </div>


            <div id="error-message" class="error-message"></div>


            <!-- LOGIN FORM -->
            <form id="login-form" class="login-form">

                <div class="form-group">
                    <label class="form-label" for="email">
                        Email Address
                    </label>

                    <input type="email"
                           id="email"
                           name="email"
                           class="form-input"
                           placeholder="Enter your registered email"
                           required>
                </div>


                <div class="form-group">
                    <label class="form-label" for="password">
                        Password
                    </label>

                    <div style="position: relative;">

                        <input type="password"
                               id="password"
                               name="password"
                               class="form-input"
                               placeholder="Enter your password"
                               required
                               style="padding-right: 45px;">

                        <button type="button"
                                id="toggle-password"
                                style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #6b7280; padding: 4px;">

                            <!-- Eye Icon -->
                            <svg id="eye-icon"
                                 width="20"
                                 height="20"
                                 viewBox="0 0 24 24"
                                 fill="none"
                                 stroke="currentColor"
                                 stroke-width="2"
                                 stroke-linecap="round"
                                 stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>

                            <!-- Eye Off -->
                            <svg id="eye-off-icon"
                                 width="20"
                                 height="20"
                                 viewBox="0 0 24 24"
                                 fill="none"
                                 stroke="currentColor"
                                 stroke-width="2"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 style="display: none;">
                                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path>
                                <line x1="1" y1="1" x2="23" y2="23"></line>
                            </svg>

                        </button>
                    </div>
                </div>


                <button type="submit"
                        class="btn btn-primary login-btn ripple">
                    <span>Sign In</span>
                </button>


                <div style="text-align: center; margin-top: 16px;">
                    <a href="<?= ($BASE_PATH) ?>/forgot-password"
                       style="color: var(--primary); font-size: 0.875rem;">
                        Forgot Password?
                    </a>
                </div>

            </form>


            <!-- LOGIN OPTIONS -->
            <div class="login-footer">

                <div class="login-options" style="margin-bottom: 16px;">

                    <p class="login-subtitle" style="margin-bottom: 12px;">
                        Login as:
                    </p>

                    <div style="display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;">

                        <button type="button"
                                class="btn btn-secondary btn-sm login-type-btn active"
                                data-type="super-admin">
                            Super Admin
                        </button>

                        <button type="button"
                                class="btn btn-secondary btn-sm login-type-btn"
                                data-type="company">
                            Company Admin
                        </button>

                        <button type="button"
                                class="btn btn-secondary btn-sm login-type-btn"
                                data-type="staff">
                            Service Executive
                        </button>

                    </div>
                </div>

                <p class="login-subtitle">
                    Looking up your subscription?
                    <a href="<?= ($BASE_PATH) ?>/customer-portal">
                        Client Portal
                    </a>
                </p>

            </div>

        </div>

    </div>

    
    <script src="<?= ($ASSET_PATH) ?>/js/app.js"></script>
    <script src="<?= ($ASSET_PATH) ?>/js/api.js"></script>
    <script>
        document.getElementById('toggle-password').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const eyeIcon = document.getElementById('eye-icon');
            const eyeOffIcon = document.getElementById('eye-off-icon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.style.display = 'none';
                eyeOffIcon.style.display = 'block';
            } else {
                passwordInput.type = 'password';
                eyeIcon.style.display = 'block';
                eyeOffIcon.style.display = 'none';
            }
        });
        
        document.getElementById('login-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('error-message');
            const submitBtn = this.querySelector('button[type="submit"]');
            
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span>Signing in...</span>';
            errorDiv.classList.remove('show');
            
            try {
                const response = await API.login(email, password);
                if (response.success) {
                    window.location.href = API.getRedirectUrl(response.redirect);
                }
            } catch (error) {
                errorDiv.textContent = error.message || 'Login failed. Please try again.';
                errorDiv.classList.add('show');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<span>Sign In</span>';
            }
        });
    </script>
</body>
</html>
