@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Call Center Agents</h4>
        <div class="text-secondary small mt-1">Manage agents, roles, mapped extensions, and current states.</div>
    </div>
    <a href="{{ route('call-center.agents.create') }}" class="btn btn-primary btn-sm">Add Agent</a>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Extension</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($agents as $agent)
                    <tr>
                        <td class="font-monospace">{{ $agent->agent_code }}</td>
                        <td>{{ $agent->name }}</td>
                        <td>{{ $agent->extension ?: '—' }}</td>
                        <td>{{ ucfirst($agent->role) }}</td>
                        <td><span class="badge {{ $agent->status === 'available' ? 'bg-success' : ($agent->status === 'offline' ? 'bg-secondary' : 'bg-warning') }}">{{ ucfirst(str_replace('_', ' ', $agent->status)) }}</span></td>
                        <td class="text-end"><a href="{{ route('call-center.agents.edit', $agent) }}" class="btn btn-outline-primary btn-sm">Edit</a></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-secondary py-4">No agents found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-3">{{ $agents->links() }}</div>
@endsection