<?php 
require_once 'includes/db.php';
require_once 'includes/header.php'; 
?>

<style>
    :root {
        --org-primary: #A20E37;
        --org-secondary: #1e3a8a;
        --org-light: #f8fafc;
    }
    .org-main-card {
        background: #fff;
        border-radius: 25px;
        box-shadow: 0 20px 50px rgba(162, 14, 55, 0.1);
        padding: 40px;
        margin-top: -60px;
        position: relative;
        z-index: 20;
        border: 1px solid rgba(162, 14, 55, 0.05);
    }
    #orgCanvas {
        width: 100%;
        height: auto;
        display: block;
        background: #fff;
        image-rendering: -webkit-optimize-contrast;
    }
    .page-hero {
        background: linear-gradient(135deg, #A20E37 0%, #8b0c2e 50%, #FBBC09 100%);
        padding: 100px 0 140px 0;
        color: white;
    }
    .download-btn-fixed {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1000;
        transition: transform 0.3s;
    }
    .download-btn-fixed:hover {
        transform: scale(1.1);
    }
</style>

<div class="page-hero text-center">
    <div class="container">
        <h1 class="fw-bold mb-2 display-3 animate__animated animate__fadeInDown">Organizational Structure</h1>
        <p class="lead opacity-75 animate__animated animate__fadeInUp">Official hierarchy of Bhartiya Seva Educational Sangthan Trust</p>
    </div>
</div>

<div class="container mb-5">
    <div class="org-main-card text-center">
        <div id="canvasParent" style="width: 100%; background: #fff;">
            <canvas id="orgCanvas" width="1200" height="1650"></canvas>
        </div>
    </div>
</div>

<button onclick="downloadCanvas()" class="btn btn-danger btn-lg rounded-pill px-4 shadow-lg download-btn-fixed no-print">
    <i class="fas fa-file-image me-2"></i> Download Chart
</button>

<script>
window.onload = function() {
    const canvas = document.getElementById('orgCanvas');
    const ctx = canvas.getContext('2d');

    function drawOrgChart() {
        const maroon = '#A20E37';
        const navy = '#1e3a8a';
        const grey = '#475569';
        const lineCol = '#cbd5e1';
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // --- Header Section ---
        ctx.textAlign = 'center';
        
        // Hindi Title
        ctx.fillStyle = maroon;
        ctx.font = 'bold 36px Georgia, serif';
        ctx.fillText('भारतीय सेवा एजुकेशनल संगठन ट्रस्ट (भारत)', 600, 70);
        
        // English Title
        ctx.font = 'bold 26px Arial, sans-serif';
        ctx.fillText('BHARTIYA SEVA EDUCATIONAL SANGATHAN TRUST (BHARAT)', 600, 110);
        
        // Registration Badge
        ctx.fillStyle = maroon;
        ctx.roundRect ? ctx.roundRect(300, 130, 600, 40, 5) : ctx.fillRect(300, 130, 600, 40);
        ctx.fill();
        ctx.fillStyle = '#fff';
        ctx.font = 'bold 18px Arial';
        ctx.fillText('REGISTERED UNDER GOVERNMENT OF INDIA | TRUST ACT 1882', 600, 157);
        
        // Website
        ctx.fillStyle = grey;
        ctx.font = '600 16px Arial';
        ctx.fillText('Official Portal: www.bsestrust.in', 600, 195);
        
        // Horizontal Line
        ctx.strokeStyle = '#e2e8f0'; ctx.lineWidth = 3;
        ctx.beginPath(); ctx.moveTo(100, 215); ctx.lineTo(1100, 215); ctx.stroke();

        // --- Helper Function for Premium Boxes ---
        function drawBox(x, y, w, h, text, mainColor = navy, isHeading = false) {
            // Shadow
            ctx.shadowColor = 'rgba(0,0,0,0.05)'; ctx.shadowBlur = 10; ctx.shadowOffsetY = 5;
            
            // Box Background
            const grad = ctx.createLinearGradient(x, y, x, y + h);
            grad.addColorStop(0, '#ffffff');
            grad.addColorStop(1, '#f8fafc');
            ctx.fillStyle = grad;
            
            // Rounded corners
            const r = 12;
            ctx.beginPath();
            ctx.moveTo(x + r, y);
            ctx.arcTo(x + w, y, x + w, y + h, r);
            ctx.arcTo(x + w, y + h, x, y + h, r);
            ctx.arcTo(x, y + h, x, y, r);
            ctx.arcTo(x, y, x + w, y, r);
            ctx.closePath();
            ctx.fill();
            
            // Reset Shadow for Border
            ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0;
            ctx.strokeStyle = mainColor;
            ctx.lineWidth = isHeading ? 3 : 2;
            ctx.stroke();
            
            // Content
            ctx.fillStyle = '#1e293b';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            if (typeof text === 'string') {
                ctx.font = isHeading ? 'bold 22px Arial' : 'bold 18px Arial';
                ctx.fillText(text, x + w / 2, y + h / 2);
            } else {
                ctx.font = isHeading ? 'bold 18px Arial' : 'bold 16px Arial';
                let lineY = y + (h / (text.length + 1));
                text.forEach(line => {
                    ctx.fillText(line, x + w / 2, lineY);
                    lineY += 24;
                });
            }
        }

        function drawLine(x1, y1, x2, y2, isDashed = false) {
            ctx.setLineDash(isDashed ? [6, 4] : []);
            ctx.strokeStyle = lineCol;
            ctx.lineWidth = 2;
            ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
        }

        // --- Main Flow ---
        
        // 1. General Assembly
        drawBox(425, 260, 350, 70, 'General Assembly', maroon, true);
        drawLine(600, 330, 600, 370);
        
        // 2. Administrative Board
        drawBox(425, 370, 350, 70, 'Administrative Board', maroon, true);
        drawLine(600, 440, 600, 530);
        
        // President Branch
        drawLine(600, 480, 320, 480);
        drawLine(320, 440, 320, 520);
        drawLine(320, 440, 300, 440); drawLine(320, 520, 300, 520);
        drawBox(70, 415, 230, 50, 'President', navy);
        drawBox(70, 495, 230, 50, 'Vice-President', navy);
        
        // 3. Executive Committee
        drawBox(425, 530, 350, 70, 'Executive Committee', maroon, true);
        drawLine(600, 600, 600, 660);
        
        // 4. Secretary General
        drawBox(425, 660, 350, 80, 'Secretary-General', maroon, true);
        drawLine(600, 740, 600, 800);
        
        // Side Staff
        drawLine(600, 770, 350, 770); drawLine(350, 720, 350, 820);
        drawLine(600, 770, 850, 770); drawLine(850, 720, 850, 820);
        drawBox(120, 700, 210, 50, 'Admin Coordinator', navy);
        drawBox(120, 800, 210, 50, 'Treasurer', navy);
        drawBox(870, 700, 210, 50, 'Media Consultant', navy);
        drawBox(870, 800, 210, 50, 'Activities Advisor', navy);
        
        // 5. State Level
        drawBox(425, 800, 350, 55, 'State Council of BSES Trust', navy);
        drawLine(600, 855, 600, 890);
        drawBox(400, 890, 400, 55, ['Secretary of the State Council', 'of BSES Trust'], navy);
        drawLine(600, 945, 600, 980);
        drawBox(375, 980, 450, 65, ['Executive Manager of BSES Trust', 'in the State'], navy);
        
        // 6. District Level
        drawLine(600, 1045, 600, 1100);
        drawBox(425, 1100, 350, 70, 'District Association', maroon, true);
        
        // District Boundary
        ctx.setLineDash([8, 6]); ctx.strokeStyle = '#e2e8f0';
        ctx.beginPath();
        ctx.roundRect ? ctx.roundRect(50, 1180, 1100, 420, 15) : ctx.rect(50, 1180, 1100, 420);
        ctx.stroke(); ctx.setLineDash([]);
        
        drawLine(600, 1170, 600, 1220, true);
        drawLine(600, 1200, 880, 1200, true);
        drawBox(900, 1170, 250, 70, ['District Council /', 'President of the Council'], navy);
        
        drawBox(450, 1220, 300, 70, ['President of the', 'District Association'], navy);
        drawLine(600, 1290, 600, 1350);
        
        // Dist Officers
        drawLine(600, 1320, 380, 1320); drawLine(380, 1280, 380, 1360);
        drawBox(150, 1260, 200, 50, 'Treasurer', navy);
        drawBox(150, 1340, 200, 50, 'Secretary', navy);
        
        // Final Committees
        drawLine(150, 1380, 1050, 1380);
        const comms = ['Female Dept', 'Public Services', 'Activities', 'Social', 'Cultural'];
        const commX = [150, 375, 600, 825, 1050];
        comms.forEach((name, i) => {
            drawLine(commX[i], 1380, commX[i], 1430);
            drawBox(commX[i]-100, 1430, 200, 90, [name, 'Committee'], maroon);
        });
    }

    drawOrgChart();
};

function downloadCanvas() {
    const canvas = document.getElementById('orgCanvas');
    const image = canvas.toDataURL("image/png");
    const link = document.createElement('a');
    link.download = 'Organisation-Hierarchy-BSES-Trust.png';
    link.href = image;
    link.click();
}
</script>

<?php require_once 'includes/footer.php'; ?>
