{{--
    Compliance Organogram — Boxes chart / Tree list of the management hierarchy
    with rolled-up compliance. From ManagementController@organogram: $tree
--}}
@extends('layouts.app')
@section('title', 'Organogram')
@section('content')

  @include('partials.flash')

  <style>
    /* Tree (list) view */
    .organogram summary { list-style: none; cursor: pointer; }
    .organogram summary::-webkit-details-marker { display: none; }
    .organogram details[open] > summary .org-chevron { transform: rotate(90deg); }
    .organogram .org-chevron { transition: transform .15s ease; }

    /* Boxes chart (CSS org chart with connectors) */
    .org-chart, .org-chart ul { display: flex; justify-content: center; padding-top: 22px; position: relative; margin: 0; list-style: none; }
    .org-chart li { position: relative; padding: 22px 12px 0; text-align: center; }
    .org-chart li::before, .org-chart li::after {
      content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid #D9DEE3;
    }
    .org-chart li::after { right: auto; left: 50%; border-left: 2px solid #D9DEE3; }
    .org-chart li:only-child::before, .org-chart li:only-child::after { display: none; }
    .org-chart li:only-child { padding-top: 0; }
    .org-chart li:first-child::before, .org-chart li:last-child::after { border: 0 none; }
    .org-chart li:last-child::before { border-right: 2px solid #D9DEE3; border-radius: 0 6px 0 0; }
    .org-chart li:first-child::after { border-radius: 6px 0 0 0; }
    .org-chart ul::before { content: ''; position: absolute; top: 0; left: calc(50% - 1px); border-left: 2px solid #D9DEE3; width: 0; height: 22px; }
    .org-chart li.collapsed > ul { display: none; }

    /* Reserve room for the CEO box attached left of the COO root */
    .org-chart.has-aside { padding-left: 260px; padding-right: 260px; }
    @media (max-width: 640px) { .org-chart.has-aside { padding-left: 240px; padding-right: 16px; } }

    /* Root node with CEO attached to the left of COO */
    .org-root-node { position: relative; display: inline-flex; }
    .org-ceo-aside { position: absolute; right: 100%; top: 0; display: flex; align-items: center; }
    .org-ceo-link { width: 34px; height: 0; border-top: 2px solid #D9DEE3; }

    /* Box card: icon+name+role (left) | 3 values (right) → short height */
    .org-box {
      position: relative; display: inline-flex; align-items: center; gap: 12px; text-align: left;
      min-width: 214px; max-width: 280px; padding: 11px 14px;
      background: #fff; border: 1px solid #E3E8EC; border-top: 4px solid var(--accent, #0E7C7B);
      border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.07);
    }
    .org-box-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
    .org-name { display: block; font-weight: 700; font-size: 14px; color: #1D2733; line-height: 1.15;
      max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .org-role { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #8A9199; margin-top: 1px; }
    .org-box-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding-left: 10px; border-left: 1px solid #EDF0F2; }
    .org-flag {
      position: absolute; top: -10px; left: 10px; display: inline-flex; align-items: center; gap: 2px;
      background: #C1473A; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .02em;
      padding: 2px 7px 2px 5px; border-radius: 6px; box-shadow: 0 1px 3px rgba(193,71,58,.35); z-index: 3; white-space: nowrap;
    }
    .org-flag .material-symbols-outlined { font-size: 12px; }
    .org-pct { font-size: 21px; font-weight: 800; line-height: 1.05; }
    .org-sub { font-size: 10.5px; color: #8A9199; white-space: nowrap; }
    .org-sub-error { font-size: 10.5px; color: #C1473A; font-weight: 700; white-space: nowrap; }

    .org-toggle {
      position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
      width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #E3E8EC;
      display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
    }
    .org-toggle:hover { background: #F2F5F7; }
    .org-toggle .material-symbols-outlined { transition: transform .15s ease; }
    .org-chart li.collapsed > .org-box .org-toggle .material-symbols-outlined,
    .org-chart li.collapsed > .org-root-node .org-toggle .material-symbols-outlined { transform: rotate(-90deg); }
    .org-chart li.collapsed > .org-box::after,
    .org-chart li.collapsed > .org-root-node > .org-box::after {
      content: '+'; position: absolute; top: 6px; right: 8px; font-weight: 700; color: #8A9199; font-size: 13px;
    }

    /* Care-worker small circles */
    .org-chart .org-worker { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
    .org-worker-circle {
      width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--accent, #0E7C7B);
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
      background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06);
    }
    .org-worker-name { font-size: 11px; color: #5A6169; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .org-worker-pct { font-size: 11px; font-weight: 700; line-height: 1; }
  </style>

  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div class="flex items-center gap-2">
      <span class="material-symbols-outlined text-primary">account_tree</span>
      <div>
        <h3 class="text-headline-md font-headline-md text-on-surface">Compliance Organogram</h3>
        <p class="text-label-md font-label-md text-outline">Reporting hierarchy with rolled-up compliance</p>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <div class="inline-flex rounded-lg bg-surface-container-high p-1">
        <button type="button" id="btnBoxes" onclick="orgView('boxes')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-label-md font-label-md transition-colors">
          <span class="material-symbols-outlined text-[18px]">account_tree</span> Boxes
        </button>
        <button type="button" id="btnTree" onclick="orgView('tree')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-label-md font-label-md transition-colors">
          <span class="material-symbols-outlined text-[18px]">list</span> Tree
        </button>
      </div>
      <button type="button" onclick="orgExpand(true)" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-3 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">
        <span class="material-symbols-outlined text-[18px]">unfold_more</span> Expand
      </button>
      <button type="button" onclick="orgExpand(false)" class="inline-flex items-center gap-1.5 bg-surface-container-high text-on-surface-variant px-3 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest">
        <span class="material-symbols-outlined text-[18px]">unfold_less</span> Collapse
      </button>
    </div>
  </div>

  {{-- Legend --}}
  <div class="flex flex-wrap items-center gap-4 mb-4 text-label-md font-label-md text-on-surface-variant">
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-primary/10 border border-primary/30"></span> 100% complete</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-gold/20 border border-gold/40"></span> Partial</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-error-container border border-error/30"></span> Has overdue</span>
    <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-surface-container-high border border-outline-variant"></span> No courses assigned</span>
  </div>

  @php
    // Attach CEO to the left of COO; the tree is rooted at COO so its connector drops from COO.
    $ceoAside = null; $root = $tree;
    if (($tree['role_key'] ?? '') === 'ceo'
        && count($tree['children'] ?? []) === 1
        && (($tree['children'][0]['role_key'] ?? '') === 'coo')) {
      $ceoAside = $tree;
      $root = $tree['children'][0];
    }
    $rootHasChildren = ! empty($root['children']);
  @endphp

  {{-- Boxes chart --}}
  <div id="orgBoxes" class="surface-card rounded-xl p-6 overflow-x-auto">
    <ul @class(['org-chart', 'has-aside' => (bool) $ceoAside])>
      <li>
        <div class="org-root-node">
          @if($ceoAside)
            <div class="org-ceo-aside">
              @include('management._org-box-card', ['node' => $ceoAside, 'showToggle' => false])
              <div class="org-ceo-link"></div>
            </div>
          @endif
          @include('management._org-box-card', ['node' => $root, 'showToggle' => $rootHasChildren])
        </div>
        @if($rootHasChildren)
          <ul>
            @foreach($root['children'] as $branch)
              @include('management._org-box', ['node' => $branch, 'depth' => 2])
            @endforeach
          </ul>
        @endif
      </li>
    </ul>
  </div>

  {{-- Tree list --}}
  <div id="orgTree" class="surface-card rounded-xl p-4 organogram" style="display:none">
    @include('management._org-node', ['node' => $tree, 'depth' => 0])
  </div>

  <script>
    (function () {
      var boxes = document.getElementById('orgBoxes');
      var tree = document.getElementById('orgTree');
      var bBoxes = document.getElementById('btnBoxes');
      var bTree = document.getElementById('btnTree');
      var activeCls = ['bg-surface', 'text-primary', 'shadow-sm', 'font-semibold'];

      window.orgView = function (v) {
        var isBoxes = v === 'boxes';
        boxes.style.display = isBoxes ? '' : 'none';
        tree.style.display = isBoxes ? 'none' : '';
        activeCls.forEach(function (c) {
          (isBoxes ? bBoxes : bTree).classList.add(c);
          (isBoxes ? bTree : bBoxes).classList.remove(c);
        });
        (isBoxes ? bBoxes : bTree).classList.remove('text-on-surface-variant');
        (isBoxes ? bTree : bBoxes).classList.add('text-on-surface-variant');
        try { localStorage.setItem('orgView', v); } catch (e) {}
      };

      window.orgExpand = function (open) {
        boxes.querySelectorAll('li').forEach(function (li) {
          if (li.querySelector(':scope > ul')) li.classList.toggle('collapsed', !open);
        });
        tree.querySelectorAll('details').forEach(function (d) { d.open = open; });
      };

      boxes.querySelectorAll('.org-toggle').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
          e.preventDefault(); e.stopPropagation();
          btn.closest('li').classList.toggle('collapsed');
        });
      });

      var saved = 'boxes';
      try { saved = localStorage.getItem('orgView') || 'boxes'; } catch (e) {}
      orgView(saved);
    })();
  </script>

@endsection