<?php 
session_start();
include 'connection.php';

if (isset($_SESSION['resident_id'])) {
 header("Location: resident/index.php");
 exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barangay Complaint Management System</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="images/logo.jfif" style="width: 50px; height: 50px;"> Barangay Tual E-Complaint System
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#how-it-works">How It Works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testimonials">Testimonials</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
                    </li>
                   <!--  <li class="nav-item">
                        <a class="btn btn-primary ml-2" href="#" data-toggle="modal" data-target="#registerModal">Register</a>
                    </li> -->
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section" id="home">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 hero-content">
                    <h1 class="hero-title">Report Community Issues Effortlessly</h1>
                    <p class="hero-subtitle">E-compaint is your digital gateway to a cleaner, safer, and more responsive community. Submit complaints, track progress, and see real results.</p>
                    <div>
                        <a href="#" class="btn btn-light mr-3" data-toggle="modal" data-target="#loginModal">Get Started</a>
                        <a href="#features" class="btn btn-outline-light">Learn More</a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 500 400'><rect width='500' height='400' fill='%23ffffff' opacity='0.1' rx='20'/><path d='M150,100 L350,100 L350,300 L150,300 Z' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='250' cy='150' r='40' fill='none' stroke='%23ffffff' stroke-width='3'/><path d='M200,220 L300,220 M200,250 L300,250 M200,280 L300,280' stroke='%23ffffff' stroke-width='3'/></svg>" 
                         alt="Complaint System Illustration" class="img-fluid">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5" id="features">
        <div class="container">
            <h2 class="section-title">Why Use E-Complaint?</h2>
            <p class="section-subtitle">Our platform makes it simple to report issues and get them resolved quickly.</p>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h3 class="feature-title">Easy Submission</h3>
                        <p class="feature-description">Submit complaints in minutes using any device. No need to visit the barangay hall in person.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3 class="feature-title">Real-time Tracking</h3>
                        <p class="feature-description">Monitor the status of your complaints from submission to resolution with live updates.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-bell"></i>
                        </div>
                        <h3 class="feature-title">Instant Notifications</h3>
                        <p class="feature-description">Receive alerts when your complaint status changes or when action is required.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h3 class="feature-title">Complaint History</h3>
                        <p class="feature-description">Access your complete complaint history and see how past issues were resolved.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-user-shield"></i>
                        </div>
                        <h3 class="feature-title">Secure & Private</h3>
                        <p class="feature-description">Your personal information is protected with industry-standard security measures.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-file-download"></i>
                        </div>
                        <h3 class="feature-title">Document Access</h3>
                        <p class="feature-description">Download official documents, forms, and certificates directly from the platform.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="how-it-works" id="how-it-works">
        <div class="container">
            <h2 class="section-title">How It Works</h2>
            <p class="section-subtitle">Getting your community issues resolved has never been easier.</p>
            
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">1</div>
                        <h3 class="step-title">Register Account</h3>
                        <p>Create your account with basic information and verify your residency.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">2</div>
                        <h3 class="step-title">Submit Complaint</h3>
                        <p>Fill out the complaint form with details, location, and upload any evidence.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">3</div>
                        <h3 class="step-title">Track Progress</h3>
                        <p>Monitor your complaint status and receive updates on the resolution process.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="step-card">
                        <div class="step-number">4</div>
                        <h3 class="step-title">Resolution</h3>
                        <p>Get notified when your complaint is resolved and provide feedback.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number">2,500+</div>
                        <div class="stat-label">Complaints Resolved</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number">1,200+</div>
                        <div class="stat-label">Active Users</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number">98%</div>
                        <div class="stat-label">Satisfaction Rate</div>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-4">
                    <div class="stat-item">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Support Available</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-5" id="testimonials">
        <div class="container">
            <h2 class="section-title">What Residents Say</h2>
            <p class="section-subtitle">Hear from community members who have used our system.</p>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <p class="testimonial-text">"I reported a streetlight issue in our area, and it was fixed within 3 days! The tracking feature kept me updated throughout the process."</p>
                        <div class="testimonial-author">Maria Santos</div>
                        <div class="testimonial-role">Resident, Purok 3</div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <p class="testimonial-text">"As a senior citizen, going to the barangay hall was difficult. This system allows me to report issues from home. Very user-friendly!"</p>
                        <div class="testimonial-author">Juan Dela Cruz</div>
                        <div class="testimonial-role">Resident, Purok 1</div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <p class="testimonial-text">"The garbage collection in our street was inconsistent. After reporting through BarangayConnect, the schedule improved significantly."</p>
                        <div class="testimonial-author">Ana Reyes</div>
                        <div class="testimonial-role">Resident, Purok 5</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <h2 class="cta-title">Ready to Make a Difference?</h2>
            <p class="cta-subtitle">Join hundreds of residents who are already improving our community.</p>
            <a href="#" class="btn btn-light btn-lg" data-toggle="modal" data-target="#registerModal">Register Now</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h3 class="navbar-brand text-white">BarangayConnect</h3>
                    <p class="mt-3">A digital platform connecting residents with barangay services for a better community.</p>
                    <div class="social-icons mt-4">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4">
                    <h4 class="footer-heading">Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#how-it-works">How It Works</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h4 class="footer-heading">Services</h4>
                    <ul class="footer-links">
                        <li><a href="#">Complaint Submission</a></li>
                        <li><a href="#">Status Tracking</a></li>
                        <li><a href="#">Document Requests</a></li>
                        <li><a href="#">Community Updates</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h4 class="footer-heading">Contact Us</h4>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt mr-2"></i> Barangay Tual</li>
                        <li><i class="fas fa-phone mr-2"></i> (032) 123-4567</li>
                        <li><i class="fas fa-envelope mr-2"></i> info@barangayconnect.com</li>
                        <li><i class="fas fa-clock mr-2"></i> Mon-Fri: 8:00 AM - 5:00 PM</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 BarangayConnect. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Login Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Login to Your Account</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    
                        <div class="form-group">
                            <label for="loginEmail">Email Address</label>
                            <input type="email" class="form-control"  name="loginEmail" id="loginEmail" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label for="loginPassword">Password</label>
                            <input type="password" class="form-control"  name="loginPassword" id="loginPassword" placeholder="Enter your password">
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input"   id="rememberMe">
                            <label class="form-check-label" for="rememberMe">Remember me</label>
                        </div>
                        <button class="btn btn-primary btn-block" onclick="login()">Login</button>
                  
                    <div class="text-center mt-3">
                        <a href="#">Forgot your password?</a>
                    </div>
                    <div id="error_message"></div>
                    <hr>
                    <p class="text-center">Don't have an account? <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#registerModal">Register here</a></p>

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

    <!-- Register Modal -->
    <!-- <div class="modal fade" id="registerModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Your Account</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
      
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="firstName">First Name</label>
                                <input type="text" class="form-control" id="firstName" placeholder="First name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="lastName">Last Name</label>
                                <input type="text" class="form-control" id="lastName" placeholder="Last name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="registerEmail">Email Address</label>
                            <input type="email" class="form-control" id="registerEmail" placeholder="Enter your email">
                        </div>
                        <div class="form-group">
                            <label for="registerPassword">Password</label>
                            <input type="password" class="form-control" id="registerPassword" placeholder="Create a password">
                        </div>
                        <div class="form-group">
                            <label for="confirmPassword">Confirm Password</label>
                            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm your password">
                        </div>
                        <div class="form-group">
                            <label for="address">Home Address</label>
                            <input type="text" class="form-control" id="address" placeholder="Enter your complete address">
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="agreeTerms">
                            <label class="form-check-label" for="agreeTerms">I agree to the <a href="#">Terms and Conditions</a></label>
                        </div>
                        <button class="btn btn-primary btn-block" onclick="register_resident()">Create Account</button>
                
                    <hr>
                    <p class="text-center">Already have an account? <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#loginModal">Login here</a></p>
                </div>
            </div>
        </div> -->
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script>

function login() {
    let loginEmail = $('#loginEmail').val();
    let loginPassword = $('#loginPassword').val();

    // ✅ Basic validation
    if (!loginEmail || !loginPassword) {
        swal("Warning", "Please fill in both email and password!", "warning");
        return;
    }

    $.ajax({
        method: 'POST',
        url: 'verify.php',
        data: {
            verify_user: 1,
            loginEmail: loginEmail,
            loginPassword: loginPassword
        },
        success: function(res) {
            // alert(res)
            if (res.trim() === "success") {
              window.location ="resident/index.php";
            }else{
                $('#error_message').html(`<div class="alert alert-danger" role="alert"><i class="fa fa-info-circle"></i> Username or Password is incorrect!</div>`).fadeIn().fadeOut(3000);
            }
          
          
        },
        error: function(xhr, status, error) {
            swal("Error", "Something went wrong. Please try again.", "error");
        }
    });
}


        // function register_resident(){
        //     let firstName = $('#firstName').val();
        //     let lastName = $('#lastName').val();
        //     let registerEmail = $('#registerEmail').val();
        //     let registerPassword = $('#registerPassword').val();
        //     let confirmPassword = $('#confirmPassword').val();
        //     let address = $('#address').val();


        //     if (registerPassword !== confirmPassword) {
        //     swal("Oops!", "Password not match!", "warning");
        //     return;
        //     }

        //     $.ajax({
        //         method: 'post',
        //         url: 'query.php',
        //         data:{
        //             "registering_resident": 1, 
        //             "firstName": firstName,
        //             "lastName": lastName,
        //             "registerEmail": registerEmail,
        //             "registerPassword": registerPassword,
        //             "confirmPassword": confirmPassword,
        //             "address": address

        //         },
        //         success: function(res){
        //             swal("Oops!", res +"!", "warning");
        //             // $('#registerModal').modal('hide');
        //         }
        //     });
        // }

        // $(document).ready(function() {
        //     // Navbar scroll effect
        //     $(window).scroll(function() {
        //         if ($(window).scrollTop() > 50) {
        //             $('.navbar').addClass('scrolled');
        //         } else {
        //             $('.navbar').removeClass('scrolled');
        //         }
        //     });
            
        //     // Smooth scrolling for anchor links
        //     $('a[href*="#"]').on('click', function(e) {
        //         e.preventDefault();
                
        //         $('html, body').animate(
        //             {
        //                 scrollTop: $($(this).attr('href')).offset().top - 70,
        //             },
        //             500,
        //             'linear'
        //         );
        //     });
            
        //     // Initialize modals
        //     $('#loginModal').on('show.bs.modal', function (e) {
        //         // Additional initialization if needed
        //     });
            
        //     $('#registerModal').on('show.bs.modal', function (e) {
        //         // Additional initialization if needed
        //     });
        // });
    </script>
</body>
</html>