<?php include 'header.php'; ?>

<style>
.bg-light-blue {
    background-color: #e6f0fa; /* biru muda */
}
.org-box {
    padding: 15px;
    border: 2px solid #0d6efd;
    border-radius: 10px;
    text-align: center;
}
</style>

<div class="container section-margin">
    <div class="bg-transparan fade-in shadow-sm">
        <h1 class="text-center fw-bold">TIM PSIKO DINAMIKA</h1>
        
    </div>
</div>
    

    <!-- Pimpinan -->
    <div class="d-flex flex-column align-items-center position-relative">
        <div id="pimpinan" class="org-box bg-light-blue mb-5" style="width: 350px;">
            <h5 class="fw-bold text-primary text-decoration-underline">PIMPINAN PENERBIT</h5>
            <p class="mb-0">Dr. Tugimin Supriyadi, S.Psi., MM. Psikolog</p>
        </div>
    </div>

    <!-- SVG garis -->
    <svg id="org-lines" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;"></svg>

    <!-- Bagian bawah -->
    <div id="team-container" class="row g-4 justify-content-center">
        <!-- Editorial Team -->
        <div class="col-md-5">
            <div class="org-box bg-light-blue">
                <h5 class="fw-bold text-primary text-decoration-underline">EDITORIAL TEAM</h5>
                <ol class="mb-0 text-start">
                    <li>Tiara Anggita Perdini, S.Psi., M.Psi., Psikolog</li>
                    <li>Mega Widyastuti</li>
                    <li>Nadiya Alfira, S.Psi</li>
                    <li>Irfan Zhikri Anggara</li>
                    <li>Jihan Aprilia</li>
                </ol>
            </div>
        </div>

        <!-- Reviewer List -->
        <div class="col-md-5">
            <div class="org-box bg-light-blue">
                <h5 class="fw-bold text-primary text-decoration-underline">REVIEWER LIST</h5>
                <ol class="mb-0 text-start">
                    <li>Dr. Mochamad Widjanarko, S.Psi., M.Si</li>
                    <li>Dr. Selviana, S.Psi., M.Si., Psikolog</li>
                    <li>Prof. Adi Fahrudin, S.Psi., M.Soc., Sc., Ph.D</li>
                    <li>Dr. Arfian, M.Psi. Psikolog</li>
                    <li>Dr. Kus Hanna Rahmi, M.Psi. Psikolog</li>
                    <li>Dr. Erdina Indrawati, S.Psi., M.Psi. Psikolog</li>
                    <li>Dr. Ecep Supriatna, S.Psi., M.Pd</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<script>
// Fungsi menggambar garis dari pimpinan ke semua kotak bawah
function drawOrgLines() {
    const svg = document.getElementById("org-lines");
    svg.innerHTML = ""; // Hapus garis lama

    const pimpinan = document.getElementById("pimpinan").getBoundingClientRect();
    const teamBoxes = document.querySelectorAll("#team-container .org-box");

    const svgRect = svg.getBoundingClientRect();
    const pimpinanX = pimpinan.left + pimpinan.width / 2 - svgRect.left;
    const pimpinanY = pimpinan.bottom - svgRect.top;

    // Titik bawah pimpinan ke tengah horizontal semua box bawah
    let minX = Infinity, maxX = -Infinity, bottomY = 0;
    teamBoxes.forEach(box => {
        const rect = box.getBoundingClientRect();
        minX = Math.min(minX, rect.left + rect.width / 2 - svgRect.left);
        maxX = Math.max(maxX, rect.left + rect.width / 2 - svgRect.left);
        bottomY = rect.top - svgRect.top;
    });

    // Garis vertikal dari pimpinan ke garis horizontal
    svg.innerHTML += `<line x1="${pimpinanX}" y1="${pimpinanY}" x2="${pimpinanX}" y2="${bottomY - 20}" stroke="#0d6efd" stroke-width="2"/>`;

    // Garis horizontal di atas semua kotak bawah
    svg.innerHTML += `<line x1="${minX}" y1="${bottomY - 20}" x2="${maxX}" y2="${bottomY - 20}" stroke="#0d6efd" stroke-width="2"/>`;

    // Garis vertikal dari horizontal ke masing-masing box
    teamBoxes.forEach(box => {
        const rect = box.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2 - svgRect.left;
        svg.innerHTML += `<line x1="${centerX}" y1="${bottomY - 20}" x2="${centerX}" y2="${rect.top - svgRect.top}" stroke="#0d6efd" stroke-width="2"/>`;
    });
}

window.addEventListener("load", drawOrgLines);
window.addEventListener("resize", drawOrgLines);
</script>

<?php include 'footer.php'; ?>
