{{-- Admin Edit Loan Product --}}
<x-app-layout title="Edit Loan Product">

    <x-module-hero :title="'Edit: ' . $loanProduct->name" description="Modify loan product settings and configurations" icon="fa-edit">
        <x-slot name="backButton">
            <a href="{{ route('admin.loan-products.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 Products
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view loan products')
                <a href="{{ route('admin.loan-products.index') }}" class="module-hero-tab">
                    <i class="fas fa-box"></i> Products
                </a>
            @endcan
            <a href="{{ route('admin.loan-products.show', $loanProduct) }}" class="module-hero-tab">
                <i class="fas fa-eye"></i> View Details
            </a>
            <a href="{{ route('admin.loan-products.edit', $loanProduct) }}" class="module-hero-tab active-tab">
                <i class="fas fa-edit"></i> Edit
            </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
        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <p class="font-semibold mb-2 text-sm">Please fix the following errors:</p>
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.loan-products.update', $loanProduct) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- Main Form --}}
                <div class="lg:col-span-2 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 flex items-center gap-2">
                                <i class="fas fa-info-circle text-green-600"></i> Basic Information
                            </h3>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Product Name <span class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name', $loanProduct->name) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                <textarea name="description" rows="3"
                                          class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">{{ old('description', $loanProduct->description) }}</textarea>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Terms and Conditions</label>
                                <textarea name="terms_and_conditions" rows="4"
                                          class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">{{ old('terms_and_conditions', $loanProduct->terms_and_conditions) }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Currency <span class="text-red-500">*</span></label>
                                <select name="currency" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                                    <option value="USD" {{ old('currency', $loanProduct->currency) === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                    <option value="SSP" {{ old('currency', $loanProduct->currency) === 'SSP' ? 'selected' : '' }}>SSP - South Sudanese Pound</option>
                                    <option value="KES" {{ old('currency', $loanProduct->currency) === 'KES' ? 'selected' : '' }}>KES - Kenyan Shilling</option>
                                    <option value="UGX" {{ old('currency', $loanProduct->currency) === 'UGX' ? 'selected' : '' }}>UGX - Ugandan Shilling</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                                <label class="flex items-center mt-3 gap-2 cursor-pointer">
                                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $loanProduct->is_active) ? 'checked' : '' }}
                                           class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                    <span class="text-sm text-gray-700">Active (Available for applications)</span>
                                </label>
                            </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 flex items-center gap-2">
                                <i class="fas fa-percentage text-green-600"></i> Interest & Amount Configuration
                            </h3>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Interest Type <span class="text-red-500">*</span></label>
                                <select name="interest_type" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                                    <option value="fixed" {{ old('interest_type', $loanProduct->interest_type) === 'fixed' ? 'selected' : '' }}>Fixed Interest</option>
                                    <option value="reducing_balance" {{ old('interest_type', $loanProduct->interest_type) === 'reducing_balance' ? 'selected' : '' }}>Reducing Balance</option>
                                    <option value="flat_rate" {{ old('interest_type', $loanProduct->interest_type) === 'flat_rate' ? 'selected' : '' }}>Flat Rate</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Interest Rate (% per annum) <span class="text-red-500">*</span></label>
                                <input type="number" name="interest_rate" step="0.01" min="0" max="100" value="{{ old('interest_rate', $loanProduct->interest_rate) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Interest Rate Display</label>
                                <input type="text" name="interest_rate_display" value="{{ old('interest_rate_display', $loanProduct->interest_rate_display) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div></div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Amount <span class="text-red-500">*</span></label>
                                <input type="number" name="min_amount" step="0.01" min="0" value="{{ old('min_amount', $loanProduct->min_amount) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Amount <span class="text-red-500">*</span></label>
                                <input type="number" name="max_amount" step="0.01" min="0" value="{{ old('max_amount', $loanProduct->max_amount) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Default Amount</label>
                                <input type="number" name="default_amount" step="0.01" min="0" value="{{ old('default_amount', $loanProduct->default_amount) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </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 flex items-center gap-2">
                                <i class="fas fa-calendar-alt text-green-600"></i> Term Configuration
                            </h3>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Min Term (Months) <span class="text-red-500">*</span></label>
                                <input type="number" name="min_term_months" min="1" value="{{ old('min_term_months', $loanProduct->min_term_months) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Max Term (Months) <span class="text-red-500">*</span></label>
                                <input type="number" name="max_term_months" min="1" value="{{ old('max_term_months', $loanProduct->max_term_months) }}" required
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Default Term (Months)</label>
                                <input type="number" name="default_term_months" min="1" value="{{ old('default_term_months', $loanProduct->default_term_months) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </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 flex items-center gap-2">
                                <i class="fas fa-dollar-sign text-green-600"></i> Fees & Penalties
                            </h3>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Processing Fee (Fixed)</label>
                                <input type="number" name="processing_fee" step="0.01" min="0" value="{{ old('processing_fee', $loanProduct->processing_fee) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Processing Fee (%)</label>
                                <input type="number" name="processing_fee_percentage" step="0.01" min="0" max="100" value="{{ old('processing_fee_percentage', $loanProduct->processing_fee_percentage) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Late Payment Penalty</label>
                                <input type="number" name="late_payment_penalty" step="0.01" min="0" value="{{ old('late_payment_penalty', $loanProduct->late_payment_penalty) }}"
                                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            </div>
                        </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 flex items-center gap-2">
                                <i class="fas fa-clipboard-check text-green-600"></i> Eligibility Requirements
                            </h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Eligible Categories</label>
                                <select name="eligible_categories[]" multiple 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 h-28">
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ in_array($category->id, old('eligible_categories', $loanProduct->eligible_categories ?? [])) ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                <p class="text-xs text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Min. Membership Duration (Months)</label>
                                <input type="number" name="min_membership_months" min="0" value="{{ old('min_membership_months', $loanProduct->min_membership_months) }}"
                                       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 class="block text-sm font-medium text-gray-700 mb-1">Min. Contribution Balance</label>
                                <input type="number" name="min_contribution_balance" step="0.01" min="0" value="{{ old('min_contribution_balance', $loanProduct->min_contribution_balance) }}"
                                       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>
                    </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">Requirements</h3>
                        </div>
                        <div class="p-6 space-y-3">
                            <label class="flex items-center justify-between cursor-pointer">
                                <span class="text-sm text-gray-700">Requires Collateral</span>
                                <input type="checkbox" name="requires_collateral" value="1" {{ old('requires_collateral', $loanProduct->requires_collateral) ? 'checked' : '' }}
                                       class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            </label>
                            <label class="flex items-center justify-between cursor-pointer">
                                <span class="text-sm text-gray-700">Requires Guarantor</span>
                                <input type="checkbox" name="requires_guarantor" value="1" {{ old('requires_guarantor', $loanProduct->requires_guarantor) ? 'checked' : '' }}
                                       class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            </label>
                            <div id="guarantors-field" class="{{ $loanProduct->requires_guarantor ? '' : 'hidden' }}">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Min. Guarantors</label>
                                <input type="number" name="min_guarantors" min="0" value="{{ old('min_guarantors', $loanProduct->min_guarantors ?? 1) }}"
                                       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>
                    </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">Display Settings</h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <label class="flex items-center justify-between cursor-pointer">
                                <span class="text-sm text-gray-700">Featured Product</span>
                                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $loanProduct->is_featured) ? 'checked' : '' }}
                                       class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            </label>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Theme Color</label>
                                <input type="text" name="theme_color" value="{{ old('theme_color', $loanProduct->theme_color) }}"
                                       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 class="block text-sm font-medium text-gray-700 mb-1">Icon (FontAwesome)</label>
                                <input type="text" name="icon" value="{{ old('icon', $loanProduct->icon) }}"
                                       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>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <div class="p-6 space-y-3">
                            <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-save mr-1"></i> Update Loan Product
                            </button>
                            <a href="{{ route('admin.loan-products.show', $loanProduct) }}" class="w-full text-center px-4 py-2.5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-sm font-medium block">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

</x-app-layout>

@push('scripts')
<script>
document.querySelector('input[name="requires_guarantor"]').addEventListener('change', function() {
    document.getElementById('guarantors-field').classList.toggle('hidden', !this.checked);
});
</script>
@endpush
