@extends('layouts.app')
@section('title', 'Employees')
@section('page-title', 'Employee Management')

@section('content')
<div class="flex items-center justify-between mb-5">
    <div class="flex gap-2">
        <a href="{{ route('expenses.employees') }}" class="btn-primary btn-sm">👥 Employees</a>
        <a href="{{ route('expenses.salary') }}" class="btn-secondary btn-sm">💰 Salary</a>
        <a href="{{ route('expenses.index') }}" class="btn-secondary btn-sm">💸 Expenses</a>
    </div>
    <a href="{{ route('expenses.employees.create') }}" class="btn-primary">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
        Add Employee
    </a>
</div>

<div class="card p-0 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="table-th">Employee</th>
                    <th class="table-th">Department</th>
                    <th class="table-th">Type</th>
                    <th class="table-th">Joining Date</th>
                    <th class="table-th text-right">Basic Salary</th>
                    <th class="table-th text-right">Gross</th>
                    <th class="table-th text-right">Net</th>
                    <th class="table-th">Status</th>
                    <th class="table-th text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($employees as $emp)
                @php
                    $gross = $emp->basic_salary + $emp->hra + $emp->other_allowances;
                    $net   = $gross - $emp->pf_employee - $emp->esi_employee;
                @endphp
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="table-td">
                        <div class="flex items-center gap-3">
                            <img src="{{ $emp->photo_url }}" class="w-9 h-9 rounded-xl object-cover ring-2 ring-slate-100">
                            <div>
                                <a href="{{ route('expenses.employees.show', $emp) }}" class="font-semibold text-slate-800 hover:text-brand-600">{{ $emp->name }}</a>
                                <p class="text-xs text-slate-400">{{ $emp->designation ?: '—' }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="table-td text-slate-500">{{ $emp->department ?: '—' }}</td>
                    <td class="table-td">
                        <span class="badge-blue text-xs capitalize">{{ str_replace('_',' ',$emp->employment_type) }}</span>
                    </td>
                    <td class="table-td text-slate-500 text-xs">
                        {{ $emp->joining_date ? \Carbon\Carbon::parse($emp->joining_date)->format('d M Y') : '—' }}
                    </td>
                    <td class="table-td text-right">₹{{ number_format($emp->basic_salary, 2) }}</td>
                    <td class="table-td text-right font-medium">₹{{ number_format($gross, 2) }}</td>
                    <td class="table-td text-right font-semibold text-green-700">₹{{ number_format($net, 2) }}</td>
                    <td class="table-td">
                        <span class="{{ $emp->is_active ? 'badge-green' : 'badge-gray' }}">{{ $emp->is_active ? 'Active' : 'Inactive' }}</span>
                    </td>
                    <td class="table-td text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ route('expenses.employees.show', $emp) }}" class="p-1.5 text-slate-400 hover:text-brand-600 rounded-lg hover:bg-brand-50">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </a>
                            <a href="{{ route('expenses.employees.edit', $emp) }}" class="p-1.5 text-slate-400 hover:text-blue-600 rounded-lg hover:bg-blue-50">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="py-16 text-center text-slate-400">
                    <p class="font-medium">No employees added yet</p>
                    <a href="{{ route('expenses.employees.create') }}" class="text-brand-600 text-sm hover:underline mt-1 inline-block">Add first employee</a>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($employees->hasPages())
    <div class="p-4 border-t border-slate-100">{{ $employees->links() }}</div>
    @endif
</div>
@endsection