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

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

                {{-- Contribution Fees Table --}}
                <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-coins text-green-600"></i> Contribution 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">Due Day</th>
                                        <th class="px-4 py-3 text-center th-col-5">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>
                                                <div class="text-xs text-gray-500">{{ $fee->is_optional ? 'Optional' : 'Required' }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <span class="font-bold text-green-600 text-sm">{{ number_format($fee->amount, 2) }} {{ $fee->currency }}</span>
                                            </td>
                                            <td class="px-4 py-3 text-gray-600 text-sm">{{ ucfirst($fee->cycle) }}</td>
                                            <td class="px-4 py-3 text-center text-gray-600 text-sm">Day {{ $fee->due_day }}</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 contribution fees configured yet.</p>
                        </div>
                    @endif
                </div>

                {{-- Penalties Table --}}
                <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-exclamation-triangle text-red-500"></i> Penalty Configurations
                        </h3>
                    </div>
                    @if($penalties->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">Type</th>
                                        <th class="px-4 py-3 text-left th-col-3">Value</th>
                                        <th class="px-4 py-3 text-center th-col-4">Grace Period</th>
                                        <th class="px-4 py-3 text-center th-col-5">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($penalties as $penalty)
                                        <tr>
                                            <td class="px-4 py-3 font-medium text-gray-900 text-sm">{{ $penalty->name }}</td>
                                            <td class="px-4 py-3 text-gray-600 text-sm">{{ ucfirst($penalty->type) }}</td>
                                            <td class="px-4 py-3 text-gray-900 text-sm">
                                                @if($penalty->type === 'fixed')
                                                    {{ number_format($penalty->amount, 2) }}
                                                @else
                                                    {{ $penalty->percentage }}%
                                                @endif
                                            </td>
                                            <td class="px-4 py-3 text-center text-gray-600 text-sm">{{ $penalty->grace_period_days }} days</td>
                                            <td class="px-4 py-3 text-center">
                                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $penalty->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                                    {{ $penalty->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-10">
                            <i class="fas fa-shield-alt text-4xl text-gray-300 mb-3"></i>
                            <p class="text-gray-500 text-sm">No penalty configurations.</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Add Forms --}}
            <div class="space-y-6">

                {{-- Add Contribution Fee --}}
                <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 Contribution Fee
                        </h3>
                    </div>
                    <form action="{{ route('admin.membership-categories.contribution-fees.store', $membershipCategory) }}" method="POST">
                        @csrf
                        <div class="p-6 space-y-4">
                            <div>
                                <label for="fee_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="fee_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., Monthly Savings" required>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label for="fee_amount" class="block text-sm font-medium text-gray-700 mb-1">Amount <span class="text-red-500">*</span></label>
                                    <input type="number" id="fee_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" required>
                                </div>
                                <div>
                                    <label for="fee_currency" class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
                                    <select id="fee_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">
                                        <option value="USD">USD</option>
                                        <option value="SSP">SSP</option>
                                        <option value="KES">KES</option>
                                        <option value="UGX">UGX</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label for="fee_cycle" class="block text-sm font-medium text-gray-700 mb-1">Cycle <span class="text-red-500">*</span></label>
                                    <select id="fee_cycle" name="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">
                                        <option value="monthly">Monthly</option>
                                        <option value="quarterly">Quarterly</option>
                                        <option value="biannual">Biannual</option>
                                        <option value="annual">Annual</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="due_day" class="block text-sm font-medium text-gray-700 mb-1">Due Day <span class="text-red-500">*</span></label>
                                    <input type="number" id="due_day" name="due_day" value="{{ old('due_day', 15) }}" min="1" max="28"
                                           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>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_optional" value="1" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                    <span class="text-sm text-gray-700">Optional</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_active" value="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>
                            </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>

                {{-- Add Penalty --}}
                <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-red-500"></i> Add Penalty
                        </h3>
                    </div>
                    <form action="{{ route('admin.membership-categories.penalties.store', $membershipCategory) }}" method="POST">
                        @csrf
                        <div class="p-6 space-y-4">
                            <div>
                                <label for="penalty_name" class="block text-sm font-medium text-gray-700 mb-1">Penalty Name <span class="text-red-500">*</span></label>
                                <input type="text" id="penalty_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., Late Payment Fee" required>
                            </div>
                            <div>
                                <label for="penalty_type" class="block text-sm font-medium text-gray-700 mb-1">Type <span class="text-red-500">*</span></label>
                                <select id="penalty_type" name="type" onchange="togglePenaltyFields()"
                                        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">
                                    <option value="fixed">Fixed Amount</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>
                            <div id="fixed-amount-field">
                                <label for="penalty_amount" class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
                                <input type="number" id="penalty_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">
                            </div>
                            <div id="percentage-field" class="hidden">
                                <label for="percentage" class="block text-sm font-medium text-gray-700 mb-1">Percentage (%)</label>
                                <input type="number" id="percentage" name="percentage" value="{{ old('percentage') }}" step="0.1" min="0" max="100"
                                       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">
                            </div>
                            <div>
                                <label for="grace_period" class="block text-sm font-medium text-gray-700 mb-1">Grace Period (Days) <span class="text-red-500">*</span></label>
                                <input type="number" id="grace_period" name="grace_period_days" value="{{ old('grace_period_days', 7) }}" 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" required>
                            </div>
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="apply_recurring" value="1" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
                                    <span class="text-sm text-gray-700">Apply Recurring</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_active" value="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>
                            </div>
                            <button type="submit" class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm font-semibold">
                                <i class="fas fa-plus mr-1"></i> Add Penalty
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>

@push('scripts')
<script>
function togglePenaltyFields() {
    const type = document.getElementById('penalty_type').value;
    document.getElementById('fixed-amount-field').classList.toggle('hidden', type !== 'fixed');
    document.getElementById('percentage-field').classList.toggle('hidden', type !== 'percentage');
}
</script>
@endpush
