@extends('layouts.app')

@push('style')
<style>
.q-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; font-size: .8rem; }
.q-stat-grid > div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px; }
.q-stat-grid .label { color: #94a3b8; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.q-stat-grid .val { font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.q-stat-grid .val.callers { color: #2563eb; }
.q-stat-grid .val.callers.warn { color: #d97706; }
.q-stat-grid .val.callers.bad { color: #dc2626; }
.q-stat-grid .val.agents { color: #16a34a; }
.q-row-num { font-family: SFMono-Regular, Menlo, monospace; font-weight: 700; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0 d-flex align-items-center gap-2">
            <i data-lucide="users" style="width:20px;height:20px;color:#3b82f6;"></i>
            Call Center Queues
        </h4>
        <div class="text-secondary small mt-1">Create and manage ACD queues with failover, break-out, and announcements.</div>
    </div>
    <a href="{{ route('call-center.queues.create') }}" class="btn btn-primary btn-sm">
        <i data-lucide="plus" style="width:14px;height:14px;"></i> Add Queue
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
                <tr>
                    <th>Queue</th>
                    <th class="text-center" style="width:90px;">Number</th>
                    <th>Strategy</th>
                    <th class="text-center" style="width:90px;">Members</th>
                    <th>Live Status</th>
                    <th class="text-center" style="width:80px;">Status</th>
                    <th class="text-end" style="width:140px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($queues as $queue)
                    @php
                        $live = $liveStatus[$queue->number] ?? null;
                        $callers = $live['callers'] ?? 0;
                        $callersClass = $callers === 0 ? '' : ($callers < $queue->max_callers / 2 ? '' : ($callers < $queue->max_callers ? 'warn' : 'bad'));
                    @endphp
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $queue->name }}</div>
                            <div class="text-secondary small">{{ $queue->members_count }} members configured</div>
                        </td>
                        <td class="text-center q-row-num">{{ $queue->number }}</td>
                        <td class="small">{{ $queue->strategy }}</td>
                        <td class="text-center">{{ $queue->members_count }}</td>
                        <td>
                            @if($live)
                                <div class="q-stat-grid">
                                    <div>
                                        <div class="label">Waiting</div>
                                        <div class="val callers {{ $callersClass }}">{{ $callers }}</div>
                                    </div>
                                    <div>
                                        <div class="label">Hold</div>
                                        <div class="val">{{ $live['holdtime'] ?? 0 }}s</div>
                                    </div>
                                    <div>
                                        <div class="label">Done</div>
                                        <div class="val">{{ $live['completed'] ?? 0 }}</div>
                                    </div>
                                    <div>
                                        <div class="label">Aband.</div>
                                        <div class="val">{{ $live['abandoned'] ?? 0 }}</div>
                                    </div>
                                </div>
                            @else
                                <span class="text-secondary small">Not loaded in Asterisk</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge {{ $queue->is_active ? 'bg-success' : 'bg-secondary' }}">
                                {{ $queue->is_active ? 'Active' : 'Disabled' }}
                            </span>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('call-center.queues.edit', $queue) }}" class="btn btn-outline-primary btn-sm">
                                <i data-lucide="edit-2" style="width:12px;height:12px;"></i> Edit
                            </a>
                            <form method="POST" action="{{ route('call-center.queues.destroy', $queue) }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm"
                                    onclick="return confirm('Delete queue {{ $queue->name }}?')">
                                    <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-secondary py-5">
                            <i data-lucide="users" style="width:36px;height:36px;opacity:.3;display:block;margin:0 auto 8px;"></i>
                            No queues configured yet.<br>
                            <a href="{{ route('call-center.queues.create') }}">Create your first queue</a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($queues->hasPages())
        <div class="card-footer bg-white">{{ $queues->links() }}</div>
    @endif
</div>
@endsection