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

@section('content')

<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;">
    <div style="font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;">{{ $employees->count() }} TOTAL</div>
    <a href="{{ route('admin.employees.create') }}" class="tm-btn tm-btn-primary">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        ADD EMPLOYEE
    </a>
</div>

@if(session('success'))
<div style="background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#86efac;display:flex;align-items:center;gap:8px;">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="glass-card">
    <div class="section-header">
        <div class="section-title">Team Members</div>
    </div>
    <div class="table-wrap">
    <table class="data-table" style="min-width:580px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email / Handle</th>
                <th>Role</th>
                <th>Status</th>
                <th>Orders</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @forelse($employees as $emp)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#ef4444,#991b1b);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;">
                            {{ strtoupper(substr($emp->name,0,1)) }}
                        </div>
                        <span style="color:var(--text);font-weight:500;font-size:13px;">{{ $emp->name }}</span>
                    </div>
                </td>
                <td>
                    <div style="color:var(--muted);font-size:12px;">{{ $emp->email }}</div>
                    @if($emp->handle)<div style="color:#94a3b8;font-size:11px;font-family:'JetBrains Mono',monospace;">{{ $emp->handle }}</div>@endif
                </td>
                <td>
                    <span style="background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--muted);text-transform:uppercase;">
                        {{ str_replace('_',' ',$emp->role) }}
                    </span>
                </td>
                <td>
                    @if($emp->is_active)
                    <span class="badge" style="background:rgba(34,197,94,0.1);color:#86efac;border:1px solid rgba(34,197,94,0.2);">
                        <span class="badge-dot" style="background:#22c55e;box-shadow:0 0 4px #22c55e;"></span>ACTIVE
                    </span>
                    @else
                    <span class="badge" style="background:rgba(107,114,128,0.1);color:#9ca3af;border:1px solid rgba(107,114,128,0.2);">
                        <span class="badge-dot" style="background:#6b7280;"></span>INACTIVE
                    </span>
                    @endif
                </td>
                <td>
                    <span class="mono" style="color:#94a3b8;font-size:12px;">{{ $emp->orders()->count() }}</span>
                </td>
                <td style="text-align:right;white-space:nowrap;">
                    <a href="{{ route('admin.employees.edit', $emp) }}" class="link-red" style="margin-right:12px;">EDIT</a>
                    <form action="{{ route('admin.employees.destroy', $emp) }}" method="POST" style="display:inline;"
                          onsubmit="return confirm('Remove {{ addslashes($emp->name) }}?')">
                        @csrf @method('DELETE')
                        <button type="submit" style="background:none;border:none;color:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:color 0.15s;"
                                onmouseover="this.style.color='#ef4444'"
                                onmouseout="this.style.color='var(--muted)'">REMOVE</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" style="padding:48px;text-align:center;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;">NO EMPLOYEES YET</td></tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>
@endsection
