JS

<div class="table-responsive">
    <table class="table table-sm table-bordered w-100">
        <thead>
            <tr>
                <th colspan="18">
                    <div class="d-flex justify-content-around align-items-center">
                        <div class="form-check form-switch" style="font-size: 1.1rem;">
                            <input class="form-check-input clicavel" type="checkbox" id="filtroConcluidas" (change)="filtrei()" [(ngModel)]="filtroInativos">
                            <label class="form-check-label clicavel" for="filtroConcluidas" style="vertical-align: middle;">Mostrar concluídas</label>
                          </div>
                        <span style="font-size: 1.1rem">RESERVAS (Dia {{ arrayDiasTela[0].data | date:'shortDate' }} ao {{ arrayDiasTela.slice(-1)[0].data | date:'shortDate'}})</span>
                        <div class="d-flex justify-content-center gap-1">
                            <button class="btn btn-info btn-sm" (click)="mesAnterior()" title="Quinzena anterior"><</button>
                            <button class="btn btn-warning btn-sm" (click)="voltarHoje()" title="Filtrar hoje">HOJE</button>
                            <button class="btn btn-info btn-sm" (click)="proximoMes()" title="Próxima quinzena">></button>
                        </div>

                    </div>

                </th>
            </tr>
            <tr>
                <th title="Quartos" class="infoQuarto"><img class="w-50" src="/assets/icone-quartos.svg" alt="Ícone de quartos"></th>
                <th [title]="dia.data | date:'longDate'" [id]="dia.data" *ngFor="let dia of arrayDiasTela; index as index"
                    [ngClass]="dia.data === diaHoje ? 'bg-warning': 'bg-white'">
                    <div>
                        <span>{{ dia.numero }}</span>
                        <br>
                        <span>{{ dia.dia }}</span>
                    </div>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let quarto of quartos">
                <td class="infoQuarto" [title]="quarto.estado + ' | '+ quarto.totalCamas + ' Cama(s)' " (click)="mostrarReservaAtual(quarto)" [ngClass]="{'bg-danger': checarEstadoQuarto(quarto) === 'ocupado', 'bg-success': checarEstadoQuarto(quarto) === 'livre', 'bg-black': checarEstadoQuarto(quarto) === 'manutencao'}">
                    <div class="w-100 h-100 d-flex flex-column justify-content-around" style="color: white;">
                        <div class="d-flex justify-content-center gap-1">
                            <span style="color: white; height: 10px;">N°</span>
                            <span style="color: white; height: 10px;">{{ quarto.numero }}</span>
                        </div>
                        <div class="d-flex justify-content-center gap-1 mx-1">
                            <img src="/assets/icone-cama.svg" alt="Ícone de cama." style="width: 40%">
                            <span style="font-size: 1rem;">{{ quarto?.totalCamas }}</span>
                        </div>
                    </div>
                </td>
                @for (dia of arrayDiasTela; track dia.data){
                    
                        @switch (checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).resultado) {
                            @case ("dia-especifico") {
                                    @switch (checarReservaQuartoSaidaDia(quarto.reservas, dia.data).resultado){
                                        @case("dia-checkout"){
                                            <td [title]="dia.data | date:'longDate'">
                                            <div class="d-flex justify-content-around gap-3">
                                                <span (click)="validarReservaSaidaDiaEspecifico(quarto.reservas, dia, quarto)" class="btn dia-saida-dividido" [title]="checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.cliente?.nome" [ngClass]="{'btn-danger': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                                    </span>
                                                <span (click)="validarReservaEspecificoDiaEntrada(quarto.reservas, dia, quarto)" class="btn dia-entrada-dividido" [title]="checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.cliente?.nome" [ngClass]="{'btn-danger': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                                    {{ checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase }}</span>
                                            </div>
                                        </td>
                                        } 
                                        @default {
                                            <td [title]="dia.data | date:'longDate'">

                                            
                                            <span (click)="validarReservaOuNao(quarto.reservas, dia, quarto)" class="btn dia-entrada-solo" [title]="checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase" [ngClass]="{'btn-danger': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                                {{ checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase }}</span>
                                                </td>
                                        }
                                    }
                            }
                            @case ("dia-checkout") {
                                <td [title]="dia.data | date:'longDate'">
                                <div class="d-flex justify-content-around gap-3">
                                    <span (click)="validarReservaSaidaDiaEspecifico(quarto.reservas, dia, quarto)" class="btn dia-saida-dividido" [title]="checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase" [ngClass]="{'btn-danger': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoSaidaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                        </span>
                                    <span (click)="validarReservaEspecificoDiaEntrada(quarto.reservas, dia, quarto)" class="btn dia-entrada-dividido" [ngClass]="{'btn-danger': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                        {{ checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase }}</span>
                                </div>
                                </td>
                            }
                            @case ("entre-dias") {
                                <td [title]="dia.data | date:'longDate'">
                                    <span (click)="validarReservaOuNao(quarto.reservas, dia, quarto)" class="btn entre-dias" [title]="checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.cliente?.nome | uppercase" [ngClass]="{'btn-danger': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoDiaEspecifico(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}">
                                        </span>
                                </td>
                            }
                            @default {
                                <td [title]="dia.data | date:'longDate'">
                                <span (click)="validarReservaOuNao(quarto.reservas, dia, quarto)" class="btn vago" [ngClass]="{'btn-danger': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkin', 'btn-warning': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado', 'btn-primary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'reservado-pg', 'btn-secondary': checarReservaQuartoEntradaDia(quarto.reservas, dia.data).reserva?.estadoReserva?.toLowerCase() === 'checkout'}"></span>
                                </td>
                            }
                        }

                }

            </tr>
            <tr *ngIf="quartos.length <= 0 && telaCarregamento === false;">
                <td colspan="20">Não existem quartos</td>
            </tr>
        </tbody>

    </table>

</div>