<x-app-layout>
    <x-module-hero
        title="Create Voting Procedure"
        description="Define voting rules and methods for elections"
        icon="fa-vote-yea">

        <x-slot name="backButton">
            <a href="{{ route('organization.voting-procedures.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-module-hero>

    <div class="p-6" x-data="votingProcedureForm()">
        <form action="{{ route('organization.voting-procedures.store') }}" method="POST">
            @csrf

            {{-- 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"
                        x-model="selectedOrganization"
                        @change="loadElectionCycles()"
                        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>
                        <option value="">Select Organization</option>
                        @foreach($organizations as $org)
                            <option value="{{ $org->id }}" {{ old('organization_id') == $org->id ? 'selected' : '' }}>{{ $org->name }}</option>
                        @endforeach
                    </select>
                    @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">
                        Procedure Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}"
                        placeholder="e.g., Board Director Election Procedure"
                        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="voting_method">
                        Voting Method <span class="text-red-500">*</span>
                    </label>
                    <select id="voting_method" name="voting_method"
                        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>
                        <option value="">Select Method</option>
                        <option value="majority" {{ old('voting_method') == 'majority' ? 'selected' : '' }}>Simple Majority (&gt;50%)</option>
                        <option value="plurality" {{ old('voting_method') == 'plurality' ? 'selected' : '' }}>Plurality (Most Votes)</option>
                        <option value="supermajority_two_thirds" {{ old('voting_method') == 'supermajority_two_thirds' ? 'selected' : '' }}>Supermajority (2/3)</option>
                        <option value="supermajority_three_fourths" {{ old('voting_method') == 'supermajority_three_fourths' ? 'selected' : '' }}>Supermajority (3/4)</option>
                        <option value="unanimous" {{ old('voting_method') == 'unanimous' ? 'selected' : '' }}>Unanimous (100%)</option>
                        <option value="ranked_choice" {{ old('voting_method') == 'ranked_choice' ? 'selected' : '' }}>Ranked Choice Voting</option>
                        <option value="approval" {{ old('voting_method') == 'approval' ? 'selected' : '' }}>Approval Voting</option>
                        <option value="borda_count" {{ old('voting_method') == 'borda_count' ? 'selected' : '' }}>Borda Count</option>
                    </select>
                    @error('voting_method')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            {{-- Details --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Details</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="description">
                        Description <span class="text-red-500">*</span>
                    </label>
                    <textarea id="description" name="description" rows="4"
                        placeholder="Describe when and how this procedure is used..."
                        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>{{ old('description') }}</textarea>
                    @error('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="rules">
                        Rules &amp; Guidelines <span class="text-red-500">*</span>
                    </label>
                    <textarea id="rules" name="rules" rows="4"
                        placeholder="Enter specific rules and guidelines..."
                        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>{{ old('rules') }}</textarea>
                    @error('rules')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            {{-- Election Cycles --}}
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Associated Election Cycles <span class="text-gray-400 text-sm font-normal">(optional)</span></h3>
            <div id="election-cycles-container" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
                <p class="text-sm text-gray-400 italic col-span-full">Select an organization to see available election cycles.</p>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('organization.voting-procedures.index') }}"
                   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>Create Voting Procedure
                </button>
            </div>
        </form>
    </div>
</x-app-layout>

@push('scripts')
<script>
function votingProcedureForm() {
    return {
        selectedOrganization: '{{ old('organization_id') }}',

        loadElectionCycles() {
            if (!this.selectedOrganization) {
                document.getElementById('election-cycles-container').innerHTML = '<p class="text-sm text-gray-400 italic col-span-full">Select an organization to see available election cycles.</p>';
                return;
            }
            const url = '{{ route('organization.voting-procedures.election-cycles', ['organization' => '__ORG__']) }}'.replace('__ORG__', this.selectedOrganization);
            fetch(url)
                .then(r => r.json())
                .then(data => {
                    if (!data.length) {
                        document.getElementById('election-cycles-container').innerHTML = '<p class="text-sm text-gray-400 italic col-span-full">No active election cycles found for this organization.</p>';
                        return;
                    }
                    document.getElementById('election-cycles-container').innerHTML = data.map(c => `
                        <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="election_cycle_ids[]" value="${c.id}" class="rounded text-green-600 focus:ring-green-500">
                            <div>
                                <div class="text-sm font-medium text-gray-800">${c.name}</div>
                                <div class="text-xs text-gray-500">${c.start_date} to ${c.end_date}</div>
                            </div>
                        </label>
                    `).join('');
                });
        }
    }
}
</script>
@endpush
