@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">
        <div class="w-full">
            <a href="{{ route('reservas-salas.index') }}" class="text-base text-white font-semibold">
                <i class="fa-solid fa-arrow-left"></i> Voltar à lista
            </a>
        </div>
    </div>

    <div class="md:h-[80vh] p-4 md:p-6 lg:p-12">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Detalhes da Reserva</h1>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <p class="text-lg font-semibold text-gray-700 uppercase">Responsáveis</p>
                    <p class="mt-1 text-gray-800 font-medium">Responsável:</p>
                    <p class="text-gray-700">{{ $reservaSala->responsavel->name }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Responsável Exclusão:</p>
                    <p class="text-gray-700">{{ $reservaSala->responsavelExclusao->name ?? 'Não Informado' }}</p>
                </div>

                <div>
                    <p class="text-lg font-semibold text-gray-700 uppercase">Dados da Solicitação</p>
                    <p class="mt-2 text-gray-800 font-medium">Sala:</p>
                    <p class="text-gray-700">{{ $reservaSala->sala->getDescricao() }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Início:</p>
                    <p class="text-gray-700">{{ Carbon::parse($reservaSala->inicio)->format('d/m/Y H:i') }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Fim:</p>
                    <p class="text-gray-700">{{ Carbon::parse($reservaSala->fim)->format('d/m/Y H:i') }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Data da Solicitação:</p>
                    <p class="text-gray-700">{{ Carbon::parse($reservaSala->created_at)->format('d/m/Y H:i') }}</p>
                </div>

                <div>
                    <p class="mt-1 text-gray-800 font-medium">Quantidade de pessoas:</p>
                    <p class="text-gray-700">{{ $reservaSala->quantidade_pessoas }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Assunto:</p>
                    <p class="text-gray-700">{{ $reservaSala->assunto }}</p>
                    <p class="mt-2 text-gray-800 font-medium">Água:
                        <span class="font-normal">{{ $reservaSala->agua ? 'Sim' : 'Não' }}</span>
                    </p>
                    <p class="mt-2 text-gray-800 font-medium">Café:
                        <span class="font-normal">{{ $reservaSala->cafe ? 'Sim' : 'Não' }}</span>
                    </p>
                    <p class="mt-2 text-gray-800 font-medium">Notebook:
                        <span class="font-normal">{{ $reservaSala->notebook ? 'Sim' : 'Não' }}</span>
                    </p>
                    @if($reservaSala->observacoes)
                        <p class="mt-2 text-gray-800 font-medium">Observações:</p>
                        <p class="text-gray-700">{{ $reservaSala->observacoes }}</p>
                    @endif
                    <span
                        class="inline-block px-2 py-1 leading-none rounded-full text-xs font-semibold mt-4 uppercase {{ $reservaSala->confirmada ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                        {{ $reservaSala->confirmada ? 'Confirmada' : 'Aguardando confirmação' }}
                    </span>
                </div>
            </div>

            @if($reservaSala->responsavel_id === auth()->id())
                <div class="mt-8 pt-6 border-t border-gray-200 flex justify-end space-x-4">
                    <a href="{{ route('reservas-salas.edit', $reservaSala->id) }}"
                       class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-200">
                        <i class="fa-solid fa-edit"></i> Editar
                    </a>

                    @if($reservaSala->confirmada)
                        <form action="{{ route('reservas-salas.unconfirm', $reservaSala->id) }}" method="POST">
                            @method('PATCH')
                            @csrf
                            <button type="submit" class="btn btn-warning">
                                Desconfirmar
                            </button>
                        </form>
                    @else
                        <form action="{{ route('reservas-salas.confirm', $reservaSala->id) }}" method="POST">
                            @method('PATCH')
                            @csrf
                            <button type="submit" class="btn btn-accent">
                                Confirmar
                            </button>
                        </form>
                    @endif

                    <form action="{{ route('reservas-salas.destroy', $reservaSala->id) }}" method="POST"
                          onsubmit="return confirm('Tem certeza que deseja excluir esta reserva?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition duration-200">
                            <i class="fa-solid fa-trash"></i> Excluir
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>
</x-generic-layout>