@extends('layouts.admin')

@section('title', 'Interest Rate Settings')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Interest Rate Settings</h1>
    </div>
</div>

<div class="card">
    <x-data-table emptyMessage="No interest rates configured.">
        <x-slot:thead>
            <th>Account Type</th>
            <th>Rate</th>
            <th>Method</th>
            <th>Frequency</th>
            <th>Min Balance</th>
            <th>Status</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($interestRates ?? [] as $rate)
            <tr>
                <td class="text-semibold">{{ ucfirst($rate->account_type) }}</td>
                <td class="text-semibold" style="color: #0D6B58;">{{ number_format($rate->rate, 2) }}%</td>
                <td>{{ ucfirst($rate->method ?? 'simple') }}</td>
                <td><span class="badge badge-blue">{{ ucfirst($rate->frequency ?? 'monthly') }}</span></td>
                <td>{{ $currency ?? '₦' }}{{ number_format($rate->min_balance ?? 0, 2) }}</td>
                <td>
                    <span class="badge badge-{{ $rate->is_active ? 'green' : 'red' }}">{{ $rate->is_active ? 'Active' : 'Inactive' }}</span>
                </td>
                <td>
                    <div class="table-actions">
                        <button type="button" class="btn btn-sm btn-outline" onclick="openInterestEditModal({{ $rate->id }}, '{{ $rate->account_type }}', {{ $rate->rate }}, '{{ $rate->method ?? 'simple' }}', '{{ $rate->frequency ?? 'monthly' }}', {{ $rate->min_balance ?? 0 }}, {{ $rate->is_active ? 'true' : 'false' }})">Edit</button>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7">
                    <div class="data-table-empty-content">
                        <p>No interest rates configured.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>

<x-modal id="interestEditModal" title="Edit Interest Rate">
    <form id="interestEditForm" method="POST" action="">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="ie_account_type" class="form-label">Account Type</label>
            <input type="text" id="ie_account_type" class="form-input" disabled>
            <input type="hidden" id="ie_account_type_hidden" name="account_type">
        </div>
        <div class="form-grid form-grid-2">
            <div class="form-group">
                <label for="ie_rate" class="form-label">Interest Rate (%)</label>
                <input type="number" id="ie_rate" name="rate" class="form-input" step="0.01" min="0" max="100" required>
            </div>
            <div class="form-group">
                <label for="ie_method" class="form-label">Method</label>
                <select id="ie_method" name="method" class="form-select">
                    <option value="simple">Simple Interest</option>
                    <option value="compound">Compound Interest</option>
                </select>
            </div>
        </div>
        <div class="form-grid form-grid-2">
            <div class="form-group">
                <label for="ie_frequency" class="form-label">Frequency</label>
                <select id="ie_frequency" name="frequency" class="form-select">
                    <option value="daily">Daily</option>
                    <option value="monthly">Monthly</option>
                    <option value="quarterly">Quarterly</option>
                    <option value="yearly">Yearly</option>
                </select>
            </div>
            <div class="form-group">
                <label for="ie_min_balance" class="form-label">Minimum Balance</label>
                <input type="number" id="ie_min_balance" name="min_balance" class="form-input" step="0.01" min="0">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="closeModal('interestEditModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Update Rate</button>
        </div>
    </form>
</x-modal>
@endsection

@push('scripts')
<script>
function openInterestEditModal(id, accountType, rate, method, frequency, minBalance, isActive) {
    document.getElementById('interestEditForm').action = '{{ url("admin/interest") }}/' + id;
    document.getElementById('ie_account_type').value = accountType.charAt(0).toUpperCase() + accountType.slice(1);
    document.getElementById('ie_account_type_hidden').value = accountType;
    document.getElementById('ie_rate').value = rate;
    document.getElementById('ie_method').value = method;
    document.getElementById('ie_frequency').value = frequency;
    document.getElementById('ie_min_balance').value = minBalance;
    openModal('interestEditModal');
}
</script>
@endpush