@extends('layouts.app')

@section('title', 'Atendimentos')

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold mb-4">Atendimentos</h2>
    <label class="block mb-2 font-medium">Filtrar por status:</label>
    <select @change="status = $event.target.value" x-data="{ status: 'todos' }" class="p-2 border rounded mb-6">
        <option value="todos">Todos</option>
        <option value="aberto">Aberto</option>
        <option value="andamento">Em Andamento</option>
        <option value="concluido">Concluído</option>
    </select>

    <table class="w-full table-auto bg-white rounded shadow">
        <thead class="bg-gray-200">
            <tr>
                <th class="p-2 text-left">Protocolo</th>
                <th class="p-2 text-left">Cliente</th>
                <th class="p-2 text-left">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr x-show="status === 'todos' || status === 'aberto'" class="border-t">
                <td class="p-2">#001</td>
                <td class="p-2">Empresa X</td>
                <td class="p-2">Aberto</td>
            </tr>
            <tr x-show="status === 'todos' || status === 'andamento'" class="border-t">
                <td class="p-2">#002</td>
                <td class="p-2">Empresa Y</td>
                <td class="p-2">Em Andamento</td>
            </tr>
            <tr x-show="status === 'todos' || status === 'concluido'" class="border-t">
                <td class="p-2">#003</td>
                <td class="p-2">Empresa Z</td>
                <td class="p-2">Concluído</td>
            </tr>
        </tbody>
    </table>
</div>
@endsection