<x-app-layout>
    <x-module-hero title="{{ $organization->name }}" description="{{ $organization->short_name }} — Organization Details" icon="fa-building">
        <x-slot name="backButton">
            <a href="{{ route('organization.details.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 Organizations
            </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 organizations')
            <a href="{{ route('organization.details.edit', $organization) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-medium rounded-lg hover:bg-[#334155] transition">
                <i class="fas fa-edit"></i> Edit
            </a>
            @endcan
            @can('delete organizations')
            <form action="{{ route('organization.details.destroy', $organization) }}" method="POST" class="inline" onsubmit="return confirm('Delete this organization?');">
                @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-medium rounded-lg hover:bg-red-700 transition">
                    <i class="fas fa-trash"></i> Delete
                </button>
            </form>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
        <div class="mb-6 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>
        @endif

        {{-- Stats Row --}}
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
                    <i class="fas fa-users text-blue-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Positions</p>
                    <p class="text-xl font-bold text-gray-800">{{ $organization->leadership_positions_count }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center shrink-0">
                    <i class="fas fa-calendar text-purple-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Election Cycles</p>
                    <p class="text-xl font-bold text-gray-800">{{ $organization->election_cycles_count }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center shrink-0">
                    <i class="fas fa-vote-yea text-green-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Voting Procedures</p>
                    <p class="text-xl font-bold text-gray-800">{{ $organization->voting_procedures_count }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center shrink-0">
                    <i class="fas fa-user-tie text-orange-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Staff Records</p>
                    <p class="text-xl font-bold text-gray-800">{{ $organization->staff_histories_count }}</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center gap-3">
                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center shrink-0">
                    <i class="fas fa-crown text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Leadership History</p>
                    <p class="text-xl font-bold text-gray-800">{{ $organization->leadership_histories_count }}</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                {{-- Organization Info --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-4 py-3 bg-green-700 text-white font-semibold text-sm">
                        <i class="fas fa-info-circle mr-2"></i>Organization Information
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">Organization Name</p><p class="text-gray-800">{{ $organization->name }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">Short Name</p><p class="text-gray-800">{{ $organization->short_name }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">Country</p><p class="text-gray-800">{{ $organization->country }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">City</p><p class="text-gray-800">{{ $organization->city }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">Postal Address</p><p class="text-gray-800">{{ $organization->postal_address }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500 mb-1">Postal Code</p><p class="text-gray-800">{{ $organization->postal_code }}</p></div>
                        <div class="md:col-span-2"><p class="text-xs font-semibold text-gray-500 mb-1">Physical Address</p><p class="text-gray-800">{{ $organization->physical_address }}</p></div>
                    </div>
                </div>

                {{-- Contact Info --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-4 py-3 bg-blue-700 text-white font-semibold text-sm">
                        <i class="fas fa-address-book mr-2"></i>Contact Information
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs font-semibold text-gray-500 mb-1">Email</p>
                            <a href="mailto:{{ $organization->email }}" class="text-blue-600 hover:underline"><i class="fas fa-envelope mr-1"></i>{{ $organization->email }}</a>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 mb-1">Hotline</p>
                            <a href="tel:{{ $organization->hotline }}" class="text-blue-600 hover:underline"><i class="fas fa-phone mr-1"></i>{{ $organization->hotline }}</a>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 mb-1">Year of Formation</p>
                            <p class="text-gray-800"><i class="fas fa-calendar-alt mr-1 text-green-600"></i>{{ $organization->year_of_formation }} <span class="text-xs text-gray-500">({{ $organization->age }} years old)</span></p>
                        </div>
                    </div>
                </div>

                {{-- Social Media --}}
                @if(!empty($organization->social_media_links))
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-4 py-3 bg-purple-700 text-white font-semibold text-sm">
                        <i class="fas fa-share-alt mr-2"></i>Social Media Links
                    </div>
                    <div class="p-6 flex flex-wrap gap-3">
                        @if(!empty($organization->social_media_links['whatsapp']))
                        <a href="{{ $organization->social_media_links['whatsapp'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#25D366;"><i class="fab fa-whatsapp"></i>WhatsApp</a>
                        @endif
                        @if(!empty($organization->social_media_links['facebook']))
                        <a href="{{ $organization->social_media_links['facebook'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#1877F2;"><i class="fab fa-facebook"></i>Facebook</a>
                        @endif
                        @if(!empty($organization->social_media_links['twitter']))
                        <a href="{{ $organization->social_media_links['twitter'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#000000;"><i class="fab fa-x-twitter"></i>X / Twitter</a>
                        @endif
                        @if(!empty($organization->social_media_links['tiktok']))
                        <a href="{{ $organization->social_media_links['tiktok'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#ff0050;"><i class="fab fa-tiktok"></i>TikTok</a>
                        @endif
                        @if(!empty($organization->social_media_links['linkedin']))
                        <a href="{{ $organization->social_media_links['linkedin'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#0A66C2;"><i class="fab fa-linkedin"></i>LinkedIn</a>
                        @endif
                        @if(!empty($organization->social_media_links['instagram']))
                        <a href="{{ $organization->social_media_links['instagram'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#E1306C;"><i class="fab fa-instagram"></i>Instagram</a>
                        @endif
                        @if(!empty($organization->social_media_links['youtube']))
                        <a href="{{ $organization->social_media_links['youtube'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 text-white rounded-lg transition text-sm" style="background-color:#FF0000;"><i class="fab fa-youtube"></i>YouTube</a>
                        @endif
                    </div>
                </div>
                @endif
            </div>

            <div class="space-y-6">
                {{-- Current Leadership --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-4 py-3 bg-indigo-700 text-white font-semibold text-sm">
                        <i class="fas fa-crown mr-2"></i>Current Leadership
                    </div>
                    <div class="p-4">
                        @if($currentLeadership->count() > 0)
                        @foreach($currentLeadership as $assignment)
                        <div class="flex items-center gap-3 mb-3 last:mb-0">
                            <div class="w-9 h-9 bg-indigo-100 rounded-full flex items-center justify-center shrink-0">
                                <i class="fas fa-user text-indigo-600 text-sm"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-gray-800 text-sm">{{ $assignment->user->name }}</p>
                                <p class="text-xs text-gray-500">{{ $assignment->leadershipPosition->title }}</p>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <p class="text-gray-500 text-sm text-center py-4"><i class="fas fa-info-circle mr-1"></i>No current leadership assigned</p>
                        @endif
                    </div>
                </div>

                {{-- Record Info --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-4 py-3 bg-gray-600 text-white font-semibold text-sm">
                        <i class="fas fa-clock mr-2"></i>Record Information
                    </div>
                    <div class="p-4 space-y-3">
                        <div><p class="text-xs font-semibold text-gray-500">Created</p><p class="text-sm text-gray-800">{{ $organization->created_at->format('M d, Y H:i') }}</p></div>
                        <div><p class="text-xs font-semibold text-gray-500">Last Updated</p><p class="text-sm text-gray-800">{{ $organization->updated_at->format('M d, Y H:i') }}</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
