<table class="min-w-full">
    <thead class="bg-orange-500">
        <tr>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-auto">Chamado</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[200px]">Título</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[150px]">Abertura</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[150px]">Vencimento</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[200px]">Cliente</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[200px]">Solicitante</th>
            <th class=" px-4 py-1 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[200px]">Atendimento</th>
            <th class="px-4 py-2 text-xs font-medium tracking-wider text-gray-200 uppercase text-center w-[120px]">Total</th>
        </tr>
    </thead>
    <tbody>
        @foreach($chamadosDetalhadosComTempo as $chamado)
        <tr class="bg-gray-900 " data-chamado-id="{{ $chamado['chamadoId'] }}">
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ $chamado['chamadoId'] ?? '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ $chamado['titulo'] ?? '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ !empty($chamado['abertura']) ? formatarDataHora($chamado['abertura']) : '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ !empty($chamado['vencimento']) ? formatarDataHora($chamado['vencimento']) : '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ $chamado['nomeCliente'] ?? '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">{{ $chamado['usuarioSolicitante'] ?? '-' }}</td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm flex items-center justify-center space-x-7 ">
                <div class="relative w-[40px] h-[40px] inline-block">
                    <button id="startBtn_{{ $chamado['chamadoId'] }}" class="play-btn absolute inset-0">
                        <box-icon color="green" name="play-circle"></box-icon>
                    </button>
                    <button id="stopBtn_{{ $chamado['chamadoId'] }}" class="stop-btn absolute inset-0 hidden">
                        <box-icon name="pause-circle" color="red"></box-icon>
                    </button>
                </div>
                <span id="timer_{{ $chamado['chamadoId'] }}" class="timer text-gray-200 ml-2 w-[50px] text-center">00:00</span>
            </td>
            <td class="px-2 py-1 text-xs font-medium text-center text-gray-200 sm:px-4 sm:py-2 sm:text-sm w-[50px]">
                {{ $chamado['tempoGasto'] ?? '00:00' }}
            </td>
        </tr>
        @endforeach
    </tbody>
</table>