<div>
    {{-- ADD INTERIM BUTTON --}}
    @can('manageInterims', $pensionCase)
        <div class="d-flex justify-content-end mb-3">
            <button class="btn btn-sm btn-success" wire:click="$toggle('showForm')">
                <i class="mdi mdi-plus me-1"></i>
                {{ $showForm ? 'Cancel' : 'Add Interim' }}
            </button>
        </div>

        @if($showForm)
            <div class="card border mb-4">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">New Interim</h6>
                    <div class="row g-3">
                        <div class="col-12 col-md-3">
                            <label class="form-label">Date</label>
                            <input type="date" class="form-control @error('interim_date') is-invalid @enderror"
                                   wire:model="interim_date">
                            @error('interim_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Interim Amount</label>
                            <input type="number" step="0.01" class="form-control @error('interim_amount') is-invalid @enderror"
                                   wire:model="interim_amount" placeholder="0.00">
                            @error('interim_amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Capped Amount</label>
                            <input type="number" step="0.01" class="form-control @error('interim_capped_amount') is-invalid @enderror"
                                   wire:model="interim_capped_amount" placeholder="0.00">
                            @error('interim_capped_amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Net to Client</label>
                            <input type="number" step="0.01" class="form-control @error('net_to_client') is-invalid @enderror"
                                   wire:model="net_to_client" placeholder="0.00">
                            @error('net_to_client')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">VAT Amount</label>
                            <input type="number" step="0.01" class="form-control @error('vat_amount') is-invalid @enderror"
                                   wire:model="vat_amount" placeholder="0.00">
                            @error('vat_amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">CPF Fee Gross</label>
                            <input type="number" step="0.01" class="form-control @error('cpf_fee_gross') is-invalid @enderror"
                                   wire:model="cpf_fee_gross" placeholder="0.00">
                            @error('cpf_fee_gross')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">CPF Fee Gross Capped</label>
                            <input type="number" step="0.01" class="form-control @error('cpf_fee_gross_capped') is-invalid @enderror"
                                   wire:model="cpf_fee_gross_capped" placeholder="0.00">
                            @error('cpf_fee_gross_capped')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">CPF Fee Net</label>
                            <input type="number" step="0.01" class="form-control @error('cpf_fee_net') is-invalid @enderror"
                                   wire:model="cpf_fee_net" placeholder="0.00">
                            @error('cpf_fee_net')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">CPF Fee Net Capped</label>
                            <input type="number" step="0.01" class="form-control @error('cpf_fee_net_capped') is-invalid @enderror"
                                   wire:model="cpf_fee_net_capped" placeholder="0.00">
                            @error('cpf_fee_net_capped')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="mt-3">
                        <x-ui.button wire:click="add" style="success" icon="mdi mdi-content-save">
                            Save Interim
                        </x-ui.button>
                    </div>
                </div>
            </div>
        @endif
    @endcan

    {{-- INTERIMS TABLE --}}
    @if($interims->isNotEmpty())
        <div class="table-responsive">
            <table class="table table-sm table-centered table-striped table-nowrap mb-0">
                <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Capped</th>
                    <th>Net to Client</th>
                    <th>VAT</th>
                    <th>CPF Gross</th>
                    <th>CPF Gross Cap.</th>
                    <th>CPF Net</th>
                    <th>CPF Net Cap.</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach($interims as $interim)
                    <tr>
                        <td><strong>{{ $interim->interim_number }}</strong></td>
                        <td>{{ $interim->interim_date?->format('d/m/Y') ?? '—' }}</td>
                        <td>{{ $interim->interim_amount ? '£'.number_format($interim->interim_amount, 2) : '—' }}</td>
                        <td>{{ $interim->interim_capped_amount ? '£'.number_format($interim->interim_capped_amount, 2) : '—' }}</td>
                        <td>{{ $interim->net_to_client ? '£'.number_format($interim->net_to_client, 2) : '—' }}</td>
                        <td>{{ $interim->vat_amount ? '£'.number_format($interim->vat_amount, 2) : '—' }}</td>
                        <td>{{ $interim->cpf_fee_gross ? '£'.number_format($interim->cpf_fee_gross, 2) : '—' }}</td>
                        <td>{{ $interim->cpf_fee_gross_capped ? '£'.number_format($interim->cpf_fee_gross_capped, 2) : '—' }}</td>
                        <td>{{ $interim->cpf_fee_net ? '£'.number_format($interim->cpf_fee_net, 2) : '—' }}</td>
                        <td>{{ $interim->cpf_fee_net_capped ? '£'.number_format($interim->cpf_fee_net_capped, 2) : '—' }}</td>
                        <td>
                            @can('manageInterims', $pensionCase)
                                <button class="btn btn-sm btn-link text-danger p-0"
                                        wire:click="delete({{ $interim->id }})"
                                        onclick="return confirm('Delete this interim?')"
                                        title="Delete">
                                    <i class="mdi mdi-trash-can"></i>
                                </button>
                            @endcan
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-muted text-center py-3">No interims recorded.</p>
    @endif
</div>
