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

        <x-slot name="backButton">
            <a href="{{ route('organization.election-cycles.show', $electionCycle) }}"
               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 Cycle
            </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-module-hero>

    <div class="p-6">
        @if(!$electionCycle->isActive())
        <div class="mb-4 p-4 bg-yellow-50 border border-yellow-300 text-yellow-800 rounded-lg text-sm">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            This election cycle is <strong>{{ $electionCycle->status }}</strong>. Some fields are read-only.
        </div>
        @endif

        <form action="{{ route('organization.election-cycles.update', $electionCycle) }}" method="POST">
            @csrf @method('PUT')

            {{-- Basic Info --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Basic Information</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="organization_id">
                        Organization <span class="text-red-500">*</span>
                    </label>
                    <select id="organization_id" 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"
                        required {{ !$electionCycle->isActive() ? 'disabled' : '' }}>
                        <option value="">Select Organization</option>
                        @foreach($organizations as $org)
                            <option value="{{ $org->id }}" {{ old('organization_id', $electionCycle->organization_id) == $org->id ? 'selected' : '' }}>{{ $org->name }}</option>
                        @endforeach
                    </select>
                    @if(!$electionCycle->isActive())
                        <input type="hidden" name="organization_id" value="{{ $electionCycle->organization_id }}">
                    @endif
                    @error('organization_id')<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="name">
                        Cycle Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="name" name="name"
                        value="{{ old('name', $electionCycle->name) }}"
                        placeholder="e.g., 2024-2026 Board Election"
                        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('name')<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="duration_years">
                        Duration (Years) <span class="text-red-500">*</span>
                    </label>
                    <select id="duration_years" name="duration_years"
                        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 {{ !$electionCycle->isActive() ? 'disabled' : '' }}>
                        <option value="">Select Duration</option>
                        <option value="0.5" {{ old('duration_years', $electionCycle->duration_years) == '0.5' ? 'selected' : '' }}>6 Months</option>
                        <option value="1" {{ old('duration_years', $electionCycle->duration_years) == '1' ? 'selected' : '' }}>1 Year</option>
                        <option value="2" {{ old('duration_years', $electionCycle->duration_years) == '2' ? 'selected' : '' }}>2 Years</option>
                        <option value="3" {{ old('duration_years', $electionCycle->duration_years) == '3' ? 'selected' : '' }}>3 Years</option>
                        <option value="4" {{ old('duration_years', $electionCycle->duration_years) == '4' ? 'selected' : '' }}>4 Years</option>
                        <option value="5" {{ old('duration_years', $electionCycle->duration_years) == '5' ? 'selected' : '' }}>5 Years</option>
                    </select>
                    @if(!$electionCycle->isActive())
                        <input type="hidden" name="duration_years" value="{{ $electionCycle->duration_years }}">
                    @endif
                    @error('duration_years')<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="start_date">
                        Start Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" id="start_date" name="start_date"
                        value="{{ old('start_date', $electionCycle->start_date->format('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 {{ !$electionCycle->isActive() ? 'disabled' : '' }}>
                    @if(!$electionCycle->isActive())
                        <input type="hidden" name="start_date" value="{{ $electionCycle->start_date->format('Y-m-d') }}">
                    @endif
                    @error('start_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            {{-- Applicable Positions --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Applicable Positions</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mb-6">
                @forelse($positions as $position)
                <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer {{ !$electionCycle->isActive() ? 'opacity-60' : '' }}">
                    <input type="checkbox" name="applicable_positions[]" value="{{ $position->id }}"
                        {{ in_array($position->id, old('applicable_positions', $electionCycle->applicable_positions ?? [])) ? 'checked' : '' }}
                        class="rounded text-green-600 focus:ring-green-500"
                        {{ !$electionCycle->isActive() ? 'disabled' : '' }}>
                    <div>
                        <div class="text-sm font-medium text-gray-800">{{ $position->title }}</div>
                        <div class="text-xs text-gray-500 capitalize">{{ str_replace('_', ' ', $position->hierarchy_level) }}</div>
                    </div>
                </label>
                @empty
                <p class="text-sm text-gray-400 italic col-span-full">No positions found for this organization.</p>
                @endforelse
            </div>
            @if(!$electionCycle->isActive())
                @foreach($electionCycle->applicable_positions ?? [] as $posId)
                    <input type="hidden" name="applicable_positions[]" value="{{ $posId }}">
                @endforeach
            @endif
            @error('applicable_positions')<p class="mb-4 text-xs text-red-600">{{ $message }}</p>@enderror

            {{-- Voting Procedures --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Voting Procedures <span class="text-gray-400 text-sm font-normal">(optional)</span></h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
                @if($votingProcedures && $votingProcedures->count() > 0)
                    @foreach($votingProcedures as $procedure)
                    <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="checkbox" name="voting_procedures[]" value="{{ $procedure->id }}"
                            {{ in_array($procedure->id, old('voting_procedures', $selectedProcedures ?? [])) ? 'checked' : '' }}
                            class="rounded text-green-600 focus:ring-green-500">
                        <div>
                            <div class="text-sm font-medium text-gray-800">{{ $procedure->name }}</div>
                            <div class="text-xs text-gray-500">{{ $procedure->voting_method_label }}</div>
                        </div>
                    </label>
                    @endforeach
                @else
                    <p class="text-sm text-gray-400 italic col-span-full">No voting procedures available for this organization.</p>
                @endif
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('organization.election-cycles.show', $electionCycle) }}"
                   class="px-5 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-300 transition">
                    <i class="fas fa-times mr-1"></i>Cancel
                </a>
                <button type="submit" class="theme-btn-primary px-5 py-2 rounded-lg text-sm font-medium">
                    <i class="fas fa-save mr-1"></i>Update Election Cycle
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
