<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $employee->first_name }} {{ $employee->last_name }} | ZedBankOS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#146CAA',
                        danger: '#D83B01',
                        gray50: '#FAF9F8',
                        gray100: '#F3F2F1',
                        gray200: '#EDEBE9',
                    }
                }
            }
        }
    </script>
    <style>
        .form-section { background: white; border: 1px solid #EDEBE9; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
        .section-title { font-size: 14px; font-weight: 700; color: #323130; margin-bottom: 12px; border-bottom: 1px solid #F3F2F1; padding-bottom: 6px; }
        .compact-label { font-size: 11px; font-weight: 700; color: #605E5C; display: block; margin-bottom: 2px; }
        .display-value { font-size: 13px; color: #323130; font-weight: 500; min-height: 20px; }
        .compact-table th { background-color: #F3F2F1; color: #605E5C; font-size: 11px; padding: 6px 12px; border-bottom: 1px solid #EDEBE9; text-align: left; }
        .compact-table td { padding: 6px 12px; border-bottom: 1px solid #EDEBE9; font-size: 13px; }
        .status-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; }
    </style>
</head>
<body class="bg-gray50 text-gray-800">
    @include('accounting.partials.sidebar')

    <div class="lg:ml-64">
        @include('accounting.partials.header', ['title' => $employee->first_name . ' ' . $employee->last_name, 'subtitle' => 'Employee profile'])

        <main class="p-4 max-w-5xl mx-auto">
            <div class="flex justify-between items-center mb-4">
                <a href="{{ route('admin.accounting.payroll.employees.index') }}" class="text-primary text-sm font-bold hover:underline">
                    <i class="fas fa-arrow-left mr-1"></i>Employee Details
                </a>
                <div class="flex space-x-2">
                    <a href="{{ route('admin.accounting.payroll.employees.edit', $employee->id) }}" class="bg-primary text-white px-4 py-1.5 rounded text-xs font-bold shadow-sm">
                        <i class="fas fa-edit mr-1"></i> Edit profile
                    </a>
                    <button onclick="openDeleteModal()" class="border border-danger text-danger px-4 py-1.5 rounded text-xs font-bold hover:bg-red-50">
                        <i class="fas fa-trash-alt mr-1"></i> Delete
                    </button>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Personal information</h3>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div><label class="compact-label">Full name</label><div class="display-value">{{ $employee->first_name }} {{ $employee->last_name }}</div></div>
                    <div><label class="compact-label">Email address</label><div class="display-value">{{ $employee->email }}</div></div>
                    <div><label class="compact-label">Phone number</label><div class="display-value">{{ $employee->phone ?? '—' }}</div></div>
                    <div><label class="compact-label">Gender</label><div class="display-value capitalize">{{ $employee->gender }}</div></div>
                    <div><label class="compact-label">Date of birth</label><div class="display-value">{{ $employee->date_of_birth ? $employee->date_of_birth->format('d M, Y') : '—' }}</div></div>
                    <div><label class="compact-label">National ID (NRC)</label><div class="display-value">{{ $employee->national_id ?? '—' }}</div></div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Employment & leave details</h3>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div><label class="compact-label">Employee number</label><div class="display-value font-mono text-primary font-bold">{{ $employee->employee_number }}</div></div>
                    <div><label class="compact-label">Hire date</label><div class="display-value">{{ $employee->hire_date->format('d M, Y') }}</div></div>
                    <div><label class="compact-label">Employment type</label><div class="display-value capitalize">{{ str_replace('_', ' ', $employee->employment_type) }}</div></div>
                    <div><label class="compact-label">Designation</label><div class="display-value">{{ $employee->designation ?? 'Staff' }}</div></div>
                    
                    <div class="pt-2 border-t md:border-t-0"><label class="compact-label">Accrual rate</label><div class="display-value">{{ number_format($employee->leave_accrual_rate, 2) }} Days/Mo</div></div>
                    <div class="pt-2 border-t md:border-t-0"><label class="compact-label">Current leave balance</label><div class="display-value font-bold text-green-700">{{ number_format($employee->leave_balance_days, 2) }} Days</div></div>
                    <div class="pt-2 border-t md:border-t-0"><label class="compact-label">Last accrual date</label><div class="display-value">{{ $employee->last_leave_accrual_date ? $employee->last_leave_accrual_date->format('d M, Y') : 'Never' }}</div></div>
                    <div class="pt-2 border-t md:border-t-0"><label class="compact-label">Status</label>
                        <div class="display-value">
                            <span class="status-pill {{ $employee->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ $employee->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Payment & statutory information</h3>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div><label class="compact-label">Payment method</label><div class="display-value capitalize">{{ str_replace('_', ' ', $employee->payment_method) }}</div></div>
                    <div><label class="compact-label">NAPSA number</label><div class="display-value">{{ $employee->napsa_number ?? '—' }}</div></div>
                    <div><label class="compact-label">NHIMA number</label><div class="display-value">{{ $employee->nhima_number ?? '—' }}</div></div>
                    <div class="hidden md:block"></div>

                    @if($employee->payment_method === 'bank')
                        <div class="col-span-1 md:col-span-4 grid grid-cols-1 md:grid-cols-4 gap-4 mt-2 pt-2 border-t border-gray-50">
                            <div><label class="compact-label">Bank name</label><div class="display-value">{{ $employee->bank_name }}</div></div>
                            <div><label class="compact-label">Branch</label><div class="display-value">{{ $employee->bank_branch ?? '—' }}</div></div>
                            <div><label class="compact-label">Account name</label><div class="display-value">{{ $employee->bank_account_name }}</div></div>
                            <div><label class="compact-label">Account number</label><div class="display-value">{{ $employee->bank_account_number }}</div></div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Salary components</h3>
                <div class="overflow-x-auto border rounded border-gray-100">
                    <table class="compact-table w-full">
                        <thead>
                            <tr>
                                <th>Earning type</th>
                                <th>Amount (ZMW)</th>
                                <th>Frequency</th>
                                <th class="text-center">Taxable</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($employee->earnings as $earning)
                            <tr>
                                <td class="font-bold">{{ $earning->earningType->name }}</td>
                                <td class="font-mono">{{ number_format($earning->amount, 2) }}</td>
                                <td class="capitalize">{{ $earning->frequency }}</td>
                                <td class="text-center">
                                    <i class="fas {{ $earning->is_taxable ? 'fa-check-circle text-red-500' : 'fa-times-circle text-gray-300' }}"></i>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <td class="text-right font-bold text-xs">Total Gross:</td>
                                <td colspan="3" class="font-bold text-primary">{{ number_format($employee->earnings->sum('amount'), 2) }} ZMW</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <div id="deleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full overflow-hidden">
            <div class="p-6">
                <div class="flex items-center text-danger mb-4">
                    <i class="fas fa-exclamation-triangle text-2xl mr-3"></i>
                    <h3 class="text-lg font-bold">Delete employee record?</h3>
                </div>
                <p class="text-sm text-gray-600">This will permanently remove <strong>{{ $employee->first_name }} {{ $employee->last_name }}</strong> and all associated payroll history from ZedBankOS.</p>
            </div>
            <div class="bg-gray-50 p-4 flex justify-end space-x-3">
                <button onclick="closeDeleteModal()" class="px-4 py-2 text-gray-500 font-bold text-xs uppercase tracking-wider">Cancel</button>
                <form action="{{ route('admin.accounting.payroll.employees.destroy', $employee->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="bg-danger text-white px-6 py-2 rounded font-bold text-xs uppercase tracking-wider shadow-sm">Confirm delete</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openDeleteModal() { document.getElementById('deleteModal').classList.remove('hidden'); document.getElementById('deleteModal').classList.add('flex'); }
        function closeDeleteModal() { document.getElementById('deleteModal').classList.add('hidden'); document.getElementById('deleteModal').classList.remove('flex'); }
    </script>
</body>
</html>