<!-- hero -->
<div class="d-md-flex">
    <div class="col-md-3">
        <img src="<%= user.avatar %>" alt="Persona" class="cover" />
    </div>
    <div class="col-md p-5 text-center">
        <h1 class="font-brand">Hola, <%= user.name %></h1>
        <p class="px-5">
            Aquí te mostramos tu espacio personal donde puedes gestionar tu perfil, tus mascotas y tus reservas
        </p>
        <a href="/users/editUser" class="btn btn-secondary bg-blue rounded-0 border-0 shadow"><i class="bi bi-pencil-square"></i> Editar perfil</a>
    </div>
</div>
<!-- menu -->
<div class="bg-dark">
    <ul class="nav justify-content-center py-2">
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="/reservations"><i class="bi bi-journal-bookmark"></i> Mis reservas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="#pets"><i class="bi bi-hearts"></i> Mis mascotas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-light font-brand" href="/services"><i class="bi bi-calendar-heart"></i> Mis servicios</a>
        </li>
    </ul>
</div>
<!-- reservations  -->
<div class="bg-grey my-0 pb-5">
    <h2 class="font-brand text-center py-5 my-0">Próxima reserva</h2>
    <% if (reservationsList.length == 0) { %>
        <div class="text-center mx-auto">
            <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 {%>
        <% reservationsList.forEach(reservation => { %>
            <!-- card -->
            <div class="side-border mx-5 shadow ps-3 py-3 mb-4">
                <div class="d-md-flex flex-wrap justify-content-between">
                    <h3 class="m-3">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>
                    <a href="/reservations/generatePDF/<%= reservation.id %>" target="_blank" class="text-dark text-decoration-none m-3 pe-4"><i class="bi bi-filetype-pdf"></i> Ver PDF</a>
                </div>
                <div class="ms-3 d-md-flex">
                    <div class="w-75">
                        <p>Referencia de la reserva: <span><%= reservation.id %></span> <span class="id_span" id="reservation-<%= reservation.id %>"><i class="bi bi-stickies"></i></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="p-5 pb-2">
                        <% if (reservation.status == 'checked' || reservation.status == 'removed') { %>
                            <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>
                            <a href="/reservations/removeReservation/<%= reservation.id %>" class="btn btn-outline-danger w-100 mb-2 disabled"><i class="bi bi-trash"></i> Eliminar 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/removeReservation/<%= reservation.id %>" class="btn btn-outline-danger w-100 mb-2"><i class="bi bi-trash"></i> Eliminar 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>
                    </div>
                </div>
            </div>
        <% }); %>
    <% } %>
</div>
<!-- pets -->
<div class="bg-blue my-o p-5" id="pets">
    <h2 class="font-brand text-center text-light mb-5 my-0">Mis mascotas</h2>
    <% if (petsList.length == 0) { %>
        <div class="text-center mx-auto">
            <p>No tiene registrada ninguna mascota</p>
            <a href="/pets/addPet" class="btn btn-dark btn-lg my-3 rounded-0 border-0 shadow">Añadir ahora</a>
        </div>
    <% } else {%>
        <% let quantityInactive = 0 %>
        <% petsList.forEach(pet => { %>
            <!-- card -->
            <% if (pet.status == "active") { %>
                <div class="mx-5 shadow p-3 bg-light mt-3">
                    <div class="row">
                        <div class="col-3">
                            <img src="<%= pet.avatar %>" alt="Mascota-<%= pet.specie %>" class="cover">
                        </div>
                        <div class="col">
                            <h3 class="mb-3">Nombre: <%= pet.name %></h3>
                            <p>Identificador: <%= pet.id %> <span class="id_span" id="pet-<%= pet.id %>"><i class="bi bi-stickies"></i></span></p>
                            <p>Tipo: <%= pet.specie %></p>
                            <p>Raza: <%= pet.breed %></p>
                            <div class="d-md-flex">
                                <a href="/pets/editPet/<%= pet.id %>" class="btn btn-dark w-100 me-1"><i class="bi bi-pencil-square"></i> Editar mascota</a>
                                <a href="/pets/addPet" class="btn btn-success w-100 me-1"><i class="bi bi-plus-circle"></i> Añadir mascota</a>
                                <a href="/pets/removePet/<%= pet.id %>" class="btn btn-danger w-100"><i class="bi bi-trash"></i> Quitar mascota</a>
                            </div>
                        </div>
                    </div>
                </div>
            <% } else {%>
                <% quantityInactive++ %>
            <% } %>
        <% }); %>
        <% if (quantityInactive == petsList.length) { %>
            <div class="text-center mx-auto">
                <p>No tiene registrada ninguna mascota</p>
                <a href="/pets/addPet" class="btn btn-dark btn-lg my-3 rounded-0 border-0 shadow">Añadir ahora</a>
            </div>
        <% } %>
    <% } %>
</div>