<x-app-layout>
    <x-module-hero
        title="Organogram"
        description="Visualize organizational hierarchy"
        icon="fa-project-diagram">

        <x-slot name="tabs">
            @can('view organizations')
            <a href="{{ route('organization.details.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.details.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-building text-sm"></i> Organization Details
            </a>
            @endcan
            @can('view leadership positions')
            <a href="{{ route('organization.leadership-positions.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-positions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-sitemap text-sm"></i> Leadership Positions
            </a>
            @endcan
            @can('view leadership history')
            <a href="{{ route('organization.leadership-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.leadership-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-history text-sm"></i> Leadership History
            </a>
            @endcan
            @can('view staff history')
            <a href="{{ route('organization.staff-history.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.staff-history.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-user-tie text-sm"></i> Staff History
            </a>
            @endcan
            @can('view election cycles')
            <a href="{{ route('organization.election-cycles.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.election-cycles.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-calendar-alt text-sm"></i> Election Cycles
            </a>
            @endcan
            @can('view voting procedures')
            <a href="{{ route('organization.voting-procedures.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.voting-procedures.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-vote-yea text-sm"></i> Voting Procedures
            </a>
            @endcan
            @can('view organogram')
            <a href="{{ route('organization.organogram.show') }}"
               class="module-hero-tab {{ request()->routeIs('organization.organogram.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-project-diagram text-sm"></i> Organogram
            </a>
            @endcan
        </x-slot>

        @if($selectedOrganization)
        <x-slot name="actions">
            @can('export organogram')
            <a href="{{ route('organization.organogram.export', ['format' => 'pdf', 'organization_id' => $selectedOrganization->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition">
                <i class="fas fa-file-pdf"></i> Export PDF
            </a>
            <a href="{{ route('organization.organogram.export', ['format' => 'svg', 'organization_id' => $selectedOrganization->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-[#334155] text-white text-sm font-semibold rounded-lg hover:bg-[#475569] transition">
                <i class="fas fa-image"></i> Export SVG
            </a>
            <a href="{{ route('organization.organogram.export', ['format' => 'json', 'organization_id' => $selectedOrganization->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-[#334155] text-white text-sm font-semibold rounded-lg hover:bg-[#475569] transition">
                <i class="fas fa-code"></i> Export JSON
            </a>
            @endcan
        </x-slot>
        @endif
    </x-module-hero>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="px-6 pt-4">
        <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i>{{ session('success') }}
        </div>
    </div>
    @endif
    @if(session('error'))
    <div class="px-6 pt-4">
        <div class="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i>{{ session('error') }}
        </div>
    </div>
    @endif

    <div class="p-6">
        {{-- Organization Selector --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-6">
            <form method="GET">
                <div class="flex flex-wrap items-end gap-4">
                    <div class="flex-1 min-w-[220px]">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Select Organization</label>
                        <select name="organization_id"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                            onchange="this.form.submit()">
                            <option value="">-- Select an Organization --</option>
                            @foreach($organizations as $org)
                                <option value="{{ $org->id }}" {{ request('organization_id') == $org->id ? 'selected' : '' }}>
                                    {{ $org->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>

        @if($selectedOrganization)
            {{-- Statistics Cards --}}
            @if(!empty($statistics))
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500 mb-0.5">Total Positions</p>
                            <p class="text-2xl font-bold text-gray-800">{{ $statistics['total_positions'] }}</p>
                        </div>
                        <i class="fas fa-sitemap text-3xl text-blue-400 opacity-60"></i>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500 mb-0.5">Filled Positions</p>
                            <p class="text-2xl font-bold text-green-600">{{ $statistics['filled_positions'] }}</p>
                        </div>
                        <i class="fas fa-user-check text-3xl text-green-400 opacity-60"></i>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500 mb-0.5">Vacant Positions</p>
                            <p class="text-2xl font-bold text-orange-600">{{ $statistics['empty_positions'] }}</p>
                        </div>
                        <i class="fas fa-user-slash text-3xl text-orange-400 opacity-60"></i>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500 mb-0.5">Fill Rate</p>
                            <p class="text-2xl font-bold text-purple-600">{{ $statistics['fill_rate'] }}%</p>
                        </div>
                        <i class="fas fa-chart-pie text-3xl text-purple-400 opacity-60"></i>
                    </div>
                </div>
            </div>
            @endif

            {{-- Hierarchy Visualization --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-4 border-b border-gray-200">
                    <h2 class="text-base font-semibold text-gray-800">
                        <i class="fas fa-project-diagram mr-2 text-green-600"></i>{{ $selectedOrganization->name }} — Organizational Hierarchy
                    </h2>
                </div>
                <div class="p-6">
                    @if(!empty($hierarchy))
                    <div class="overflow-x-auto">
                        <div class="min-w-[800px]">
                            @foreach($hierarchy as $node)
                                @include('organization.organogram.partials.node', ['node' => $node, 'level' => 0])
                            @endforeach
                        </div>
                    </div>
                    @else
                    <div class="text-center py-12">
                        <i class="fas fa-project-diagram text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-xl font-semibold text-gray-700 mb-2">No Leadership Structure Found</h3>
                        <p class="text-gray-500 mb-4">Create leadership positions to visualize the organogram.</p>
                        @can('create leadership positions')
                        <a href="{{ route('organization.leadership-positions.create') }}" class="theme-btn-primary px-6 py-2 rounded-lg">
                            <i class="fas fa-plus mr-2"></i>Create Leadership Positions
                        </a>
                        @endcan
                    </div>
                    @endif
                </div>
            </div>
        @else
            <div class="text-center py-16">
                <i class="fas fa-project-diagram text-6xl text-gray-300 mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-700 mb-2">Select an Organization</h3>
                <p class="text-gray-500">Choose an organization from the dropdown above to view its organogram.</p>
            </div>
        @endif
    </div>
</x-app-layout>
