<!DOCTYPE html>
<html lang="es">
<%- include('../partials/head'); %>

<body>
    <div class="container">
        <%- include('../partials/header'); %>
            <form class="d-md-flex flex-wrap" action="/reservations/editReservation/<%= reservation.id %>?_method=PUT" method="POST">
                <input type="hidden" value="_method" value="PUT">
                <div class="bg-blue p-5">
                    <h1 class="font-brand text-center text-light mb-4">Modificar reserva</h1>
                    <div class="form-group mb-3">
                        <p class="text-light"><strong>Nº de referencia:</strong>  <%= reservation.id %></p>
                    </div>
                    <div class="d-sm-flex justify-content-between">
                        <div class="form-floating mb-3">
                            <input type="date" class="form-control" name="checkin" placeholder="" value="<%= reservation.checkin.toISOString().split('T')[0] %>" required>
                            <label for="checkin">Fecha de entrada</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="date" class="form-control" name="checkout" placeholder="" value="<%= reservation.checkout.toISOString().split('T')[0] %>"
                                required>
                            <label for="checkout">Fecha de salida</label>
                        </div>
                    </div>
                    <div class="form-floating mb-3">
                        <select class="form-select" name="room[type]" id="room[type]" >
                            <!-- 'suite', 'pack suite', 'deluxe suite', 'deluxe pack suite' -->
                            <option value="<%= reservation.room.type %>" selected><%= reservation.room.type %></option>
                            <option disabled>- Seleccionar -</option>
                            <option value="suite">Suite</option>
                            <option value="pack suite">Suite familiar</option>
                            <option value="deluxe suite">Deluxe suite</option>
                            <option value="deluxe pack suite">Deluxe suite familiar</option>
                        </select>
                        <label for="room[type]">Tipo de habitación</label>
                    </div>
                    <% if (user.role == "admin" || user.role == "staff") { %>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" name="client" placeholder="<%= reservation.client %>" value="<%= reservation.client %>"
                            readonly required>
                            <label for="client">Nombre del cliente titular de la reserva</label>
                        </div>
                    <% } else {%>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" name="client"  placeholder="<%= reservation.client %>" value="<%= reservation.client %>" readonly required>
                            <label for="client">Nombre del cliente titular de la reserva</label>
                        </div>
                    <% } %>
                    <div class="form-floating mb-3">
                        <textarea class="form-control" name="observations" placeholder="Observaciones"><%= reservation.observations %></textarea>
                        <label for="observations">Observaciones</label>
                    </div>
                    <div class="form-check my-3">
                        <div class="d-flex justify-content-between">
                            <h2 class="text-light">Total a pagar: </h2>
                            <input class="form-control text-danger w-25" type="number" id="price" name="price" value="<%= reservation.price %>" readonly>
                            <p class="h2 text-light">€</p>
                        </div>
                        <p class="text-light" id="price_info"></p>
                    </div>
                </div>
                <div class="p-5">
                    <div id="pets" class="">
                        <% if (petsList.length == 0) { %>
                        <p><b>Para realizar una reserva debe tener registradas mascotas.
                                ¿Quiere registrar una mascota? Haga click <a href="../pets/addPet">aquí</a>
                            </b></p>
                        <% } else {%>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">Añadir</th>
                                    <th scope="col">Mascota</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% petsList.forEach(pet => { %>
                                    <tr>
                                        <td>
                                            <div class="form-check form-switch">
                                                <% if (reservation.pets.includes(pet.id)) { %>
                                                    <input class="form-check-input" type="checkbox" role="switch" id="<%= pet.id %>" value="<%= pet.id %>" name="pets" checked>
                                                <% } else {%>
                                                    <input class="form-check-input" type="checkbox" role="switch" id="<%= pet.id %>" value="<%= pet.id %>" name="pets">
                                                <% } %>
                                            </div>
                                        </td>
                                        <td><%= pet.name %></td>
                                    </tr>
                                <% }); %>
                            </tbody>
                        </table>
                        <% } %>
                        <div class="mt-5">
                            <h3 class="text-blue font-brand">Añadir cuidados deluxe...</h3>
                            <p class="text-secondary">Veterinaria, belleza, entrenamiento y personalizado</p>
                            <textarea class="form-control" name="cares" placeholder="Describe los cuidados que desees dar a tus mascotas (indica para quién)"><%= reservation.cares %></textarea>
                        </div>
                    </div>
                </div>
                <div class="text-center w-100 my-4">
                    <a href="/home" class="btn btn-secondary">
                        <i class="bi bi-x-lg"></i> 
                        Mantener reserva original
                    </a>
                    <button type="submit" class="btn btn-success bg-blue text-light">
                        <i class="bi bi-check-lg"></i> 
                        Guardar cambios de la reserva
                    </button>
                </div>
            </form>
        <%- include('../partials/footer'); %>
    </div>
</body>
</html>