@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">
@endsection
@section('content')
    @section('img-header','http://www.dickissbarbershop.com/wp-content/uploads/2020/02/Logo_White_dickiss.png')    
    @section('titulo-descripcion')
    <div class="titulo_header">
        COME MEET US
    </div>
    <div class="subtitulo_header">
        RESERVA
    </div>
    <div class="row m-0">
        <div class="offset-lg-6 col-lg-6 col-12 cuadro_descripcion">
            <h1>EL DÍA A DÍA DE UN HOMBRE MODERNO</h1>
            <p>Cuidarse es parte de mantener todo bajo control. ¡Como un verdadero rey! por eso te ayudamos con algunos artículos que pueden hacer más fácil el día a día de un hombre. Hablamos de temas que facilitan el cuidado de tu imagen, tu persona, tu cuerpo y tu bienestar. Alimentamos de manera continua este espacio, que aunque no estés en nuestro lugar, puedas seguir cuidándote.</p>
        </div>
    </div>
    @endsection
    <div class="tarjetas_servicios" id="divPaso1">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h1 class="tituloPaso">Paso 1</h1>
                <br>
                <h2 class="subtituloPaso">Selecciona el servicio que desees tomar</h2>
            </div>
            <div class="col-sm-3">
                <div class="card">
                    <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-2-1.jpg" class="card-img-top" alt="...">                    
                    <div class="card-footer bg-light bg-transparent">
                        <div class="divaccion" onclick="seleccionarServicio('icono1','Tratamientos');">
                            <span class="titulo-izquierda">Tratamientos</span>
                            <span class="titulo-derecha"><i id="icono1" class="iconos_servicios fa fa-plus-circle"></i></span>
                        </div>
                        <div class="divServicios" id="divServiciosTratamientos" style="display:none">
                            <h5 class="mt-3">Selecciona tu tratamiento</h5>
                            <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1 select_custom" id="selectServiciosTratamientos" name="selectServiciosTratamientos">
                                <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-sm-3">
                <div class="card">
                    <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-8-1.jpg" class="card-img-top" alt="...">
                    <div class="card-footer bg-light bg-transparent">
                        <div class="divaccion" onclick="seleccionarServicio('icono2','Spa');">
                        <span class="titulo-izquierda">Spa</span>
                        <span class="titulo-derecha"><i id="icono2" class="iconos_servicios fa fa-plus-circle"></i></span>
                        </div>
                        <div class="divServicios" id="divServiciosSpa" style="display:none">
                            <h5 class="mt-3">Selecciona tu tratamiento</h5>
                            <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1 select_custom" id="selectServiciosSpa" name="selectServiciosSpa">
                                <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-sm-3">
                <div class="card">
                    <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-4.jpg" class="card-img-top" alt="...">
                    <div class="card-footer bg-light bg-transparent">
                        <div class="divaccion" onclick="seleccionarServicio('icono3','Cortes');">
                        <span class="titulo-izquierda">Cortes</span>
                        <span class="titulo-derecha"><i id="icono3" class="iconos_servicios fa fa-plus-circle"></i></span>
                        </div>
                        <div class="divServicios" id="divServiciosCortes" style="display:none">
                            <h5 class="mt-3">Selecciona tu tratamiento</h5>
                            <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1 select_custom" id="selectServiciosCortes" name="selectServiciosCortes">
                                <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-sm-3">
                <div class="card">
                    <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-5.jpg" class="card-img-top" alt="...">
                    <div class="card-footer bg-light bg-transparent">
                        <div class="divaccion" onclick="seleccionarServicio('icono4','Cuidados');">
                        <span class="titulo-izquierda">Cuidados</span>
                        <span class="titulo-derecha"><i id="icono4" class="iconos_servicios fa fa-plus-circle"></i></span>
                        </div>
                        <div class="divServicios" id="divServiciosCuidados" style="display:none">
                            <h5 class="mt-3">Selecciona tu tratamiento</h5>
                            <select onchange="seleccionarTratamiento(this);" class="form-control selectServicios mt-1 select_custom" id="selectServiciosCuidados" name="selectServiciosCuidados">
                                <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>
        </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 style="background-color:#fff; margin-top:200px;adding:40px 0px 1px;position: fixed;bottom: -100000000px;" id="divPaso2">
        <div class="container">
            <button type="button" class="btnPasos" onclick="regresarPaso1();">
                Regresar
            </button>
            <div class="row" id="calendario">
                <div class="col-12 text-center mb-5">
                    <h1 class="tituloPaso">Paso 2</h1>
                    <br>
                    <h2 class="subtituloPaso">Selecciona el día de tu cita</h2>
                </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; margin-top:200px; padding:0px 0px 1px; display:none" id="divPaso3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <button type="button" class="btnPasos" onclick="regresarPaso2();">
                        Regresar
                    </button>
                </div>
                <div class="col-12 pb-3">
                    <div class="row" id="calendario">
                        <div class="col-12 text-center mb-5">
                            <h1 class="tituloPaso">Paso 3</h1>
                            <br>
                            <h2 class="subtituloPaso">Selecciona el horario para tu cita</h2>
                        </div>                        
                    </div>
                </div>
                <div class="col-xl-12 col-12 tabla table-responsive p-0" 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 text-center" id="divAdvertencia">
                        <h4 class="subtituloPaso" style="color:#fff !important;">Debes de terminar el paso 1 y paso 2 para visualizar los horarios</h4>
                    </div>
                    <div class="pt-5 pb-5 text-center" id="divError" style="display:none">
                        <h4 class="subtituloPaso">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:14px; 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:14px; font-weight:600; color:#fe0303;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btnCancelarModal" data-dismiss="modal">cerrar</button>
                <button type="submit" class="btnEnviarModal" 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 btnPasos">
                                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:14px; 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:14px; 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:14px; 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="btnCancelarModal" id="btnCancelar" data-dismiss="modal">cerrar</button>
                <button type="submit" class="btnEnviarModal" id="btnEnviar" onclick="enviarCorreo();">enviar</button>
            </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>

    $('#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();
        }
    }

    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 seleccionarServicio(elemento,servicio){

        $('.iconos_servicios').removeClass('fa-minus-circle');
        $('.iconos_servicios').addClass('fa-plus-circle');
        $("#"+elemento+"").removeClass('fa-plus-circle');
        $("#"+elemento+"").addClass('fa-minus-circle');   

        $("#servicio_seleccionado").val(servicio);
        $(".divServicios").hide();
        $("#divServicios"+servicio).slideDown( "slow", function() {
            $("#divServicios"+servicio).show();
        });

        $("#tratamiento_seleccionado").val(0);
        $(".selectServicios").val(0);
        $("#divAdvertencia").show();
        $('#todo').empty('<tr><td></td></tr>');
        $("#t_servicio").text(servicio);        
    }
    function seleccionarTratamiento(elemento){
        console.log($(elemento).val());        
        $("#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);
            }
        });
        
        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());
    }

    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');
            });
        }
    }

    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)
    }

    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", "#efefef");
                    }
            },
            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="btnPasos" 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');
    });
    $("#btnModalLogin").click(function(){
        $("#ModalReservacion").modal('hide');
        $("#modalLogin").modal();
    });
</script>
@endsection