@extends('front.front')
@section('title','Dickiss | BarberShop')
@section('css')
<link href="{!! asset('files_custom/assets/fullcalendar/packages/core/main.css') !!}" rel='stylesheet' />
<link href="{!! asset('files_custom/assets/fullcalendar/packages/daygrid/main.css') !!}" rel='stylesheet' />
<link href="{!! asset('files_custom/assets/fullcalendar/packages/list/main.css') !!}" rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

.btnService{
    background-color: #e15aa9;
    color: #fff;
    border:#e15aa9 1px solid;
}

.btnService:hover{
    background-color: #fff;
    color: #e15aa9;
    border:#e15aa9 1px solid;
}

.btnCustomActive{
    background-color: #fff;
    color: #e15aa9;
    border:#e15aa9 1px solid;
}

.containerCustom {
  position: relative;
  height: 250px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease-out;
}

.containerCustom:hover {
  box-shadow: 1px 2px 10px rgba(0,0,0,0.5);
}

.img-containerCustom {
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: transform 0.3s ease-out;
  z-index: 2;
  transform: translateY(-50px);
}

.img-containerCustom:hover {
	cursor: pointer;
}

.containerCustom:hover .img-containerCustom {
	transform: translateY(-50px);
}
/* .servicioSeleccionado{
    box-shadow: 1px 2px 10px rgba(0,0,0,0.5);
}
.servicioSeleccionado .img-containerCustom{
	transform: translateY(-120px);
} */

.img-containerCustom > img {
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease-out;
}

.containerCustom:hover > .img-containerCustom > img {
  opacity: 0.5;
}

.social-media {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  padding: 0;
}

.social-media > li {
  list-style: none;
}

.social-media > li > a {
  display: block;
  height: 50px;
  width: 50px;
  background-color: #FFF;
  text-align: center;
  color: #262626;
  margin: 0 5px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(200px);
  transition: all 0.3s ease-out;
}

.containerCustom:hover > .social-media > li > a {
  transform: translateY(0);
  opacity: 1;
}

.social-media > li > a > .fa {
  font-size: 24px;
  line-height: 50px;
  transition: transform 0.3s ease-out;
}

.social-media > li > a:hover > .fa {
  transform: rotateY(360deg);
}

.containerCustom:hover .social-media li:nth-child(1){
	transition-delay: 0s;
}

.containerCustom:hover .social-media li:nth-child(2){
	transition-delay: 0.1s;
}

.containerCustom:hover .social-media li:nth-child(3){
	transition-delay: 0.2s;
}

.containerCustom:hover .social-media li:nth-child(4){
	transition-delay: 0.3s;
}

.containerCustom:hover .social-media li:nth-child(5){
	transition-delay: 0.4s;
}

.user-info {
  position: absolute;
	bottom: 0;
	left: 0;
	background-color: #FFF;
	height: 120px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
  text-align: center
}

.user-info > h2 {
  padding: 0;
  margin: 10px 0;
}

.user-info > span {
  color: #262626;
  font-size: 16px;
}
.fc-highlight{
    background-color: #ecb6d5 !important;
}

.centrado{
    margin: 0 auto;
}


</style>
@endsection
@section('content')
        <div class="parallax">
            <nav class="navbar navbar-expand-lg navbar-light " id="navegador">
                <div class="container d-flex flex-column flex-md-row justify-content-between franja_top" style="max-width: 100% !important;padding-right:0px;padding-left:0px;">
                    <a itemprop="url" href="http://belleallure.com.mx/inicio/" style="height: 84px; visibility: visible;">
                        <img itemprop="image" class="mobile_sitcky" src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/logoBelleAllure.png" alt="Logo"  id="imagen_sticky">
                    </a>
                    <div class="menu">
                        <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/">inicio</a>
                        <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/nosotros/">nosotros</a>
                        <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/servicios/">servicios</a>
                        <a class="py-2 d-none d-md-inline-block active nav-link" href="http://belleallure.com.mx/spa/public/reservaciones">reservaciones</a>
                        <a class="py-2 d-none d-md-inline-block nav-link" href="http://belleallure.com.mx/inicio/index.php/contact-us/">contacto</a>
                    </div>
                </div>
            </nav>
            <div class="container text-left">
                <h1 class="text-left" style="color:#fff" id="reservacion">
                    <span >reservaciones</span>
                </h1>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div id="contenido">
                        <h1 >Reserva tus citas ahora<h1>
                            <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque officia quisquam consectetur aliquamb<br> quia consequuntur facilis iure tempore! Nostrum rem dolorem placeat hic quam consectetur repellat, optio ut vero aliquam. </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row mb-5 pb-5" style="margin-right: 0px; margin-left: 0px;" id="divPaso1">
                <div class="col-12 mb-3 text-center">
                    <h1><b>Paso 1</b></h1>
                    <h4 style="text-align:center !important; margin-top: 5px;">Selecciona el servicio que desees tomar</h4>
                </div>
                <div class="col-xs-12 centrado">
                    <div class="card" style="width: 18rem;border: none;">
                        <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/q1.jpg" class="card-img-top d-none d-md-block" alt="...">
                        <div class="card-body text-center">
                            <h4 style="margin-top: 0px;text-align: center;">Faciales</h4>
                            <button onclick="seleccionarServicio(this,'Faciales');" class="btn btnService">Seleccionar</button>
                            <div class="divServicios" id="divServiciosFaciales" style="display:none">
                                <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1" id="selectServiciosFaciales" name="selectServiciosFaciales">
                                    <option disabled selected value="0">Selecciona una opción</option>
                                    @foreach($faciales as $item)
                                        <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 centrado">
                    <div class="card" style="width: 18rem;border: none;">
                        <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/q2.jpg" class="card-img-top d-none d-md-block" alt="...">
                        <div class="card-body text-center">
                            <h4 style="margin-top: 0px;text-align: center;">Masajes</h4>
                            <button onclick="seleccionarServicio(this,'Masajes');" class="btn btnService">Seleccionar</button>
                            <div class="divServicios" id="divServiciosMasajes" style="display:none">
                                <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1" id="selectServiciosMasajes" name="selectServiciosMasajes">
                                    <option disabled selected value="0">Selecciona una opción</option>
                                    @foreach($masajes as $item)
                                        <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 centrado">
                    <div class="card" style="width: 18rem;border: none;">
                        <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/q4.jpg" class="card-img-top d-none d-md-block" alt="...">
                        <div class="card-body text-center">
                            <h4 style="margin-top: 0px;text-align: center;">Pestañas</h4>
                            <button onclick="seleccionarServicio(this,'Pestanias');" class="btn btnService">Seleccionar</button>
                            <div class="divServicios" id="divServiciosPestanias" style="display:none">
                                <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1" id="selectServiciosPestanias" name="selectServiciosPestanias">
                                    <option disabled selected value="0">Selecciona una opción</option>
                                    @foreach($pestanias as $item)
                                        <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 centrado">
                    <div class="card" style="width: 18rem;border: none;">
                        <img src="http://belleallure.com.mx/inicio/wp-content/uploads/2019/09/q3.jpg" class="card-img-top d-none d-md-block" alt="...">
                        <div class="card-body text-center">
                            <h4 style="margin-top: 0px;text-align: center;">Depilaciones</h4>
                            <button onclick="seleccionarServicio(this,'Depilaciones');" class="btn btnService">Seleccionar</button>
                            <div class="divServicios" id="divServiciosDepilaciones" style="display:none">
                                <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1" id="selectServiciosDepilaciones" name="selectServiciosDepilaciones">
                                    <option disabled selected value="0">Selecciona una opción</option>
                                    @foreach($depilaciones as $item)
                                        <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="servicio_seleccionado" id="servicio_seleccionado" value="0">
                <input type="hidden" name="tratamiento_seleccionado" id="tratamiento_seleccionado" value="0">
            </div>
        </div>

        <div style="background-color:#f9f9f9; padding:40px 0px 1px;position: fixed;bottom: -100000000px;" id="divPaso2">
            <div class="container">
                <button type="button" class="btnEnviarCustom btn" onclick="regresarPaso1();">
                    Regresar
                </button>
                <div class="row" id="calendario">
                    <div class="col-12 pb-3">
                        <h1><b>Paso 2</b></h1>
                        <h4 style="text-align:center !important; margin-top: 5px;">Selecciona el día de tu cita</h4>
                    </div>
                    <div class="col-xl-12 col-12">
                        <div class="pt-3" id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pb-5 mb-5" style="background-color:#fff; padding:0px 0px 1px; display:none" id="divPaso3">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="btnEnviarCustom btn" onclick="regresarPaso2();">
                            Regresar
                        </button>
                    </div>
                    <div class="col-12 pb-3">
                        <h1><b>Paso 3</b></h1>
                        <h4 style="text-align:center !important; margin-top: 5px;">Selecciona el horario para tu cita</h4>
                    </div>
                    <div class="col-xl-12 col-12 tabla table-responsive" style="background-color:#f9f9f9;">
                        <table class="table" id="tabla" style="margin-bottom: 0rem;">
                            <thead class="thead-dark">
                            <tr>
                                <th colspan="4" class="todo"> Horarios disponibles</th>
                            </tr>
                            <tr >
                                <th class="columnas">Fecha</th>
                                <th class="columnas">Hora</th>
                                <th class="columnas">Profesional<br>Especialista</th>
                                <th class="columnas">Acción</th>
                            </tr>
                            </thead>
                            <tbody id="todo" style="text-align: center; background:#fff;">

                            </tbody>
                        </table>
                        <div class="pt-5 pb-5" id="divAdvertencia">
                            <h4 style="text-align:center !important; margin-top: 5px;">Debes de terminar el paso 1 y paso 2 para visualizar los horarios</h4>
                        </div>
                        <div class="pt-5 pb-5" id="divError" style="display:none">
                            <h4 style="text-align:center !important; margin-top: 5px;">No se han encontrado horarios disponibles, intenta con otro día.</h4>
                        </div>
                        <div class="spinner-border text-info" role="status" id="loader">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>

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

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4 style="margin-top:0px!important;">No se puede agendar una cita en un día pasado</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">cerrar</button>
                </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalService" tabindex="-1" role="dialog" aria-labelledby="modalServiceLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalServiceLabel">Advertencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4 style="margin-top:0px!important;">No se a selecionado un servicio o tratamiento.</h4>
                    <h6>*Debe seleccionar un servicio para continuar.</h6>
                    <h6>*Debe seleccionar un tratamiento para continuar.</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">cerrar</button>
                </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true" style="z-index:99999999">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Inicio de sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{-- TRAELO --}}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <p>Si ya se a registrado con nosotros, puede terminar de generar su reservación iniciando sesión.</p>
                        </div>
                        <div class="form-group col-6">
                            <label>Correo electrónico</label>
                            <input type="email" class="form-control" id="v_email" name="v_email">
                            <div id="msgv_email" style="font-size:12px; font-weight:600; color:#fe0303;"></div>
                        </div>
                        <div class="form-group col-6">
                            <label>Contraseña</label>
                            <input type="password" class="form-control" id="v_password" name="v_password">
                            <div id="msgv_password" style="font-size:12px; font-weight:600; color:#fe0303;"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btnCancelarCustom" data-dismiss="modal">cerrar</button>
                    <button type="submit" class="btn btnEnviarCustom" onclick="validarLogin();">validar</button>
                </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ModalReservacion" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle" style="text-align:center;">Reservación</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{!! asset('/enviarCorreo')!!}" method="POST" role="form" id="form_id" >
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Servicio: <strong id="t_servicio"></strong>
                                </p>
                            </div>
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Tratamiento: <strong id="t_tratamiento"></strong>
                                </p>
                            </div>
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Especialista: <strong id="t_empleado"></strong>
                                </p>
                            </div>
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Fecha: <strong id="t_fecha"></strong>
                                </p>
                            </div>
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Hora: <strong id="t_hora"></strong>
                                </p>
                            </div>
                            <div class="col-6">
                                <p style="text-align: left;font-size: 15px;">
                                    Total: <strong id="t_costo"></strong>
                                </p>
                            </div>
                            <div class="form-group col-12">
                                <hr class="mb-3">
                                <p style="text-align: left;font-size: 20px;">
                                    <b>
                                        Confirma tu reservación iniciando sesión
                                    </b>
                                </p>
                                <button type="button" id="btnModalLogin" class="btn mb-3" style="background-color: #e15aa9;color: #fff;border:#e15aa9 1px solid;">
                                    Iniciar sesión
                                </button>
                                <p style="text-align: left;font-size: 20px;">
                                    <b>
                                        ó llenando los siguientes campos
                                    </b>
                                </p>
                                <hr class="mb-3">
                            </div>
                            <div class="form-group col-12">
                                <label for="nombre">Nombre</label>
                                <input type="text" class="form-control" id="name" name="name" aria-describedby="emailHelp">
                                <div id="msg1" style="font-size:12px; font-weight:600; color:#fe0303;"></div>
                            </div>
                            <div class="form-group col-6">
                                <label for="telefono">Teléfono</label>
                                <input type="text" class="form-control" id="phone" name="tel" aria-describedby="emailHelp" >
                                <div id="msg3" style="font-size:12px; font-weight:600; color:#fe0303;"></div>
                            </div>
                            <div class="form-group col-6">
                                <label for="hora">Correo electrónico</label>
                                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="mail">
                                <div id="msg2" style="font-size:12px; font-weight:600; color:#fe0303;"></div>
                            </div>
                            {{-- <div class="form-group col-12">
                                <label for="hora">Mensaje</label>
                                <textarea class="form-control" id="mensaje" rows="3" name="mensaje"></textarea>
                            </div> --}}
                        </div>
                        <input type="hidden" class="form-control" id="horas" name="horas" aria-describedby="emailHelp">
                        <input type="hidden" class="form-control" id="services" name="services" aria-describedby="emailHelp">
                        <input type="hidden" class="form-control" id="fecha" name="fecha" aria-describedby="emailHelp">
                        <input type="hidden" class="form-control" id="costo" name="costo" aria-describedby="emailHelp" >
                        <input type="hidden" class="form-control" id="empleado_id" name="empleado_id" aria-describedby="emailHelp" >
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" id="btnCancelar" data-dismiss="modal">cerrar</button>
                    <button type="submit" class="btn" id="btnEnviar" onclick="enviarCorreo();">enviar</button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/moment/js/moment.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/fullcalendar/js/fullcalendar.min.js"></script>
<script src="{!! asset('files_custom/assets/fullcalendar/packages/core/main.js') !!}"></script>
<script src="{!! asset('files_custom/assets/fullcalendar/packages/interaction/main.js') !!}"></script>
<script src="{!! asset('files_custom/assets/fullcalendar/packages/daygrid/main.js') !!}"></script>
<script src="{!! asset('files_custom/assets/fullcalendar/packages/list/main.js') !!}"></script>
<script src="{!! asset('files_custom/assets/fullcalendar/packages/google-calendar/main.js') !!}"></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/bindings/inputmask.binding.js'></script>
<script>
    $('#loader').removeClass('spinner-border');
    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var dia_actual = d.getFullYear() + '-' +
    (month<10 ? '0' : '') + month + '-' +
    (day<10 ? '0' : '') + day;
    var url_dinamica = "{!! URL::to('/') !!}";

    var costos = {!!$servicio!!};

    var precio = [];
    $.each(costos,function(key,value){
        if(value.check_promocion == "si")
        {            
            precio.push({
                servicio:value.id,
                costo: value.costo_promocion,
            });
        }
        else{
            precio.push({
                servicio:value.id,
                costo: value.costo,
            });
        } 
    });

    function enviarCorreo() {
		  var f_nombre = $('#name').val();
		  var f_telefono = $('#phone').val();
		  var f_email = $('#email').val();
		//   var f_mensaje = $('#mensaje').val();
		 if(f_nombre == "" || f_telefono == "" || f_email == "" ){
	        if(f_nombre == "")
	        {
	          $('#msg1').text("El campo 'Nombre' es requerido");
	        }
	        if(f_email == ""){
	          $('#msg2').text("El campo 'E-mail' es requerido");
	        }
	        if(f_telefono == "" ){
	          $('#msg3').text("El campo 'Teléfono' es requerido");
	        }
	        if(f_nombre != ""){
	          $('#msg1').text("");
	        }
	        if(f_email != ""){
	          $('#msg2').text("");
	        }
	        if(f_telefono != "" ){
	          $('#msg3').text("");
	        }

      	}
		 else{
			if(f_nombre != ""){
	          $('#msg1').text("");
	        }
	        if(f_email != ""){
	          $('#msg2').text("");
	        }
	        if(f_telefono != "" ){
	          $('#msg3').text("");
	        }
	        $('#form_id').submit();
		}
    }

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {

        plugins: [ 'interaction', 'dayGrid','timeGrid' ],
            locale: 'es',
            timeZone: 'local',
            selectable: true,
            header: {
                left: 'prev,dayGridMonth,next',
                center: 'title',
                right: 'today'
            },
            defaultDate: dia_actual,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            // events: citas,
            dayRender: function (info, cell) {
            var myDate = new Date();
                myDate.setDate(myDate.getDate()-1);
                    if (info.date < myDate)
                    {
                        $('.fc-past').css("background-color", "#ebf8fa");
                    }
            },
            dateClick:function(info){
                var myDate = new Date();
                myDate.setDate(myDate.getDate()-1);
                if($("#servicio_seleccionado").val() == 0 || $("#tratamiento_seleccionado").val() == 0){
                    $("#modalService").modal();
                }
                else{
                    if(info.date < myDate)
                    {
                        $('#exampleModal').modal();
                    }
                    else{
                        // $('html, body').animate({
                        //     scrollTop: $("#divPaso3").offset().top
                        // }, 800);
                        animateCSS('#divPaso2','fadeOutLeft',function(){
                            $("#divPaso2").hide();
                            $("#divPaso3").show();
                            animateCSS('#divPaso3','fadeInRight');
                        });
                        $('#fecha').val(info.dateStr);
                        $('#loader').addClass('spinner-border');
                        $("#divAdvertencia").css('background','rgba(107,107,107,.5)');
                        $("#divError").css('background','rgba(107,107,107,.5)');
                        $('#todo').css('opacity','.2');
                        var servicio_seleccionado = $("#servicio_seleccionado").val();
                        var tratamiento_seleccionado = $("#tratamiento_seleccionado").val();
                        console.log(url_dinamica+"/api/citas/obtenerHora/"+info.dateStr+"/"+servicio_seleccionado+"/"+tratamiento_seleccionado);
                        $.ajax({
                            url: url_dinamica+"/api/citas/obtenerHora/"+info.dateStr+"/"+servicio_seleccionado+"/"+tratamiento_seleccionado,
                            type:"GET",
                            dataType:"json",
                            success:function(data)
                            {
                                console.log(data,'Entroooooo');
                                if(data.data.length == 0)
                                {
                                    $('#todo').empty('<tr><td></td></tr>');
                                    $('#loader').removeClass('spinner-border');
                                    $("#divError").css('background','#fff');
                                    $("#divAdvertencia").hide();
                                    $("#divError").show();
                                }
                                else{
                                    $('#todo').empty('<tr><td></td></tr>');
                                    $('#loader').removeClass('spinner-border');
                                    $("#divAdvertencia").css('background','#fff');
                                    $('#todo').css('opacity','1');
                                    $.each(data.data,function(key,value){
                                        $('#todo').append('<tr>'+
                                        '<td>'+value.fecha+'</td>'+
                                        '<td>'+value.hora+'</td>'+
                                        '<td>'+value.empleado+'</td>'+
                                        '<td>'+
                                            '<center><button type="button" id="abrirModal_'+key+'" data-hora="'+value.fecha +' '+ value.hora+'" data-empleado="'+value.empleado_id+'" class="btn stilo_boton" data-toggle="modal" data-target="#ModalReservacion">'+
                                            'Reservar'+
                                            '</button></center>'+
                                        '</td></tr>');
                                        $('#abrirModal_'+key).click(function(){
                                            var boton = $(this);
                                            var hora = boton.attr('data-hora');
                                            var empleado_id = boton.attr('data-empleado');
                                            $('#horas').val(hora);
                                            $('#empleado_id').val(empleado_id);
                                            $('#t_empleado').text(value.empleado);
                                            $('#t_fecha').text(value.fecha);
                                            $('#t_hora').text(value.hora);
                                        });
                                    });
                                    $("#divError").hide();
                                    $("#divAdvertencia").hide();
                                }
                            }
                        });
                    }
                }
            }
        });
        calendar.render();
        $(".fc-today-button").text('Hoy');
        $('.fc-prev-button').text('< Anterior');
        $('.fc-next-button').text('Siguiente >');
        $('.fc-day-number').removeAttr('data-goto');
        $('.fc-icon ').css('display','none');
        $('.fc-dayGridMonth-button').text('Mes');
    });

    function seleccionarServicio(elemento,servicio){
        $(".btnService").text('Seleccionar');
        $(".btnService").removeClass('btnCustomActive');
        $(elemento).text('Seleccionado');
        $(elemento).addClass('btnCustomActive');
        $("#servicio_seleccionado").val(servicio);
        $(".divServicios").hide();
        $("#divServicios"+servicio).show();
        $("#tratamiento_seleccionado").val(0);
        $(".selectServicios").val(0);
        $("#divAdvertencia").show();
        $('#todo').empty('<tr><td></td></tr>');
        $("#t_servicio").text(servicio);
        if(servicio == "Pestanias")
        {
            $("#t_servicio").text('Pestañas');
        }
    }

    function seleccionarTratamiento(elemento)
    {
        $("#tratamiento_seleccionado").val($(elemento).val());
        $("#services").val($(elemento).val());

        $.each(precio,function(key,value){
            if(value.servicio == $(elemento).val()){
                $("#costo").val(value.costo);
                $("#t_costo").text('$'+value.costo);
            }
        });

        // $('html, body').animate({
        //     scrollTop: $("#divPaso2").offset().top - 70
        // }, 800);
        animateCSS('#divPaso1','fadeOutLeft',function(){
            $("#divPaso1").hide();
            $("#divPaso2").show();
            jQuery("#divPaso2").css('bottom','0px');
            jQuery("#divPaso2").css('position','initial');
            animateCSS('#divPaso2','fadeInRight');
        });
        $("#t_tratamiento").text($("#"+elemento.id+" option:selected").text());
    }

    $("#btnModalLogin").click(function(){
        $("#ModalReservacion").modal('hide');
        $("#modalLogin").modal();
    });

    function validarLogin(){
        var csrf_token = $('meta[name="csrf-token"]').attr('content');
        var email = $("#v_email").val();
        var password = $("#v_password").val();
        if(email == '' || password == '')
        {
            if(email == '')
            {
                $("#msgv_email").text('Ingrese un correo electrónico');
            }else{
                $("#msgv_email").text('');
            }
            if(password == '')
            {
                $("#msgv_password").text('Ingrese una contraseña');
            }else{
                $("#msgv_password").text('');
            }
        }else{
            $("#msgv_email").text('');
            $("#msgv_password").text('');
            var csrf_token = $("#csrf_token").val();

            var horas = $("#horas").val();
            var services  = $("#services").val();
            var fecha  = $("#fecha").val();
            var costo  = $("#costo").val();
            var empleado_id  = $("#empleado_id").val();

            var formulario =
            {
                'email': email,
                'password': password,
                'horas': horas,
                'services': services,
                'fecha': fecha,
                'costo': costo,
                'empleado_id': empleado_id,
                '_token': csrf_token
            };
            console.log(url_dinamica+"/api/validar_sesion");

            $.ajax({
            type        : 'POST',
            url         : url_dinamica+"/api/validar_sesion",
            data        : formulario,
            dataType    : 'json',
            encode          : true
            })
            .done(function(data){
                if(data.data == "ERROR")
                {
                    $("#msgv_password").text('Sus credenciales no coinciden, verifique su información e intentelo nuevamente.');
                }
                else{
                    $("#msgv_password").text('');
                    window.location.replace(url_dinamica+'/nota_pago');
                }
            })
            .fail(function(error) {
                $("#msgv_password").text('Sus credenciales no coinciden, verifique su información e intentelo nuevamente.');
            });
        }
    }

    function animateCSS(element, animationName, callback) {
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)

        function handleAnimationEnd() {
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)

            if (typeof callback === 'function') callback()
        }

        node.addEventListener('animationend', handleAnimationEnd)
    }

    function regresarPaso1() {
        animateCSS('#divPaso2','fadeOutRight',function(){
            $("#divPaso2").hide();
            $("#divPaso1").show();
            animateCSS('#divPaso1','fadeInLeft');
        });
        return true;
    }
    function regresarPaso2() {
        animateCSS('#divPaso3','fadeOutRight',function(){
            $("#divPaso3").hide();
            $("#divPaso2").show();
            animateCSS('#divPaso2','fadeInLeft');
        });
        return true;
    }

    function avanzarPrimerPaso() {
        if($("#servicio_seleccionado").val() == 0 || $("#tratamiento_seleccionado").val() == 0){
            $("#modalService").modal();
        }
        else{
            animateCSS('#divPaso1','fadeOutLeft',function(){
                $("#divPaso1").hide();
                $("#divPaso2").show();
                jQuery("#divPaso2").css('bottom','0px');
                jQuery("#divPaso2").css('position','initial');
                animateCSS('#divPaso2','fadeInRight');
            });
        }
    }
</script>
@endsection