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

@section('content')
<div class="page-header">
    <div>
        <h1>Enroll in Pension</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">{{ $employee->full_name }}</li>
        </ol></nav>
    </div>
</div>

<div class="row g-4">
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="avatar avatar-xl mx-auto mb-3" style="background:var(--nav-active-bg);color:#fff;">
                    {{ strtoupper(substr($employee->first_name,0,1).substr($employee->last_name,0,1)) }}
                </div>
                <div class="fw-bold">{{ $employee->full_name }}</div>
                <div style="font-size:.8rem;color:var(--text-2);">{{ $employee->employee_number }}</div>
                <div style="font-size:.8rem;color:var(--text-2);">{{ $employee->position }}</div>
                <hr style="border-color:var(--card-border);">
                <div style="font-size:.83rem;text-align:left;">
                    <div class="mb-1"><span style="color:var(--text-3);">Salary:</span> ${{ number_format($employee->salary_usd ?? 0, 2) }}</div>
                    <div class="mb-1"><span style="color:var(--text-3);">Employed:</span> {{ $employee->date_of_employment?->format('M d, Y') ?? '—' }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header"><i class="bi bi-shield-check me-2"></i>Enrollment Details</div>
            <form method="POST" action="{{ route('pension.enroll.store', $employee) }}">
                @csrf
                <div class="card-body row g-3">
                    <div class="col-12 col-md-6">
                        <label class="form-label">Pension Scheme Name</label>
                        <input type="text" name="scheme_name" class="form-control" placeholder="e.g. National Social Security Trust">
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Pension Member Number</label>
                        <input type="text" name="pension_number" class="form-control" placeholder="Scheme-issued ID">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Enrollment Date *</label>
                        <input type="date" name="enrollment_date" class="form-control" required value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-6 col-md-3">
                        <label class="form-label">Employee Rate (%) *</label>
                        <input type="number" name="employee_contribution_rate" class="form-control" required step="0.01" min="0" max="100" value="5">
                        <div class="form-text">% of gross pay</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <label class="form-label">Employer Rate (%) *</label>
                        <input type="number" name="employer_contribution_rate" class="form-control" required step="0.01" min="0" max="100" value="10">
                        <div class="form-text">% of gross pay</div>
                    </div>
                    <div class="col-12"><hr style="border-color:var(--card-border);"></div>
                    <div class="col-12 col-md-4">
                        <label class="form-label">Beneficiary Name</label>
                        <input type="text" name="beneficiary_name" class="form-control">
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Relationship</label>
                        <input type="text" name="beneficiary_relationship" class="form-control" placeholder="Spouse, Child…">
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Beneficiary Phone</label>
                        <input type="text" name="beneficiary_phone" class="form-control">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="card-footer d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-shield-plus me-2"></i>Enroll in Pension
                    </button>
                    <a href="{{ route('employees.life_events', $employee) }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection