<%- include ('./layouts/header.ejs') %>

    <div class="container p-5 box" style="background-color:transparente;">
        <div class="row">
            <div action="#" class="form" style="border:1px none red;">
                <form action="/reserva" method="post">
                    <h1 class="text-center text-dark">Formulario de Reserva</h1>
                    <!-- Progress bar -->
                    <div class="progressbar text-black">
                        <div class="progress-step progress-step-active" data-title="Datos"></div>
                        <div class="progress-step" data-title="Estadia"></div>
                        <div class="progress-step" data-title="Habitaciones"></div>
                        <div class="progress-step" data-title="Pago"></div>
                        <div class="progress-step" data-title="Resumen"></div>
                    </div>

                    <!-- Steps -->
                    <!-- PARTE 1 -->
                    <div class="form-step-active form-step col-12 text-dark">
                        <div class="row ">
                            <div class="col-md-6" style="border: 1px none red;">

                                <div class="form-group">
                                    <label for="username">Nombre(s) de Titular</label>
                                    <input autocomplete="off" oninput="getData()"
                                        type="text" id="nombre_titular_input" required />
                                </div>

                                <div class="form-group">
                                    <label for="dob">Fecha de Nacimiento</label>
                                    <input autocomplete="off" value="2001-01-01" type="date" name="fecha_nac" id="fecha_nac" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Pais de Origen</label>
                                    <input autocomplete="off" type="text" name="pais_or" id="pais_or" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Tipo de Documento</label>
                                    <select oninput="getData()" class="form-select mySelect" id="myselectDocumento"
                                        style="width: 100%">
                                        <option value="DNI">DNI</option>
                                        <option value="PASAPORTE">PASAPORTE</option>
                                        <option value="OTRO ">OTRO</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="position">Correo Electronico</label>
                                    <input autocomplete="off" type="text" id="email_input" required />
                                </div>

                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="position">Apellidos</label>
                                    <input oninput="getData()" type="text" id="apellidos_input" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Número de Referencia</label>
                                    <input type="text" name="nro_telefono" id="nro_telefono" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Ciudad</label>
                                    <input type="text" name="ciudad" id="" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Número Documento</label>
                                    <input oninput="getData()" type="text" id="nro_documento_input" />
                                </div>

                                <div class="mt-4">
                                    <br>
                                    <a href="#" role="button" onclick="modalstep1()"
                                        class="btn btn-next width-50 mx-auto">Siguiente</a>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- PARTE 2 -->
                    <div class="form-step form-step col-12 text-dark">
                        <div class="row">
                            <div class="col-md-6">

                                <div class="pago">
                                    <label for="metodo">Numero de Huespedes</label>
                                    <select class="form-select mySelect" id="myselectHuespedes" style="width: 50%">
                                        <option value="1">1 Persona</option>
                                        <option value="2">2 Personas</option>
                                        <option value="3">3 Personas</option>
                                        <option value="4">4 Personas</option>
                                        <option value="5">5 Personas</option>
                                    </select>
                                </div>

                                <br>
                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="llegada">Fecha de Llegada</label>
                                    <input class="text-center" type="date" name="fecha_arribo" id="timeStart"
                                        oninput="calculardiasDiscount()" />
                                </div>

                                <div class="form-group">
                                    <label for="salida">Fecha de Salida</label>
                                    <input class="text-center" type="date" name="fecha_salida" id="timeEnd"
                                        oninput="calculardiasDiscount()" />
                                </div>

                                <div class="form-group">
                                    <label for="estadia">Tiempo de Estadia</label>
                                    <input class="text-center" readonly type="text" name="duracion_estadia"
                                        id="daysDiscount" />
                                </div>

                            </div>
                        </div>
                        <div class="btns-group">
                            <a href="#" class="btn btn-prev">Anterior</a>
                            <a href="#" role="button" class="btn btn-next" onclick="modalstep2()">Siguiente</a>
                        </div>
                    </div>

                    <!-- PARTE 3 -->
                    <div class="form-step text-dark" >
                        <div class="row text-dark align-items-center justify-content-center" style="border:1px none red; padding:5px;">
                            <div class="col-md-6 thabit">
                                <!-- Con Bucle -->
                                <table class="table table-bordered table-responsive table-dark table-hover">
                                    <thead class="thead-default thead-light">
                                        <tr class="text-center">
                                            <th scope="col" class="text-center">Habitacion</th>
                                            <th scope="col" class="text-center">Estado</th>
                                            <th class="text-center">Precio</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <% for( let i=0; i < data.length; i++ ) { %>

                                            <tr class="text-center">
                                                <td hidden class="text-center" id="id_hab" scope="row">
                                                    <%= data[i].id_habitacion %>
                                                </td>
                                                <td class="text-center" id="tipo_hab_input" scope="row">
                                                    <%= data[i].tipo %>
                                                </td>
                                                <td class="text-center">
                                                    <%= data[i].estado %>
                                                </td>
                                                <td class="text-center">
                                                    S/.
                                                    <%= data[i].precio %>
                                                </td>
                                                <% if (data[i].estado==="LIBRE" ) { %>

                                                    <td>
                                                        <button class="button-cantidad"
                                                            onclick="cantidad(<%= i+1 %>,0)">-</button>
                                                        <button class="button-cantidad"
                                                            onclick="cantidad(<%= i+1 %>,1)">+</button>
                                                    </td>

                                                    <% }else if(data[i].estado==="OCUPADA" ) { %>
                                                        <td>
                                                            <button class="button-block" disabled
                                                                onclick="cantidad(<%= i+1 %>,0)">-</button>
                                                            <button class="button-block" disabled
                                                                onclick="cantidad(<%= i+1 %>,1)">+</button>
                                                        </td>

                                                        <% } %>
                                            </tr>
                                            <% } %>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-2 text-center mx-auto align-items-center count_hab">
                                <!-- Usar en estilos esta parte de brown -->
                                <div class="row text-center" style="border: 2px none brown;width:70%;margin: auto;">
                                    
                                    <div class="col-md-6" style="border-right: 2px solid black ;  margin-top:10px;">
                                        <h4>Simple</h4>
                                    </div>
                                    <div class="col-md-4 mx-auto">
                                        <input oninput="sumaHabitaciones()" id="1" type="text"
                                            class="input_hab text-center" value="0">
                                    </div>
                                </div>
                                <div class="row text-center mx-auto align-items-center"
                                    style="border: 2px none brown;width:70%;margin: auto;">
                                  
                                    <div class="col-md-6" style="border-right: 2px solid black ;  margin-top:10px;">
                                        <h4 class="label_hab">Doble</h4>
                                    </div>
                                    <div class="col-md-4 mx-auto">
                                        <input oninput="sumaHabitaciones()" readonly id="2" type="text"
                                            class="input_hab text-center" value="0">
                                    </div>
                                </div>
                                <div class="row text-center mx-auto align-items-center"
                                    style="border: 2px none brown;width:70%;margin: auto;">
                                    
                                    <div class="col-md-6" style="border-right: 2px solid black ;  margin-top:10px;">
                                        <h4>Triple</h4>
                                    </div>
                                    <div class="col-md-4 mx-auto">
                                        <input oninput="sumaHabitaciones()" readonly id="3" type="text"
                                            class="input_hab text-center" value="0">
                                    </div>
                                </div>
                                <div class="row text-center mx-auto align-items-center"
                                    style="border: 2px none brown;width:70%;margin: auto;">
                                    <div class="col-md-6" style="border-right: 2px solid black ;  margin-top:10px;">
                                        <h4>Matrimonial</h4>
                                    </div>
                                    <div class="col-md-4 mx-auto">
                                        <input oninput="sumaHabitaciones()" readonly id="4" type="text"
                                            class="input_hab text-center" value="0">
                                    </div>
                                </div>
                                <div class="row text-center mx-auto align-items-center"
                                    style="border: 2px none brown;width:70%;margin: auto;">
                                    <div class="col-md-6" style="border-right: 2px solid black ;  margin-top:10px;">
                                        <h4>Suite</h4>
                                    </div>
                                    <div class="col-md-4 mx-auto">
                                        <input oninput="sumaHabitaciones()" readonly id="5" type="text"
                                            class="input_hab text-center" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="btns-group">
                            <a href="#" class="btn btn-prev">Anterior</a>
                            <a href="#" class="btn btn-next" onclick="modalstep3()">Siguiente</a>
                        </div>
                    </div>

                    <!-- PARTE 4 -->
                    <div class="form-step text-dark">
                        <div class="form-group justify-content-center align-items-center">
                            <div class="row">
                                <div class="col-md-6" id="col_conte">

                                    <div class="col-md-6 text-center preadelanto" id="check" name="div_preadelanto">
                                        <label for="vehicle1">Pre Adelanto S/.<input type="text" id="test1"></label>

                                        <input type="checkbox" id="pre_adelanto_check">
                                    </div>

                                    <div class="col-md-6 text-center cuotatotal" id="check" name="div_cuotatotal">
                                        <label for="vehicle1">Cuota Total S/.<input type="text" id="test2"></label>

                                        <input type="checkbox" id="cuota_total_check">
                                    </div>

                                </div>
                                <div class="col-md-6">

                                    <div class="pago">
                                        <label for="metodo">Metodo de Pago</label>
                                        <select id="mySelect" oninput="getData()" onchange="myFunction()">
                                            <option value="noval" selected="selected" disabled>Seleccione...</option>
                                            <option value="TARJETA">TARJETA</option>
                                            <option value="DEPOSITO EFECTIVO">DEPOSITO EFECTIVO</option>
                                        </select>
                                    </div>

                                </div>
                            </div>

                            <div class="row text-center" style="border: 1px none red; width:60%;margin:auto;">
                                <div id="demo" class="col-md-5 text-center">
                                </div>
                            </div>

                            <div class="btns-group">
                                <a href="#" class="btn btn-prev">Anterior</a>
                                <a href="#" class="btn btn-next" onclick="comprueba()">Siguiente</a>
                            </div>
                        </div>
                    </div>

                    <!-- PARTE 5 -->
                    <div class="form-step form-step col-12 text-dark">
                        <div class="row ">
                            <div class="col-md-6" style="border: 1px none red;">
                                <div class="form-group">
                                    <label for="username">Titular</label>
                                    <input readonly type="text" name="nombre_titular" id="nombre_titular" />
                                </div>

                                <div class="form-group">
                                    <label for="username">Apellidos</label>
                                    <input readonly type="text" name="apellidos" id="apellidos" />
                                </div>

                                <div class="form-group" id="tiempo-estadia">
                                    <!--   <label for="dob">Estadia</label>
                                  <input readonly value="" type="text" name="tiempo-estadia" id="tiempo-estadia" /> -->
                                </div>

                                <!-- <div class="form-group" id="tipoHabitaciones">
                                    <label for="position">Tipo Habitacion</label>
                                    <input readonly value="dd" type="text" name="tipoHabitaciones"
                                        id="tipoHabitaciones" />
                                </div> -->

                                <div class="form-group">
                                    <label for="position">Numero Documento</label>
                                    <input readonly value="" type="text" name="nro_documento" id="nro_documento" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Tipo Documento</label>
                                    <input readonly value="" type="text" name="tipo_documento" id="tipo_documento" />
                                </div>

                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="position">Nro Habitaciones</label>
                                    <input readonly value="" type="text" name="nro_habitaciones" id="nroHabitaciones" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Nro Huespedes</label>
                                    <input readonly value="" type="text" name="nro_personas" id="nro_personas" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Email</label>
                                    <input readonly value="" type="text" name="email" id="email_data" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Metodo de Pago</label>
                                    <input readonly value="" type="text" name="metodo" id="metodo" />
                                </div>

                                <div class="form-group">
                                    <label for="position">Total a Pagar</label>
                                    <input readonly value="" type="text" name="cuota_total" id="totalPagar" />
                                </div>

                                <div hidden class="form-group">
                                    <label for="position">Pre Adelanto</label>
                                    <input readonly value="" type="text" name="preadelanto" id="preadelanto" />
                                </div>

                                <div class="form-group" id="estado_Reserva">
                                    <!-- <label for="position">Estado Reserva</label>
                                    <input readonly value="" type="text" name="estado" id="estado" /> -->
                                </div>


                            </div>
                        </div>
                        <div class="btns-group">
                            <a href="#" class="btn btn-prev" style="width:70%;">Anterior</a>
                            <!-- <input readonly type="submit" value="Reservar" class="btn" /> -->
                            <!-- <input type="submit" value="Reservar" class="btn" /> -->
                            <button type="submit" class="btn" onclick="modal()" style="width:70%;">Reservar</button>
                            <a href="javascript:;" onclick="window.print()" id="btnImprimir"
                                class="btn btn-md btn-danger hidden-print" style="background-color:green;
                            border:1px solid green;width:50%;">Descargar</a>

                        </div>
                    </div>

                </form>
            </div>
            <br><br><br><br><br><br><br> <br>
        </div>
    </div>
    <script>
        $('#btnImprimir').on('click', function () {

            window.print();
            return false;

        })



        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
        })

    </script>
    <%- include ('./layouts/footer.ejs') %>