@extends('layouts.app')
@section('title','Org Chart')
@section('page-title','Project Management — Org Chart')
@section('content')
<style>
.org-wrap { display:flex; flex-direction:column; align-items:center; }
.org-row  { display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; }

.org-card {
  border-radius:10px; padding:.9rem 1.1rem; min-width:175px; max-width:210px;
  text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.1);
  border-top:4px solid var(--cc); background:#fff;
}
.org-card .badge-lvl { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; padding:.25rem .6rem; border-radius:20px; }
.org-card .c-name    { font-weight:700; font-size:.95rem; margin:.35rem 0 .15rem; }
.org-card .c-role    { font-size:.75rem; color:#6c757d; }
.org-card .c-rate    { font-size:.7rem; color:#198754; margin-top:.25rem; }
.org-card .c-reports { font-size:.65rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:20px; padding:.1rem .5rem; margin-top:.4rem; display:inline-block; color:#6c757d; }

.ceo-card {
  background:linear-gradient(135deg,#1a3a5c,#1a5276);
  color:#fff; border-radius:14px; padding:1.1rem 2.5rem;
  text-align:center; box-shadow:0 6px 20px rgba(26,82,118,.35);
}
.ceo-card .c-name  { font-weight:800; font-size:1.1rem; }
.ceo-card .c-role  { font-size:.8rem; opacity:.8; margin-top:.15rem; }
.ceo-card .c-org   { font-size:.7rem; opacity:.6; margin-top:.1rem; }

.connector { width:2px; height:30px; background:#dee2e6; margin:0 auto; }
.h-line    { height:2px; background:#dee2e6; }

.stores-card {
  border-radius:10px; padding:.9rem 1.1rem; min-width:175px;
  text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.1);
  border-top:4px solid #fd7e14; background:#fff8f0;
}
.stores-card .c-name { font-weight:700; font-size:.9rem; color:#e07b00; margin:.25rem 0 .1rem; }
.stores-card .c-role { font-size:.75rem; color:#a05a00; }

.artisan-card {
  border-radius:8px; padding:.6rem .9rem; min-width:140px; max-width:160px;
  text-align:center; border:1.5px solid #dee2e6; background:#f8f9fa;
}
.artisan-card .c-name { font-weight:600; font-size:.83rem; }
.artisan-card .c-role { font-size:.7rem; color:#6c757d; }

.sc-card {
  border-radius:8px; padding:.6rem .9rem; min-width:150px; max-width:175px;
  background:#f8f0ff; border:1.5px solid #7d3c98; text-align:center;
}
.sc-card .c-name  { font-weight:600; font-size:.85rem; color:#7d3c98; }
.sc-card .c-trade { font-size:.72rem; color:#9b59b6; }
.sc-card .c-bal   { font-size:.68rem; margin-top:.2rem; }

.branch-wrap { display:flex; gap:4rem; justify-content:center; flex-wrap:wrap; align-items:flex-start; }
.branch      { display:flex; flex-direction:column; align-items:center; }
.branch-lbl  { font-size:.68rem; text-transform:uppercase; letter-spacing:.7px; color:#6c757d; font-weight:600; margin-bottom:.5rem; }

.divider-v { border-left:2px dashed #dee2e6; min-height:80px; margin:0 1.5rem; align-self:stretch; }

.legend-chip { font-size:.78rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:20px; padding:.2rem .7rem; display:inline-flex; align-items:center; gap:.35rem; }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h5 class="fw-bold mb-1"><i class="bi bi-diagram-3 me-2 text-primary"></i>Organisational Hierarchy</h5>
    <p class="text-muted small mb-0">Hillside Real Estates — Project Management Structure</p>
  </div>
  <a href="{{ route('staff.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-people me-1"></i>All Staff</a>
</div>

{{-- Legend --}}
<div class="d-flex gap-2 flex-wrap mb-4">
  <span class="legend-chip"><span class="dot" style="background:#1a5276"></span> CEO</span>
  <span class="legend-chip"><span class="dot" style="background:#1a5276"></span> Project Manager</span>
  <span class="legend-chip"><span class="dot" style="background:#2e86c1"></span> Site Supervisor</span>
  <span class="legend-chip"><span class="dot" style="background:#148f77"></span> Foreman</span>
  <span class="legend-chip"><span class="dot" style="background:#1e8449"></span> Artisan / Worker</span>
  <span class="legend-chip"><span class="dot" style="background:#7d3c98"></span> Subcontractor</span>
  <span class="legend-chip"><span class="dot" style="background:#fd7e14"></span> Stores / Inventory</span>
</div>

<div class="card border-0 shadow-sm p-4 p-md-5">
<div class="org-wrap">

  {{-- CEO --}}
  <div class="org-node">
    @if($ceo)
    <div class="ceo-card">
      <div style="font-size:2rem;opacity:.8"><i class="bi bi-person-fill-gear"></i></div>
      <div class="c-name">{{ $ceo->name }}</div>
      <div class="c-role">Chief Executive Officer</div>
      <div class="c-org">Hillside Real Estates</div>
    </div>
    @else
    <div class="ceo-card"><div class="c-name">Chief Executive Officer</div><div class="c-org">Hillside Real Estates</div></div>
    @endif
  </div>

  <div class="connector"></div>

  {{-- PM row --}}
  @foreach($projects as $project)
  @php
    $pm          = $project->staff->where('hierarchy_level','project_manager')->first();
    $supervisors = $project->staff->where('hierarchy_level','site_supervisor');
    $foremen     = $project->staff->where('hierarchy_level','foreman');
    $artisans    = $project->staff->where('hierarchy_level','artisan');
    $projectSubs = $subcontractors[$project->id] ?? collect();
  @endphp

  <div class="mb-3 text-center">
    <span class="badge bg-success px-3 py-1" style="font-size:.75rem"><i class="bi bi-buildings me-1"></i>{{ $project->name }} — {{ $project->location }}</span>
  </div>

  {{-- Project Manager --}}
  <div class="org-row mb-0">
    @if($pm)
    <div class="org-card" style="--cc:#1a5276">
      <span class="badge-lvl" style="background:#1a5276;color:#fff">Project Manager</span>
      <div class="c-name"><i class="bi bi-person-fill me-1"></i>{{ $pm->name }}</div>
      <div class="c-role">{{ $pm->role }}</div>
      @if($pm->phone)<div class="c-rate"><i class="bi bi-telephone me-1"></i>{{ $pm->phone }}</div>@endif
      <div class="c-reports"><i class="bi bi-arrow-up-short"></i>Reports to CEO</div>
    </div>
    @else
    <div class="org-card" style="--cc:#1a5276;border:2px dashed #1a5276;background:#f0f6ff">
      <span class="badge-lvl" style="background:#1a5276;color:#fff">Project Manager</span>
      <div class="c-name text-muted"><i class="bi bi-person-dash me-1"></i>Vacant</div>
      <a href="{{ route('staff.create') }}" class="btn btn-xs btn-outline-primary mt-2" style="font-size:.7rem;padding:.15rem .5rem">+ Assign</a>
    </div>
    @endif
  </div>

  {{-- Connector + Stores branch beside PM --}}
  @if($stores->count() > 0)
  <div class="d-flex align-items-flex-start justify-content-center mt-0" style="gap:0">
    <div style="flex:1;display:flex;justify-content:flex-end;padding-right:2rem;padding-top:2rem">
      <div class="branch" style="align-items:flex-end">
        <div class="branch-lbl">Stores &amp; Inventory</div>
        <div class="d-flex gap-2 flex-wrap justify-content-end">
          @foreach($stores as $s)
          <div class="stores-card">
            <div style="font-size:1.5rem;color:#fd7e14"><i class="bi bi-box-seam"></i></div>
            <div class="c-name">{{ $s->name }}</div>
            <div class="c-role">{{ $s->role }}</div>
            @if($s->phone)<div style="font-size:.7rem;color:#a05a00;margin-top:.25rem"><i class="bi bi-telephone me-1"></i>{{ $s->phone }}</div>@endif
            <div style="font-size:.65rem;background:#fff;border:1px solid #ffc07a;border-radius:20px;padding:.1rem .5rem;margin-top:.4rem;display:inline-block;color:#a05a00"><i class="bi bi-arrow-up-short"></i>Reports to PM</div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
    <div class="connector" style="align-self:flex-start;margin-top:0"></div>
    <div style="flex:1;padding-left:2rem"></div>
  </div>
  @else
  <div class="connector"></div>
  @endif

  {{-- Site Supervisor --}}
  <div class="org-row mb-0">
    @forelse($supervisors as $sv)
    <div class="org-card" style="--cc:#2e86c1">
      <span class="badge-lvl" style="background:#2e86c1;color:#fff">Site Supervisor</span>
      <div class="c-name"><i class="bi bi-person-fill me-1"></i>{{ $sv->name }}</div>
      <div class="c-role">{{ $sv->role }}</div>
      @if($sv->phone)<div class="c-rate"><i class="bi bi-telephone me-1"></i>{{ $sv->phone }}</div>@endif
      <div class="c-reports"><i class="bi bi-arrow-up-short"></i>Reports to Project Manager</div>
    </div>
    @empty
    <div class="org-card" style="--cc:#2e86c1;border:2px dashed #2e86c1;background:#e8f4fd">
      <span class="badge-lvl" style="background:#2e86c1;color:#fff">Site Supervisor</span>
      <div class="c-name text-muted"><i class="bi bi-person-dash me-1"></i>Vacant</div>
      <a href="{{ route('staff.create') }}" class="btn btn-xs btn-outline-primary mt-2" style="font-size:.7rem;padding:.15rem .5rem">+ Assign</a>
    </div>
    @endforelse
  </div>

  <div class="connector"></div>

  {{-- Foreman + Subcontractors branch --}}
  <div class="branch-wrap">

    {{-- LEFT: Foreman → Artisans --}}
    @if($foremen->count() > 0 || $artisans->count() > 0)
    <div class="branch">
      @foreach($foremen as $fm)
      <div class="org-card mb-0" style="--cc:#148f77">
        <span class="badge-lvl" style="background:#148f77;color:#fff">Foreman</span>
        <div class="c-name"><i class="bi bi-person-fill me-1"></i>{{ $fm->name }}</div>
        <div class="c-role">{{ $fm->role }}</div>
        @if($fm->phone)<div class="c-rate"><i class="bi bi-telephone me-1"></i>{{ $fm->phone }}</div>@endif
        <div class="c-reports"><i class="bi bi-arrow-up-short"></i>Reports to Site Supervisor</div>
      </div>
      @endforeach

      @if($artisans->count() > 0)
      <div class="connector"></div>
      <div class="branch-lbl">Artisans &amp; Workers</div>
      <div class="d-flex gap-2 flex-wrap justify-content-center" style="max-width:480px">
        @foreach($artisans as $art)
        <div class="artisan-card">
          <div style="font-size:1.2rem;color:#1e8449"><i class="bi bi-person-fill"></i></div>
          <div class="c-name">{{ $art->name }}</div>
          <div class="c-role">{{ $art->role }}</div>
          @if($art->daily_rate)<div style="font-size:.68rem;color:#198754;margin-top:.2rem">GH₵ {{ number_format($art->daily_rate,2) }}/day</div>@endif
        </div>
        @endforeach
      </div>
      <div class="mt-2" style="font-size:.72rem;color:#6c757d"><i class="bi bi-info-circle me-1"></i>All artisans report to Foreman</div>
      @endif
    </div>
    @endif

    {{-- DIVIDER --}}
    @if($projectSubs->count() > 0)
    <div class="divider-v"></div>

    {{-- RIGHT: Subcontractors --}}
    <div class="branch">
      <div class="branch-lbl">Subcontractors</div>
      <div class="d-flex gap-2 flex-wrap justify-content-center" style="max-width:420px">
        @foreach($projectSubs as $sc)
        <div class="sc-card">
          <div style="font-size:1.1rem;color:#7d3c98"><i class="bi bi-person-badge"></i></div>
          <div class="c-name">{{ $sc->name }}</div>
          <div class="c-trade">{{ $sc->trade }}</div>
          @if($sc->phone)<div style="font-size:.68rem;color:#9b59b6;margin-top:.2rem"><i class="bi bi-telephone me-1"></i>{{ $sc->phone }}</div>@endif
          @php $bal = $sc->agreed_amount - $sc->amount_paid; @endphp
          <div class="c-bal {{ $bal > 0 ? 'text-danger' : 'text-success' }}">
            {{ $bal > 0 ? 'Bal: GH₵ '.number_format($bal,2) : '✓ Fully paid' }}
          </div>
        </div>
        @endforeach
      </div>
      <div class="mt-2" style="font-size:.72rem;color:#6c757d"><i class="bi bi-info-circle me-1"></i>All subcontractors report to Site Supervisor</div>
    </div>
    @endif

  </div>{{-- /branch-wrap --}}

  @endforeach

</div>{{-- /org-wrap --}}

{{-- Reporting Rules Table --}}
<hr class="mt-5">
<div class="fw-semibold mb-3 mt-4"><i class="bi bi-diagram-2 me-2 text-primary"></i>Reporting Lines Summary</div>
<div class="table-responsive">
  <table class="table table-sm table-bordered mb-0" style="font-size:.83rem">
    <thead class="table-light"><tr><th>Name</th><th>Title</th><th>Reports To</th><th>Supervises</th></tr></thead>
    <tbody>
      @if($ceo)<tr><td class="fw-bold">{{ $ceo->name }}</td><td>Chief Executive Officer</td><td>— Board</td><td>All Departments</td></tr>@endif
      @foreach($projects as $project)
        @foreach($project->staff->where('hierarchy_level','project_manager') as $s)
        <tr><td class="fw-bold">{{ $s->name }}</td><td>Project Manager</td><td>CEO</td><td>Site Supervisor, Stores</td></tr>
        @endforeach
        @foreach($stores as $s)
        <tr><td class="fw-bold">{{ $s->name }}</td><td>{{ $s->role }}</td><td>Project Manager</td><td>Stock &amp; Inventory</td></tr>
        @endforeach
        @foreach($project->staff->where('hierarchy_level','site_supervisor') as $s)
        <tr><td class="fw-bold">{{ $s->name }}</td><td>Site Supervisor</td><td>Project Manager</td><td>Foreman, Subcontractors</td></tr>
        @endforeach
        @foreach($project->staff->where('hierarchy_level','foreman') as $s)
        <tr><td class="fw-bold">{{ $s->name }}</td><td>Foreman</td><td>Site Supervisor</td><td>All Artisans &amp; Workers</td></tr>
        @endforeach
      @endforeach
    </tbody>
  </table>
</div>

</div>{{-- /card --}}
@endsection