<!DOCTYPE html>
<html lang="es">
    <%- include('../partials/head'); %>
    <body>
        <div class="container">
            <%- include('../partials/header'); %>
            <div>
                <% if (user == null) { %>
                    <h1>RESERVAS</h1>
                <%} else { %>
                    <% if (user.role == "staff" || user.role == "admin") { %>
                        <h1 class="font-brand text-center">Todas las reservas</h1>
                        <hr class="h-line bg-blue w-50 mx-auto mb-5">
                        <!-- diferenciar si la reserva está activa o no -->
                        <% reservationsList.forEach(reservation => { %>
                            <!-- card -->
                            <div class="mx-5 shadow pb-3 mb-4">
                                <h3 class="<%= (reservation.status == 'checked' || reservation.status == 'removed') ? 'bg-dark' : 'bg-blue' %>  text-light text-center p-4">
                                    <i class="bi bi-calendar2-week"></i> Del 
                                    <strong><%= new Date(reservation.checkin).toLocaleDateString() %></strong> al 
                                    <strong><%= new Date(reservation.checkout).toLocaleDateString() %></strong> (<%= (Math.ceil(reservation.checkout - reservation.checkin) / (1000 * 60 * 60 * 24)) %> día/s)
                                </h3>
                                <div class="ms-3 d-md-flex">
                                    <div class="w-75">
                                        <p><strong>Referencia de la reserva: <span><%= reservation.id %></span></strong> <span class="id_span" id="reservation-<%= reservation.id %>"><i class="bi bi-stickies"></i></span></p>
                                        <p><strong>Titular: <span><%= reservation.client %></span></strong></p>
                                        <p>Nº de huéspedes: <span><%= reservation.pets.length %></span></p>
                                        <p>Tipo de habitación: <span><%= reservation.room.type %></span></p>
                                        <p>Observaciones: <span><%= reservation.observations %></span></p>
                                        <p>Servicios extra: <span><%= reservation.cares %></span></p>
                                    </div>
                                    <div class="px-5 pb-2">
                                        <div class="d-md-flex flex-wrap mb-3 mx-auto">
                                            <p class="h3">
                                                <i class="bi bi-tags"></i> 
                                                <% if (reservation.checkin < new Date()) { %>
                                                    <span class="text-secondary">checked - </span>
                                                <% } else {%>
                                                    <span class="text-secondary"><%= reservation.status %> - </span>
                                                <% } %> 
                                                <span> <strong> <%= reservation.price %> €</strong></span>
                                            </p>
                                            <a href="/reservations/generatePDF/<%= reservation.id %>" target="_blank" class="text-dark text-decoration-none ms-4"><i class="bi bi-filetype-pdf"></i> Ver PDF</a>
                                        </div>
                                        <a href="/reservations/editReservation/<%= reservation.id %>" 
                                            class="btn btn-outline-dark w-100 mb-2 <%= (reservation.checkin < new Date()) ? 'disabled' : '' %>">
                                            <i class="bi bi-pencil-square"></i> 
                                            Editar reserva
                                        </a>
                                        <a href="/reservations/addReservation" class="btn btn-outline-success w-100 mb-2"><i class="bi bi-plus-circle"></i> Añadir nueva reserva</a>
                                        <a href="/reservations/removeReservation" 
                                            class="btn btn-outline-danger w-100 mb-2 <%= (reservation.checkin < new Date()) ? 'disabled' : '' %>">
                                            <i class="bi bi-trash"></i> Eliminar reserva
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <% }); %>
                    <% } %>
                <% } %>
            </div>
            <%- include('../partials/footer'); %>
        </div>
    </body>
</html>    