@extends('layouts.app')

@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" type="text/css" href="{!! asset('files_custom') !!}/bower_components/sweetalert/css/sweetalert.css">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/switchery/css/switchery.min.css">
<link rel="stylesheet" href="{!! asset('css/wizard.css') !!}" />
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/css/bootstrap-multiselect.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/multiselect/css/multi-select.css"/>
{{-- Animación --}}
<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');

    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        background-color: #00c88b;
        color: #fff;
        font-family: 'Fixture light';
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: #fff;
    }

    .select2-container .select2-search--inline .select2-search__field{
        margin-left: 5px;
        font-family: 'Fixture light';
    }

    .form_custom{
        background: none;
        outline: 0;
        border: 0;
        color: #fff;
        width: 100%;
    }
    .select_custom{
        border-bottom: 1px solid #fff;
        width: 50%;
        margin-left: 25%;
        margin-top: 10px
    }
    .select2-container{
        width:100% !important;
    }
    .btnService{
        background-color: #00c88b;
        color: #fff;
        border:#00c88b 1px solid;
    }

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

    .btnCustomActive{
        background-color: #fff;
        color: #00c88b;
        border:#00c88b 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: #8ee4c5 !important;
    }

    .modal-body h4{
        font-family: 'Fixture light';
    }
    .cuerpoForm{
        font-family: 'Fixture bold' !important;
    }
    #calendar .fc-center h2{
        color: #fff;
        font-family: "Fixture ebold", sans-serif;
    }

    .fc-day-header{
        font-family: "Fixture ebold", sans-serif;
    }

    .fc-button-primary:hover{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
    }

    .fc-toolbar.fc-header-toolbar{
        background: linear-gradient(to right, #00c88b, #00c88b);
        margin-bottom: 0em;
        padding: 30px 0px;
        color: #fff;
    }
    .fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{
        display: flex;
        justify-content: center;
        float: none;
    }

    .fc-day{
        border: none !important;
    }
    .fc-button-primary:disabled{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
        color: #fff !important;
    }
    .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
        color: #fff !important;
    }
    .fc-button-primary:not(:disabled).fc-button-active:focus{
        box-shadow: none !important;
    }
    .fc-button-primary:focus{
        box-shadow: none !important;
    }    
    .close
    {
        color: #fff;
    }

    .close:hover
    {
        color: #fff;
        text-decoration: none;
    }

    .select2-dropdown{
        z-index:999999999 !important;
    }
    h4 {
    color: #4f4866;
    font-weight: normal;
    font-size: 25px;
    font-family: Arial;
    }
    .btnsHora,.fc-prev-button,.fc-next-button,.fc-today-button,
    .fc-dayGridMonth-button,.fc-dayGridWeek-button,.fc-timeGridFourDay-button {
        background-color:rgba(255, 255, 255, 0);!important;
        border-color:rgba(255, 255, 255, 0);;
        font-family:'Fixture ebold';
        text-transform: uppercase;
        font-weight:400;
        font-size:13px;
        border-radius: 0px;
        color:#fff;
    }
    .btnsHora:hover{
        background: linear-gradient(to right, #ED5FB2, #E05AA8);
        border-color:#ED5FB2;
    }

    .content{
        background: #fff;
        padding: 60px;
    }
    .card-header{
        background:#fff;
    }
    .modal-header{
        background-color: #00c88b;
    }
    .modal-header h5{
        /* //font-family: 'Poppins'; */
        font-size: 35px;
        font-weight: 400;
        color: #fff;
    }
    .modal-content {
        border: 0px solid #ebedf2;
        border-radius: 0.3rem;
    }
    .modal-body h4{
        font-family:'Poppins';
        font-weight:400;
        font-size:20px;
        background:#fff;
    }
    .modal-body,.modal-footer {
        background:#fff;
    }
    .fc-center h2{
        font-family:'Poppins';
        font-weight:400;
        font-size:23px;
        color:#67666a;
    }
    .select2,.card-header div div h5{
        font-family:'Poppins';
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],#select2-selectSala-result-v48f-0 {
        background-color: #00c88b;
        color: white;
    }
    .select2-container{
        width:100% !important;
    }
    .card-block{
        position: relative;
    }
    .text-info {
        color: #00c88b !important;
    }
    #loader {
        /*IMPORTANTE*/
        position: absolute;
        top: 50%;
        margin-top: 0px;
        margin-left:50%;
        margin-right:40%;
    }

    .activo{
        background-color: #fff !important;
        color: rgb(237, 95, 178) !important;
        border-color: #fff !important;
    }

    @media only screen and (max-width:480px){
        .content{
            background: #fff;
            padding: 0px;
        }
        #calendar{
            margin-bottom:100px;
        }
        .content-wrapper {
            padding: 40px 10px;
        }
        .fc-right{
            margin-left:-50px;
        }
        .fc-center h2{
            margin-top:-70px;
        }
        .card-block{
            margin-top: 25px;
        }
    }

    .modal-body h4{
        font-family: 'Fixture light';
    }
    .cuerpoForm{
        font-family: 'Fixture bold' !important;
    }    
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-human-greeting menu-icon"></i>
        </span> crear nueva cita </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">    
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left"></h4>
                    <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right">
                        Sigue los pasos para poder crear una cita nueva
                    </div>
                </div>
                <div class="espacio_vertical"></div>
                <div class="container">
                    <div class="row mb-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-3">
                            <div class="card" style="width: 18rem;border: none;">
                                <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-2-1.jpg" class="card-img-top" alt="...">
                                <div class="card-body text-center">                        
                                    <h4 style="margin-top: 0px;text-align: center;">Tratamientos</h4>                                                                     
                                    @if($data["validacion"] == true && $data["categoria_servicio"] == 'Tratamientos')
                                        <button onclick="seleccionarServicio(this,'Tratamientos');" class="btn btnService btnCustomActive">Seleccionado</button>
                                        <div class="divServicios" id="divServiciosTratamientos">
                                    @else
                                        <button onclick="seleccionarServicio(this,'Tratamientos');" class="btn btnService">Seleccionar</button>
                                        <div class="divServicios" id="divServiciosTratamientos" style="display:none">
                                    @endif                 
                                        {{-- //FIXME --}}
                                        <h5 class="mt-3">Selecciona tu tratamiento</h5>                                        
                                        <select onchange="seleccionarTratamiento(this,'Tratamientos');" class="form-control selectServicios mt-1 js-example-basic-multiple" multiple="multiple" id="selectServiciosTratamientos" name="selectServiciosTratamientos">                                            
                                            @if($data["validacion"] == true && $data["categoria_servicio"] == 'Tratamientos')                                            
                                                @foreach($faciales as $item)
                                                    @if($item->id == $data["servicio_id"])
                                                    <option selected value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @else
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @endif
                                                @endforeach
                                            @else                                            
                                                @foreach($faciales as $item)
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card" style="width: 18rem;border: none;">
                                <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-8-1.jpg" class="card-img-top" alt="...">
                                <div class="card-body text-center">
                                    <h4 style="margin-top: 0px;text-align: center;">Spa</h4>
                                    @if($data["validacion"] == true && $data["categoria_servicio"] == 'Spa')
                                        <button onclick="seleccionarServicio(this,'Spa');" class="btn btnService btnCustomActive">Seleccionado</button>
                                        <div class="divServicios" id="divServiciosSpa">
                                    @else
                                        <button onclick="seleccionarServicio(this,'Spa');" class="btn btnService">Seleccionar</button>
                                        <div class="divServicios" id="divServiciosSpa" style="display:none">
                                    @endif
                                        <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                        <select onchange="seleccionarTratamiento(this,'Spa');" class="form-control selectServicios mt-1 js-example-basic-multiple" multiple="multiple" id="selectServiciosSpa" name="selectServiciosSpa">                                            
                                            @if($data["validacion"] == true && $data["categoria_servicio"] == 'Spa')                                            
                                                @foreach($masajes as $item)
                                                    @if($item->id == $data["servicio_id"])
                                                    <option selected value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @else
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @endif
                                                @endforeach
                                            @else                                            
                                                @foreach($masajes as $item)
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>  
                        <div class="col-3">
                            <div class="card" style="width: 18rem;border: none;">
                                <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-4.jpg" class="card-img-top" alt="...">
                                <div class="card-body text-center">                        
                                    <h4 style="margin-top: 0px;text-align: center;">Cortes</h4>
                                    @if($data["validacion"] == true && $data["categoria_servicio"] == 'Cortes')
                                        <button onclick="seleccionarServicio(this,'Cortes');" class="btn btnService btnCustomActive">Seleccionado</button>
                                        <div class="divServicios" id="divServiciosCortes">
                                    @else
                                        <button onclick="seleccionarServicio(this,'Cortes');" class="btn btnService">Seleccionar</button>
                                        <div class="divServicios" id="divServiciosCortes" style="display:none">
                                    @endif
                                        <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                        <select onchange="seleccionarTratamiento(this,'Cortes');" class="form-control selectServicios mt-1 js-example-basic-multiple" multiple="multiple" id="selectServiciosCortes" name="selectServiciosCortes">                                            
                                            @if($data["validacion"] == true && $data["categoria_servicio"] == 'Cortes')                                            
                                                @foreach($pestanias as $item)
                                                    @if($item->id == $data["servicio_id"])
                                                    <option selected value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @else
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @endif
                                                @endforeach
                                            @else                                            
                                                @foreach($pestanias as $item)
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card" style="width: 18rem;border: none;">
                                <img src="http://www.dickissbarbershop.com/wp-content/uploads/2020/01/FotosServicios322x222-5.jpg" class="card-img-top" alt="...">
                                <div class="card-body text-center">
                                    <h4 style="margin-top: 0px;text-align: center;">Cuidados</h4>
                                    @if($data["validacion"] == true && $data["categoria_servicio"] == 'Cuidados')
                                        <button onclick="seleccionarServicio(this,'Cuidados');" class="btn btnService btnCustomActive">Seleccionado</button>
                                        <div class="divServicios" id="divServiciosCuidados">
                                    @else
                                        <button onclick="seleccionarServicio(this,'Cuidados');" class="btn btnService">Seleccionar</button>
                                        <div class="divServicios" id="divServiciosCuidados" style="display:none">
                                    @endif
                                        <h5 class="mt-3">Selecciona tu tratamiento</h5>
                                        <select onchange="seleccionarTratamiento(this,'Cuidados');" class="form-control selectServicios mt-1 js-example-basic-multiple" multiple="multiple" id="selectServiciosCuidados" name="selectServiciosCuidados">                                            
                                            @if($data["validacion"] == true && $data["categoria_servicio"] == 'Cuidados')                                            
                                                @foreach($depilaciones as $item)
                                                    @if($item->id == $data["servicio_id"])
                                                    <option selected value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @else
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                    @endif
                                                @endforeach
                                            @else                                            
                                                @foreach($depilaciones as $item)
                                                    <option value="{!! $item->id !!}">{!! $item->nombre !!}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- @if($data["validacion"]) --}}
                        <div class="col-12 text-right">
                            <button onclick="avanzarPrimerPaso();" id="btnAvanzar1" class="btn btn-primary_local">Continuar</button>
                        </div>
                        {{-- @endif --}}
                        {{-- HIDDEN --}}
                        @if($data["validacion"] == true)
                            <input type="hidden" name="servicio_seleccionado" id="servicio_seleccionado" value="{!! $data["categoria_servicio"] !!}">
                            <input type="hidden" name="tratamiento_seleccionado" id="tratamiento_seleccionado" value="{!! $data["servicio_id"] !!}">
                        @else
                            <input type="text" name="servicio_seleccionado" id="servicio_seleccionado" value="0">
                            <input type="text" name="tratamiento_seleccionado" id="tratamiento_seleccionado" value="0">

                            <input type="text" name="servicio_seleccionado_Spa" id="servicio_seleccionado_Spa" value="0">
                            <input type="text" name="tratamiento_seleccionado_Spa" id="tratamiento_seleccionado_Spa" value="0">

                            <input type="text" name="servicio_seleccionado_Cortes" id="servicio_seleccionado_Cortes" value="0">
                            <input type="text" name="tratamiento_seleccionado_Cortes" id="tratamiento_seleccionado_Cortes" value="0">

                            <input type="text" name="servicio_seleccionado_Cuidados" id="servicio_seleccionado_Cuidados" value="0">
                            <input type="text" name="tratamiento_seleccionado_Cuidados" id="tratamiento_seleccionado_Cuidados" value="0">
                        @endif 
                    </div>
                </div>

                <div style="background-color:#f9f9f9; padding:40px 0px 1px;position: absolute;bottom: -10000px;" id="divPaso2">
                    <div class="container">
                        <div class="row" id="calendario">
                            <div class="col-12 text-left">
                                <button type="button" class="btn btn-primary_local" onclick="regresarPaso1();">
                                    Regresar
                                </button>
                            </div>
                            <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 style="background-color:#ffffff; padding:0px 0px 50px; display:none" id="divPaso3">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 text-left pt-5">
                                <button type="button" class="btn btn-primary_local" 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 el horario para tu cita</h4>
                            </div>
                            <div class="col-xl-12 col-12 tabla mt-5" id="divTablaTratamientos" style="background-color:#ffffff;">
                                <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" id="selectBarbera">
                                            Atiende: <br />
                                            <div class="select_custom">                                            
                                                <select class="form_custom" name="" id="selelectEmpleadosAjax">
                                                    <option value="1">Montserrat Hernández</option>
                                                </select>
                                            </div>
                                        </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>

                {{-- Excepción de un dia anterior --}}
                <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>
                {{-- Excepción de no selección de un servicio y/o tratamiento  --}}            
                <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">
                            @if($data["validacion"] == true)
                            <h5 class="modal-title" id="exampleModalLongTitle" style="text-align:center;">Reagendar</h5>
                            @else
                            <h5 class="modal-title" id="exampleModalLongTitle" style="text-align:center;">Reservación</h5>
                            @endif
                            <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="{!! url('citas/crearCitaWizard')!!}" method="POST" role="form" id="form_id" >
                                {{ csrf_field() }}
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <h3>- Datos de la cita</h3>
                                    </div>
                                    <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>
                                    @if($data["validacion"] != true)
                                    <div class="col-12 mb-3">
                                        <hr>      
                                        <h3>- Datos del cliente</h3>
                                    </div>                                    
                                    <div class="col-sm-12 cuerpoForm">
                                        ¿El cliente ya existe?
                                        <br />
                                        <br />
                                        <input type="checkbox" id="clienteOn" name="switchCliente" class="js-small" /> <span> Si</span>
                                        <br>
                                        <br>
                                        <div id="divDatosCliente">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    {!! Form::label('nombre_cliente', 'Nombre cliente:') !!}
                                                    {!! Form::text('nombre_cliente', null, ['id' => 'nombre_cliente','class' => 'form-control']) !!}
                                                    <p class="text-danger" id="msg_nombre"></p>
                                                </div>
                                                <div class="col-sm-6">
                                                    {!! Form::label('a_paterno', 'Apellido paterno:') !!}
                                                    {!! Form::text('a_paterno', null, ['id' => 'a_paterno','class' => 'form-control']) !!}
                                                    <p class="text-danger" id="msg_apaterno"></p>
                                                </div>
                                                <div class="col-sm-6">
                                                    {!! Form::label('a_materno', 'Apellido materno:') !!}
                                                    {!! Form::text('a_materno', null, ['id' => 'a_materno','class' => 'form-control']) !!}
                                                    <p class="text-danger" id="msg_amaterno"></p>
                                                </div>
                                                <div class="col-sm-6">
                                                    {!! Form::label('correo_electronico', 'Correo electrónico:') !!}
                                                    {!! Form::text('correo_electronico', null, ['id' => 'correo_electronico','class' => 'form-control']) !!}
                                                    <p class="text-danger" id="msg_email"></p>
                                                </div>
                                                <div class="col-sm-6">
                                                    {!! Form::label('telefono', 'Telefóno:') !!}
                                                    {!! Form::text('telefono', null, ['id' => 'telefono','class' => 'form-control']) !!}
                                                    <p class="text-danger" id="msg_telefono"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="divClienteExistente" style="display:none;">
                                            <select class="js-example-data-array col-sm-12" name="selectCliente" id="selectCliente">
                                                <option disabled selected value="0">Selecciona una opción</option>
                                                @foreach($clientes as $cliente)
                                                    <option value="{!! $cliente->id !!}">{!! $cliente->nombre !!} {!! $cliente->a_paterno !!} {!! $cliente->a_materno !!}</option>
                                                @endforeach
                                            </select>
                                            <p class="text-danger col-12" id="msg_selectCliente"></p>
                                        </div>
                                    </div>
                                    @else
                                    <div class="col-12">
                                        Al aceptar la cita anterior sera cancelada y se creara una nueva
                                        <br />
                                        ¿Deseas continuar?
                                    </div>
                                        <input type="hidden" class="form-control" name="selectCliente" value="{!! $data["cliente_id"] !!}">
                                        <input type="hidden" class="form-control" name="switchCliente" value="on">
                                    @endif
                                </div>
                                {{-- HIDDEN --}}
                                @if($data["validacion"] == true)
                                    <input type="hidden" class="form-control" id="services" name="services" value="{!! $data["servicio_id"] !!}" aria-describedby="emailHelp">
                                    <input type="hidden" class="form-control" id="costo" name="costo" value="{!! $data["costo"] !!}" aria-describedby="emailHelp" >
                                    <input type="hidden" class="form-control" id="validacion_cita" name="validacion_cita" value="{!! $data["cita_id"] !!}">                                    
                                @else
                                    <input type="hidden" class="form-control" id="services" name="services" aria-describedby="emailHelp">
                                    <input type="hidden" class="form-control" id="costo" name="costo" aria-describedby="emailHelp" >
                                @endif
                                <input type="hidden" class="form-control" id="horas" name="horas" aria-describedby="emailHelp">                                
                                <input type="hidden" class="form-control" id="fecha" name="fecha" aria-describedby="emailHelp">                                
                                <input type="hidden" class="form-control" id="empleado_id" name="empleado_id" aria-describedby="emailHelp" >
                                <input type="hidden" class="form-control" id="validacion_tipo" name="validacion_tipo" value="{!! $data["validacion"] !!}">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn" id="btnCancelar" data-dismiss="modal">cerrar</button>
                            @if($data["validacion"] == true)
                                <button type="submit" class="btn" id="btnEnviar" onclick="enviarCorreo();">reagendar</button>
                            @else
                                <button type="submit" class="btn" id="btnEnviar" onclick="enviarCorreo();">enviar</button>
                            @endif
                        </div>
                    </div>
                </div>
                
            </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 type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/switchery/js/switchery.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>

<script>

    @if($data["validacion"] == true)
    var php_servicio = "{!! $data['nombre_servicio'] !!}";
    var php_tratamiento = "{!! $data['categoria_servicio'] !!}";
    var php_costo = "{!! $data['costo'] !!}";

    if(php_tratamiento == "Pestanias")
    {
        php_tratamiento = "Pestañas";
    }

    $("#t_servicio").text(php_servicio);
    $("#t_tratamiento").text(php_tratamiento);
    $("#t_costo").text(php_costo);
    @endif

    //FIXME

    
    $("#selectServiciosTratamientos").select2({
        placeholder: 'aosdnasndonas',        
    });

    // $("#selectCliente").select2({});
    // $("#selectCliente").val('0');
    // $('#selectCliente').change();
    @if($data["validacion"] != true)
    var elemsmall = document.querySelector('.js-small');
    var switchery = new Switchery(elemsmall, { color: '#4680ff', jackColor: '#fff', size: 'small' });
    @endif
    $('#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){
        precio.push({
            servicio:value.id,
            costo: value.costo,
        });
    });
    @if($data["validacion"] == true)
    function enviarCorreo() {                
        $('#form_id').submit();           
    }
    @else
    function enviarCorreo() {                
        var f_nombre = $('#nombre_cliente').val();
        var f_apaterno = $('#a_paterno').val();
        var f_amaterno = $('#a_materno').val();
        var f_telefono = $('#telefono').val();
        var f_email = $('#correo_electronico').val();
        var selectCliente = $('#selectCliente').val();                        
        var checkCliente = $("#clienteOn").prop('checked');                       
        if(checkCliente == false)
        {
            if(f_nombre == "" || f_apaterno == "" || f_amaterno == "" || f_telefono == "" || f_email == "" ){
                if(f_nombre == "")
                {
                    $('#msg_nombre').text("El campo 'Nombre' es requerido");
                }
                if(f_apaterno == "")
                {
                    $('#msg_apaterno').text("El campo 'Apellido paterno' es requerido");
                }
                if(f_amaterno == "")
                {
                    $('#msg_amaterno').text("El campo 'Apellido materno' es requerido");
                }
                if(f_email == ""){
                    $('#msg_email').text("El campo 'E-mail' es requerido");
                }
                if(f_telefono == "" ){
                    $('#msg_telefono').text("El campo 'Teléfono' es requerido");
                }
                if(f_nombre != ""){
                    $('#msg_nombre').text("");
                }
                if(f_apaterno != ""){
                    $('#msg_apaterno').text("");
                }
                if(f_amaterno != ""){
                    $('#msg_amaterno').text("");
                }
                if(f_email != ""){
                    $('#msg_email').text("");
                }
                if(f_telefono != "" ){
                    $('#msg_telefono').text("");
                }
            }
            else{
                if(f_nombre != ""){
                    $('#msg_nombre').text("");
                }
                if(f_email != ""){
                    $('#msg_email').text("");
                }
                if(f_telefono != "" ){
                    $('#msg_telefono').text("");
                }
                if(f_apaterno != ""){
                    $('#msg_apaterno').text("");
                }
                if(f_amaterno != ""){
                    $('#msg_amaterno').text("");
                }
                $('#form_id').submit();
            }
        }else{
            if(selectCliente == null)
            {
                $('#msg_selectCliente').text("Debes de seleccionar un cliente para poder seguir");
            }
            else{
                $('#msg_selectCliente').text("");
                $('#form_id').submit();
            }
        }

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

        var calendar = new FullCalendar.Calendar(calendarEl, {

        plugins: [ 'interaction', 'dayGrid','timeGrid' ],
            locale: 'es',
            height: 700,
            timeZone: 'local',
            selectable: true,
            header: {
                left: 'prev,today,next',
                center: 'title',
                right: ''
            },
            defaultDate: dia_actual,            
            eventLimit: true,            
            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);   
                //FIXME: DESCOMENTAR TAMBEN ESTAS LINEAS DE CODIGO, SON LAS VALDACIONES PARA QUE TENGA UN SERVICIO SELECCIONADO --- DEBE DE AJUSTARSE PARA QUE SELECCIONE LOS OTOS 3             
                // if($("#servicio_seleccionado").val() == 0 || $("#tratamiento_seleccionado").val() == 0){
                //     $("#modalService").modal();
                // }
                // else{
                    if(info.date < myDate)
                    {
                        $('#exampleModal').modal();                    
                    }
                    else{
                        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 tratamiento_seleccionado = $("#tratamiento_seleccionado").val();
                        var tratamiento_seleccionado_Spa = $("#tratamiento_seleccionado_Spa").val();
                        var tratamiento_seleccionado_Cortes = $("#tratamiento_seleccionado_Cortes").val();
                        var tratamiento_seleccionado_Cuidados = $("#tratamiento_seleccionado_Cuidados").val();
                        var servicio_inicial = '';
                        if(tratamiento_seleccionado != '' && tratamiento_seleccionado != 0)
                        {
                            servicio_inicial = 1;
                        }
                        else if(tratamiento_seleccionado_Spa != '' && tratamiento_seleccionado_Spa != 0)
                        {
                            servicio_inicial = 2;
                        }
                        else if(tratamiento_seleccionado_Cortes != '' && tratamiento_seleccionado_Cortes != 0)
                        {
                            servicio_inicial = 3;
                        }
                        else if(tratamiento_seleccionado_Cuidados != '' && tratamiento_seleccionado_Cuidados != 0)
                        {
                            servicio_inicial = 4;
                        }

                        console.log(servicio_inicial, '¿asndn');
                        
                        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)
                            {
                                var nombres = '';
                                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');     
                                    // $("#selelectEmpleadosAjax").empty(); TODO:ARREGLAR                           
                                    $.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);
                                        });
                                        nombres[key] = value.empleado;                                        
                                    });                                    
                                    $("#divError").hide();
                                    $("#divAdvertencia").hide();
                                }
                            }
                        });
                    }                    
                // }                
            }
        });
        calendar.render();
        $(".fc-today-button").text('HOY');
        $('.fc-prev-button').text('<');
        $('.fc-next-button').text('>');
        $('.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');

        if(servicio == "Tratamientos")
        {
            $("#servicio_seleccionado").val(servicio);
        }
        else{
            $("#servicio_seleccionado_"+servicio).val(servicio);
        }        

        // $("#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);        
        // $("#btnAvanzar1").remove();

        $("#selectServicios"+servicio).select2({
            placeholder: 'Selecciona una opción',
        });
    }

    function seleccionarTratamiento(elemento,servicio)
    {        
        if(servicio == "Tratamientos")
        {
            $("#tratamiento_seleccionado").val($(elemento).val());
        }
        else{
            $("#tratamiento_seleccionado_"+servicio).val($(elemento).val());
        }        
        $("#services").val($(elemento).val());
        $("#t_tratamiento").text($('select[id="'+elemento.id+'"] option:selected').text());
        $.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');
        // });
        
    }

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

    $("#clienteOn").on( 'change', function() {
        if( $(this).is(':checked') ) {
            $("#divDatosCliente").hide();
            $("#divClienteExistente").show();
        } else {
            $("#divDatosCliente").show();
            $("#divClienteExistente").hide();
        }
    });

    //Animación para las transciones
    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() {

        //FIXME:DEBO DE DESCOMENTAR ESTAS LINEAS, PERO DEBO AJUSTAR EL METOD PARA QUE NO SOLO COTEJE EL DE TRATAMIENTO SI NO LOS OTROS 3 TAMBIEN
        // 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');
            });
        // }        
    }

    //TODO: Metodo para cuando se selecciona más de un servicio y se tiene que actualizar la tabla que trae los hoarios.
    function actualizarTablaHorarios(servicio_en_curso)
    {

    } 
</script>
@endsection