@php use Carbon\Carbon; @endphp
<x-generic-layout>
    <div class="flex flex-col bg-[#DD6B3B] h-[10vh] justify-center flex-wrap px-6 md:px-24">
        <a href="{{ route('welcome') }}" class="text-base text-white font-semibold">
            <i class="fa-solid fa-arrow-left"></i> Voltar ao início
        </a>

    </div>


    <div class="h-auto md:h-[60vh] overflow-x-auto p-4 md:p-6 lg:p-12">
        <div class="mb-[2rem]">
            <a href="{{ route('reservas-salas.create') }}"
               class="btn bg-[#dd6b3b] text-white hover:bg-[#dd6b1b]">
                Nova Reserva de sala
            </a>
        </div>
        <div class="shadow-lg rounded-lg overflow-x-auto border border-gray-200">
            <table class="min-w-full table-auto">
                <thead class="bg-[#DD6B3B] text-white">
                <tr>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Confirmada</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Responsável</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Assunto</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Sala</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Início</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Fim</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Quantidade de pessoas
                    </th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Água</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Café</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Notebook</th>
                    <th class="py-3 px-4 text-left text-sm font-bold uppercase tracking-wider">Observações</th>
                    <th></th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                @forelse ($reservas as $reservaSala)
                    <tr class="hover:bg-gray-50 transition-colors duration-200">
                        <td class="py-3 px-4 text-sm text-gray-700">
                            @if($reservaSala->confirmada)
                                <i class="fa-solid text-xl fa-check text-green-500"></i>
                            @else
                                <i class="fa-solid text-xl fa-xmark-circle text-red-500"></i>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $reservaSala->responsavel->name }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $reservaSala->assunto }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $reservaSala->sala->getDescricao() }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{  Carbon::parse($reservaSala->inicio)->format('d/m - H:i') }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ Carbon::parse($reservaSala->fim)->format('d/m - H:i') }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $reservaSala->quantidade_pessoas }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">
                            @if($reservaSala->agua)
                                <i class="fa-solid text-xl fa-check text-green-500"></i>
                            @else
                                <i class="fa-solid text-xl fa-xmark-circle text-red-500"></i>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-700">
                            @if($reservaSala->cafe)
                                <i class="fa-solid text-xl fa-check text-green-500"></i>
                            @else
                                <i class="fa-solid text-xl fa-xmark-circle text-red-500"></i>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-700">
                            @if($reservaSala->notebook)
                                <i class="fa-solid text-xl fa-check text-green-500"></i>
                            @else
                                <i class="fa-solid text-xl fa-xmark-circle text-red-500"></i>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $reservaSala->observacoes }}</td>
                        <td class="py-3 px-4 text-sm text-gray-700">
                            <a href="{{route('reservas-salas.show', $reservaSala->id)}}" class="btn btn-circle btn-warning">
                                <i class="fa-solid fa-pen" title="Editar"></i>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr class="bg-white">
                        <td colspan="13" class="py-8 text-center text-gray-500 text-lg">Sem registros no momento.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</x-generic-layout>