<!DOCTYPE html>
<html lang="es">
    <%- include('../partials/head'); %>
    <body>
        <div class="container">
            <%- include('../partials/header'); %>
            <div>
                <% if (user == null) { %>
                    <h1>RESERVAS</h1>
                <%} else { %>
                    <% if (reservationsList.length == 0) { %>
                        <% if (user.role == "admin" || user.role == "staff") { %>
                            <div class="text-center mx-auto p-3">
                                <p>¿Deseas ver el listado de todas las reservas?</p>
                                <a href="/reservations/listReservations" class="btn btn-secondary btn-lg bg-blue my-3 rounded-0 border-0 shadow"><i class="bi bi-card-list"></i> Listar reservas</a>
                            </div>
                        <%} else { %>
                            <div class="text-center mx-auto p-3">
                                <p>No tiene ninguna reserva activa en estos momentos</p>
                                <a href="/reservations/addReservation" class="btn btn-secondary btn-lg bg-blue my-3 rounded-0 border-0 shadow">Reservar ahora</a>
                            </div>
                        <% } %>
                    <%} else { %>
                        <h1 class="font-brand text-center">Mis 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">
                                <% if (reservation.checkin < new Date()) { %>
                                    <h3 class="bg-dark 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>
                                <% } else {%>
                                    <h3 class="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>Referencia de la reserva: <span><%= reservation.id %></span></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>
                                        <% if (reservation.checkin < new Date()) { %>
                                            <a href="/reservations/editReservation/<%= reservation.id %>" class="btn btn-outline-dark w-100 mb-2 disabled"><i class="bi bi-pencil-square"></i> Editar reserva</a>
                                        <% } else {%>
                                            <a href="/reservations/editReservation/<%= reservation.id %>" class="btn btn-outline-dark w-100 mb-2"><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"><i class="bi bi-trash"></i> Eliminar reserva</a>
                                    </div>
                                </div>
                            </div>
                        <% }); %>
                    <% } %>
                <% } %>
            </div>
            <%- include('../partials/footer'); %>
        </div>
    </body>
</html>    