<?php
header('Location: /login', true, 302);
exit;
?>
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Login - Automan Ed</title>         
        <link rel="icon" href="favicon.ico" type="image/x-icon"> 
        <!-- Animation On Scroll (AOS) -->         
        <link rel="stylesheet" href="css/vendor/aos.css"> 
        <!-- Bootstrap Icons CSS -->         
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> 
        <!-- Slick CSS -->         
        <link rel="stylesheet" href="css/vendor/slick.css"> 
        <!-- FANCYBOX CSS  -->         
        <link rel="stylesheet" href="css/vendor/fancybox.css"> 
        <!-- Custom CSS -->         
        <link rel="stylesheet" href="css/style.css"> 
    </head>     
    <body> 
        <!-- Header -->         
        <?php include("nav.php"); ?> 
        <!-- #header end -->         
        <!-- Main Content -->         
        <main> 
            <!-- Page Title -->             
            <section class="section bg-accent-color-2 py-5"> 
                <div class="b-container"> 
                    <div class="text-center"> 
                        <h1 class="text-white mb-3" data-aos="fade-up" data-aos-duration="800">Login</h1> 
                        <p class="text-white text-big mb-0" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">Access your personalized vehicle maintenance dashboard</p> 
                    </div>                     
                </div>                 
            </section>             
            <!-- Login Form -->             
            <section class="section bg-color"> 
                <div class="b-container"> 
                    <div class="row justify-content-center"> 
                        <div class="col-12 col-lg-6 col-xl-5"> 
                            <div class="bg-accent-color-2 p-5 rounded-4 d-flex flex-column gap-4" data-aos="fade-up" data-aos-duration="600"> 
                                <div class="text-center mb-3"> 
                                    <h2 class="mb-3">Welcome Back</h2> 
                                    <p class="mb-0">Enter your credentials to access your account</p> 
                                </div>                                 
                                <div class="success_msg toast align-items-center w-100 shadow-none mb-3 border border-success rounded-pill my-4" role="alert" aria-live="assertive" aria-atomic="true"> 
                                    <div class="d-flex p-2"> 
                                        <div class="toast-body d-flex flex-row gap-3 align-items-center text-success"> <i class="bi bi-check-circle-fill text-success"></i> 
                                            Login successful! Redirecting...
                                        </div>                                         
                                        <button type="button" class="me-2 m-auto bg-transparent border-0 ps-1 pe-0 text-success" data-bs-dismiss="toast" aria-label="Close"><i class="bi bi-x-lg"></i>
                                        </button>                                         
                                    </div>                                     
                                </div>                                 
                                <div class="error_msg toast align-items-center w-100 shadow-none border-danger mb-3 my-4 border rounded-pill" role="alert" aria-live="assertive" aria-atomic="true"> 
                                    <div class="d-flex p-2"> 
                                        <div class="toast-body d-flex flex-row gap-3 align-items-center text-danger"> <i class="bi bi-exclamation-triangle-fill text-danger"></i> 
                                            Invalid email or password. Please try again.
                                        </div>                                         
                                        <button type="button" class="me-2 m-auto bg-transparent border-0 ps-1 pe-0 text-danger" data-bs-dismiss="toast" aria-label="Close"><i class="bi bi-x-lg"></i>
                                        </button>                                         
                                    </div>                                     
                                </div>                                 
                                <form class="form needs-validation" id="loginForm"> 
                                    <input type="hidden" name="action" value="login"> 
                                    <div class="row mb-2"> 
                                        <div class="col-12 mb-4"> 
                                            <label for="email" class="form-label">Email Address <span class="text-danger">*</span>
                                            </label>                                             
                                            <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="Email Address" aria-label="Email Address" required> 
                                        </div>                                         
                                        <div class="col-12 mb-4"> 
                                            <label for="password" class="form-label">Password <span class="text-danger">*</span>
                                            </label>                                             
                                            <input type="password" name="password" id="password" class="form-control form-control-lg" placeholder="Password" aria-label="Password" required> 
                                        </div>                                         
                                    </div>                                     
                                    <div class="row mb-4"> 
                                        <div class="col d-flex justify-content-between align-items-center"> 
                                            <div class="form-check"> 
                                                <input class="form-check-input" type="checkbox" value="" id="rememberMe"> 
                                                <label class="form-check-label" for="rememberMe"> 
                                                    Remember me
</label>                                                 
                                            </div>                                             <a href="#" class="text-primary-color">Forgot Password?</a>
                                        </div>                                         
                                    </div>                                     
                                    <button type="submit" class="btn btn-cta-primary w-100 d-flex align-items-center justify-content-center submit_form"> 
                                        Login<span class="btn-icon rounded-circle d-inline-flex align-items-center justify-content-center ms-2"> <i class="bi bi-chevron-right text-white" style="font-size:10px"></i> </span> 
                                    </button>                                     
                                    <div class="text-center mt-4"> 
                                        <p class="mb-0">Don't have an account? <a href="signup.php" class="text-primary-color fw-bold">Sign Up</a></p> 
                                    </div>                                     
                                </form>                                 
                            </div>                             
                        </div>                         
                    </div>                     
                </div>                 
            </section>             
            <!-- Features Section -->             
            <section class="section bg-accent-color-2" style="padding-top: 50px;"> 
                <div class="b-container"> 
                    <div class="text-center mb-5" data-aos="fade-up" data-aos-duration="600"> 
                        <h2 class="mb-3">Your Vehicle Care Dashboard</h2> 
                        <p class="mb-0">Access all your vehicle maintenance information in one place</p> 
                    </div>                     
                    <div class="row g-4"> 
                        <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="600"> 
                            <div class="bg-white p-4 rounded-4 text-center h-100 border border-2 border-primary-color"> 
                                <div class="mb-3"> <i class="bi bi-speedometer2 text-primary-color" style="font-size: 3rem;"></i> 
                                </div>                                 
                                <h5 class="mb-3 text-dark fw-bold">Dashboard Overview</h5> 
                                <p class="mb-0 text-muted">View all your vehicle maintenance information at a glance</p> 
                            </div>                             
                        </div>                         
                        <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100" data-aos-duration="600"> 
                            <div class="bg-white p-4 rounded-4 text-center h-100 border border-2 border-primary-color"> 
                                <div class="mb-3"> <i class="bi bi-calendar-event text-primary-color" style="font-size: 3rem;"></i> 
                                </div>                                 
                                <h5 class="mb-3 text-dark fw-bold">Service Schedule</h5> 
                                <p class="mb-0 text-muted">Track upcoming and completed maintenance services</p> 
                            </div>                             
                        </div>                         
                        <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="600"> 
                            <div class="bg-white p-4 rounded-4 text-center h-100 border border-2 border-primary-color"> 
                                <div class="mb-3"> <i class="bi bi-file-earmark-text text-primary-color" style="font-size: 3rem;"></i> 
                                </div>                                 
                                <h5 class="mb-3 text-dark fw-bold">Service History</h5> 
                                <p class="mb-0 text-muted">Keep detailed records of all maintenance performed</p> 
                            </div>                             
                        </div>                         
                        <div class="col-12 col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300" data-aos-duration="600"> 
                            <div class="bg-white p-4 rounded-4 text-center h-100 border border-2 border-primary-color"> 
                                <div class="mb-3"> <i class="bi bi-bell-fill text-primary-color" style="font-size: 3rem;"></i> 
                                </div>                                 
                                <h5 class="mb-3 text-dark fw-bold">Smart Alerts</h5> 
                                <p class="mb-0 text-muted">Receive timely notifications for upcoming services</p> 
                            </div>                             
                        </div>                         
                    </div>                     
                </div>                 
            </section>             
        </main>         
        <!-- #main end -->         
        <!-- Footer -->         
        <?php include("footer.php"); ?>         
        <!-- #footer -->         
        <!-- Scripts -->         
        <!-- jQuery -->         
        <script src="js/vendor/jquery.min.js"></script>         
        <!-- Animation On Scroll (AOS) -->         
        <script src="js/vendor/aos.js"></script>         
        <!-- Slick JS -->         
        <script src="js/vendor/slick.min.js"></script>         
        <!-- FANCY BOX -->         
        <script src="js/vendor/fancybox.umd.js"></script>         
        <!-- Bootstrap JS -->         
        <script src="js/vendor/bootstrap.bundle.min.js"></script>         
        <!-- Custom JS -->         
        <script src="js/script-counter.js"></script>         
        <script src="js/submit-form.js"></script>         
        <script src="js/script.js"></script>         
        <!-- Theme Toggle Script -->
        <script>
            // Theme toggle functionality
            const themeToggle = document.getElementById('theme-toggle');
            const themeIcon = document.getElementById('theme-icon');
            const htmlElement = document.documentElement;
            
            // Check for saved theme preference or default to 'dark'
            const currentTheme = localStorage.getItem('theme') || 'dark';
            htmlElement.setAttribute('data-theme', currentTheme);
            updateThemeIcon(currentTheme);
            
            // Toggle theme on button click
            themeToggle.addEventListener('click', () => {
                const currentTheme = htmlElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                htmlElement.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
                updateThemeIcon(newTheme);
            });
            
            // Update icon based on theme
            function updateThemeIcon(theme) {
                if (theme === 'dark') {
                    themeIcon.classList.remove('bi-moon-fill');
                    themeIcon.classList.add('bi-sun-fill');
                } else {
                    themeIcon.classList.remove('bi-sun-fill');
                    themeIcon.classList.add('bi-moon-fill');
                }
            }
        </script>
        <!-- End Scripts -->         
    </body>     
</html>
