@extends('layouts.app')
@section('title', 'الهيكل التنظيمي - DOTS HR Pro')

@push('styles')
<style>
/* ─── Header & Controls ─── */
.orgchart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.orgchart-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}
.orgchart-controls .ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.orgchart-controls .ctrl-btn:hover { background: #1B2A4A; color: #fff; border-color: #1B2A4A; }
.orgchart-controls .ctrl-btn.active { background: #E8502F; color: #fff; border-color: #E8502F; }
.zoom-label { font-size: 12px; color: #94a3b8; min-width: 36px; text-align: center; font-weight: 600; }

/* ─── Stats ─── */
.org-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.org-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
}
.org-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.org-stat-value { font-size: 20px; font-weight: 800; color: #1B2A4A; line-height: 1; }
.org-stat-label { font-size: 12px; color: #64748b; margin-top: 2px; }

/* ─── Chart Container ─── */
.orgchart-canvas {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: auto;
    min-height: 500px;
    position: relative;
    padding: 40px 20px;
}
.orgchart-canvas-inner {
    transform-origin: top center;
    transition: transform 0.2s ease;
}

/* ─── Tree Layout ─── */
.org-tree {
    text-align: center;
    direction: ltr;
}
.org-tree ul {
    padding-top: 24px;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
}
.org-tree li {
    position: relative;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─── Connector Lines ─── */
.org-tree li::before,
.org-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    border-top: 2px solid #cbd5e1;
    width: 50%;
}
.org-tree li::before { right: 50%; }
.org-tree li::after { left: 50%; }
.org-tree li:first-child::before,
.org-tree li:last-child::after { border: 0 none; }
.org-tree li:only-child::before,
.org-tree li:only-child::after { border: 0 none; }
.org-tree > ul > li::before,
.org-tree > ul > li::after { border: 0 none; }

.org-tree ul::before {
    content: '';
    border-right: 2px solid #cbd5e1;
    height: 24px;
    position: absolute;
    top: 0;
    right: 50%;
}
.org-tree > ul::before { border: 0; }

/* ─── Node Card ─── */
.org-node {
    display: inline-block;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    background: #fff;
    text-align: center;
    min-width: 180px;
    max-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}
.org-node:hover {
    border-color: #1B2A4A;
    box-shadow: 0 8px 24px rgba(27,42,74,0.12);
    transform: translateY(-3px);
}
.org-node.root-node {
    border-color: #1B2A4A;
    background: linear-gradient(135deg, #1B2A4A, #2d4a7a);
}
.org-node.root-node .node-name { color: #fff; }
.org-node.root-node .node-title { color: rgba(255,255,255,0.75); }
.org-node.root-node .node-dept { background: rgba(232,80,47,0.9); color: #fff; }

.node-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B2A4A, #2d4a7a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(27,42,74,0.15);
}
.root-node .node-avatar {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
}
.node-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.node-avatar .initials {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.node-name {
    font-weight: 700;
    color: #1B2A4A;
    font-size: 13px;
    margin-bottom: 2px;
    line-height: 1.3;
}
.node-title {
    color: #64748b;
    font-size: 11px;
    margin-bottom: 6px;
}
.node-dept {
    background: rgba(232,80,47,0.08);
    color: #E8502F;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
}
.node-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E8502F;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(232,80,47,0.3);
}

/* ─── View Toggle ─── */
.view-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.view-toggle button {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.view-toggle button.active {
    background: #fff;
    color: #1B2A4A;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ─── Loading ─── */
.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #94a3b8;
    gap: 12px;
}
.chart-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #E8502F;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
@endpush

@section('content')
<div class="orgchart-header">
    <div>
        <h1 class="page-title"><i class="fas fa-sitemap" style="color:#E8502F;"></i> الهيكل التنظيمي</h1>
        <p class="page-subtitle">عرض شجري للموظفين حسب التسلسل الإداري</p>
    </div>
    <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
        <div class="view-toggle">
            <button class="active" onclick="switchView('employee')" id="btnEmployee"><i class="fas fa-users"></i> الموظفون</button>
            <button onclick="switchView('department')" id="btnDepartment"><i class="fas fa-building"></i> الأقسام</button>
        </div>
        <div class="orgchart-controls">
            <button class="ctrl-btn" onclick="zoomOut()" title="تصغير"><i class="fas fa-minus"></i></button>
            <span class="zoom-label" id="zoomLabel">100%</span>
            <button class="ctrl-btn" onclick="zoomIn()" title="تكبير"><i class="fas fa-plus"></i></button>
            <button class="ctrl-btn" onclick="resetZoom()" title="إعادة ضبط"><i class="fas fa-expand"></i></button>
            <button class="ctrl-btn" onclick="toggleFullscreen()" title="شاشة كاملة"><i class="fas fa-maximize"></i></button>
        </div>
    </div>
</div>

{{-- إحصائيات --}}
<div class="org-stats">
    <div class="org-stat">
        <div class="org-stat-icon" style="background:rgba(27,42,74,0.08);color:#1B2A4A"><i class="fas fa-users"></i></div>
        <div>
            <div class="org-stat-value">{{ $stats['total_employees'] }}</div>
            <div class="org-stat-label">إجمالي الموظفين</div>
        </div>
    </div>
    <div class="org-stat">
        <div class="org-stat-icon" style="background:rgba(232,80,47,0.08);color:#E8502F"><i class="fas fa-building"></i></div>
        <div>
            <div class="org-stat-value">{{ $stats['total_departments'] }}</div>
            <div class="org-stat-label">الأقسام</div>
        </div>
    </div>
    <div class="org-stat">
        <div class="org-stat-icon" style="background:rgba(34,197,94,0.08);color:#22c55e"><i class="fas fa-user-tie"></i></div>
        <div>
            <div class="org-stat-value">{{ $stats['managers'] }}</div>
            <div class="org-stat-label">المدراء</div>
        </div>
    </div>
</div>

{{-- الشجرة --}}
<div class="orgchart-canvas" id="chartCanvas">
    <div class="orgchart-canvas-inner" id="orgChart">
        <div class="chart-loading" id="chartLoading">
            <div class="spinner"></div>
            <span>جاري تحميل الهيكل التنظيمي...</span>
        </div>
    </div>
</div>

<script>
let scale = 1;
let currentView = 'employee';

function zoomIn() {
    scale = Math.min(scale + 0.1, 2);
    applyZoom();
}
function zoomOut() {
    scale = Math.max(scale - 0.1, 0.3);
    applyZoom();
}
function resetZoom() {
    scale = 1;
    applyZoom();
}
function applyZoom() {
    document.getElementById('orgChart').style.transform = 'scale(' + scale + ')';
    document.getElementById('zoomLabel').textContent = Math.round(scale * 100) + '%';
}
function toggleFullscreen() {
    const canvas = document.getElementById('chartCanvas');
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        canvas.requestFullscreen().catch(() => {});
    }
}

function switchView(view) {
    currentView = view;
    document.getElementById('btnEmployee').classList.toggle('active', view === 'employee');
    document.getElementById('btnDepartment').classList.toggle('active', view === 'department');
    loadChart();
}

function getInitials(name) {
    if (!name) return '?';
    const parts = name.trim().split(/\s+/);
    if (parts.length >= 2) return parts[0].charAt(0) + parts[parts.length - 1].charAt(0);
    return parts[0].charAt(0);
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderEmployeeNode(node, isRoot) {
    const rootClass = isRoot ? ' root-node' : '';
    const childCount = node.children ? node.children.length : 0;
    let html = '<li><div class="org-node' + rootClass + '">';

    if (childCount > 0) {
        html += '<div class="node-badge">' + childCount + '</div>';
    }

    html += '<div class="node-avatar">';
    if (node.photo) {
        html += '<img src="' + escapeHtml(node.photo) + '" alt="">';
    } else {
        html += '<span class="initials">' + escapeHtml(getInitials(node.name)) + '</span>';
    }
    html += '</div>';
    html += '<div class="node-name">' + escapeHtml(node.name) + '</div>';
    html += '<div class="node-title">' + escapeHtml(node.title || '') + '</div>';
    if (node.department) {
        html += '<div class="node-dept">' + escapeHtml(node.department) + '</div>';
    }
    html += '</div>';

    if (node.children && node.children.length > 0) {
        html += '<ul>';
        node.children.forEach(function(c) { html += renderEmployeeNode(c, false); });
        html += '</ul>';
    }
    html += '</li>';
    return html;
}

function renderDepartmentNode(dept) {
    let html = '<li><div class="org-node">';

    const empCount = dept.employee_count || 0;
    if (empCount > 0) {
        html += '<div class="node-badge">' + empCount + '</div>';
    }

    html += '<div class="node-avatar" style="background:linear-gradient(135deg,#E8502F,#ff7a5c)">';
    html += '<span class="initials"><i class="fas fa-building" style="font-size:18px"></i></span>';
    html += '</div>';
    html += '<div class="node-name">' + escapeHtml(dept.name) + '</div>';
    if (dept.manager) {
        html += '<div class="node-title"><i class="fas fa-user-tie" style="margin-left:4px;font-size:10px"></i> ' + escapeHtml(dept.manager.name) + '</div>';
    } else {
        html += '<div class="node-title" style="color:#ef4444">بدون مدير</div>';
    }
    html += '<div class="node-dept">' + empCount + ' موظف</div>';
    html += '</div>';

    if (dept.children && dept.children.length > 0) {
        html += '<ul>';
        dept.children.forEach(function(c) { html += renderDepartmentNode(c); });
        html += '</ul>';
    }
    html += '</li>';
    return html;
}

function loadChart() {
    const container = document.getElementById('orgChart');
    container.innerHTML = '<div class="chart-loading"><div class="spinner"></div><span>جاري تحميل الهيكل التنظيمي...</span></div>';

    if (currentView === 'employee') {
        fetch('{{ route("org-chart.data") }}')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.length) {
                    container.innerHTML = '<div class="chart-loading" style="color:#94a3b8"><i class="fas fa-sitemap" style="font-size:3rem;margin-bottom:12px;display:block"></i><p style="margin:0;text-align:center">لا توجد بيانات كافية لعرض الهيكل التنظيمي<br><small>تأكد من تعيين المدير المباشر للموظفين</small></p></div>';
                    return;
                }
                const map = {};
                data.forEach(function(n) { map[n.id] = Object.assign({}, n, {children: []}); });
                var roots = [];
                data.forEach(function(n) {
                    if (n.pid && map[n.pid]) {
                        map[n.pid].children.push(map[n.id]);
                    } else {
                        roots.push(map[n.id]);
                    }
                });
                if (roots.length === 0 && Object.keys(map).length > 0) {
                    roots = [map[Object.keys(map)[0]]];
                }

                var chartHtml = '<div class="org-tree"><ul>';
                roots.forEach(function(r, i) { chartHtml += renderEmployeeNode(r, i === 0 && roots.length === 1); });
                chartHtml += '</ul></div>';
                container.innerHTML = chartHtml;
            })
            .catch(function() {
                container.innerHTML = '<div class="chart-loading" style="color:#ef4444"><i class="fas fa-exclamation-triangle" style="font-size:2rem;margin-bottom:8px"></i><p>حدث خطأ في تحميل البيانات</p></div>';
            });
    } else {
        fetch('{{ route("org-chart.departments") }}')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data.length) {
                    container.innerHTML = '<div class="chart-loading" style="color:#94a3b8"><i class="fas fa-building" style="font-size:3rem;margin-bottom:12px"></i><p>لا توجد أقسام</p></div>';
                    return;
                }
                var chartHtml = '<div class="org-tree"><ul>';
                data.forEach(function(d) { chartHtml += renderDepartmentNode(d); });
                chartHtml += '</ul></div>';
                container.innerHTML = chartHtml;
            })
            .catch(function() {
                container.innerHTML = '<div class="chart-loading" style="color:#ef4444"><i class="fas fa-exclamation-triangle" style="font-size:2rem;margin-bottom:8px"></i><p>حدث خطأ في تحميل البيانات</p></div>';
            });
    }
}

document.addEventListener('DOMContentLoaded', function() {
    loadChart();
});
</script>
@endsection