@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>
    .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:#e15aa9!important;
        border-color:#e15aa9;
        font-family:'Poppins';
        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: #e15aa9;
    }
    .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: #e15aa9;
        color: white;
    }
    .select2-container{
        width:100% !important;
    }
    .card-block{
        position: relative;
    }
    .text-info {
        color: #e15aa9 !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;
        }
    }
</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> agendar 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">
                        <h4 class="card-title">1.- Para empezar seleccione un tratamiento
                        <br/>
                        2.- Seleccione una sala para poder ver su disponibilidad
                        </h4>
                    </div>
                    <div class="espacio_vertical"></div>
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Selecciona el servicio que buscas</h5>
                                <select id="selectServicio" class="js-example-data-array col-sm-12">
                                    <option>Selecciona un tratamiento</option>
                                    @foreach($servicios as $servicio)
                                        <option value="{!! $servicio->id !!}">{!! $servicio->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6" id="divSalasEstatic">
                                <h5>Selecciona la sala que buscas</h5>
                                <select id="selectSala" name="selectSala" class="js-example-data-array col-sm-12">
                                    <option value="Seleccina una opción">Seleccina una opción</option>
                                    @foreach($salas as $sala)
                                        <option value="{!! $sala->sala_id !!}">{!! $sala->sala->nombre !!}</option>
                                    @endforeach
                                    <option value="0">Ver todas las cabinas con citas</option>
                                </select>                                                                       
                                <div id="msgCabinas" style="color:red"></div>
                            </div>
                            <div class="col-md-6" id="divLoaderSalas" style="display:none">
                                <h5>Selecciona la sala que buscas</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>Tipo de servicio:</strong> <span id="servicioV"></span></h4>
                        <h4><strong>Nombre de la sala: <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="row">
                    <div id="editar" class="col-sm-3"></div>
                    <div id="eliminar" class="col-sm-3" ></div>
                    <div id="asistencia" class="col-sm-3" ></div>
                    <div class="col-sm-3" >
                        <button type="button" class="btn btn-sm btn-secondary  btnCancelModal" data-dismiss="modal">cerrar</button>
                    </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">
                                                ¿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:none']) !!}
                                            {!! Form::text('hora', null, ['id' => 'hora','class' => 'form-control','style' => 'display:none']) !!}
                                            {!! Form::text('servicio_id', null, ['id' => 'servicio_id','class' => 'form-control','style' => 'display:none']) !!}
                                            {!! Form::text('id_sala', null, ['id' => 'input_select','class' => 'form-control','style' => 'display:none']) !!}
                                        </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://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({});
    $('#loader').removeClass('spinner-border');
    var url_dinamica = "{!! URL::to('/') !!}";
    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);
        $.ajax({
            url: url_dinamica+"/api/citas/obtener/"+obtener_id,
            type:"GET",
            dataType:"json",
            success:function(data){
                $('#selectSala').empty().append();
                $('#selectSala').append('<option value="Seleccina una opción">Seleccina una opción</option>');

                $.each(data.data,function(key,value){
                        //console.log(value);
                        $('#selectSala').append(
                            '<option value="'+value.sala_id+'">'+value.nombre+'</option>'

                        );
                        $('#input_select').val($('#selectSala').val());
                });
                $('#selectSala').append(
                    '<option value="0">Ver todas las cabinas con citas</option>'
                );
                $("#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 color = "#FC618";
        var border = "#FC6180";
        if(value.sala == "Cabina 1")
        {
            color = "#FA8989  ";
            border = "#FA8989  ";
        }
        else if(value.sala == "Cabina 2")
        {
            color = "#F7C77F";
            border = "#F7C77F";
        }
        else if(value.sala == "Cabina 3")
        {
            color = "#CACACA";
            border = "#CACACA";
        }
        else if(value.sala == "Cabina 4")
        {
            color = "#CCCEF9";
            border = "#CCCEF9";
        }
        else if(value.sala == "Cabina 5")
        {
            color = "#30969C";
            border = "#30969C";
        }
        else{
            color = "#622415";
            border = "#622415";
        }

        eventos_formato.push({
            id:value.id,
            title:value.servicio,
            start:value.fecha_hora,
            sala:value.sala,
            fecha:value.fecha_hora,
            estatus:value.estatus,
            cliente: value.cliente.nombre + ' ' + value.cliente.a_paterno + ' ' + value.cliente.a_materno,
            borderColor: border,
            backgroundColor: color,
            textColor: '#fff'
        });
    });
    //console.log(eventos_formato)

    $('#selectSala').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');
        $.ajax({
            url: url_dinamica+"/api/citas/obtenerService/"+obtener_id,
            type:"GET",
            dataType:"json",
            success:function(data){
                var Citas_Servicio = [];
                $('#loader').removeClass('spinner-border');
                $.each(data.data,function(key,value){
                    var color = "#FC618";
                    var border = "#FC6180";
                    if(value.sala == "Cabina 1")
                    {
                        color = "#FA8989  ";
                        border = "#FA8989  ";
                    }
                    else if(value.sala == "Cabina 2")
                    {
                        color = "#F7C77F";
                        border = "#F7C77F";
                    }
                    else if(value.sala == "Cabina 3")
                    {
                        color = "#CACACA";
                        border = "#CACACA";
                    }
                    else if(value.sala == "Cabina 4")
                    {
                        color = "#CCCEF9";
                        border = "#CCCEF9";
                    }
                    else if(value.sala == "Cabina 5")
                    {
                        color = "#30969C";
                        border = "#30969C";
                    }
                    else{
                        color = "#622415";
                        border = "#622415";
                    }
                    // console.log('----------------  valores  -------------');
                    // console.log(value);
                    Citas_Servicio.push({
                        id:value.id,
                        title:value.servicios,
                        start:value.fecha,
                        fecha:value.fecha,
                        sala:value.sala,
                        hora:value.hora,
                        estatus:value.estatus,
                        sala_id:value.id_sala,
                        cliente: value.cliente,
                        borderColor: border,
                        backgroundColor: color,
                        textColor: '#fff'
                    });

                });
                if(valueSelected != 0)
                {
                    calendar = new FullCalendar.Calendar(calendarEl, {
                        plugins: [ 'interaction', 'dayGrid','timeGrid' ],
                        locale: 'es',
                        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)
                                {
                                    swal({
                                            type: 'error',
                                            title: 'Algo salio mal',
                                            text: 'Por favor selecciona una fecha valida.',
                                        });
                                }
                                else{
                                    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){
                                            // 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();
                                            console.log(data,'Que trae data');        
                                            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('');
                                            }                                                 
                                        },
                                    });
                                        //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: 'Algo salio mal',
                                            text: 'Por favor asegurate de haber seleccionado tanto una sala, como un tratamiento.',
                                        });
                            }
                        },//fin on click calendarios
                        select: function(info) {
                            // alert('se selecciono ' + info.startStr + ' to ' + info.endStr);
                        },
                        eventClick: function(info)
                        {
                            // console.log(info.event._def.extendedProps);
                            // alert('entro');
                            var id = info.event._def.publicId;
                            var formato = new Date(info.event._instance.range.start);
                            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);
                            $('#servicioV').html(info.event._def.title);
                            $('#salaV').html(info.event._def.extendedProps.sala);
                            $('#diaV').html(info.event._def.extendedProps.fecha);
                            $('#horaV').html(info.event._def.extendedProps.hora);

                            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;">asistencia</a>');

                            $('#editar').html('<a href="{!!asset('citas')!!}/{!!"cita-edit/'+id+'"!!}" id="btnEditar" class="btn btn-sm btn-info" >'+"editar"+'</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">'+"eliminar"+'</button>'+
                                                '<form>');

                            $('#modal-2').modal();
                        },
                        views: {
                            timeGridFourDay: {
                                type: 'timeGrid',
                                duration: { days: 2 },
                                buttonText: 'Hoy'
                            },
                            dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes'
                            }
                        },
                    defaultDate: dia_actual,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: Citas_Servicio,
                    //   events: [{
                    //     title: 'Business Lunch',
                    //     start: '2019-05-03T13:00:00',
                    //     constraint: 'businessHours',
                    //     borderColor: '#FC6180',
                    //     backgroundColor: '#FC6180',
                    //     textColor: '#fff'
                    //   }]
                    });

                    // console.log(Citas_Servicio);
                    calendar.render();
                }
                else
                {
                    calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [ 'interaction', 'dayGrid','timeGrid' ],
                    locale: 'es',
                    timeZone: 'local',
                    defaultView: 'timeGridFourDay',
                    selectable: true,
                    header: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
                    },

                    dateClick: function(info)
                    {
                        // alert('Enro 2');
                        if(validarSelects())
                        {
                            var myDate = new Date();
                            myDate.setDate(myDate.getDate()-1);

                            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){
                                        // 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('');
                                        }
                                    },
                                });
                                //localhost/flemish_sistema/public/api/citas/services-salas/2019-06-26
                                $('#fechaSeleccionada').html(info.dateStr);
                                $('#modal-1').modal();
                            }
                        }
                        else{
                            swal({
                                            type: 'error',
                                            title: 'Algo salio mal',
                                            text: 'Por favor asegurate de haber seleccionado tanto una sala, como un tratamiento.',
                                        });
                        }
                    },
                    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);
                        $('#servicioV').html(info.event._def.title);
                        $('#salaV').html(info.event._def.extendedProps.sala);
                        $('#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;">asistencia</a>');

                        $('#editar').html('<a href="{!!asset('citas')!!}/{!!"cita-edit/'+id+'"!!}" id="btnEditar" class="btn btn-sm btn-info">'+"Editar"+'</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">'+"Eliminar"+'</button>'+
                                            '<form>'
                        );

                        $('#modal-2').modal();
                    },
                    views: {
                        timeGridFourDay: {
                            type: 'timeGrid',
                            duration: { days: 2 },
                            buttonText: 'Hoy'
                        },
                        dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes'
                            }
                    },
                    defaultDate: dia_actual,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events:eventos_formato,
                    //   events: [{
                    //     title: 'Business Lunch',
                    //     start: '2019-05-03T13:00:00',
                    //     constraint: 'businessHours',
                    //     borderColor: '#FC6180',
                    //     backgroundColor: '#FC6180',
                    //     textColor: '#fff'
                    //   }]
                    });
                    // 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 Sala = $('#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,
             sala: Sala,
             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,
                        fecha:value.data.fecha_hora,
                        cliente: value.data.nombre_cliente,
                        borderColor:  '#30969C',
                        backgroundColor:  '#30969C',
                        textColor: '#fff'
                    });
                    $('#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" );
        // $('.btnsHora').css('background-color','#c3bdbd');
        // $('.btnsHora').css('color','#fff');
        // $(btn).css('background-color','#ffffff !important' );
        // $(btn).css('color','#ed5fb2');



    }

    // $('#selectSala').on('change', function (e) {
    //     var optionSelected = $("option:selected", this);
    //     var valueSelected = this.value;
    //     $("#sala_id").val(valueSelected);
    // });

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

    // $('#selectServicio').on('change', function (e) {
    //     var optionSelected = $("option:selected", this);
    //     var valueSelected = this.value;
    //     $("#servicio_id").val(valueSelected);
    // });




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

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

    calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [ 'interaction', 'dayGrid','timeGrid' ],
                    locale: 'es',
                    timeZone: 'local',
                    defaultView: 'timeGridFourDay',
                    selectable: true,
                    header: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
                    },

                    dateClick: function(info)
                    {                        
                        if(validarSelects())
                        {
                            if(info.date < myDate)
                            {
                                swal({
                                    type: 'error',
                                    title: 'Algo salio mal',
                                    text: 'Por favor asegurate de haber seleccionado tanto una sala, como un tratamiento.',
                                });
                            }
                            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){
                                        // 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: 'Algo salio mal',
                                text: 'Por favor asegurate de haber seleccionado tanto una sala, como un tratamiento.',
                            });
                        }
                        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);

                        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);
                        $('#servicioV').html(info.event._def.title);
                        $('#salaV').html(info.event._def.extendedProps.sala);
                        $('#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;">asistencia</a>');

                        $('#editar').html('<a href="{!!asset('citas')!!}/{!!"cita-edit/'+id+'"!!}" id="btnEditar" class="btn btn-sm btn-info">'+"Editar"+'</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">'+"Eliminar"+'</button>'+
                                            '<form>'
                        );
                        $('#modal-2').modal();
                    },
                    views: {
                        timeGridFourDay: {
                            type: 'timeGrid',
                            duration: { days: 2 },
                            buttonText: 'Hoy'
                        },
                        dayGridWeek: {
                                buttonText: 'Semana'
                            },
                            dayGridMonth: {
                                buttonText: 'Mes'
                            }
                    },
                    defaultDate: dia_actual,
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events:eventos_formato,
                    //   events: [{
                    //     title: 'Business Lunch',
                    //     start: '2019-05-03T13:00:00',
                    //     constraint: 'businessHours',
                    //     borderColor: '#FC6180',
                    //     backgroundColor: '#FC6180',
                    //     textColor: '#fff'
                    //   }]
                    });


                    calendar.render();


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

});


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

</script>
@endsection