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

    <x-module-hero :title="$membershipCategory->name" description="View and manage category details" :icon="$membershipCategory->icon ?? 'fa-tags'">
        <x-slot name="backButton">
            <a href="{{ route('admin.membership-categories.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Categories
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view membership categories')
                <a href="{{ route('admin.membership-categories.index') }}" class="module-hero-tab">
                    <i class="fas fa-tags"></i> All Categories
                </a>
            @endcan
            <a href="{{ route('admin.membership-categories.show', $membershipCategory) }}" class="module-hero-tab active-tab">
                <i class="fas fa-eye"></i> Details
            </a>
            @can('edit membership categories')
                <a href="{{ route('admin.membership-categories.edit', $membershipCategory) }}" class="module-hero-tab">
                    <i class="fas fa-edit"></i> Edit
                </a>
            @endcan
            @can('view subscription fees')
                <a href="{{ route('admin.membership-categories.subscription-fees', $membershipCategory) }}" class="module-hero-tab">
                    <i class="fas fa-dollar-sign"></i> Subscription Fees
                </a>
            @endcan
            @can('view contribution fees')
                <a href="{{ route('admin.membership-categories.contribution-fees', $membershipCategory) }}" class="module-hero-tab">
                    <i class="fas fa-hand-holding-usd"></i> Contribution Fees
                </a>
            @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">
                <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
            </div>
        @endif

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

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Category Information --}}
                <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 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-info-circle text-green-600"></i> Category Information
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Name</label>
                            <p class="text-gray-900 font-medium">{{ $membershipCategory->name }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Slug</label>
                            <p class="text-gray-600 font-mono text-sm">{{ $membershipCategory->slug }}</p>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-xs font-medium text-gray-500 mb-1">Description</label>
                            <p class="text-gray-900 text-sm">{{ $membershipCategory->description ?? 'No description provided.' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Theme Color</label>
                            @if($membershipCategory->theme_color)
                                <div class="flex items-center gap-2">
                                    <span class="w-5 h-5 rounded-full border border-gray-200" style="background-color: {{ $membershipCategory->theme_color }}"></span>
                                    <span class="text-gray-900 text-sm">{{ $membershipCategory->theme_color }}</span>
                                </div>
                            @else
                                <p class="text-gray-500 text-sm">Not set</p>
                            @endif
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $membershipCategory->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $membershipCategory->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Created</label>
                            <p class="text-gray-900 text-sm">{{ $membershipCategory->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>

                @if($membershipCategory->benefits && count($membershipCategory->benefits) > 0)
                    <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 bg-gray-50">
                            <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                <i class="fas fa-star text-green-600"></i> Category Benefits
                            </h3>
                        </div>
                        <div class="p-6">
                            <ul class="space-y-2">
                                @foreach($membershipCategory->benefits as $benefit)
                                    <li class="flex items-start gap-2">
                                        <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
                                        <span class="text-gray-700 text-sm">{{ $benefit }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                {{-- Subscription Fees --}}
                <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 bg-gray-50 flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-dollar-sign text-green-600"></i> Subscription Fees
                        </h3>
                        <a href="{{ route('admin.membership-categories.subscription-fees', $membershipCategory) }}" class="text-green-600 hover:underline text-sm">
                            Manage <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="p-6">
                        @if($membershipCategory->subscriptionFees->count() > 0)
                            <div class="space-y-3">
                                @foreach($membershipCategory->subscriptionFees as $fee)
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium text-gray-900 text-sm">{{ $fee->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $fee->billing_cycle_display }}</div>
                                        </div>
                                        <div class="text-right">
                                            <div class="font-bold text-green-600 text-sm">{{ $fee->formatted_amount }}</div>
                                            <span class="text-xs {{ $fee->is_active ? 'text-green-600' : 'text-red-600' }}">{{ $fee->is_active ? 'Active' : 'Inactive' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No subscription fees configured.</p>
                        @endif
                    </div>
                </div>

                {{-- Contribution Fees --}}
                <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 bg-gray-50 flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-hand-holding-usd text-green-600"></i> Contribution Fees
                        </h3>
                        <a href="{{ route('admin.membership-categories.contribution-fees', $membershipCategory) }}" class="text-green-600 hover:underline text-sm">
                            Manage <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="p-6">
                        @if($membershipCategory->contributionFees->count() > 0)
                            <div class="space-y-3">
                                @foreach($membershipCategory->contributionFees as $fee)
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                        <div>
                                            <div class="font-medium text-gray-900 text-sm">{{ $fee->name }}</div>
                                            <div class="text-xs text-gray-500">{{ ucfirst($fee->cycle) }} — Due day {{ $fee->due_day }}</div>
                                        </div>
                                        <div class="text-right">
                                            <div class="font-bold text-green-600 text-sm">{{ number_format($fee->amount, 2) }} {{ $fee->currency }}</div>
                                            <span class="text-xs {{ $fee->is_optional ? 'text-blue-600' : 'text-gray-600' }}">{{ $fee->is_optional ? 'Optional' : 'Required' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No contribution fees configured.</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="space-y-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 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Statistics</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 text-sm">Total Members</span>
                            <span class="font-bold text-gray-900">{{ $statistics['total_members'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 text-sm">Active Members</span>
                            <span class="font-bold text-green-600">{{ $statistics['active_members'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 text-sm">Subscription Fees</span>
                            <span class="font-bold text-gray-900">{{ $membershipCategory->subscriptionFees->count() }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 text-sm">Contribution Fees</span>
                            <span class="font-bold text-gray-900">{{ $membershipCategory->contributionFees->count() }}</span>
                        </div>
                    </div>
                </div>

                <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 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Actions</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        @can('edit membership categories')
                            <a href="{{ route('admin.membership-categories.edit', $membershipCategory) }}" class="btn-action-edit w-full justify-center">
                                <i class="fas fa-edit"></i> Edit Category
                            </a>
                        @endcan
                        @can('create subscription fees')
                            <a href="{{ route('admin.membership-categories.subscription-fees', $membershipCategory) }}" class="btn-action-view w-full justify-center">
                                <i class="fas fa-dollar-sign"></i> Manage Fees
                            </a>
                        @endcan
                        @can('delete membership categories')
                            @if($membershipCategory->canBeDeleted())
                                <form action="{{ route('admin.membership-categories.destroy', $membershipCategory) }}" method="POST"
                                      onsubmit="return confirm('Are you sure you want to delete this category? This action cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-action-delete w-full justify-center">
                                        <i class="fas fa-trash"></i> Delete Category
                                    </button>
                                </form>
                            @else
                                <div class="text-center px-4 py-2 bg-gray-100 text-gray-500 rounded text-xs">
                                    <i class="fas fa-lock mr-1"></i> Cannot delete (has members)
                                </div>
                            @endif
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>
