@extends('layouts.app')

@section('title', 'Organization Chart')
@section('heading', 'Organization Chart')

@section('content')
    @include('employees.top-submenu')
    <style>
        :root {
            --org-line-color: #0f766e;
            --org-line-width: 2px;
        }

        .org-tree, .org-tree ul {
            margin: 0;
            padding-top: 1.25rem;
            position: relative;
            display: flex;
            justify-content: center;
            width: max-content;
            min-width: max-content;
        }

        .org-tree {
            margin-left: auto;
            margin-right: auto;
        }

        .org-tree li {
            list-style: none;
            text-align: center;
            position: relative;
            padding: 1.25rem .75rem 0 .75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .org-tree li > ul {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .org-tree li::before,
        .org-tree li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            width: 50%;
            height: 1.25rem;
            border-top: var(--org-line-width) solid var(--org-line-color);
            filter: drop-shadow(0 0 1px rgba(15, 118, 110, 0.35));
        }

        .org-tree li::after {
            right: auto;
            left: 50%;
            border-left: var(--org-line-width) solid var(--org-line-color);
        }

        .org-tree li:only-child::before,
        .org-tree li:only-child::after {
            display: none;
        }

        .org-tree li:only-child {
            padding-top: 0;
        }

        .org-tree li:first-child::before,
        .org-tree li:last-child::after {
            border: 0;
        }

        .org-tree li:last-child::before {
            border-right: var(--org-line-width) solid var(--org-line-color);
            border-radius: 0 .5rem 0 0;
        }

        .org-tree li:first-child::after {
            border-radius: .5rem 0 0 0;
        }

        .org-tree ul::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 1.25rem;
            border-left: var(--org-line-width) solid var(--org-line-color);
            filter: drop-shadow(0 0 1px rgba(15, 118, 110, 0.35));
        }

        .org-card {
            width: 12rem;
        }
    </style>

    <x-card>
        <div class="mb-6">
            <p class="text-sm text-slate-500">Company hierarchy and reporting structure</p>
            <p class="mt-1 text-xs text-slate-400">Total employees: {{ $totalEmployees }}</p>
        </div>

        @if($orgTree->isEmpty())
            <p class="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No reporting hierarchy available yet.</p>
        @else
            <div class="overflow-x-auto pb-2">
                <ul class="org-tree">
                    @foreach($orgTree as $node)
                        @include('people.partials.org-node', ['node' => $node])
                    @endforeach
                </ul>
            </div>
        @endif
    </x-card>
@endsection