{{-- Admin Subscription Fees Management --}}
<x-app-layout title="Subscription Fees">

    <x-module-hero title="Subscription Fees" :description="'Category: ' . $membershipCategory->name" icon="fa-dollar-sign">
        <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">
            <a href="{{ route('admin.membership-categories.show', $membershipCategory) }}" class="module-hero-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
            <a href="{{ route('admin.membership-categories.subscription-fees', $membershipCategory) }}" class="module-hero-tab active-tab">
                <i class="fas fa-dollar-sign"></i> Subscription Fees
            </a>
            <a href="{{ route('admin.membership-categories.contribution-fees', $membershipCategory) }}" class="module-hero-tab">
                <i class="fas fa-hand-holding-usd"></i> Contribution Fees
            </a>
        </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">

            {{-- Existing Fees --}}
            <div class="lg:col-span-2">
                <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-list text-green-600"></i> Configured Fees
                        </h3>
                    </div>
                    @if($fees->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">Name</th>
                                        <th class="px-4 py-3 text-left th-col-2">Amount</th>
                                        <th class="px-4 py-3 text-left th-col-3">Cycle</th>
                                        <th class="px-4 py-3 text-center th-col-4">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($fees as $fee)
                                        <tr>
                                            <td class="px-4 py-3">
                                                <div class="font-medium text-gray-900 text-sm">{{ $fee->name }}</div>
                                                @if($fee->description)
                                                    <div class="text-xs text-gray-500">{{ Str::limit($fee->description, 50) }}</div>
                                                @endif
                                            </td>
                                            <td class="px-4 py-3">
                                                <span class="font-bold text-green-600 text-sm">{{ $fee->formatted_amount }}</span>
                                            </td>
                                            <td class="px-4 py-3 text-gray-600 text-sm">{{ $fee->billing_cycle_display }}</td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $fee->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                                    {{ $fee->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                            </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 text-sm">No subscription fees configured yet.</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Add New Fee Form --}}
            <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 flex items-center gap-2">
                            <i class="fas fa-plus-circle text-green-600"></i> Add New Fee
                        </h3>
                    </div>
                    <form action="{{ route('admin.membership-categories.subscription-fees.store', $membershipCategory) }}" method="POST">
                        @csrf
                        <div class="p-6 space-y-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Fee Name <span class="text-red-500">*</span></label>
                                <input type="text" id="name" name="name" value="{{ old('name') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                       placeholder="e.g., Annual Subscription" required>
                                @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Amount <span class="text-red-500">*</span></label>
                                <input type="number" id="amount" name="amount" value="{{ old('amount') }}" step="0.01" min="0"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                       placeholder="0.00" required>
                                @error('amount')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="currency" class="block text-sm font-medium text-gray-700 mb-1">Currency <span class="text-red-500">*</span></label>
                                <select id="currency" name="currency" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" required>
                                    <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD</option>
                                    <option value="SSP" {{ old('currency') === 'SSP' ? 'selected' : '' }}>SSP</option>
                                    <option value="KES" {{ old('currency') === 'KES' ? 'selected' : '' }}>KES</option>
                                    <option value="UGX" {{ old('currency') === 'UGX' ? 'selected' : '' }}>UGX</option>
                                </select>
                                @error('currency')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="billing_cycle" class="block text-sm font-medium text-gray-700 mb-1">Billing Cycle <span class="text-red-500">*</span></label>
                                <select id="billing_cycle" name="billing_cycle" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm" required>
                                    <option value="one_time" {{ old('billing_cycle') === 'one_time' ? 'selected' : '' }}>One Time</option>
                                    <option value="monthly" {{ old('billing_cycle') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                                    <option value="quarterly" {{ old('billing_cycle') === 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                    <option value="biannual" {{ old('billing_cycle') === 'biannual' ? 'selected' : '' }}>Biannual</option>
                                    <option value="annual" {{ old('billing_cycle') === 'annual' ? 'selected' : '' }}>Annual</option>
                                </select>
                                @error('billing_cycle')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                <textarea id="description" name="description" rows="2"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                          placeholder="Optional description">{{ old('description') }}</textarea>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_active" value="1" {{ old('is_active') === '1' ? 'checked' : '' }}
                                           class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                    <span class="text-sm text-gray-700">Active</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_default" value="1" {{ old('is_default') === '1' ? 'checked' : '' }}
                                           class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                    <span class="text-sm text-gray-700">Default Fee</span>
                                </label>
                            </div>
                            <button type="submit" class="w-full px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-semibold">
                                <i class="fas fa-plus mr-1"></i> Add Fee
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>
