<?php 
include '../../connection.php';
?>

<style>
    :root {
        --primary-color: #2c3e50;
        --secondary-color: #3498db;
        --accent-color: #e74c3c;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
    }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f7fa;
        color: #333;
    }
    .org-container {
        max-width: 1200px;
        margin: 30px auto;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .org-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 30px;
        text-align: center;
    }
    .org-body { padding: 30px; }
    .org-chart {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .org-level {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 40px;
    }
    .org-node {
        background: white;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin: 10px;
        text-align: center;
        width: 220px;
        transition: all 0.3s ease;
        border-top: 4px solid var(--secondary-color);
        position: relative;
    }
    .org-node:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    .org-node.primary { border-top-color: var(--accent-color); }
    .org-node.secondary { border-top-color: var(--secondary-color); }
    .org-node.tertiary { border-top-color: #2ecc71; }
    .node-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--secondary-color);
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.8rem;
    }
    .node-avatar.primary { background: var(--accent-color); }
    .node-avatar.secondary { background: var(--secondary-color); }
    .node-avatar.tertiary { background: #2ecc71; }
    .node-title {
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 5px;
        font-size: 1.1rem;
    }
    .node-name { color: #555; margin-bottom: 10px; font-size: 0.95rem; }
    .node-contact { font-size: 0.85rem; color: #777; margin-top: 10px; }
    .connector::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        width: 2px;
        height: 20px;
        background: #ccc;
    }
    .level-1 .org-node::before { display: none; }
    @media (max-width: 768px) {
        .org-node { width: 160px; padding: 15px; }
        .node-avatar { width: 60px; height: 60px; font-size: 1.5rem; }
    }
</style>

<div class="org-container">
    <div class="org-header">
        <h1><i class="fas fa-sitemap me-2"></i> Barangay Organizational Structure</h1>
        <p class="lead mb-0">Local Government Unit - Barangay Tual</p>
    </div>
    <div class="org-body">
        <div class="org-chart">

            <!-- LEVEL 1: Captain -->
            <?php
            $captain = $conn->query("
                SELECT u.first_name, u.middle_name, u.last_name, u.contact
                FROM tbl_organizational_structure o
                LEFT JOIN tbl_user u ON o.user_id = u.user_id
                WHERE o.position = 'CAPTAIN'
                LIMIT 1
            ");
            if ($captain && $captain->num_rows > 0):
                $row = $captain->fetch_assoc();
            ?>
            <div class="org-level level-1">
                <div class="org-node primary connector">
                    <div class="node-avatar primary"><i class="fas fa-user-tie"></i></div>
                    <div class="node-title">Barangay Captain</div>
                    <div class="node-name">Hon. <?= $row['first_name'].' '.$row['middle_name'].'. '.$row['last_name'] ?></div>
                    <div class="node-contact">(+63) <?= $row['contact'] ?></div>
                </div>
            </div>
            <?php endif; ?>

            <!-- LEVEL 2: Secretary, Treasurer, SK Chair, Record Keeper -->
            <div class="org-level level-2">
                <?php
                $positions = [
                    'SECRETARY' => ['title' => 'Barangay Secretary', 'icon' => 'fa-user-edit'],
                    'TREASURER' => ['title' => 'Barangay Treasurer', 'icon' => 'fa-calculator'],
                    'CHAIRPERSON' => ['title' => 'SK Chairman', 'icon' => 'fa-users'],
                    'KEEPER' => ['title' => 'Record Keeper', 'icon' => 'fa-folder-open']
                ];

                foreach ($positions as $pos => $info):
                    $query = $conn->query("
                        SELECT u.first_name, u.middle_name, u.last_name, u.contact
                        FROM tbl_organizational_structure o
                        LEFT JOIN tbl_user u ON o.user_id = u.user_id
                        WHERE o.position = '$pos'
                    ");
                    while ($row = $query->fetch_assoc()):
                ?>
                    <div class="org-node secondary connector">
                        <div class="node-avatar secondary"><i class="fas <?= $info['icon'] ?>"></i></div>
                        <div class="node-title"><?= $info['title'] ?></div>
                        <div class="node-name"><?= $row['first_name'].' '.$row['middle_name'].'. '.$row['last_name'] ?></div>
                        <div class="node-contact"><?= $row['contact'] ?></div>
                    </div>
                <?php endwhile; endforeach; ?>
            </div>

            <!-- LEVEL 3: Kagawads -->
            <div class="org-level level-3">
                <?php
                $kagawads = $conn->query("
                    SELECT u.first_name, u.middle_name, u.last_name, u.contact
                    FROM tbl_organizational_structure o
                    LEFT JOIN tbl_user u ON o.user_id = u.user_id
                    WHERE o.position = 'KAGAWADS'
                ");
                while ($row = $kagawads->fetch_assoc()):
                ?>
                    <div class="org-node tertiary connector">
                        <div class="node-avatar tertiary"><i class="fas fa-user"></i></div>
                        <div class="node-title">Kagawad</div>
                        <div class="node-name"><?= $row['first_name'].' '.$row['middle_name'].'. '.$row['last_name'] ?></div>
                        <div class="node-contact"><?= $row['contact'] ?></div>
                    </div>
                <?php endwhile; ?>
            </div>

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