{% extends 'base.html' %}
{% load static %}
{% load utils_filters %}

{% block title %}Settings -RuralPointADVANCE{% endblock %}

{% block content %}
<div class="min-h-screen">
    <!-- Page header -->
    <div class="mb-8">
        <h1 class="text-2xl font-semibold text-gray-900">Settings</h1>
        <p class="mt-2 text-sm text-gray-700">
            Manage system settings and preferences. Changes are saved automatically.
        </p>
    </div>

    <!-- Settings sections -->
    <div class="grid grid-cols-1 gap-8">
        <!-- Loan Products Settings -->
        <div class="bg-white shadow sm:rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold leading-6 text-gray-900">
                    <i class="fas fa-money-bill-wave text-primary mr-2"></i>
                    Loan Products
                </h3>
                
                <!-- Boost Product Settings -->
                <div class="mt-6 border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Boost Product</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Interest Rate (%)</label>
                                    <p class="text-sm text-gray-500">Monthly interest rate for Boost loans</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'boost_interest_rate' }}"
                                           onchange="updateSetting('boost_interest_rate', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Processing Fee (%)</label>
                                    <p class="text-sm text-gray-500">One-time processing fee</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'boost_processing_fee' }}"
                                           onchange="updateSetting('boost_processing_fee', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Minimum Amount</label>
                                    <p class="text-sm text-gray-500">Minimum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'boost_min_amount' }}"
                                           onchange="updateSetting('boost_min_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Maximum Amount</label>
                                    <p class="text-sm text-gray-500">Maximum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'boost_max_amount' }}"
                                           onchange="updateSetting('boost_max_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mwamba Product Settings -->
                <div class="mt-6 border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Mwamba Product</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Interest Rate (%)</label>
                                    <p class="text-sm text-gray-500">Monthly interest rate for Mwamba loans</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'mwamba_interest_rate' }}"
                                           onchange="updateSetting('mwamba_interest_rate', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Processing Fee (%)</label>
                                    <p class="text-sm text-gray-500">One-time processing fee</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'mwamba_processing_fee' }}"
                                           onchange="updateSetting('mwamba_processing_fee', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Minimum Amount</label>
                                    <p class="text-sm text-gray-500">Minimum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'mwamba_min_amount' }}"
                                           onchange="updateSetting('mwamba_min_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Maximum Amount</label>
                                    <p class="text-sm text-gray-500">Maximum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'mwamba_max_amount' }}"
                                           onchange="updateSetting('mwamba_max_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Imara Product Settings -->
                <div class="mt-6 border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Imara Product</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Interest Rate (%)</label>
                                    <p class="text-sm text-gray-500">Monthly interest rate for Imara loans</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'imara_interest_rate' }}"
                                           onchange="updateSetting('imara_interest_rate', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Processing Fee (%)</label>
                                    <p class="text-sm text-gray-500">One-time processing fee</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="0.01" min="0" max="100"
                                           value="{{ settings.loan|get_setting:'imara_processing_fee' }}"
                                           onchange="updateSetting('imara_processing_fee', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Minimum Amount</label>
                                    <p class="text-sm text-gray-500">Minimum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'imara_min_amount' }}"
                                           onchange="updateSetting('imara_min_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-900">Maximum Amount</label>
                                    <p class="text-sm text-gray-500">Maximum loan amount allowed</p>
                                </div>
                                <div class="ml-4">
                                    <input type="number" step="1000" min="0"
                                           value="{{ settings.loan|get_setting:'imara_max_amount' }}"
                                           onchange="updateSetting('imara_max_amount', this.value, this)"
                                           class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- General Loan Settings -->
                <div class="mt-6 border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">General Loan Settings</h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-gray-900">Late Payment Penalty (%)</label>
                                <p class="text-sm text-gray-500">Daily penalty rate for late payments</p>
                            </div>
                            <div class="ml-4">
                                <input type="number" step="0.01" min="0" max="100"
                                       value="{{ settings.loan|get_setting:'late_payment_penalty' }}"
                                       onchange="updateSetting('late_payment_penalty', this.value, this)"
                                       class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-gray-900">Auto-Approval Score</label>
                                <p class="text-sm text-gray-500">Minimum credit score for auto-approval</p>
                            </div>
                            <div class="ml-4">
                                <input type="number" step="1" min="0" max="100"
                                       value="{{ settings.loan|get_setting:'auto_approval_min_score' }}"
                                       onchange="updateSetting('auto_approval_min_score', this.value, this)"
                                       class="block w-32 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Other Settings Sections -->
        {% for category, category_name in categories %}
        {% if category != 'loan' %}
        <div class="bg-white shadow sm:rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-base font-semibold leading-6 text-gray-900">
                    <i class="fas fa-cogs text-primary mr-2"></i>
                    {{ category_name }}
                </h3>
                <div class="mt-6 space-y-6">
                    {% for setting in settings|get_item:category %}
                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors duration-150">
                        <div class="flex-1">
                            <label class="block text-sm font-medium text-gray-900">{{ setting.key }}</label>
                            <p class="text-sm text-gray-500">{{ setting.description }}</p>
                        </div>
                        <div class="ml-4 flex items-center space-x-2">
                            {% if setting.is_public or user.is_staff %}
                            <div class="relative">
                                <input type="text" 
                                       id="setting-{{ setting.key }}"
                                       value="{{ setting.value }}"
                                       data-original-value="{{ setting.value }}"
                                       onchange="updateSetting('{{ setting.key }}', this.value, this)"
                                       onblur="validateSetting('{{ setting.key }}', this)"
                                       class="block w-48 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm transition-all duration-200">
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 hidden" id="loading-{{ setting.key }}">
                                    <i class="fas fa-spinner fa-spin text-primary"></i>
                                </div>
                            </div>
                            <button onclick="resetSetting('{{ setting.key }}')" 
                                    class="text-gray-400 hover:text-gray-600 transition-colors duration-150"
                                    title="Reset to original value">
                                <i class="fas fa-undo text-sm"></i>
                            </button>
                            {% else %}
                            <span class="text-gray-500">Restricted</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>

{% block extra_js %}
<script>
    function updateSetting(key, value, input) {
        const loadingIcon = document.getElementById(`loading-${key}`);
        if (loadingIcon) loadingIcon.classList.remove('hidden');
        
        fetch("{% url 'utils:update_setting' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({ key, value })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('success', `Setting ${key} updated successfully`);
                if (input) input.dataset.originalValue = value;
            } else {
                showToast('error', data.error || 'Failed to update setting');
                if (input) input.value = input.dataset.originalValue;
            }
        })
        .catch(error => {
            showToast('error', 'An error occurred while updating the setting');
            if (input) input.value = input.dataset.originalValue;
        })
        .finally(() => {
            if (loadingIcon) loadingIcon.classList.add('hidden');
        });
    }

    function resetSetting(key) {
        const input = document.getElementById(`setting-${key}`);
        if (input && input.dataset.originalValue) {
            input.value = input.dataset.originalValue;
            updateSetting(key, input.dataset.originalValue, input);
        }
    }

    function validateSetting(key, input) {
        if (input.value !== input.dataset.originalValue) {
            updateSetting(key, input.value, input);
        }
    }

    function showToast(type, message) {
        const toast = document.createElement('div');
        toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
            type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
        }`;
        toast.innerHTML = message;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }
</script>
{% endblock %}

{% endblock %}