@extends('layouts.app')
@section('title','Pension Account')
@section('page-title','Pension')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>Pension Account</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('pension.index') }}">Pension</a></li>
                <li class="breadcrumb-item active">{{ $pension->employee?->full_name }}</li>
            </ol></nav>
        </div>
    </div>
</div>

<div class="row g-4">
    {{-- Account Summary --}}
    <div class="col-12 col-lg-4">
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="avatar avatar-lg" style="background:var(--nav-active-bg);color:#fff;">
                        {{ strtoupper(substr($pension->employee?->first_name,0,1).substr($pension->employee?->last_name,0,1)) }}
                    </div>
                    <div>
                        <div class="fw-bold">{{ $pension->employee?->full_name }}</div>
                        <div style="font-size:.78rem;color:var(--text-2);">{{ $pension->employee?->employee_number }}</div>
                    </div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div style="background:#d1fae5;border-radius:10px;padding:.75rem;text-align:center;">
                            <div class="fw-bold text-success" style="font-size:1.2rem;">${{ number_format($pension->total_employee_contributions, 2) }}</div>
                            <div style="font-size:.65rem;color:#065f46;text-transform:uppercase;letter-spacing:.06em;">Employee</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div style="background:#dbeafe;border-radius:10px;padding:.75rem;text-align:center;">
                            <div class="fw-bold text-primary" style="font-size:1.2rem;">${{ number_format($pension->total_employer_contributions, 2) }}</div>
                            <div style="font-size:.65rem;color:#1e40af;text-transform:uppercase;letter-spacing:.06em;">Employer</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div style="background:var(--nav-active-bg);border-radius:10px;padding:.75rem;text-align:center;">
                            <div class="fw-bold text-white" style="font-size:1.4rem;">${{ number_format($pension->total_contributions, 2) }}</div>
                            <div style="font-size:.65rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em;">Total Fund</div>
                        </div>
                    </div>
                </div>

                <div style="font-size:.82rem;" class="d-flex flex-column gap-2">
                    @if($pension->scheme_name)<div><span style="color:var(--text-3);">Scheme:</span> {{ $pension->scheme_name }}</div>@endif
                    @if($pension->pension_number)<div><span style="color:var(--text-3);">Member No.:</span> {{ $pension->pension_number }}</div>@endif
                    <div><span style="color:var(--text-3);">Enrolled:</span> {{ $pension->enrollment_date->format('M d, Y') }}</div>
                    <div><span style="color:var(--text-3);">Rates:</span> {{ $pension->employee_contribution_rate }}% / {{ $pension->employer_contribution_rate }}%</div>
                    @if($pension->beneficiary_name)
                    <div><span style="color:var(--text-3);">Beneficiary:</span> {{ $pension->beneficiary_name }} ({{ $pension->beneficiary_relationship }})</div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Status Update --}}
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-gear me-2"></i>Update Status</div>
            <div class="card-body">
                <form method="POST" action="{{ route('pension.status', $pension) }}" class="d-flex flex-column gap-3">
                    @csrf
                    <div>
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            @foreach(['active','suspended','withdrawn','paying_out'] as $s)
                            <option value="{{ $s }}" {{ $pension->status===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="payoutFields">
                        <label class="form-label">Payout Start Date</label>
                        <input type="date" name="payout_start_date" class="form-control mb-2"
                               value="{{ $pension->payout_start_date?->format('Y-m-d') }}">
                        <label class="form-label">Monthly Payout Amount</label>
                        <input type="number" name="monthly_payout" class="form-control" step="0.01" min="0"
                               value="{{ $pension->monthly_payout }}">
                    </div>
                    <button type="submit" class="btn btn-outline-primary btn-sm">Update Status</button>
                </form>
            </div>
        </div>

        {{-- Record Contribution --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-plus-circle me-2"></i>Record Contribution</div>
            <div class="card-body">
                <form method="POST" action="{{ route('pension.contribution', $pension) }}" class="d-flex flex-column gap-3">
                    @csrf
                    <div>
                        <label class="form-label">Contribution Date *</label>
                        <input type="date" name="contribution_date" class="form-control" required value="{{ date('Y-m-d') }}">
                    </div>
                    <div>
                        <label class="form-label">Gross Basis (salary amount) *</label>
                        <input type="number" name="gross_basis" class="form-control" required step="0.01" min="0"
                               placeholder="{{ $pension->employee?->salary_usd }}">
                        <div class="form-text">
                            Employee: {{ $pension->employee_contribution_rate }}% ·
                            Employer: {{ $pension->employer_contribution_rate }}%
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Reference</label>
                        <input type="text" name="reference" class="form-control" placeholder="e.g. payroll period">
                    </div>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="bi bi-check-lg me-1"></i>Record Contribution
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Contributions History --}}
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header"><i class="bi bi-clock-history me-2"></i>Contribution History ({{ $contributions->total() }})</div>
            <div class="table-responsive">
                <table class="table table-hover mb-0" style="font-size:.84rem;">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Gross Basis</th>
                            <th>Employee</th>
                            <th>Employer</th>
                            <th class="fw-bold">Total</th>
                            <th class="d-none d-md-table-cell">Reference</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($contributions as $c)
                        <tr>
                            <td>{{ $c->contribution_date->format('M d, Y') }}</td>
                            <td>${{ number_format($c->gross_basis, 2) }}</td>
                            <td class="text-success">${{ number_format($c->employee_amount, 2) }}</td>
                            <td class="text-primary">${{ number_format($c->employer_amount, 2) }}</td>
                            <td class="fw-bold">${{ number_format($c->total_amount, 2) }}</td>
                            <td class="d-none d-md-table-cell" style="color:var(--text-2);font-size:.78rem;">{{ $c->reference ?: '—' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="6" class="text-center py-4" style="color:var(--text-3);">No contributions recorded yet.</td></tr>
                        @endforelse
                    </tbody>
                    @if($contributions->count())
                    <tfoot>
                        <tr style="background:var(--body-bg);font-weight:700;">
                            <td colspan="2">Totals (this page)</td>
                            <td class="text-success">${{ number_format($contributions->sum('employee_amount'), 2) }}</td>
                            <td class="text-primary">${{ number_format($contributions->sum('employer_amount'), 2) }}</td>
                            <td>${{ number_format($contributions->sum('total_amount'), 2) }}</td>
                            <td class="d-none d-md-table-cell"></td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
            @if($contributions->hasPages())
            <div class="card-body pt-0">{{ $contributions->links('pagination::bootstrap-5') }}</div>
            @endif
        </div>
    </div>
</div>
@endsection