<x-app-layout>
    <x-module-hero
        title="{{ $staffHistory->staff_name }}"
        description="Staff Employment Record"
        icon="fa-user-tie">

        <x-slot name="backButton">
            <a href="{{ route('organization.staff-history.index') }}"
               class="inline-flex items-center gap-2 text-[#475569] hover:text-[#1e293b] text-sm transition">
                <i class="fas fa-arrow-left text-xs"></i> Back to List
            </a>
        </x-slot>

        <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('edit staff history')
            <a href="{{ route('organization.staff-history.edit', $staffHistory) }}"
               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-edit"></i> Edit
            </a>
            @endcan
            @can('delete staff history')
            <form action="{{ route('organization.staff-history.destroy', $staffHistory) }}" method="POST" class="inline"
                  onsubmit="return confirm('Delete this staff record?');">
                @csrf @method('DELETE')
                <button type="submit"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm font-semibold rounded-lg hover:bg-red-700 transition">
                    <i class="fas fa-trash"></i> Delete
                </button>
            </form>
            @endcan
        </x-slot>
    </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

    <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Left Column: Staff Details + Employment Details --}}
        <div class="lg:col-span-1 space-y-4">
            {{-- Staff Details Card --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-orange-600 p-5">
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <div>
                            <h2 class="text-base font-bold text-white">{{ $staffHistory->staff_name }}</h2>
                            <p class="text-orange-200 text-sm">{{ $staffHistory->position }}</p>
                        </div>
                    </div>
                </div>
                <div class="p-5 space-y-3">
                    <div class="flex items-center gap-3 text-sm text-gray-700">
                        <i class="fas fa-building w-5 text-green-600"></i>
                        <span>{{ $staffHistory->organization->name }}</span>
                    </div>
                    @if($staffHistory->user)
                    <div class="flex items-center gap-3 text-sm text-blue-700">
                        <i class="fas fa-link w-5"></i>
                        <span>Linked: {{ $staffHistory->user->name }}</span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Employment Details Card --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                <h3 class="text-sm font-semibold text-gray-800 mb-3 border-b pb-2">Employment Details</h3>
                <div class="space-y-3">
                    <div class="flex items-center gap-3 text-sm text-gray-700">
                        <i class="fas fa-calendar w-5 text-green-600"></i>
                        <span>From {{ $staffHistory->employment_start_date->format('M d, Y') }}</span>
                    </div>
                    @if($staffHistory->employment_end_date)
                    <div class="flex items-center gap-3 text-sm text-gray-700">
                        <i class="fas fa-calendar-times w-5 text-gray-400"></i>
                        <span>To {{ $staffHistory->employment_end_date->format('M d, Y') }}</span>
                    </div>
                    @else
                    <div class="flex items-center gap-3 text-sm text-green-600">
                        <i class="fas fa-check-circle w-5"></i>
                        <span>Currently Employed</span>
                    </div>
                    @endif
                    @if($staffHistory->employment_duration)
                    <div class="flex items-center gap-3 text-sm text-gray-700">
                        <i class="fas fa-clock w-5 text-green-600"></i>
                        <span>{{ $staffHistory->employment_duration }}</span>
                    </div>
                    @endif
                    <div>
                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                            {{ $staffHistory->employment_status === 'current' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-700' }}">
                            {{ ucfirst($staffHistory->employment_status) }}
                        </span>
                    </div>
                    @if($staffHistory->termination_reason)
                    <div class="pt-2 border-t border-gray-100">
                        <p class="text-xs text-gray-500 font-medium mb-1">Termination Reason</p>
                        <p class="text-sm text-gray-700">{{ $staffHistory->termination_reason }}</p>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Passport Card --}}
            @if($staffHistory->hasPassport())
            <div class="bg-white rounded-lg shadow-sm border border-blue-200 overflow-hidden">
                <div class="bg-blue-50 p-5 border-b border-blue-200">
                    <h3 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-passport text-blue-600"></i>Staff Passport
                    </h3>
                </div>
                <div class="p-5">
                    @if(str_ends_with($staffHistory->passport_path, '.pdf'))
                        <div class="text-center py-4">
                            <i class="fas fa-file-pdf text-red-600 text-4xl mb-2"></i>
                            <p class="text-sm font-medium text-gray-700">PDF Document</p>
                            <a href="{{ $staffHistory->getPassportUrl() }}" target="_blank"
                               class="inline-block mt-3 px-4 py-2 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700 transition">
                                <i class="fas fa-download mr-1"></i>Download PDF
                            </a>
                        </div>
                    @else
                        <div class="bg-gray-100 rounded-lg overflow-hidden">
                            <img src="{{ $staffHistory->getPassportUrl() }}" class="w-full h-auto object-cover">
                        </div>
                        <a href="{{ $staffHistory->getPassportUrl() }}" target="_blank"
                           class="block text-center mt-3 px-4 py-2 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700 transition">
                            <i class="fas fa-expand mr-1"></i>View Full Size
                        </a>
                    @endif
                </div>
            </div>
            @endif
        </div>

        {{-- Right Column: Achievements --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="flex items-center gap-3 p-5 border-b border-gray-200">
                    <i class="fas fa-trophy text-2xl text-yellow-500"></i>
                    <div>
                        <h3 class="text-lg font-bold text-gray-800">Achievements</h3>
                        <p class="text-sm text-gray-500">Staff achievements and milestones</p>
                    </div>
                </div>

                @if($staffHistory->achievements->count() > 0)
                <div class="p-5 space-y-3">
                    @foreach($staffHistory->achievements->sortByDesc('achievement_date') as $achievement)
                    <div class="flex items-start gap-3 p-4 bg-yellow-50 rounded-lg">
                        <div class="w-9 h-9 bg-yellow-100 rounded-full flex items-center justify-center shrink-0">
                            <i class="fas fa-award text-yellow-600 text-sm"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-xs font-semibold text-gray-700">{{ $achievement->achievement_date->format('M d, Y') }}</p>
                            <p class="text-sm text-gray-700 mt-0.5">{{ $achievement->achievement_description }}</p>
                        </div>
                        @can('add staff achievements')
                        <form action="{{ route('organization.staff-history.achievements.destroy', $achievement) }}"
                              method="POST" class="shrink-0"
                              onsubmit="return confirm('Delete this achievement?');">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                        @endcan
                    </div>
                    @endforeach
                </div>
                @else
                <div class="p-8 text-center">
                    <i class="fas fa-trophy text-5xl text-gray-200 mb-3"></i>
                    <h4 class="text-base font-semibold text-gray-600 mb-1">No Achievements Yet</h4>
                    <p class="text-sm text-gray-500">Add achievements to recognize this staff member's contributions.</p>
                </div>
                @endif

                @can('add staff achievements')
                <div class="p-5 border-t border-gray-200">
                    <h4 class="text-sm font-semibold text-gray-800 mb-4">Add New Achievement</h4>
                    <form action="{{ route('organization.staff-history.achievements.store', $staffHistory) }}" method="POST">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1" for="achievement_description">
                                    Description <span class="text-red-500">*</span>
                                </label>
                                <textarea id="achievement_description" name="achievement_description" rows="3"
                                    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"
                                    required></textarea>
                                @error('achievement_description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1" for="achievement_date">
                                    Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" id="achievement_date" name="achievement_date"
                                    max="{{ date('Y-m-d') }}"
                                    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"
                                    required>
                                @error('achievement_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="flex justify-end mt-4">
                            <button type="submit" class="px-4 py-2 bg-green-700 text-white text-sm font-medium rounded-lg hover:bg-green-800 transition">
                                <i class="fas fa-plus mr-1"></i>Add Achievement
                            </button>
                        </div>
                    </form>
                </div>
                @endcan
            </div>
        </div>
    </div>
</x-app-layout>
