<x-app-layout>
    <x-module-hero title="Leadership Positions" description="Manage organizational leadership structure" icon="fa-sitemap">
        <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>
        <x-slot name="actions">
            @can('create leadership positions')
            <a href="{{ route('organization.leadership-positions.create') }}" 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-plus"></i> New Position
            </a>
            @endcan
        </x-slot>
    </x-module-hero>

    @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="w-full">
        @if($positions->count() > 0)
        <div class="overflow-x-auto">
            <table class="w-full table-zebra">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left th-col-1">Position</th>
                        <th class="px-4 py-3 text-left th-col-2">Organization</th>
                        <th class="px-4 py-3 text-left th-col-3">Hierarchy Level</th>
                        <th class="px-4 py-3 text-left th-col-4">Current Assignee</th>
                        <th class="px-4 py-3 text-center th-col-5">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($positions as $position)
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
                                    <i class="fas fa-user-tie text-blue-600"></i>
                                </div>
                                <div>
                                    <div class="font-semibold text-gray-800">{{ $position->title }}</div>
                                    @if($position->parentPosition)
                                    <div class="text-xs text-gray-500">Reports to: {{ $position->parentPosition->title }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-700">{{ $position->organization->name }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                {{ $position->hierarchy_level === 'bod' ? 'bg-purple-100 text-purple-800' : '' }}
                                {{ $position->hierarchy_level === 'chairman' ? 'bg-indigo-100 text-indigo-800' : '' }}
                                {{ $position->hierarchy_level === 'ceo' ? 'bg-blue-100 text-blue-800' : '' }}
                                {{ $position->hierarchy_level === 'c_suite' ? 'bg-cyan-100 text-cyan-800' : '' }}
                                {{ $position->hierarchy_level === 'middle_management' ? 'bg-green-100 text-green-800' : '' }}
                                {{ $position->hierarchy_level === 'first_line_management' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                {{ $position->hierarchy_level === 'frontline' ? 'bg-gray-100 text-gray-800' : '' }}">
                                {{ $position->hierarchy_level_label }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-700">
                            @if($position->currentAssignment)
                            <div class="flex items-center gap-2">
                                <div class="w-7 h-7 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                                    <i class="fas fa-user text-green-600 text-xs"></i>
                                </div>
                                <div>
                                    <div class="font-medium">{{ $position->currentAssignment->user->name }}</div>
                                    <div class="text-xs text-gray-500">Since {{ $position->currentAssignment->start_date->format('M d, Y') }}</div>
                                </div>
                            </div>
                            @else
                            <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs"><i class="fas fa-user-slash mr-1"></i>Vacant</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex justify-center gap-1 flex-wrap">
                                @can('assign leadership')
                                <a href="{{ route('organization.leadership-positions.assign', $position) }}" class="btn-action-assign">
                                    <i class="fas fa-user-plus"></i> Assign
                                </a>
                                @endcan
                                @can('edit leadership positions')
                                <a href="{{ route('organization.leadership-positions.edit', $position) }}" class="btn-action-edit">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                                @endcan
                                @can('delete leadership positions')
                                <form action="{{ route('organization.leadership-positions.destroy', $position) }}" method="POST" class="inline" onsubmit="return confirm('Delete this position?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-action-delete"><i class="fas fa-trash"></i> Delete</button>
                                </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-gray-200 bg-white">{{ $positions->links() }}</div>
        @else
        <div class="p-6 text-center py-12">
            <i class="fas fa-sitemap text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Leadership Positions Found</h3>
            <p class="text-gray-500 mb-4">Create an organization first, then add leadership positions.</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 Position</a>
            @endcan
        </div>
        @endif
    </div>
</x-app-layout>
