<?php
/**
 * Village Dashboard Sidebar
 * For Village Chairman, Land Officer, and Surveyor roles
 */

// Get current user role
$user_role = $_SESSION['role'] ?? 'village_chairman';
$village_id = $_SESSION['village_id'] ?? null;

// Role labels in Swahili/English
$role_labels = [
    'village_chairman' => 'Mwenyekiti / Chairman',
    'land_officer' => 'Afisa Ardhi / Land Officer',
    'surveyor' => 'Mpima Ardhi / Surveyor',
    'district_officer' => 'Afisa Wilaya / District Officer',
    'land_council' => 'Baraza la Ardhi / Land Council'
];

// Get counts for badges
$pending_verifications = 0;
$active_disputes = 0;
$pending_surveys = 0;
$pending_requests = 0;

if(isset($conn) && $village_id) {
    // Lands pending village verification
    $result = mysqli_query($conn, "SELECT COUNT(*) as count FROM lands WHERE village_id = $village_id AND status = 'pending_village'");
    if($result) $pending_verifications = mysqli_fetch_assoc($result)['count'] ?? 0;

    // Active disputes
    $result = mysqli_query($conn, "SELECT COUNT(*) as count FROM land_disputes WHERE village_id = $village_id AND status NOT IN ('resolved', 'dismissed')");
    if($result) $active_disputes = mysqli_fetch_assoc($result)['count'] ?? 0;

    // Pending verification requests
    $result = mysqli_query($conn, "SELECT COUNT(*) as count FROM verification_requests WHERE village_id = $village_id AND status = 'pending'");
    if($result) $pending_requests = mysqli_fetch_assoc($result)['count'] ?? 0;

    // Pending survey requests (for surveyors)
    if($user_role === 'surveyor') {
        $user_id = $_SESSION['user_id'];
        $result = mysqli_query($conn, "SELECT COUNT(*) as count FROM lands WHERE status = 'pending_survey' AND (surveyor_verified_by IS NULL OR surveyor_verified_by = $user_id)");
        if($result) $pending_surveys = mysqli_fetch_assoc($result)['count'] ?? 0;
    }
}

// Current page detection
$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>

<!-- Mobile Header -->
<header class="mobile-header">
    <button class="menu-toggle" id="menuToggle" aria-label="Toggle Menu">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <div class="mobile-logo">
        <i class="fas fa-map-marked-alt"></i>
        <span>Village Dashboard</span>
    </div>
    <div class="mobile-user">
        <div class="user-avatar-sm"><?php echo strtoupper(substr($_SESSION['username'] ?? 'V', 0, 1)); ?></div>
    </div>
</header>

<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Sidebar -->
<aside class="admin-sidebar village-sidebar" id="adminSidebar">
    <div class="sidebar-header">
        <div class="logo-wrapper">
            <div class="logo-icon village-logo">
                <i class="fas fa-map-marked-alt"></i>
            </div>
            <div class="logo-text">
                <h1>Village Panel</h1>
                <span>Land Secure CBC</span>
            </div>
        </div>
        <button class="sidebar-close" id="sidebarClose">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="sidebar-user">
        <div class="user-avatar village-avatar">
            <?php echo strtoupper(substr($_SESSION['username'] ?? 'V', 0, 1)); ?>
        </div>
        <div class="user-info">
            <h4><?php echo htmlspecialchars($_SESSION['full_name'] ?? $_SESSION['username'] ?? 'Village Leader'); ?></h4>
            <span><?php echo $role_labels[$user_role] ?? ucfirst($user_role); ?></span>
        </div>
    </div>

    <nav class="sidebar-nav">
        <!-- Main Dashboard -->
        <div class="nav-section">
            <span class="nav-section-title">Muhtasari / Overview</span>
            <ul>
                <li>
                    <a href="dashboard" class="<?php echo $current_page == 'dashboard' ? 'active' : ''; ?>">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="village_map" class="<?php echo $current_page == 'village_map' ? 'active' : ''; ?>">
                        <i class="fas fa-map"></i>
                        <span>Village Land Map</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Land Verification (for Chairman, Land Officer & Land Council) -->
        <?php if(in_array($user_role, ['village_chairman', 'land_officer', 'district_officer', 'land_council'])): ?>
        <div class="nav-section">
            <span class="nav-section-title">Uhakiki / Verification</span>
            <ul>
                <li>
                    <a href="pending_lands" class="<?php echo $current_page == 'pending_lands' ? 'active' : ''; ?>">
                        <i class="fas fa-clock"></i>
                        <span>Pending Approval</span>
                        <?php if($pending_verifications > 0): ?>
                        <span class="nav-badge pulse"><?php echo $pending_verifications; ?></span>
                        <?php endif; ?>
                    </a>
                </li>
                <li>
                    <a href="verified_lands" class="<?php echo $current_page == 'verified_lands' ? 'active' : ''; ?>">
                        <i class="fas fa-check-circle"></i>
                        <span>Verified Lands</span>
                    </a>
                </li>
                <li>
                    <a href="all_lands" class="<?php echo $current_page == 'all_lands' ? 'active' : ''; ?>">
                        <i class="fas fa-th-list"></i>
                        <span>All Land Records</span>
                    </a>
                </li>
                <li>
                    <a href="verification_requests" class="<?php echo $current_page == 'verification_requests' ? 'active' : ''; ?>">
                        <i class="fas fa-clipboard-list"></i>
                        <span>Verification Requests</span>
                        <?php if($pending_requests > 0): ?>
                        <span class="nav-badge pulse"><?php echo $pending_requests; ?></span>
                        <?php endif; ?>
                    </a>
                </li>
            </ul>
        </div>
        <?php endif; ?>

        <!-- Surveyor Section -->
        <?php if($user_role === 'surveyor'): ?>
        <div class="nav-section">
            <span class="nav-section-title">Upimaji / Surveys</span>
            <ul>
                <li>
                    <a href="survey_requests" class="<?php echo $current_page == 'survey_requests' ? 'active' : ''; ?>">
                        <i class="fas fa-ruler-combined"></i>
                        <span>Survey Requests</span>
                        <?php if($pending_surveys > 0): ?>
                        <span class="nav-badge pulse"><?php echo $pending_surveys; ?></span>
                        <?php endif; ?>
                    </a>
                </li>
                <li>
                    <a href="my_surveys" class="<?php echo $current_page == 'my_surveys' ? 'active' : ''; ?>">
                        <i class="fas fa-clipboard-check"></i>
                        <span>My Verifications</span>
                    </a>
                </li>
            </ul>
        </div>
        <?php endif; ?>

        <!-- Disputes -->
        <div class="nav-section">
            <span class="nav-section-title">Migogoro / Disputes</span>
            <ul>
                <li>
                    <a href="disputes" class="<?php echo $current_page == 'disputes' ? 'active' : ''; ?>">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span>Land Disputes</span>
                        <?php if($active_disputes > 0): ?>
                        <span class="nav-badge warning"><?php echo $active_disputes; ?></span>
                        <?php endif; ?>
                    </a>
                </li>
                <li>
                    <a href="resolved_disputes" class="<?php echo $current_page == 'resolved_disputes' ? 'active' : ''; ?>">
                        <i class="fas fa-gavel"></i>
                        <span>Resolved Cases</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Reports & Statistics -->
        <div class="nav-section">
            <span class="nav-section-title">Takwimu / Statistics</span>
            <ul>
                <li>
                    <a href="statistics" class="<?php echo $current_page == 'statistics' ? 'active' : ''; ?>">
                        <i class="fas fa-chart-bar"></i>
                        <span>Land Statistics</span>
                    </a>
                </li>
                <li>
                    <a href="certificates" class="<?php echo $current_page == 'certificates' ? 'active' : ''; ?>">
                        <i class="fas fa-certificate"></i>
                        <span>Certificates Issued</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Instant Land Check -->
        <div class="nav-section">
            <span class="nav-section-title">Huduma / Services</span>
            <ul>
                <li>
                    <a href="land_check" class="<?php echo $current_page == 'land_check' ? 'active' : ''; ?>">
                        <i class="fas fa-search-location"></i>
                        <span>Instant Land Check</span>
                    </a>
                </li>
                <li>
                    <a href="landowners" class="<?php echo $current_page == 'landowners' ? 'active' : ''; ?>">
                        <i class="fas fa-users"></i>
                        <span>Registered Owners</span>
                    </a>
                </li>
                <li>
                    <a href="neighbors_map" class="<?php echo $current_page == 'neighbors_map' ? 'active' : ''; ?>">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>Neighbors Map</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Account Settings -->
        <div class="nav-section">
            <span class="nav-section-title">Akaunti / Account</span>
            <ul>
                <li>
                    <a href="../profile" class="<?php echo $current_page == 'profile' ? 'active' : ''; ?>">
                        <i class="fas fa-user-circle"></i>
                        <span>My Profile</span>
                    </a>
                </li>
                <li>
                    <a href="change_password" class="<?php echo $current_page == 'change_password' ? 'active' : ''; ?>">
                        <i class="fas fa-key"></i>
                        <span>Change Password</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Scroll Indicators -->
    <div class="scroll-indicators">
        <button class="scroll-btn scroll-up" id="scrollUpBtn" onclick="scrollNav(-100)" title="Scroll Up">
            <i class="fas fa-chevron-up"></i>
        </button>
        <button class="scroll-btn scroll-down" id="scrollDownBtn" onclick="scrollNav(100)" title="Scroll Down">
            <i class="fas fa-chevron-down"></i>
        </button>
    </div>

    <div class="sidebar-footer">
        <?php
        // Get the base path dynamically
        $basePath = dirname($_SERVER['SCRIPT_NAME'], 2);
        if ($basePath === '\\' || $basePath === '/') $basePath = '';
        ?>
        <a href="<?php echo $basePath; ?>/logout" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout / Toka</span>
        </a>
    </div>
</aside>

<style>
:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --header-height: 70px;
    --village-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --danger-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --warning-gradient: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    --sidebar-bg: #1a1d21;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active: rgba(17, 153, 142, 0.2);
    --sidebar-text: rgba(255,255,255,0.7);
    --sidebar-text-active: #fff;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f0f2f5;
    min-height: 100vh;
}

/* Village-specific styling */
.village-logo {
    background: var(--village-gradient) !important;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4) !important;
}

.village-avatar {
    background: var(--village-gradient) !important;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3) !important;
}

.village-sidebar .nav-section ul li a.active {
    background: var(--sidebar-active);
}

.village-sidebar .nav-section ul li a.active::before {
    background: var(--village-gradient);
}

/* Mobile Header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--sidebar-bg);
    z-index: 1001;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.menu-toggle {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
}

.mobile-logo i {
    font-size: 24px;
    background: var(--village-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--village-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1002;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Sidebar */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1003;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    overflow: hidden;
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--village-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
}

.logo-text h1 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.logo-text span {
    font-size: 12px;
    color: var(--sidebar-text);
}

.sidebar-close {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sidebar-close:hover {
    background: rgba(255,255,255,0.15);
}

/* User Section */
.sidebar-user {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--village-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}

.user-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.user-info span {
    font-size: 13px;
    color: var(--sidebar-text);
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* Scroll Indicators */
.scroll-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.1);
}

.scroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 14px;
}

.scroll-btn:hover {
    background: var(--village-gradient);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
}

.nav-section {
    padding: 10px 0;
}

.nav-section-title {
    display: block;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
}

.nav-section ul {
    list-style: none;
}

.nav-section ul li a {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    gap: 14px;
}

.nav-section ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--village-gradient);
    border-radius: 0 3px 3px 0;
    transition: var(--transition);
}

.nav-section ul li a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.nav-section ul li a.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
}

.nav-section ul li a.active::before {
    height: 60%;
}

.nav-section ul li a i {
    width: 22px;
    font-size: 18px;
    text-align: center;
}

.nav-section ul li a span:not(.nav-badge) {
    font-size: 14px;
    font-weight: 500;
}

.nav-badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--danger-gradient);
    color: #fff;
    animation: pulse 2s infinite;
}

.nav-badge.warning {
    background: var(--warning-gradient);
}

.nav-badge.success {
    background: var(--success-gradient);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Footer */
.sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 12px;
    color: #f44336;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.logout-btn:hover {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    text-decoration: none;
}

/* Main Content Area */
.admin-main {
    margin-left: var(--sidebar-width);
    padding: 30px;
    min-height: 100vh;
    transition: var(--transition);
}

/* Responsive */
@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.active {
        transform: translateX(0);
    }

    .mobile-header {
        display: flex;
    }

    .sidebar-close {
        display: flex;
    }

    .admin-main {
        margin-left: 0;
        padding-top: calc(var(--header-height) + 20px);
    }
}

@media (max-width: 768px) {
    .admin-sidebar {
        width: 100%;
        max-width: 320px;
    }

    .admin-main {
        padding: 20px;
        padding-top: calc(var(--header-height) + 20px);
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menuToggle');
    const sidebarClose = document.getElementById('sidebarClose');
    const sidebar = document.getElementById('adminSidebar');
    const overlay = document.getElementById('sidebarOverlay');

    function openSidebar() {
        sidebar.classList.add('active');
        overlay.classList.add('active');
        menuToggle.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeSidebar() {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
        menuToggle.classList.remove('active');
        document.body.style.overflow = '';
    }

    if (menuToggle) {
        menuToggle.addEventListener('click', function() {
            if (sidebar.classList.contains('active')) {
                closeSidebar();
            } else {
                openSidebar();
            }
        });
    }

    if (sidebarClose) {
        sidebarClose.addEventListener('click', closeSidebar);
    }

    if (overlay) {
        overlay.addEventListener('click', closeSidebar);
    }

    // Close sidebar on nav link click (mobile)
    const navLinks = document.querySelectorAll('.sidebar-nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            if (window.innerWidth <= 1024) {
                closeSidebar();
            }
        });
    });

    // Handle window resize
    window.addEventListener('resize', function() {
        if (window.innerWidth > 1024) {
            closeSidebar();
        }
    });
});

// Scroll navigation function
function scrollNav(amount) {
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (sidebarNav) {
        sidebarNav.scrollBy({
            top: amount,
            behavior: 'smooth'
        });
    }
}
</script>
