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

if (!isset($_SESSION['resident_id'])) {
 header("Location: ../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">
 
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/columncontrol/1.1.0/css/columnControl.dataTables.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

</head>
<body>
    <?php
include 'includes/navbar.php';
 ?>

    <!-- Sidebar -->
    <?php
include 'includes/sidebar.php';
 ?>
    <!-- Main Content -->

 <!-- Welcome Alert -->
                <div class="alert alert-info d-flex align-items-center">
                    <i class="fas fa-info-circle fa-2x mr-3"></i>
                    <div>
                         <?php

                        $id = $_SESSION['resident_id'];
                         $query = "select count(*) as total_complaint from tbl_transaction where resident_id = '$id'";
                         $query_result = $conn->query($query);
                         $row = $query_result->fetch_assoc();
                         ?>
                        <h5 class="alert-heading mb-1">Welcome, <?= $_SESSION['resident_name'] ?>!</h5>
                        You have <strong><?= $row['total_complaint'] ?> active complaints</strong>. Check the status of your submissions below.
                    </div>
                </div>

                <div id="page_content"></div>
    </div>

   
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap4.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.1.0/js/dataTables.columnControl.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.1.0/js/columnControl.dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
         $(document).on('click', '.click_page', function(){
            let page = $(this).data("page");
            load_pages(page);
        });
        load_pages("dashboard.php");
        function load_pages(page) {
            $.ajax({
                method: 'post',
                url: 'pages/'+page,
                success: function(res){
                        $('#page_content').html(res);
                },
                error: function(xhr, status, error) {
                        $('#page_content').html(`<div class="alert alert-warning" role="alert">Page 404: error page not found!<div>`);
                }
            });
        }
        // Toggle sidebar
        document.getElementById('toggleSidebar').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            if (window.innerWidth < 768) {
                // Mobile view - toggle sidebar open/close
                sidebar.classList.toggle('mobile-open');
            } else {
                // Desktop view - toggle collapsed/expanded
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
            }
        });

        // Page navigation
        document.querySelectorAll('.click_page').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Remove active class from all links
                document.querySelectorAll('.nav-link').forEach(item => {
                    item.classList.remove('active');
                });
                
                // Add active class to clicked link
                this.classList.add('active');
                
                // In a real application, you would load the page content here
                // For this example, we'll just log the page name
                console.log('Navigating to: ' + this.getAttribute('data-page'));
                
                // Close sidebar on mobile after clicking a link
                if (window.innerWidth < 768) {
                    document.getElementById('sidebar').classList.remove('mobile-open');
                }
            });
        });

        // Handle window resize
        window.addEventListener('resize', function() {
            // Reset sidebar state on resize to prevent layout issues
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            if (window.innerWidth >= 768) {
                sidebar.classList.remove('mobile-open');
                sidebar.classList.remove('collapsed');
                mainContent.classList.remove('expanded');
            } else {
                sidebar.classList.add('collapsed');
                mainContent.classList.add('expanded');
            }
        });
    </script>
</body>
</html>

