@extends('layouts.app')
@section('title', $employee->name)
@section('page-title', $employee->name)

@section('content')
<div class="flex items-center gap-3 mb-5">
    <a href="{{ route('expenses.employees') }}" class="btn-secondary btn-sm">← Back</a>
    <a href="{{ route('expenses.employees.edit', $employee) }}" class="btn-primary btn-sm">Edit</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Profile card --}}
    <div class="card text-center">
        <img src="{{ $employee->photo_url }}" class="w-20 h-20 rounded-2xl mx-auto mb-3 ring-4 ring-slate-100">
        <h2 class="text-lg font-bold text-slate-800">{{ $employee->name }}</h2>
        <p class="text-sm text-slate-500">{{ $employee->designation ?? 'No designation' }}</p>
        <p class="text-xs text-slate-400 mt-1">{{ $employee->department }}</p>
        <div class="mt-3">
            <span class="{{ $employee->is_active ? 'badge-green' : 'badge-gray' }}">{{ $employee->is_active ? 'Active' : 'Inactive' }}</span>
            <span class="badge-blue ml-1 text-xs capitalize">{{ str_replace('_',' ',$employee->employment_type) }}</span>
        </div>
        <div class="mt-4 text-sm text-left space-y-2 border-t border-slate-100 pt-4">
            <div class="flex justify-between"><span class="text-slate-400">Phone</span><span>{{ $employee->phone ?: '—' }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Email</span><span class="truncate max-w-32">{{ $employee->email ?: '—' }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">PAN</span><span class="font-mono">{{ $employee->pan ?: '—' }}</span></div>
            <div class="flex justify-between"><span class="text-slate-400">Joining</span><span>{{ $employee->joining_date ? \Carbon\Carbon::parse($employee->joining_date)->format('d M Y') : '—' }}</span></div>
        </div>
    </div>

    <div class="lg:col-span-2 space-y-5">
        {{-- CTC Breakdown --}}
        <div class="card">
            <h3 class="text-sm font-bold text-slate-700 mb-4 pb-2 border-b border-slate-100">Salary Structure</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-center">
                @php
                    $gross = $employee->basic_salary + $employee->hra + $employee->other_allowances;
                    $net   = $gross - $employee->pf_employee - $employee->esi_employee;
                @endphp
                <div class="bg-slate-50 rounded-xl p-3">
                    <p class="text-xs text-slate-400">Basic</p>
                    <p class="font-bold">₹{{ number_format($employee->basic_salary, 0) }}</p>
                </div>
                <div class="bg-slate-50 rounded-xl p-3">
                    <p class="text-xs text-slate-400">HRA</p>
                    <p class="font-bold">₹{{ number_format($employee->hra, 0) }}</p>
                </div>
                <div class="bg-slate-50 rounded-xl p-3">
                    <p class="text-xs text-slate-400">Allowances</p>
                    <p class="font-bold">₹{{ number_format($employee->other_allowances, 0) }}</p>
                </div>
                <div class="bg-blue-50 rounded-xl p-3">
                    <p class="text-xs text-blue-500">Gross</p>
                    <p class="font-bold text-blue-700">₹{{ number_format($gross, 0) }}</p>
                </div>
                <div class="bg-orange-50 rounded-xl p-3">
                    <p class="text-xs text-orange-500">PF (Emp)</p>
                    <p class="font-bold text-orange-600">₹{{ number_format($employee->pf_employee, 0) }}</p>
                </div>
                <div class="bg-orange-50 rounded-xl p-3">
                    <p class="text-xs text-orange-500">ESI (Emp)</p>
                    <p class="font-bold text-orange-600">₹{{ number_format($employee->esi_employee, 0) }}</p>
                </div>
                <div class="bg-orange-50 rounded-xl p-3">
                    <p class="text-xs text-orange-500">PF (Employer)</p>
                    <p class="font-bold text-orange-600">₹{{ number_format($employee->pf_employer, 0) }}</p>
                </div>
                <div class="bg-green-50 rounded-xl p-3 border-2 border-green-200">
                    <p class="text-xs text-green-600 font-semibold">Net Take-Home</p>
                    <p class="font-bold text-green-700 text-lg">₹{{ number_format($net, 0) }}</p>
                </div>
            </div>
        </div>

        {{-- Recent Salary Payments --}}
        <div class="card p-0 overflow-hidden">
            <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
                <h3 class="text-sm font-semibold">Recent Salary Payments</h3>
                <a href="{{ route('expenses.salary') }}" class="text-xs text-brand-600 hover:underline">Process Salary →</a>
            </div>
            <table class="w-full text-sm">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="table-th">Month</th>
                        <th class="table-th text-right">Gross</th>
                        <th class="table-th text-right">Deductions</th>
                        <th class="table-th text-right">Net</th>
                        <th class="table-th">Mode</th>
                        <th class="table-th">Payslip</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse($recentPayments as $pay)
                    <tr>
                        <td class="table-td font-medium">{{ \Carbon\Carbon::parse($pay->salary_month.'-01')->format('M Y') }}</td>
                        <td class="table-td text-right">₹{{ number_format($pay->gross_salary, 0) }}</td>
                        <td class="table-td text-right text-orange-600">₹{{ number_format($pay->total_deductions, 0) }}</td>
                        <td class="table-td text-right font-bold text-green-700">₹{{ number_format($pay->net_salary, 0) }}</td>
                        <td class="table-td capitalize text-slate-500">{{ $pay->payment_mode }}</td>
                        <td class="table-td">
                            <a href="{{ route('expenses.salary.payslip', $pay) }}" target="_blank" class="text-brand-600 text-xs hover:underline">📄 Download</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="py-6 text-center text-slate-400 text-sm">No salary payments yet</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection