<x-app-layout>
    <x-module-hero
        title="Organization & Governance"
        description="Manage SSHIA organizational structure, leadership, and governance"
        icon="fa-sitemap">

        <x-slot name="tabs">
            <a href="{{ route('organization.index') }}"
               class="module-hero-tab {{ request()->routeIs('organization.index') ? '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-home text-sm"></i> Overview
            </a>
            @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>

    {{-- Main Content --}}
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            @if(session('success'))
                <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                </div>
            @endif

            {{-- Module Cards Grid --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                {{-- Organization Details --}}
                @can('view organizations')
                <a href="{{ route('organization.details.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-green-200 transition">
                                <i class="fas fa-building text-green-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Organization Details</h3>
                                <p class="text-sm text-theme-body">Core organization information</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            Manage SSHIA's official name, address, contact information, and organizational profile.
                        </p>
                        <div class="flex items-center text-green-600 font-medium text-sm group-hover:text-green-700">
                            <span>Manage Details</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Leadership Positions --}}
                @can('view leadership positions')
                <a href="{{ route('organization.leadership-positions.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-blue-200 transition">
                                <i class="fas fa-user-tie text-blue-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Leadership Positions</h3>
                                <p class="text-sm text-theme-body">Roles and positions</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            Define and manage official leadership positions within the organization structure.
                        </p>
                        <div class="flex items-center text-blue-600 font-medium text-sm group-hover:text-blue-700">
                            <span>Manage Positions</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Election Cycles --}}
                @can('view election cycles')
                <a href="{{ route('organization.election-cycles.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-purple-200 transition">
                                <i class="fas fa-vote-yea text-purple-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Election Cycles</h3>
                                <p class="text-sm text-theme-body">Governance elections</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            Manage election cycles, terms, and governance transition periods for the organization.
                        </p>
                        <div class="flex items-center text-purple-600 font-medium text-sm group-hover:text-purple-700">
                            <span>Manage Elections</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Voting Procedures --}}
                @can('view voting procedures')
                <a href="{{ route('organization.voting-procedures.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-orange-200 transition">
                                <i class="fas fa-ballot-check text-orange-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Voting Procedures</h3>
                                <p class="text-sm text-theme-body">Rules and procedures</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            Define voting rules, quorum requirements, and procedural guidelines for elections.
                        </p>
                        <div class="flex items-center text-orange-600 font-medium text-sm group-hover:text-orange-700">
                            <span>Manage Procedures</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Leadership History --}}
                @can('view leadership history')
                <a href="{{ route('organization.leadership-history.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-teal-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-teal-200 transition">
                                <i class="fas fa-history text-teal-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Leadership History</h3>
                                <p class="text-sm text-theme-body">Past leaders and terms</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            View and manage the historical record of leadership assignments and terms served.
                        </p>
                        <div class="flex items-center text-teal-600 font-medium text-sm group-hover:text-teal-700">
                            <span>View History</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Staff History --}}
                @can('view staff history')
                <a href="{{ route('organization.staff-history.index') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-indigo-200 transition">
                                <i class="fas fa-users text-indigo-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Staff History</h3>
                                <p class="text-sm text-theme-body">Staff records and tenure</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            Maintain records of staff members, their roles, and employment history within SSHIA.
                        </p>
                        <div class="flex items-center text-indigo-600 font-medium text-sm group-hover:text-indigo-700">
                            <span>View Staff Records</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

                {{-- Organogram --}}
                @can('view organogram')
                <a href="{{ route('organization.organogram.show') }}"
                   class="theme-card rounded-xl shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden group">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-14 h-14 bg-pink-100 rounded-xl flex items-center justify-center mr-4 group-hover:bg-pink-200 transition">
                                <i class="fas fa-project-diagram text-pink-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-theme-heading">Organogram</h3>
                                <p class="text-sm text-theme-body">Organizational chart</p>
                            </div>
                        </div>
                        <p class="text-sm text-theme-body mb-4">
                            View the visual organizational chart showing the hierarchy and reporting structure of SSHIA.
                        </p>
                        <div class="flex items-center text-pink-600 font-medium text-sm group-hover:text-pink-700">
                            <span>View Organogram</span>
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </a>
                @endcan

            </div>

            {{-- No Access Notice --}}
            @php
                $hasAnyAccess = auth()->user()->canAny([
                    'view organizations', 'view leadership positions', 'view election cycles',
                    'view voting procedures', 'view leadership history', 'view staff history', 'view organogram'
                ]);
            @endphp
            @if(!$hasAnyAccess)
                <div class="text-center py-16">
                    <i class="fas fa-lock text-6xl text-gray-300 mb-4"></i>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Access Restricted</h3>
                    <p class="text-theme-body">You do not have permission to access any organization modules.</p>
                </div>
            @endif

        </div>
    </div>
</x-app-layout>
