@extends('layouts.app')
@section('title', 'Workforce Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
        background: rgba(255,255,255,0.02);
        padding: 20px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '<a href="'.route('employees.create').'" class="final-btn final-btn-primary"><i class="bi bi-person-plus-fill"></i> Add Engineer</a>';
@endphp

@include('components.page-header', [
    'title' => 'Workforce Intelligence Directory',
    'description' => 'Manage engineer profiles, organizational roles, and department assignments with centralized intelligence.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Workforce' => '#'],
    'actions' => $actionsHtml,
    'stats' => [
        ['label' => 'Total Workforce', 'value' => $employees->total(), 'icon' => 'bi-people-fill', 'color' => 'var(--accent-cream)'],
        ['label' => 'Active Terminals', 'value' => $employees->where('status', 'active')->count(), 'icon' => 'bi-person-check-fill', 'color' => 'var(--accent-green)'],
        ['label' => 'Governance Roles', 'value' => \App\Models\Role::count(), 'icon' => 'bi-shield-lock', 'color' => 'var(--accent-yellow)']
    ]
])

<div class="final-card" style="margin-bottom: 24px;">
    <h3 class="final-card-title"><i class="bi bi-search"></i> Workforce Search</h3>
    <form method="GET" action="{{ request()->url() }}">
        <div class="filter-grid">
            <div class="relative">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search engineers..." class="final-select" style="padding-left: 40px;">
                <i class="bi bi-search" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px;"></i>
            </div>
            
            <select name="department" class="final-select">
                <option value="">All Departments</option>
                <option value="Engineering" @selected(request('department') == 'Engineering')>Engineering</option>
                <option value="Quality Assurance" @selected(request('department') == 'Quality Assurance')>Quality Assurance</option>
                <option value="Operations" @selected(request('department') == 'Operations')>Operations</option>
                <option value="Product Management" @selected(request('department') == 'Product Management')>Product Management</option>
            </select>

            <select name="status" class="final-select">
                <option value="">All Statuses</option>
                <option value="active" @selected(request('status') == 'active')>Active</option>
                <option value="inactive" @selected(request('status') == 'inactive')>Inactive</option>
                <option value="on_leave" @selected(request('status') == 'on_leave')>On Leave</option>
            </select>

            <button type="submit" class="final-btn final-btn-secondary" style="justify-content: center;">
                <i class="bi bi-filter"></i> Apply Filters
            </button>
        </div>
    </form>
</div>

<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-person-badge"></i> Engineer Manifest</h3>
        <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">AUDITED ORGANIZATIONAL DIRECTORY</span>
    </div>

    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th>Engineer Identity</th>
                    <th>Intelligence Contact</th>
                    <th>Organizational Dept</th>
                    <th>System Roles</th>
                    <th style="text-align: right;">Operations</th>
                </tr>
            </thead>
            <tbody>
                @forelse($employees as $employee)
                <tr class="group">
                    <td>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div class="final-avatar" style="width: 40px; height: 40px; border: 2px solid var(--border-color);">
                                {{ substr($employee->name, 0, 1) }}
                            </div>
                            <div>
                                <div style="font-weight: 800; font-size: 14px; color: var(--text-primary);">{{ $employee->name }}</div>
                                <div style="font-size: 10px; color: var(--accent-color); font-weight: 800; text-transform: uppercase;">{{ $employee->employeeProfile?->job_title ?? 'Software Engineer' }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">{{ $employee->email }}</span>
                    </td>
                    <td>
                        <span class="final-badge badge-email">{{ $employee->employeeProfile?->department ?? 'General' }}</span>
                    </td>
                    <td>
                        <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                            @forelse($employee->roles as $role)
                                <span class="final-badge badge-inapp" style="font-size: 9px;">{{ $role->name }}</span>
                            @empty
                                <span style="font-size: 10px; color: var(--text-secondary); font-style: italic;">No Roles</span>
                            @endforelse
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <div style="display: flex; justify-content: flex-end; gap: 8px;">
                            <a href="{{ route('employees.edit', $employee) }}" class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px;">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <form action="{{ route('employees.destroy', $employee) }}" method="POST" onsubmit="return confirm('Remove this engineer from directory?')" style="display: inline;">
                                @csrf @method('DELETE')
                                <button class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px; color: var(--danger-color); border-color: rgba(244, 63, 94, 0.1);">
                                    <i class="bi bi-person-x"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5">
                        <div class="final-empty-state">
                            <i class="bi bi-people"></i>
                            <p>No organizational engineers discovered</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($employees->hasPages())
    <div style="margin-top: 32px;">
        {{ $employees->links() }}
    </div>
    @endif
</div>

@endsection