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

@section('content')
<div class="page-header">
    <h1><i class="fas fa-users" style="color:#0097c4"></i> Employee Management</h1>
    <a href="{{ route('employees.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Employee
    </a>
</div>

<!-- Search & Filter -->
<form method="GET" action="{{ route('employees.index') }}">
    <div style="background:white; border:1px solid #e2e8f0; border-radius:10px; padding:16px; margin-bottom:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;">
        <div style="flex:1; min-width:180px;">
            <label style="font-size:0.8rem; font-weight:500; display:block; margin-bottom:5px;">Search</label>
            <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Name, ID, Designation...">
        </div>
        <div style="flex:1; min-width:150px;">
            <label style="font-size:0.8rem; font-weight:500; display:block; margin-bottom:5px;">Department</label>
            <select name="department_id" class="form-control">
                <option value="">All</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex:1; min-width:120px;">
            <label style="font-size:0.8rem; font-weight:500; display:block; margin-bottom:5px;">Status</label>
            <select name="status" class="form-control">
                <option value="">All</option>
                <option value="Active"   {{ request('status') === 'Active'   ? 'selected' : '' }}>Active</option>
                <option value="Inactive" {{ request('status') === 'Inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
        <div style="flex-shrink:0; display:flex; gap:8px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
            <a href="{{ route('employees.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i> Reset</a>
        </div>
    </div>
</form>

<div class="card">
    <div class="card-header">
        <i class="fas fa-list"></i> Employees ({{ $employees->total() }})
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Photo</th><th>RG-ID</th><th>Name</th><th>Designation</th>
                    <th>Department</th><th>Section</th><th>Status</th>
                    <th>Joining Date</th><th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($employees as $emp)
                <tr>
                    <td>
                        @if($emp->photo)
                            <img src="{{ asset('storage/'.$emp->photo) }}" style="width:38px;height:38px;border-radius:50%;object-fit:cover;">
                        @else
                            <div style="width:38px;height:38px;border-radius:50%;background:#e0f5fb;color:#0097c4;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;">
                                {{ strtoupper(substr($emp->name,0,1)) }}
                            </div>
                        @endif
                    </td>
                    <td><strong>{{ $emp->rg_id }}</strong></td>
                    <td>{{ $emp->name }}</td>
                    <td>{{ $emp->designation ?? '—' }}</td>
                    <td>{{ $emp->department?->name ?? '—' }}</td>
                    <td>{{ $emp->section?->name ?? '—' }}</td>
                    <td>
                        <span class="badge {{ $emp->status === 'Active' ? 'badge-success' : 'badge-danger' }}">
                            {{ $emp->status }}
                        </span>
                    </td>
                    <td>{{ $emp->joining_date->format('d M Y') }}</td>
                    <td>
                        <div class="flex gap-2">
                            <a href="{{ route('employees.show', $emp) }}" class="btn btn-outline btn-sm" title="View"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('employees.edit', $emp) }}" class="btn btn-primary btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('employees.destroy', $emp) }}" onsubmit="return confirm('Delete this employee?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" title="Delete"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center" style="padding:30px; color:#94a3b8;">
                        <i class="fas fa-search" style="font-size:1.5rem; display:block; margin-bottom:8px;"></i>
                        No employees found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($employees->hasPages())
        <div style="padding:16px;">{{ $employees->links() }}</div>
    @endif
</div>
@endsection