<x-app-layout>
    <x-module-hero
        title="{{ $electionCycle->name }}"
        description="Election Cycle Details"
        icon="fa-calendar-alt">

        <x-slot name="backButton">
            <a href="{{ route('organization.election-cycles.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 election cycles')
            <a href="{{ route('organization.election-cycles.edit', $electionCycle) }}"
               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('complete election cycles')
            @if($electionCycle->isActive())
            <form action="{{ route('organization.election-cycles.complete', $electionCycle) }}" method="POST" class="inline"
                  onsubmit="return confirm('Mark this election cycle as completed?');">
                @csrf
                <button type="submit"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition">
                    <i class="fas fa-flag-checkered"></i> Complete
                </button>
            </form>
            @endif
            @endcan
            @can('delete election cycles')
            <form action="{{ route('organization.election-cycles.destroy', $electionCycle) }}" method="POST" class="inline"
                  onsubmit="return confirm('Delete this election cycle?');">
                @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">
        {{-- Details Card --}}
        <div class="lg:col-span-2 space-y-4">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                <h3 class="text-sm font-semibold text-gray-800 mb-4 border-b pb-2">Cycle Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">Organization</p>
                        <p class="text-sm text-gray-800 font-medium">{{ $electionCycle->organization->name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">Duration</p>
                        <p class="text-sm text-gray-800">{{ $electionCycle->duration_years }} years</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">Start Date</p>
                        <p class="text-sm text-gray-800">{{ $electionCycle->start_date->format('F d, Y') }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">End Date</p>
                        <p class="text-sm text-gray-800">{{ $electionCycle->end_date ? $electionCycle->end_date->format('F d, Y') : '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">Status</p>
                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                            @if($electionCycle->isActive()) bg-green-100 text-green-800
                            @elseif($electionCycle->isCompleted()) bg-blue-100 text-blue-800
                            @else bg-red-100 text-red-800 @endif">
                            {{ ucfirst($electionCycle->status) }}
                        </span>
                    </div>
                    @if($electionCycle->isActive() && $daysUntilElection !== null)
                    <div>
                        <p class="text-xs text-gray-500 font-medium mb-0.5">Days Until Election End</p>
                        <p class="text-sm font-bold text-blue-700">{{ $daysUntilElection }} days</p>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Applicable Positions --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                <h3 class="text-sm font-semibold text-gray-800 mb-4 border-b pb-2">Applicable Positions</h3>
                @if($applicablePositions->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach($applicablePositions as $position)
                    <div class="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center shrink-0">
                            <i class="fas fa-user-tie text-purple-600 text-xs"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $position->title }}</p>
                            <p class="text-xs text-gray-500 capitalize">{{ str_replace('_', ' ', $position->hierarchy_level) }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-sm text-gray-400 italic">No positions assigned to this election cycle.</p>
                @endif
            </div>

            {{-- Voting Procedures --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                <h3 class="text-sm font-semibold text-gray-800 mb-4 border-b pb-2">Associated Voting Procedures</h3>
                @if($electionCycle->votingProcedures->count() > 0)
                <div class="space-y-3">
                    @foreach($electionCycle->votingProcedures as $procedure)
                    <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center shrink-0">
                                <i class="fas fa-file-alt text-blue-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">{{ $procedure->name }}</p>
                                <p class="text-xs text-gray-500">{{ $procedure->voting_method_label }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs">v{{ $procedure->version }}</span>
                            <a href="{{ route('organization.voting-procedures.show', $procedure) }}" class="text-blue-600 hover:text-blue-800 text-sm">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-sm text-gray-400 italic">No voting procedures associated with this election cycle.</p>
                @endif
            </div>
        </div>

        {{-- Sidebar Stats --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
                <h3 class="text-sm font-semibold text-gray-800 mb-4 border-b pb-2">Quick Stats</h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">Applicable Positions</span>
                        <span class="font-bold text-gray-800">{{ $applicablePositions->count() }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">Voting Procedures</span>
                        <span class="font-bold text-gray-800">{{ $electionCycle->votingProcedures->count() }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">Duration</span>
                        <span class="font-bold text-gray-800">{{ $electionCycle->duration_years }} yrs</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
