@extends('layouts.app')

@section('content')
<div x-data="{ activeView: '{{ $view }}', filterDept: '{{ $filterDept ?? '' }}', showSalary: true }">
    <!-- Stats Bar -->
    <div class="bg-white rounded-xl border border-gray-200 p-4 mb-6">
        <div class="flex flex-wrap items-center gap-6">
            <div class="flex items-center space-x-2">
                <span class="text-base font-bold text-gray-900">{{ $currentBusiness->name }}</span>
                <span class="px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-700 rounded-full">People</span>
            </div>
            <div class="flex items-center gap-6 text-sm">
                <div>
                    <span class="text-2xl font-bold text-indigo-600">{{ $totalStaff }}</span>
                    <span class="text-gray-500 ml-1">Total Staff</span>
                </div>
                <div>
                    <span class="text-2xl font-bold text-gray-900">{{ $deptCount }}</span>
                    <span class="text-gray-500 ml-1">Departments</span>
                </div>
                <div>
                    <span class="text-2xl font-bold text-green-600">{{ $currentBusiness->currency_symbol }}{{ number_format($monthlyPayroll) }}</span>
                    <span class="text-gray-500 ml-1">Monthly Payroll</span>
                </div>
                <div>
                    <span class="text-2xl font-bold text-blue-600">{{ $activeCount }}</span>
                    <span class="text-gray-500 ml-1">Active</span>
                </div>
            </div>
        </div>
        <p class="text-xs text-gray-400 mt-2 border-t border-gray-100 pt-2">Set a staff member's manager in Staff > Edit to build the hierarchy.</p>
    </div>

    <!-- Tabs -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="flex space-x-6">
            <button @click="activeView = 'groups'" :class="activeView === 'groups' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700'" class="py-3 px-1 border-b-2 font-medium text-sm flex items-center space-x-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
                <span>Groups</span>
            </button>
            <button @click="activeView = 'hierarchy'" :class="activeView === 'hierarchy' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700'" class="py-3 px-1 border-b-2 font-medium text-sm flex items-center space-x-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
                <span>Hierarchy</span>
            </button>
        </nav>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap items-center gap-3 mb-6">
        <form method="GET" action="{{ route('business.org-chart', $currentBusiness->id) }}" class="flex items-center gap-3">
            <input type="text" name="search" value="{{ $search }}" placeholder="Search name, role, department..." class="rounded-lg border-gray-300 text-sm w-64">
            <select name="department" class="rounded-lg border-gray-300 text-sm">
                <option value="">All Departments</option>
                @foreach($departments as $dept)
                <option value="{{ $dept }}" {{ $filterDept == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                @endforeach
            </select>
            <button type="submit" class="px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Search</button>
        </form>
        <div class="flex items-center gap-3 ml-auto">
            <label class="flex items-center text-sm text-gray-600 cursor-pointer">
                <input type="checkbox" x-model="showSalary" class="rounded border-gray-300 text-indigo-600 mr-1.5">
                Show Salaries
            </label>
            <button onclick="window.print()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                Print / PDF
            </button>
            <span class="text-sm text-gray-500">{{ $activeStaff->count() }} of {{ $totalStaff }} staff</span>
        </div>
    </div>

    <!-- Groups View -->
    <div x-show="activeView === 'groups'" class="space-y-8">
        @foreach($departmentTrees as $dept => $tree)
        @if(!$filterDept || $filterDept == $dept)
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <!-- Department Header -->
            <div class="px-6 py-4 border-b border-gray-100" style="border-left: 4px solid {{ $tree['color'] }}">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <span class="w-3 h-3 rounded-full" style="background-color: {{ $tree['color'] }}"></span>
                        <h3 class="text-lg font-bold" style="color: {{ $tree['color'] }}">{{ $dept ?? 'No Department' }}</h3>
                        <span class="text-sm text-gray-500">{{ $tree['count'] }} people</span>
                        <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">{{ $currentBusiness->currency_symbol }}{{ number_format($tree['payroll']) }}/mo</span>
                    </div>
                </div>
            </div>

            <!-- Hierarchy Cards -->
            <div class="p-6">
                @foreach($tree['topLevel'] as $leader)
                    @include('dashboard.org-chart._person-tree', ['person' => $leader, 'allStaff' => $tree['members'], 'color' => $tree['color'], 'level' => 0])
                @endforeach

                {{-- Staff with no manager and not top level --}}
                @php
                    $orphans = $tree['members']->filter(function($m) use ($tree) {
                        return !$tree['topLevel']->contains('id', $m->id) && !$tree['members']->contains('id', $m->manager_id);
                    })->diff($tree['topLevel']);
                @endphp
                @if($orphans->count() > 0)
                <div class="mt-4 flex flex-wrap gap-3">
                    @foreach($orphans as $orphan)
                    @include('dashboard.org-chart._person-card', ['person' => $orphan, 'color' => $tree['color']])
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        @endif
        @endforeach
    </div>

    <!-- Hierarchy View (Full Company Tree) -->
    <div x-show="activeView === 'hierarchy'" style="display: none;">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6 overflow-x-auto" :class="{ 'hide-salaries': !showSalary }">
            @if($fullTreeTopLevel->count() > 0)
                <div class="flex flex-col items-center">
                    @foreach($fullTreeTopLevel as $topPerson)
                        @include('dashboard.org-chart._full-tree-node', ['person' => $topPerson, 'allStaff' => $activeStaff, 'deptColors' => $deptColors, 'level' => 0])
                    @endforeach
                </div>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    <p class="mt-3 text-sm text-gray-500">No hierarchy data yet. Set manager relationships in Staff > Edit.</p>
                </div>
            @endif
        </div>
    </div>

    @if($activeStaff->isEmpty())
    <div class="text-center py-16 bg-white rounded-xl border border-gray-200">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">No staff data</h3>
        <p class="mt-1 text-sm text-gray-500">Add staff with reporting relationships to build the org chart.</p>
    </div>
    @endif
</div>
@endsection