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

<body>
    <div class="container">
        <%- include('../partials/header'); %>
            <form action="/reservations/addReservation" method="POST" class="d-md-flex flex-wrap">
                <div class="bg-blue p-5">
                    <h1 class="font-brand text-center text-light mb-4">Nueva reserva</h1>
                    <div class="d-md-flex justify-content-between">
                        <div class="form-floating mb-3">
                            <input type="date" class="form-control" name="checkin" placeholder="Fecha de entrada"
                                autofocus required id="checkin">
                            <label for="checkin">Fecha de entrada</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="date" class="form-control" name="checkout" placeholder="Fecha de salida"
                                required id="checkout">
                            <label for="checkout">Fecha de salida</label>
                        </div>
                    </div>
                    <div class="form-floating mb-3">
                        <select class="form-select" name="roomType" id="roomType">
                            <!-- 'suite', 'pack suite', 'deluxe suite', 'deluxe pack suite' -->
                            <option disabled selected>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="roomType">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="Nombre del cliente titular"
                            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" value="<%= user.username %>" placeholder="<%= user.username %>" 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"></textarea>
                        <label for="observations">Observaciones</label>
                    </div>
                    <div class="form-check my-3">
                        <input class="form-check-input" type="checkbox" value="true" id="policies" name="policies"
                            checked>
                        <label class="form-check-label text-light" for="policies">Acepto las políticas de privacidad</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" 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">
                                                <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)"></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> 
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-success bg-blue text-light"><i class="bi bi-check-lg"></i>
                        Reservar
                    </button>
                </div>
            </form>
        <%- include('../partials/footer'); %>
    </div>
</body>
</html>