{{-- Admin Membership Dashboard --}}
<x-app-layout title="Membership Dashboard">

    <x-module-hero title="Membership Management" description="Manage members, applications, contributions, and loans" icon="fa-id-card">
        <x-slot name="tabs">
            @can('view members')
                <a href="{{ route('admin.membership.dashboard') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.membership.dashboard') ? '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-tachometer-alt text-sm"></i> Dashboard
                </a>
            @endcan
            @can('view members')
                <a href="{{ route('admin.members.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.members.index') || request()->routeIs('admin.members.show') || request()->routeIs('admin.members.create') ? '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-users text-sm"></i> Members
                </a>
            @endcan
            @can('view members')
                <a href="{{ route('admin.members.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.members.applications.*') ? '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-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @can('view membership categories')
                <a href="{{ route('admin.membership-categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.membership-categories.*') ? '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-tags text-sm"></i> Categories
                </a>
            @endcan
            @can('manage renewal configs')
                <a href="{{ route('admin.renewal-configs.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.renewal-configs.*') ? '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-rotate text-sm"></i> Renewal Config
                </a>
            @endcan
            @can('view contributions')
                <a href="{{ route('admin.contributions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.contributions.*') ? '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-hand-holding-usd text-sm"></i> Contributions
                </a>
            @endcan
            @can('view loan products')
                <a href="{{ route('admin.loan-products.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.loan-products.*') ? '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-box text-sm"></i> Loan Products
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loan-applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.loan-applications.*') ? '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-money-bill-wave text-sm"></i> Loan Applications
                </a>
            @endcan
        </x-slot>
        <x-slot name="actions">
            @can('create members')
                <a href="{{ route('admin.members.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b]/10 hover:bg-[#1e293b]/20 text-[#1e293b] text-sm font-medium rounded transition">
                    <i class="fas fa-user-plus"></i> Add Member
                </a>
            @endcan
            @can('create membership categories')
                <a href="{{ route('admin.membership-categories.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b]/10 hover:bg-[#1e293b]/20 text-[#1e293b] text-sm font-medium rounded transition">
                    <i class="fas fa-plus"></i> New Category
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mx-6 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
            <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Statistics Cards --}}
    @can('view statistics')
        <div class="p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Total Members</p>
                    <p class="text-3xl font-bold text-gray-900 mt-1">{{ $statistics['total_members'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-users text-green-600 text-xl"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Active Members</p>
                    <p class="text-3xl font-bold text-green-600 mt-1">{{ $statistics['active_members'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-user-check text-green-600 text-xl"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Pending Applications</p>
                    <p class="text-3xl font-bold text-yellow-600 mt-1">{{ $statistics['pending_members'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-600 text-xl"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">New This Month</p>
                    <p class="text-3xl font-bold text-blue-600 mt-1">{{ $statistics['new_this_month'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-calendar-check text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
    @endcan

    <div class="px-6 pb-6 grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Pending Applications --}}
        <div class="lg:col-span-2 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between" style="background-color: var(--theme-bg-sidebar);">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-file-alt"></i> Pending Applications
                </h3>
                <a href="{{ route('admin.members.applications.index') }}" class="text-white/80 hover:text-white text-sm">
                    View All <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            @if($pendingApplications->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left th-col-1">Applicant</th>
                                <th class="px-4 py-3 text-left th-col-2">Category</th>
                                <th class="px-4 py-3 text-left th-col-3">Date</th>
                                <th class="px-4 py-3 text-center th-col-4">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pendingApplications as $application)
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="font-medium text-gray-900">{{ $application->full_name }}</div>
                                        <div class="text-sm text-gray-500">{{ $application->email }}</div>
                                    </td>
                                    <td class="px-4 py-3 text-gray-600">{{ $application->membershipCategory?->name ?? 'N/A' }}</td>
                                    <td class="px-4 py-3 text-gray-600 text-sm">{{ $application->created_at->format('M d, Y') }}</td>
                                    <td class="px-4 py-3 text-center">
                                        <a href="{{ route('admin.members.applications.show', $application) }}" class="btn-action-view">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-10">
                    <i class="fas fa-inbox text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">No pending applications</p>
                </div>
            @endif
        </div>

        {{-- Categories Overview --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between" style="background-color: var(--theme-bg-sidebar);">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-tags"></i> Categories Overview
                </h3>
                <a href="{{ route('admin.membership-categories.index') }}" class="text-white/80 hover:text-white text-sm">
                    Manage <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="p-5">
                @if($categories->count() > 0)
                    <div class="space-y-3">
                        @foreach($categories as $category)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="font-medium text-gray-900">{{ $category->name }}</div>
                                    <div class="text-sm text-gray-500">{{ $category->members_count }} members</div>
                                </div>
                                <a href="{{ route('admin.membership-categories.show', $category) }}" class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-folder-open text-4xl text-gray-300 mb-3"></i>
                        <p class="text-gray-500">No categories created</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Recent Members --}}
    <div class="px-6 pb-6">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between" style="background-color: var(--theme-bg-sidebar);">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-users"></i> Recent Members
                </h3>
                <a href="{{ route('admin.members.index') }}" class="text-white/80 hover:text-white text-sm">
                    View All <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            @if($recentMembers->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left th-col-1">Member</th>
                                <th class="px-4 py-3 text-left th-col-2">Code</th>
                                <th class="px-4 py-3 text-left th-col-3">Categories</th>
                                <th class="px-4 py-3 text-left th-col-4">Status</th>
                                <th class="px-4 py-3 text-left th-col-5">Joined</th>
                                <th class="px-4 py-3 text-center th-col-6">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentMembers as $member)
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="font-medium text-gray-900">{{ $member->full_name }}</div>
                                        <div class="text-sm text-gray-500">{{ $member->email }}</div>
                                    </td>
                                    <td class="px-4 py-3 font-mono text-sm text-gray-600">{{ $member->membership_code }}</td>
                                    <td class="px-4 py-3">
                                        @foreach($member->membershipCategories as $cat)
                                            <span class="inline-block bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded mr-1">{{ $cat->name }}</span>
                                        @endforeach
                                    </td>
                                    <td class="px-4 py-3">
                                        @php
                                            $sc = ['active'=>'bg-green-100 text-green-700','inactive'=>'bg-yellow-100 text-yellow-700','suspended'=>'bg-red-100 text-red-700'];
                                            $sc2 = $sc[$member->status] ?? 'bg-gray-100 text-gray-700';
                                        @endphp
                                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $sc2 }}">{{ ucfirst($member->status) }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-gray-600 text-sm">{{ $member->created_at->format('M d, Y') }}</td>
                                    <td class="px-4 py-3 text-center">
                                        <a href="{{ route('admin.members.show', $member) }}" class="btn-action-view">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-10">
                    <i class="fas fa-users text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">No members yet</p>
                </div>
            @endif
        </div>
    </div>

</x-app-layout>
