@extends('layouts.app')

@section('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"/>

<!-- sweet alert framework -->
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/sweetalert/css/sweetalert.css">

<!-- animation nifty modal window effects css -->

<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/switchery/css/switchery.min.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="{!! asset('css') !!}/locales.css"/>


<style>
    .select2, .card-header div div h5{
        font-family: "Fixture Expandend Extra light" !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;
    }
    /* .fc-button-primary:disabled{
        border-color: #00c88b !important;
    }
    .fc-button-primary:not(:disabled).fc-button-active{
        border-color: #00c88b !important;
    } */
    /* .fc-button-primary:hover{
        border-color: #00c88b !important;
        background: #00d896 !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-table-large menu-icon"></i>
        </span> agenda de citas </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="content">
    <div class="box box-primary">
        <div class="box-body">
            <div class="page-body">
                <div class="card">
                    <div class="card-header">
                    @include('flash::message')
                    <div class="clearfix">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="text-left">
                                    <h5>Selecciona un colaborador para filtrar las citas</h5>
                                    <select id="selectEmpleado" name="selectEmpleado" class="js-example-data-array col-sm-12">
                                        <option value="Selecciona una opción">Selecciona una opción</option>
                                        @foreach($empleados as $empleado)
                                            <option value="{!! $empleado->id !!}">{!! $empleado->usuario->name.' '.$empleado->usuario->a_paterno.' '.$empleado->usuario->a_materno !!}</option>
                                        @endforeach                                    
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="text-right">
                                    <a href="{!! url('citas/wizard/nueva/cita') !!}" class="btn btn-primary_local">
                                        Programar cita
                                    </a>
                                </div>
                                <div id='external-events'>
                                    <p>
                                      <strong>Draggable Events</strong>
                                    </p>
                                    <div class='fc-event'>My Event 1</div>
                                    <div class='fc-event'>My Event 2</div>
                                    <div class='fc-event'>My Event 3</div>
                                    <div class='fc-event'>My Event 4</div>
                                    <div class='fc-event'>My Event 5</div>
                                    <p>
                                      <input type='checkbox' id='drop-remove' />
                                      <label for='drop-remove'>remove after drop</label>
                                    </p>
                                  </div>
                            </div>
                        </div>                                            
                    </div>
                    <div class="espacio_vertical"></div>
                        <div class="row">
                            <div class="col-md-12" id="divSalasEstatic">
                                {{-- <h5>Selecciona un colaborador para filtrar las citas</h5>
                                <select id="selectEmpleado" name="selectEmpleado" class="js-example-data-array col-sm-12">
                                    <option value="Selecciona una opción">Selecciona una opción</option>
                                    @foreach($empleados as $empleado)
                                        <option value="{!! $empleado->id !!}">{!! $empleado->usuario->name.' '.$empleado->usuario->a_paterno.' '.$empleado->usuario->a_materno !!}</option>
                                    @endforeach                                    
                                </select> --}}

                                <div id="msgCabinas" style="color:red"></div>
                            </div>
                            <div class="col-md-6" id="divLoaderSalas" style="display:none">
                                <h5>Selecciona el empleado disponible para el servicio</h5>
                                <div class="spinner-border text-info" role="status" id="loaderSala">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>

                        </div>
                            <div class="espacio_vertical"></div>
                        </div>
                    </div>
                        </div>
                    </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-12 ">
                                    <div id='calendar'></div>
                                </div>
                                <div class="spinner-border text-info" role="status" id="loader">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center">
    </div>
    <div class="md-overlay"></div>

    <div class="modal fade" id="modal-2" 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">Visualizar cita</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <h4><strong>Nombre del cliente:</strong> <span id="clienteV"></span></h4>
                        <h4><strong>Teléfono del cliente:</strong> <span id="telefonoV"></span></h4>
                        <h4><strong>Tipo de servicio:</strong> <span id="servicioV"></span></h4>
                        <h4><strong>Especialista:</strong> <span id="salaV"></span></h4>
                        <h4><strong>Día de la cita: </strong><span id="diaV"></span></h4>
                        <h4><strong>Hora de la cita:</strong> <span id="horaV"></span></h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-row w-100">
                    <div id="editar" class="col-sm-3"></div>
                    <div id="eliminar" class="col-sm-3" ></div>
                    <div id="pagar" class="col-sm-3"></div>
                    <div id="asistencia" class="col-sm-3" ></div>
                    <div id="mensajeBotonera" class="col-sm-12"></div>
                </div>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-1" 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">Crear cita</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-block">
                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                            <div class="form-group col-sm-12 cuerpoForm">
                                                ¿El cliente ya existe?
                                                <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']) !!}
                                                        </div>
                                                        <div class="col-sm-6">
                                                            {!! Form::label('a_paterno', 'Apellido paterno:') !!}
                                                            {!! Form::text('a_paterno', null, ['id' => 'a_paterno','class' => 'form-control']) !!}
                                                        </div>
                                                        <div class="col-sm-6">
                                                            {!! Form::label('a_materno', 'Apellido materno:') !!}
                                                            {!! Form::text('a_materno', null, ['id' => 'a_materno','class' => 'form-control']) !!}
                                                        </div>
                                                        <div class="col-sm-6">
                                                            {!! Form::label('correo_electronico', 'Correo electrónico:') !!}
                                                            {!! Form::text('correo_electronico', null, ['id' => 'correo_electronico','class' => 'form-control']) !!}
                                                        </div>
                                                        <div class="col-sm-6">
                                                            {!! Form::label('telefono', 'Telefóno:') !!}
                                                            {!! Form::text('telefono', null, ['id' => 'telefono','class' => 'form-control']) !!}
                                                        </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>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-12">
                                                <!-- <p id="fechaSeleccionada"></p> -->
                                                <div id="horaBool" class="col-sm-12 row" style="margin-right: 0px;margin-left: 0px;">
                                                </div>
                                            </div>
                                            {!! Form::text('fecha', null, ['id' => 'fecha','class' => 'form-control','style' => 'display:']) !!}
                                            {!! Form::text('hora', null, ['id' => 'hora','class' => 'form-control','style' => 'display:']) !!}
                                            {!! Form::text('servicio_id', null, ['id' => 'servicio_id','class' => 'form-control','style' => 'display:']) !!}
                                            {!! Form::text('id_sala', null, ['id' => 'input_select','class' => 'form-control','style' => 'display:']) !!}
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="form-group row">

                                        <div class="col-sm-6">
                                            <button type="button" class="btn btn-primary_local"  id="btnGuardar">guardar</button>
                                        </div>
                                        <div class="col-sm-6">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">cerrar</button>
                                        </div>
                                    </div>
                            </div>
                        </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 type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/modernizr/js/modernizr.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/multiselect/js/jquery.multi-select.js"></script>


<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/sweetalert/js/sweetalert.min.js"></script>

<!-- sweet alert modal.js intialize js -->
<!-- modalEffects js nifty modal window effects -->
<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/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://unpkg.com/@fullcalendar/interaction@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>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
    $("#selectServicio").select2({});
    $("#selectSala").select2({});
    $("#selectCliente").select2({});
    $("#selectEmpleado").select2({});
    
    $('#loader').removeClass('spinner-border');
    var url_dinamica = "{!! URL::to('/') !!}";
    var configuracion = {!! $configuracion !!};
    var elemsmall = document.querySelector('.js-small');
    var switchery = new Switchery(elemsmall, { color: '#4680ff', jackColor: '#fff', size: 'small' });

    var d = new Date();
    var calendar;

    var month = d.getMonth()+1;
    var day = d.getDate();

    var dia_actual = d.getFullYear() + '-' +
    (month<10 ? '0' : '') + month + '-' +
    (day<10 ? '0' : '') + day;

            var nombre = $('[name=nombre_cliente]');
            var apellido_pa = $('[name=a_paterno]');
            var apellido_ma = $('[name=a_materno]');
            var correo = $('[name=correo_electronico]');
            var telefono = $('[name=telefono]');
            var confirmacion = "Ya puede envíar los datos";
            var longitud = "La contraseña debe ser mayor a 6 caracteres";
            var span = $('<span style="color:red; font-size:13px; font-weight:700;"></span>').insertAfter(nombre);
            var span1 = $('<span style="color:red; font-weight:700;"></span>').insertAfter(apellido_pa);
            var span2 = $('<span style="color:red; font-weight:700;"></span>').insertAfter(apellido_ma);
            var span3 = $('<span style="color:red; font-weight:700;"></span>').insertAfter(correo);
            var span4 = $('<span style="color:red; font-weight:700;"></span>').insertAfter(telefono);
            var span_succes = $('<span style="color:green; font-weight:700;"></span>').insertAfter(nombre);
            var negacion_nom = "El campo 'Nombre' es requerido";
            function coincidePassword(){
                if(nombre.val() != "")
                {
                    span.text(confirmacion);
                    span.text("");
                    $('#btnGuardar').attr('disabled',false);

                }

            }
           function BloquearBoton()
           {
               if(nombre.val() == "" && nombre.val().length == 0)
               {
                   console.log(negacion_nom);
                   span.text(negacion_nom);
                   span.text("");
                   $("#btnGuardar").attr('disabled','disabled');
               }
           }
           nombre.keyup(function(){
               if(nombre.val() != ""){
                coincidePassword();
               }
               else{
                   console.log("entra aqui");
                    BloquearBoton();
               }
           });

           var eventos_formato = [];

    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var eventosAll = {!! $citas !!};
    var servicio = [];

    $('#selectServicio').change(function(){
        $("#divLoaderSalas").show();
        $("#divSalasEstatic").hide();
        var obtener_id = $(this).val();        
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;
        $("#servicio_id").val(valueSelected);
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;
        $("#servicio_id").val(valueSelected);
        $('#select').val(obtener_id);
        // console.log('Que enetro',obtener_id);
        $.ajax({
            url: url_dinamica+"/api/citas/obtener/"+obtener_id,
            type:"GET",
            dataType:"json",
            success:function(data){
                console.log('-------------------------');                
                console.log('Esto es la data',data);
                console.log('-------------------------');
                $('#selectEmpleado').empty().append();
                $('#selectEmpleado').append('<option value="Selecciona una opción">Selecciona una opción</option>');

                $.each(data.data,function(key,value){
                        //console.log(value);
                        $('#selectEmpleado').append(
                            '<option value="'+value.id+'">'+value.nombre+' '+value.a_paterno+' '+value.a_materno+'</option>'
                        );
                        $('#input_select').val($('#selectEmpleado').val());
                });                
                $("#divLoaderSalas").hide();
                $("#divSalasEstatic").show();
            },
            error:function(xhr,estado,error)
            {
                console.log(xhr);
                console.log(estado);
                console.log(error);
            }
        });
    });
    //var eventos_formato = [];
    $.each(eventosAll, function(key,value){   
        var full_name = value.cliente.nombre;
        if (value.cliente.a_paterno != null) {
            full_name = full_name + ' ' + value.cliente.a_paterno;
        }
        if (value.cliente.a_materno != null) {
            full_name = full_name + ' ' + value.cliente.a_materno;
        }
        eventos_formato.push({
            id:value.id,
            title:value.servicio,
            start:value.fecha_hora,
            end:value.hora_finalizacion.date,
            empleado: value.nombre_empleado,
            fecha:value.fecha_hora,
            estatus:value.estatus,
            cliente: full_name,
            telefono: value.cliente.telefono,
            borderColor: '#'+value.color,
            backgroundColor: '#'+value.color,
            textColor: '#'+value.letra_color,
            estatus_pago: value.estatus_pago,
        });
    });
    //console.log(eventos_formato)

    $('#selectEmpleado').change(function(){
        var obtener_id = $(this).val();
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;

        $("#sala_id").val(valueSelected);
        $('#calendar').empty();
        $('#loader').addClass('spinner-border');
        $('#input_select').val(obtener_id);
        $('#msgCabinas').text('');
        $("#selectCliente").val('0');
        $('#selectCliente').change();
        console.log(obtener_id,'aqui hay uno');
        console.log('ESto sirve ene algun punto?');
        console.log(url_dinamica+"/api/citas/obtenerService/"+obtener_id);        
        $.ajax({
            url: url_dinamica+"/api/citas/obtenerService/"+obtener_id,
            type:"GET",
            dataType:"json",
            success:function(data){
                var Citas_Servicio = [];
                $('#loader').removeClass('spinner-border');
                console.log('------------Alto START---------');                    
                console.log(data);
                console.log('------------Alto END---------');
                $.each(data.data,function(key,value){      
                    console.log(value,'entrop');
                                  
                    // console.log('----------------  valores  -------------');
                    // console.log(value);
                    // var full_name = value.cliente.nombre;
                    // if (value.cliente.a_paterno != null) {
                    //     full_name = full_name + ' ' + value.cliente.a_paterno;
                    // }
                    // if (value.cliente.a_materno != null) {
                    //     full_name = full_name + ' ' + value.cliente.a_materno;
                    // }
                    Citas_Servicio.push({
                        id:value.id,
                        title:value.servicios,
                        start:value.fecha,
                        end:value.hora_finalizacion.date,
                        fecha:value.fecha,
                        sala:value.sala,
                        hora:value.hora,
                        estatus:value.estatus,
                        sala_id:value.id_sala,
                        empleado: value.empleado,
                        cliente: value.cliente,
                        telefono: value.telefono,
                        borderColor: '#'+value.color,
                        backgroundColor: '#'+value.color,
                        textColor: '#'+value.letra_color,
                        estatus_pago: value.estatus_pago,
                    });                    
                });
                if(valueSelected != 0)
                {
                    calendar = new FullCalendar.Calendar(calendarEl, {
                        plugins: [ 'interaction', 'dayGrid','timeGrid' ],
                        locale: 'es',
                        height: 715,
                        slotLabelFormat: [                        
                            {
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: true,
                                omitZeroMinute: true,                            
                            }
                        ],
                        timeZone: 'local',
                        defaultView: 'timeGridFourDay',
                        selectable: true,
                        header: {
                            left: 'prev,today,next',
                            center: 'title',
                            right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
                        },
                        dateClick: function(info)
                        {
                            // alert('Entro 1');
                            if(validarSelects())
                            {
                                var myDate = new Date();
                                myDate.setDate(myDate.getDate()-1);

                                if(info.date < myDate)
                                {
                                    console.log('Primerp del if');
                                    
                                    swal({
                                            type: 'error',
                                            title: 'Algo salio mal',
                                            text: 'Por favor selecciona una fecha valida.',
                                        });
                                }
                                else{
                                    console.log('Seungod del if');
                                    var longitud = info.dateStr;
                                    var service_id = $("#selectServicio").val();
                                    console.log(service_id);
                                    var id_sala = $("#input_select").val();
                                    // console.log(id_sala);
                                    $.ajax({
                                        // url: url_dinamica+"/api/citas/services-salas/"+info.dateStr,
                                        url: url_dinamica+"/api/citas/getHoras/"+info.dateStr+"/"+service_id+"/"+id_sala,
                                        type:"GET",
                                        dataType:"json",
                                        success:function(data){
                                            $('#horaBool').empty().append();
                                            console.log('Este es el bueno');                                            
                                            if(longitud.length == 10){
                                                $('#fecha').val(longitud.substring(0,10));
                                                data.data.forEach(element => {
                                                    $('#horaBool').append('<button onclick="btnActive(this);recibirHora(\''+element.hora+'\');" value="'+element.hora+'" type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>'+element.hora+'</button>');
                                                });
                                            }
                                            else{
                                                console.log(data);                                                
                                                $('#fecha').val(longitud.substring(0,10));
                                                $('#hora').val(longitud.substring(11,19));
                                                $('#horaBool').html('');
                                            }                                                 
                                        },
                                        error:function(e)
                                        {
                                            console.log('algo salio mal jeje');
                                            
                                            console.log(e);
                                            
                                        }
                                    });
                                        //localhost/flemish_sistema/public/api/citas/services-salas/2019-06-26
                                        $('#fechaSeleccionada').html(info.dateStr);
                                        $('#modal-1').modal();
                                    }

                                }
                            else
                            {
                                // alert('Por favor llena los campos faltantes');
                                swal({
                                            type: 'error',
                                            title: 'Ups',
                                            text: 'Debes de seleccionar una cita existente.',
                                        });
                            }
                        },//fin on click calendarios
                        select: function(info) {
                            // alert('se selecciono ' + info.startStr + ' to ' + info.endStr);
                        },
                        eventClick: function(info)
                        {
                            console.log('Hola');                            
                            // console.log(info.event._def.extendedProps);
                            // alert('entro');
                            var id = info.event._def.publicId;
                            var formato = new Date(info.event._instance.range.start);
                            var fomat = info.event._def.extendedProps.fecha;
                            var dividir = fomat.split(" ");
                            var d = formato.getDate();
                            var m = formato.getMonth()+1;
                            var y = formato.getFullYear();
                            var hours = formato.getHours();
                            var minutos = formato.getMinutes();
                            $('#clienteV').html(info.event._def.extendedProps.cliente);
                            $('#telefonoV').html(info.event._def.extendedProps.telefono);
                            $('#servicioV').html(info.event._def.title);                            
                            
                            $('#salaV').html(info.event._def.extendedProps.empleado);
                            $('#diaV').html(info.event._def.extendedProps.fecha);
                            $('#horaV').html(info.event._def.extendedProps.hora);
                            var hoyDia = new Date();                                                
                            var hoyDiaStart = new Date(hoyDia.getFullYear()+'-'+(hoyDia.getMonth() + 1)+'-'+hoyDia.getDate()+' 00:00:00');
                            var hoyDiaEnd = new Date(hoyDia.getFullYear()+'-'+(hoyDia.getMonth() + 1)+'-'+hoyDia.getDate()+' 23:59:59');
                            var fecha_cita_actual = new Date(y + "-" + m +"-" + d + ' ' + dividir[1]);
                            var estatus = ''
                            $('#asistencia').html('');
                            $("#editar").html('');
                            $('#eliminar').html('');
                            $('#pagar').html('');
                            $("#mensajeBotonera").html('');                 
                            if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd > fecha_cita_actual)
                            {
                                // console.log(info.event._def.extendedProps);
                                
                                $("#mensajeBotonera").html('');
                                if(info.event._def.extendedProps.estatus == 'Asistida')
                                    {
                                    estatus = 'disabled';
                                    $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistida</a>');
                                    $("#editar").html("");
                                }
                                else{
                                    $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistencia</a>');
                                    $("#editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                                }                                  
                                if(info.event._def.extendedProps.estatus != 'Asistida')
                                {
                                    $('#eliminar').html('<form action="{!!asset('citas')!!}/{!!"cita-eliminar/'+id+'"!!}" method="POST" role="form" id="form_id">'+
                                            '{{ method_field("DELETE") }}'+
                                            '{{ csrf_field() }}'+
                                            '<button type="submit" class="btn btn-sm btn-primary_local" id="btnEliminar">'+"Cancelar"+'</button>'+
                                        '<form>'
                                    );
                                }
                                if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                {
                                    $('#pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                }                            
                                else{
                                    $('#pagar').html('<a class="btn btn-sm btn-success disabled" href="#" style="color: #fff;">Pagada</a>');
                                }
                            }
                            else if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd < fecha_cita_actual)
                            {
                                $("#mensajeBotonera").html('');
                                $('#asistencia').html('');
                                $("#editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                                $('#eliminar').html('<form action="{!!asset('citas')!!}/{!!"cita-eliminar/'+id+'"!!}" method="POST" role="form" id="form_id">'+
                                                        '{{ method_field("DELETE") }}'+
                                                        '{{ csrf_field() }}'+
                                                        '<button type="submit" class="btn btn-sm btn-primary_local" id="btnEliminar">'+"Cancelar"+'</button>'+
                                                    '<form>'
                                );
                                if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                {
                                    $('#pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                }                            
                                else{
                                    $('#pagar').html('<a class="btn btn-sm btn-success disabled"  href="#" style="color: #fff;">Pagada</a>');
                                }
                            }
                            else{
                                $('#asistencia').html('');
                                $("#editar").html('');
                                $('#eliminar').html('');
                                $('#pagar').html('');
                                $("#mensajeBotonera").html('Esta cita ya no esta disponible para realizar acciones');
                            }
                            $('#modal-2').modal();
                        },
                        views: {
                            timeGridFourDay: {
                                type: 'timeGrid',
                                duration: { days: 2 },
                                buttonText: 'Hoy',
                                minTime: configuracion.hora_entrada,
                                maxTime: configuracion.hora_salida
                            },
                            dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes',
                            }
                        },
                    defaultDate: dia_actual,
                    navLinks: true, // can click day/week names to navigate views
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events: Citas_Servicio,
                    dayRender: function (info, cell) {
                    var myDate = new Date();
                        myDate.setDate(myDate.getDate()-1);
                            if (info.date < myDate)
                            {
                                $('.fc-past').css("background-color", "#ebf8fa");
                            }
                    },                    
                    });
                    calendar.render();
                }
                else
                {
                    calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [ 'interaction', 'dayGrid','timeGrid' ],
                    height: 715,
                    slotLabelFormat: [                        
                        {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true,
                            omitZeroMinute: true,                            
                        }
                    ],
                    locale: 'es',
                    timeZone: 'local',
                    defaultView: 'timeGridFourDay',
                    selectable: true,
                    header: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
                    },

                    dateClick: function(info)
                    {
                        alert('Entro 2 a ver que pasoa');
                        if(validarSelects())
                        {
                            var myDate = new Date();
                            myDate.setDate(myDate.getDate()-1);
                            console.log('---------------');
                            console.log(info,myDate);
                            console.log('---------------');                            
                            if(info.date < myDate)
                            {
                                swal({
                                    type: 'error',
                                    title: 'Algo salio mal',
                                    text: 'Por favor selecciona una fecha valida.',
                                });
                            }
                            else{
                                var longitud = info.dateStr;
                                var id_sala = $("#input_select").val();
                                $.ajax({
                                    url: url_dinamica+"/api/citas/services-salas/"+info.dateStr,
                                    type:"GET",
                                    dataType:"json",
                                    success:function(data){                                        
                                        $('#horaBool').empty().append();
                                        $.each(data.data,function(ket,value){
                                            if(value.hora == "10:00:00"){
                                                fecha_10mañana = true;
                                            }
                                            if(value.hora == "11:00:00"){
                                                fecha_11mañana= true;
                                            }
                                            if(value.hora == "12:00:00"){
                                                fecha_12tarde = true;
                                            }
                                            if(value.hora == "13:00:00"){
                                                fecha_1tarde = true;
                                            }
                                            if(value.hora == "14:00:00"){
                                                fecha_2tarde = true;
                                            }
                                            if(value.hora == "15:00:00"){
                                                fecha_3tarde = true;
                                            }
                                        });
                                        if(longitud.length == 10){
                                            console.log('Esto entra alguna vez?');
                                            $('#fecha').val(longitud.substring(0,10));
                                            $('#horaBool').html('<button onclick="btnActive(this);recibirHora('+"'10:00:00 AM'"+');" value="10:00:00"'+(fecha_10mañana == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>10:00 AM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'11:00 AM'"+')" value="11:00:00"'+(fecha_11mañana == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>11:00 AM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'12:00 PM'"+')" value="12:00:00"'+(fecha_12tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>12:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'01:00 PM'"+')" value="13:00:00"'+(fecha_1tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>1:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'02:00 PM'"+')" value="14:00:00"'+(fecha_2tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>2:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'03:00 PM'"+')" value="15:00:00"'+(fecha_3tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>3:00 PM</button>');
                                        }
                                        else{
                                            $('#fecha').val(longitud.substring(0,10));
                                            $('#hora').val(longitud.substring(11,19));
                                            $('#horaBool').html('');
                                        }
                                    },
                                });
                                //localhost/flemish_sistema/public/api/citas/services-salas/2019-06-26
                                $('#fechaSeleccionada').html(info.dateStr);
                                $('#modal-1').modal();
                            }
                        }
                        else{
                            swal({
                                type: 'error',
                                title: 'Ups',
                                text: 'Debes de seleccionar una cita existente.',
                            });
                        }
                    },
                    select: function(info) {
                        // alert('se selecciono ' + info.startStr + ' to ' + info.endStr);
                    },
                    eventClick: function(info){
                        // console.log(info);

                        var id = info.event._def.publicId;
                        var formato = new Date(info.event._instance.range.start);
                        var fomat = info.event._def.extendedProps.fecha;
                        var dividir = fomat.split(" ");
                        var d = formato.getDate();
                        var m = formato.getMonth()+1;
                        var y = formato.getFullYear();
                        var hours = formato.getHours();
                        var minutos = formato.getMinutes();
                        $('#clienteV').html(info.event._def.extendedProps.cliente);
                        $('#telefonoV').html(info.event._def.extendedProps.telefono);
                        $('#servicioV').html(info.event._def.title);
                        console.log('yaaa????');
                        
                        $('#salaV').html(info.event._def.extendedProps.empleado);
                        $('#diaV').html(d + "/" + m +"/" + y );
                        $('#horaV').html(dividir[1]);

                        var estatus = ''
                        if(info.event._def.extendedProps.estatus == 'Asistida')
                            {
                            estatus = 'disabled';
                            $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistida</a>');
                            $("#editar").html("");
                        }
                        else{
                            $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistencia</a>');
                            $("#editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                        }                                     
                        $('#eliminar').html('<form action="{!!asset('citas')!!}/{!!"cita-eliminar/'+id+'"!!}" method="POST" role="form" id="form_id">'+
                                                '{{ method_field("DELETE") }}'+
                                                '{{ csrf_field() }}'+
                                                '<button type="submit" class="btn btn-sm btn-primary_local" id="btnEliminar">'+"Cancelar"+'</button>'+
                                            '<form>'
                        );
                        if(info.event._def.extendedProps.estatus_pago != "Pagada")
                        {
                            $('#pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                        }                            
                        else{
                            $('#pagar').html('<a class="btn btn-sm btn-success disabled"  href="#" style="color: #fff;">Pagada</a>');
                        }

                        $('#modal-2').modal();
                    },
                    views: {
                        timeGridFourDay: {
                            type: 'timeGrid',
                            duration: { days: 2 },
                            buttonText: 'Hoy',
                            minTime: configuracion.hora_entrada,
                            maxTime: configuracion.hora_salida
                        },
                        dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes'
                            }
                    },
                    defaultDate: dia_actual,
                    navLinks: true, // can click day/week names to navigate views
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events:eventos_formato,
                    dayRender: function (info, cell) {
                    var myDate = new Date();
                        myDate.setDate(myDate.getDate()-1);
                            if (info.date < myDate)
                            {
                                $('.fc-past').css("background-color", "#ebf8fa");
                            }
                    },
                    });
                    // console.log(eventos_formato);

                    calendar.render();
                }

                $(".fc-today-button").text('Hoy');
                $(".fc-day-grid tr:nth-child(1) td.fc-axis span").text( "Hoy");


            },
            error:function(xhr,estado,error)
            {
                console.log(xhr);
                console.log(estado);
                console.log(error);
            }
        });
    });
});

    $('#btnGuardar').click(function(){
        var NombreCliente = $('#nombre_cliente').val();
        var ApellidoP = $('#a_paterno').val();
        var ApellidoM = $('#a_materno').val();
        var Correo = $('#correo_electronico').val();
        var Telefono = $('[name=telefono]').val();
        var SelectClient = $('[name=selectCliente]').val();
        var Hora = $('#hora').val();
        var Switch = $('#clienteOn').is(':checked');
        var Servicio = $('#servicio_id').val();
        var Empleado = $('#input_select').val();
        var Fecha = $('#fecha').val();
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            // console.log(SelectClient);

        var formulario = {
             nombre: NombreCliente,
             apellido_p: ApellidoP,
             apellido_m: ApellidoM,
             correo: Correo,
             telefono: Telefono,
             hora: Hora,
             switch: Switch,
             servicio: Servicio,
             empleado: Empleado,
             fecha: Fecha,
             id_SelectCliente: SelectClient,
             _token: CSRF_TOKEN
        };
        console.log(formulario,'form');
        
        if($('#input_select').val() != 0)
        {
            $.ajaxSetup({
            headers:
            { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });
            $.ajax({
                url:  url_dinamica+"/api/citas/crearCitaAjax",
                method:"POST",
                data:formulario,
                dataType:"json",
                success:function(value){
                    $("#modal-1").modal("hide");
                    swal("La cita se ha creado exitosamente");
                    calendar.addEvent({
                        id:value.data.id,
                        title:value.data.nombre_servicio,
                        start:value.data.fecha_hora,
                        // sala:value.data.nombre_sala,
                        empleado: value.data.nombre_empleado,
                        fecha:value.data.fecha_hora,
                        cliente: value.data.nombre_cliente,
                        borderColor:  '#'+value.data.empleado.color,
                        backgroundColor:  '#'+value.data.empleado.color,
                        textColor: '#'+value.letra_color
                    });
                    $('#nombre_cliente').val('');
                    $('#a_paterno').val('');
                    $('#a_materno').val('');
                    $('#correo_electronico').val('');
                    $('[name=telefono]').val('');
                    $('[name=selectCliente]').val('');
                    $('#hora').val('');
                    $("#selectCliente").val('0');
                    $('#selectCliente').change();
                    $('#clienteOn').is(':checked');
                    $('#fecha').val('');
                    $('#msgCabinas').text('');
                }
            });
        }
        else{
            $('#msgCabinas').text("Elija una cabina válida");
        }

    });

    function recibirHora(hora){
        $('#hora').val(hora.substring(0,8));
    }

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

    function btnActive(btn){
        $('.btnsHora').removeClass("activo ");
        $(btn).addClass( "activo" );
    }

    $('#selectSala').ready(function (e){
         var valueSelected = $( "#selectSala" ).val();
        $("#input_select").val(valueSelected);
        $(".fc-today-button").text('Hoy');
        $('.fc-prev-button').text('< Anterior');
        $('.fc-next-button').text('Siguiente >');
    });

    $('#selectServicio').ready(function (e){
        var valueSelected = $( "#selectServicio" ).val();
        $("#servicio_id").val(valueSelected);
    });

$(document).ready(function(){
    $(".fc-today-button").text('Hoy');

    var calendarEl = document.getElementById('calendar');
    var Draggable = FullCalendarInteraction.Draggable;   

    var containerEl = document.getElementById('external-events');
    
    var checkbox = document.getElementById('drop-remove'); 

    new Draggable(containerEl, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
        return {
            title: eventEl.innerText
        };
        }
    });
    calendar = new FullCalendar.Calendar(calendarEl, {        
                    plugins: [ 'interaction', 'dayGrid','timeGrid', 'interactionPlugin' ],
                    height: 715,
                    droppable: true,
                    drop: function(info) {
                    // is the "remove after drop" checkbox checked?
                        if (checkbox.checked) {
                            // if so, remove the element from the "Draggable Events" list
                            info.draggedEl.parentNode.removeChild(info.draggedEl);
                        }
                    },
                    editable: true,
                    slotLabelFormat: [                        
                        {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true,
                            omitZeroMinute: true,                            
                        }
                    ],
                    allDaySlot: false,
                    locale: 'es',
                    timeZone: 'local',
                    defaultView: 'timeGridFourDay',
                    selectable: true,
                    header: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
                    },

                    dateClick: function(info)
                    {               
                        console.log('Este cual es?');
                        if(validarSelects())
                        {
                            if(info.date < myDate)
                            {
                                swal({
                                    type: 'error',
                                    title: 'Ups',
                                    text: 'Debes de seleccionar una cita existente.',
                                });
                            }
                            else{
                                var longitud = info.dateStr;
                                var id_sala = $("#input_select").val();
                                console.log('NO DEBE ENTRAR AQUI');
                                
                                $.ajax({
                                    url: url_dinamica+"/api/citas/services-salas/"+info.dateStr,
                                    type:"GET",
                                    dataType:"json",
                                    success:function(data){
                                        // console.log(data);
                                        var fecha_11mañana = false;
                                        var fecha_10mañana = false;
                                        var fecha_3tarde = false;
                                        var fecha_2tarde = false;
                                        var fecha_1tarde = false;
                                        var fecha_12tarde = false;
                                        $('#horaBool').empty().append();
                                        $.each(data.data,function(ket,value){
                                            if(value.hora == "10:00:00"){
                                                fecha_10mañana = true;
                                            }
                                            if(value.hora == "11:00:00"){
                                                fecha_11mañana= true;
                                            }
                                            if(value.hora == "12:00:00"){
                                                fecha_12tarde = true;
                                            }
                                            if(value.hora == "13:00:00"){
                                                fecha_1tarde = true;
                                            }
                                            if(value.hora == "14:00:00"){
                                                fecha_2tarde = true;
                                            }
                                            if(value.hora == "15:00:00"){
                                                fecha_3tarde = true;
                                            }
                                        });
                                        if(longitud.length == 10){
                                            $('#fecha').val(longitud.substring(0,10));
                                            $('#horaBool').html('<button onclick="btnActive(this);recibirHora('+"'10:00:00 AM'"+');" value="10:00:00"'+(fecha_10mañana == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>10:00 AM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'11:00 AM'"+')" value="11:00:00"'+(fecha_11mañana == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>11:00 AM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'12:00 PM'"+')" value="12:00:00"'+(fecha_12tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>12:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'01:00 PM'"+')" value="13:00:00"'+(fecha_1tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>1:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'02:00 PM'"+')" value="14:00:00"'+(fecha_2tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>2:00 PM</button>'+
                                            '<button onclick="btnActive(this);recibirHora('+"'03:00 PM'"+')" value="15:00:00"'+(fecha_3tarde == true ? "disabled" : " ")+' type="button" class="btnsHora col-4 btn btn-primary btn-outline-primary"><i class="icofont icofont-ui-clock"></i>3:00 PM</button>');
                                        }
                                        else{
                                            $('#fecha').val(longitud.substring(0,10));
                                            $('#hora').val(longitud.substring(11,19));
                                            $('#horaBool').html('');
                                        }
                                    },
                                });

                                $('#fechaSeleccionada').html(info.dateStr);
                                $('#modal-1').modal();
                            }
                        }
                        else
                        {
                            swal({
                                type: 'error',
                                title: 'Ups',
                                text: 'Debes de seleccionar una cita existente.',
                            });
                        }
                        var myDate = new Date();
                        myDate.setDate(myDate.getDate()-1);


                    },
                    select: function(info) {
                        // alert('se selecciono ' + info.startStr + ' to ' + info.endStr);
                    },
                    eventClick: function(info){
                        console.log(info.event._def.extendedProps);                        
                        var id = info.event._def.publicId;
                        var formato = new Date(info.event._instance.range.start);                        
                        var fomat = info.event._def.extendedProps.fecha;
                        var dividir = fomat.split(" ");
                        var d = formato.getDate();
                        var m = formato.getMonth()+1;
                        var y = formato.getFullYear();
                        var hours = formato.getHours();
                        var minutos = formato.getMinutes();
                        $('#clienteV').html(info.event._def.extendedProps.cliente);
                        $('#telefonoV').html(info.event._def.extendedProps.telefono);
                        $('#servicioV').html(info.event._def.title);                                                                        
                        $('#salaV').html(info.event._def.extendedProps.empleado);
                        $('#diaV').html(d + "/" + m +"/" + y );
                        $('#horaV').html(dividir[1]);
                        var hoyDia = new Date();                                                
                        var hoyDiaStart = new Date(hoyDia.getFullYear()+'-'+(hoyDia.getMonth() + 1)+'-'+hoyDia.getDate()+' 00:00:00');
                        var hoyDiaEnd = new Date(hoyDia.getFullYear()+'-'+(hoyDia.getMonth() + 1)+'-'+hoyDia.getDate()+' 23:59:59');
                        var fecha_cita_actual = new Date(y + "-" + m +"-" + d + ' ' + dividir[1]);
                        var estatus = '';    
                        $('#asistencia').html('');
                        $("#editar").html('');
                        $('#eliminar').html('');
                        $('#pagar').html('');
                        $("#mensajeBotonera").html('');                 
                        if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd > fecha_cita_actual)
                        {                                                        
                            $("#mensajeBotonera").html('');
                            if(info.event._def.extendedProps.estatus == 'Asistida')
                                {
                                estatus = 'disabled';
                                $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistida</a>');
                                $("#editar").html("");
                            }
                            else{
                                $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistencia</a>');
                                $("#editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                            }                                  
                            if(info.event._def.extendedProps.estatus != 'Asistida')
                            {
                                $('#eliminar').html('<form action="{!!asset('citas')!!}/{!!"cita-eliminar/'+id+'"!!}" method="POST" role="form" id="form_id">'+
                                        '{{ method_field("DELETE") }}'+
                                        '{{ csrf_field() }}'+
                                        '<button type="submit" class="btn btn-sm btn-primary_local" id="btnEliminar">'+"Cancelar"+'</button>'+
                                    '<form>'
                                );
                            }
                            if(info.event._def.extendedProps.estatus_pago != "Pagada")
                            {
                                $('#pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                            }                            
                            else{
                                $('#pagar').html('<a class="btn btn-sm btn-success disabled" href="#" style="color: #fff;">Pagada</a>');
                            }
                        }
                        else if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd < fecha_cita_actual)
                        {
                            $("#mensajeBotonera").html('');
                            $('#asistencia').html('');
                            $("#editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                            $('#eliminar').html('<form action="{!!asset('citas')!!}/{!!"cita-eliminar/'+id+'"!!}" method="POST" role="form" id="form_id">'+
                                                    '{{ method_field("DELETE") }}'+
                                                    '{{ csrf_field() }}'+
                                                    '<button type="submit" class="btn btn-sm btn-primary_local" id="btnEliminar">'+"Cancelar"+'</button>'+
                                                '<form>'
                            );
                            if(info.event._def.extendedProps.estatus_pago != "Pagada")
                            {
                                $('#pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                            }                            
                            else{
                                $('#pagar').html('<a class="btn btn-sm btn-success disabled"  href="#" style="color: #fff;">Pagada</a>');
                            }
                        }
                        else{
                            $('#asistencia').html('');
                            $("#editar").html('');
                            $('#eliminar').html('');
                            $('#pagar').html('');
                            $("#mensajeBotonera").html('Esta cita ya no esta disponible para realizar acciones');
                        }
                        $('#modal-2').modal();
                    },
                    views: {
                        timeGridFourDay: {
                            type: 'timeGrid',
                            duration: { days: 2 },
                            buttonText: 'Hoy',
                            minTime: configuracion.hora_entrada,
                            maxTime: configuracion.hora_salida
                        },
                        dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes'
                            },
                    },
                    defaultDate: dia_actual,                    
                    navLinks: true, // can click day/week names to navigate views                    
                    eventLimit: true, // allow "more" link when too many events
                    events:eventos_formato,                                        
                    dayRender: function (info, cell) {
                    var myDate = new Date();
                        myDate.setDate(myDate.getDate()-1);
                            if (info.date < myDate)
                            {
                                $('.fc-past').css("background-color", "#ebf8fa");
                            }
                    },
                    });
                    calendar.render();
                    $(".fc-today-button").text('Hoy');
                    $(".fc-day-grid tr:nth-child(1) td.fc-axis span").text( "Hoy");

});

    function validarSelects()
    {
        if( isNaN($('#selectEmpleado').val()) || isNaN($('#selectServicio').val()))
            return false;
        return true;
    }

</script>
@endsection