@extends('interest.base')

@section('action-content')
<div class="box">
    <div class="box-header">
        <h3>Interest Calculations</h3>
    </div>

    <div class="box-body">

        <!-- FILTER FORM -->
        <form method="GET" action="{{ route('interest.history') }}" class="mb-3">
            <div class="row">
                <!-- From Date -->
                <div class="col-md-3">
                    <label>From Date</label>
                    <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}">
                </div>

                <!-- To Date -->
                <div class="col-md-3">
                    <label>To Date</label>
                    <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}">
                </div>

                <!-- Client -->
                <div class="col-md-3">
                    <label>Client</label>
                    <select name="client_id" class="form-control select2">
                        <option value="">All Clients</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>
                                {{ $client->surname }} {{ $client->first_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Frequency -->
                <div class="col-md-3">
                    <label>Frequency</label>
                    <select name="frequency" class="form-control">
                        <option value="">All</option>
                        <option value="daily" {{ request('frequency') == 'daily' ? 'selected' : '' }}>Daily</option>
                        <option value="weekly" {{ request('frequency') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                        <option value="monthly" {{ request('frequency') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                    </select>
                </div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Apply Filters</button>
                <a href="{{ route('interest.history') }}" class="btn btn-default">Reset</a>
            </div>
        </form>

        <!-- INTEREST HISTORY TABLE -->
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Client</th>
                    <th>Account</th>
                    <th>Old Balance</th>
                    <th>Interest</th>
                    <th>New Balance</th>
                    <th>Rate (%)</th>
                    <th>Frequency</th>
                    <th>Date Posted</th>
                </tr>
            </thead>
            <tbody>
                @forelse($history as $row)
                <tr>
                    <td>
    {{ $row->savingsAccount->client->surname ?? 'N/A' }}
    {{ $row->savingsAccount->client->first_name ?? '' }}
    {{ $row->savingsAccount->client->other_names ?? '' }}
</td>
                    <td>{{ $row->savingsAccount->account_number ?? 'N/A' }}</td>
                    <td>{{ number_format($row->old_balance, 5) }}</td>
                    <td>{{ number_format($row->interest_amount, 5) }}</td>
                    <td>{{ number_format($row->new_balance, 5) }}</td>
                    <td>{{ $row->rate }}</td>
                    <td>{{ ucfirst($row->frequency) }}</td>
                    <td>{{ \Carbon\Carbon::parse($row->calculated_on)->format('d M Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted">No interest history found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <!-- PAGINATION -->
        {{ $history->appends(request()->all())->links('pagination::bootstrap-4') }}

    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Initialize Select2 for client filter
    $('.select2').select2({
        placeholder: "Select a client",
        allowClear: true,
        width: '100%',
        theme: 'bootstrap4'
    });
});
</script>
@endsection