@extends('layouts.app')
@section('title','Pension Management')
@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 Management</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active">All Enrollments</li></ol></nav>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('export.pension.register') }}" class="btn btn-outline-success btn-sm">
                <i class="bi bi-file-earmark-excel me-1"></i>Export Register
            </a>
            @if($unenrolled->count())
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enrollModal">
                <i class="bi bi-shield-plus me-1"></i>Enroll Employee
                <span class="badge bg-white text-dark ms-1" style="font-size:.72rem;">{{ $unenrolled->count() }} eligible</span>
            </button>
            @endif
        </div>
    </div>
</div>

{{-- KPIs --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card sc-primary">
            <div class="stat-icon"><i class="bi bi-shield-check"></i></div>
            <div class="stat-value">{{ $totals->enrolled ?? 0 }}</div>
            <div class="stat-label">Total Enrolled</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-success">
            <div class="stat-icon"><i class="bi bi-shield-fill"></i></div>
            <div class="stat-value">{{ $totals->active_count ?? 0 }}</div>
            <div class="stat-label">Active</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-info">
            <div class="stat-icon"><i class="bi bi-person-fill"></i></div>
            <div class="stat-value">${{ number_format($totals->emp_total ?? 0, 0) }}</div>
            <div class="stat-label">Employee Contributions</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card sc-gold">
            <div class="stat-icon"><i class="bi bi-building"></i></div>
            <div class="stat-value">${{ number_format($totals->er_total ?? 0, 0) }}</div>
            <div class="stat-label">Employer Contributions</div>
        </div>
    </div>
</div>

{{-- Not-Yet-Enrolled Banner --}}
@if($unenrolled->count())
<div class="card mb-4" style="border-left:4px solid #f59e0b;">
    <div class="card-body">
        <div class="fw-bold mb-1" style="color:#92400e;">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ $unenrolled->count() }} eligible employee{{ $unenrolled->count()!=1?'s':'' }} not yet enrolled
        </div>
        <div style="font-size:.8rem;color:var(--text-2);margin-bottom:1rem;">These active employees are pension-eligible but have no pension account.</div>
        <div class="row g-2">
            @foreach($unenrolled->take(8) as $emp)
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="d-flex align-items-center gap-2 p-2 rounded-3" style="background:var(--body-bg);">
                    <div class="avatar avatar-sm" style="background:var(--nav-active-bg);color:#fff;flex-shrink:0;">
                        {{ strtoupper(substr($emp->first_name,0,1)) }}
                    </div>
                    <div class="flex-1 overflow-hidden" style="min-width:0;">
                        <div class="fw-semibold text-truncate" style="font-size:.82rem;">{{ $emp->full_name }}</div>
                        <div style="font-size:.7rem;color:var(--text-3);">{{ $emp->department?->name ?? 'No dept.' }}</div>
                    </div>
                    <a href="{{ route('pension.enroll', $emp) }}" class="btn btn-outline-success"
                       style="padding:.18rem .5rem;font-size:.72rem;border-radius:6px;white-space:nowrap;flex-shrink:0;">
                        Enroll
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @if($unenrolled->count() > 8)
        <div class="mt-2" style="font-size:.78rem;color:var(--text-2);">
            and {{ $unenrolled->count() - 8 }} more eligible employees.
        </div>
        @endif
    </div>
</div>
@endif

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-12 col-sm-5 col-md-4">
                <input type="search" name="search" class="form-control" placeholder="Name or employee number…" value="{{ request('search') }}">
            </div>
            <div class="col-6 col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    @foreach(['active','suspended','withdrawn','paying_out'] as $s)
                    <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search me-1"></i>Filter</button>
                <a href="{{ route('pension.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x-lg"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Enrollments Table --}}
<div class="card">
    <div class="card-header">{{ $enrollments->total() }} Pension Accounts</div>
    <div class="table-responsive">
        <table class="table table-hover mb-0" style="font-size:.84rem;">
            <thead>
                <tr>
                    <th>Employee</th>
                    <th class="d-none d-md-table-cell">Scheme</th>
                    <th>Rates (Emp / Employer)</th>
                    <th class="d-none d-lg-table-cell">Total Fund</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($enrollments as $pen)
            <tr>
                <td>
                    <div class="fw-semibold">{{ $pen->employee?->full_name }}</div>
                    <div style="font-size:.73rem;color:var(--text-2);">{{ $pen->employee?->employee_number }} · {{ $pen->employee?->department?->name ?? '—' }}</div>
                </td>
                <td class="d-none d-md-table-cell" style="font-size:.8rem;">{{ $pen->scheme_name ?: '—' }}</td>
                <td>{{ $pen->employee_contribution_rate }}% / {{ $pen->employer_contribution_rate }}%</td>
                <td class="d-none d-lg-table-cell fw-semibold">${{ number_format($pen->total_contributions, 2) }}</td>
                <td>
                    <span class="badge bg-{{ match($pen->status) {
                        'active'    =>'success','suspended'=>'warning',
                        'withdrawn' =>'secondary','paying_out'=>'primary',default=>'secondary'
                    } }}">{{ ucfirst(str_replace('_',' ',$pen->status)) }}</span>
                </td>
                <td class="text-end">
                    <a href="{{ route('pension.show', $pen) }}" class="btn btn-sm btn-icon btn-outline-primary" title="View">
                        <i class="bi bi-eye"></i>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="text-center py-5" style="color:var(--text-3);">
                    <i class="bi bi-shield d-block" style="font-size:2.5rem;margin-bottom:.5rem;"></i>
                    No pension accounts yet.
                    @if($unenrolled->count())
                    <div class="mt-3">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#enrollModal">
                            Enroll Your First Employee
                        </button>
                    </div>
                    @endif
                </td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($enrollments->hasPages())
    <div class="card-body pt-0">{{ $enrollments->links('pagination::bootstrap-5') }}</div>
    @endif
</div>

{{-- Enroll Modal --}}
<div class="modal fade" id="enrollModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-shield-plus me-2"></i>Enroll Employee in Pension</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {{-- Step 1: Pick employee --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">1. Select Employee</label>
                    <div style="max-height:190px;overflow-y:auto;border:1px solid var(--topbar-border);border-radius:10px;">
                        @forelse($unenrolled as $emp)
                        <label class="d-flex align-items-center gap-3 px-3 py-2"
                               style="border-bottom:1px solid var(--card-border);cursor:pointer;"
                               onclick="selectEmp({{ $emp->id }}, '{{ addslashes($emp->full_name) }}', '{{ route('pension.enroll.store', $emp) }}')">
                            <input type="radio" name="employee_pick" id="pick_{{ $emp->id }}" class="form-check-input flex-shrink-0">
                            <div class="avatar avatar-sm" style="background:var(--nav-active-bg);color:#fff;flex-shrink:0;">
                                {{ strtoupper(substr($emp->first_name,0,1)) }}
                            </div>
                            <div>
                                <div class="fw-semibold" style="font-size:.88rem;">{{ $emp->full_name }}</div>
                                <div style="font-size:.72rem;color:var(--text-2);">{{ $emp->employee_number }} · {{ $emp->position }} · {{ $emp->department?->name ?? 'No dept.' }}</div>
                            </div>
                        </label>
                        @empty
                        <div class="p-3 text-center" style="color:var(--text-3);">All eligible employees are already enrolled.</div>
                        @endforelse
                    </div>
                </div>

                {{-- Step 2: Enrollment form --}}
                <div id="enrollFormSection" style="display:none;">
                    <div id="selectedAlert" class="alert alert-success mb-3" style="font-size:.85rem;">
                        <i class="bi bi-person-check me-2"></i>Enrolling: <strong id="selectedName"></strong>
                    </div>
                    <form id="quickEnrollForm" method="POST" action="">
                        @csrf
                        <label class="form-label fw-semibold mb-3">2. Pension Details</label>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label">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">Member Number</label>
                                <input type="text" name="pension_number" class="form-control" placeholder="Scheme-issued ID">
                            </div>
                            <div class="col-12 col-md-4">
                                <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-4">
                                <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-4">
                                <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 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>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="enrollBtn" onclick="submitEnroll()" disabled>
                    <i class="bi bi-shield-check me-2"></i>Enroll in Pension
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function selectEmp(id, name, action) {
    document.getElementById('pick_' + id).checked = true;
    document.getElementById('quickEnrollForm').action = action;
    document.getElementById('selectedName').textContent = name;
    document.getElementById('enrollFormSection').style.display = '';
    document.getElementById('enrollBtn').disabled = false;
    document.getElementById('enrollFormSection').scrollIntoView({behavior:'smooth', block:'nearest'});
}
function submitEnroll() {
    document.getElementById('quickEnrollForm').submit();
}
</script>
@endpush