@extends('layouts.app')

@section('css')
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<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"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<style>
    .datepicker {
        padding: 20px !important;
    }
    .blink_me {
        animation: blinker 1.5s linear infinite;
    }
    .bootstrap-datetimepicker-widget button[data-action]{
        background-color: #00c88b !important;
        border-color: #00c88b !important;
    }
    @keyframes blinker {
        50% {
            opacity: .5;
        }
    }

    .fc-unthemed td.fc-today{
        background-color: #ebf8fa;
        
    }
    .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;
    }

    .btn-primary_local_disabled:hover{
        background-color: #00c88b !important;
        color: #fff !important;
        cursor: no-drop !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;
    }    
    .content{
        background: #fff;
        padding: 60px;
    }
    .card-header{
        background:#fff;
    }
    .modal-header{
        background-color: #00c88b !important;;
    }
    .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 !important;;
        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%;
    }

    @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 text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2 text-uppercase">
            <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 text-uppercase" 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-block">
                        <div class="row">
                            <div class="col-12">
                                @include('flash::message')                                
                            </div>
                            <div class="col-12 mt-5 mb-0">
                                <button type="button" id="btnModalCrearCita" class="btn btn-primary_local float-right mb-4" onclick="abrirModalCrearCita();">
                                    CREAR CITA
                                </button>
                            </div>
                            <div id="containerBarbers" class="primerPasoContenedores col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                                <div id='external-events'>                                    
                                    <h1 class="text-uppercase">
                                        Personal disponible
                                    </h1>
                                    <div id="accordion" class="accordion" role="tablist" aria-multiselectable="true">
                                    @foreach ($empleados as $key => $empleado)
                                    <div class="card">
                                        <div class="card-header" style="padding: 1rem;background-color: #{{$empleado->color}}; color: #{{$empleado->letra_color}} !important" role="tab" id="heading{{$key}}">
                                            <h5 class="mb-0">
                                                @if($validacion)                                                
                                                <a onclick="cambiarCalendario({{$empleado->id}})" style="font-family:'Fixture Expandend Extra light';color: #{{$empleado->letra_color}} !important" data-toggle="collapse" class="collapsed"  href="#collapse{{$key}}" aria-expanded="{{$empleado->id == $cita_reagendada->empleado_id ? 'true' : 'false'}}" aria-controls="collapse{{$key}}">
                                                @else
                                                <a onclick="cambiarCalendario({{$empleado->id}})" style="font-family:'Fixture Expandend Extra light';color: #{{$empleado->letra_color}} !important" data-toggle="collapse" class="collapsed"  href="#collapse{{$key}}" aria-expanded="{{$key == 0 ? 'true' : 'false'}}" aria-controls="collapse{{$key}}">
                                                @endif
                                                    {{$empleado->usuario->name.' '.$empleado->usuario->a_paterno.' '.$empleado->usuario->a_materno}}
                                                </a>

                                            </h5>
                                        </div>
                                    </div>
                                    @endforeach
                                    </div>                                    
                                </div>
                            </div>
                            <div id="containerCalendar" class="primerPasoContenedores col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
                                <div id='calendar'></div>
                            </div>
                            <div class="spinner-border text-info" role="status" id="loader">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <form action="{{url('crearCitaPrueba')}}" method="POST" id="formFinal" class="col-12">
                                @csrf
                                <input type="hidden" name="check_codigo_validador" id="check_codigo_validador" value="false">
                                <div id="sevicio_prueba">
                                </div>
                                <div class="col-12" id="formularioCliente" style="display:none">
                                    <div class="form-group col-6">
                                    </div>                                    
                                    <div class="form-group offset-md-3 col-md-6 col-12 cuerpoForm">
                                        <h1 class="text-uppercase">Selecciona un cliente</h1>
                                        <select class="js-example-data-array col-sm-12" name="selectCliente" id="selectCliente" parametro="0">
                                            <option selected value="0" disabled>Busca al cliente...</option>
                                            @foreach($clientes as $cliente)
                                                <option value="{!! $cliente->id !!}">{!! $cliente->nombre !!} {!! $cliente->a_paterno !!} {!! $cliente->a_materno !!}</option>
                                            @endforeach
                                        </select>
                                        <br>
                                        <br>
                                        <div class="row mt-4">
                                            <div class="col-6">
                                                <button style="background-color: #00c88b; color: #fff" type="button" id="nuevoCliente" class="mt-1 btn w-100">+ nuevo cliente</button>                                                
                                            </div>              
                                            <div class="col-6">
                                                <button style="background-color: #d8d8d8; color: #fff" type="button" id="modalVentaMostrador" class="mt-1 btn w-100">sin email</button>
                                            </div>                          
                                        </div>
                                        <br />
                                        <br />
                                        <div id="divDatosCliente" style="display:none">
                                            <div class="row">
                                                <div class="col-sm-6 mt-1 mb-1">
                                                    {!! Form::label('nombre_cliente', 'Nombre cliente:',['class' => 'text-uppercase']) !!}
                                                    {!! Form::text('nombre_cliente', null, ['id' => 'nombre_cliente','class' => 'form-control']) !!}
                                                </div>
                                                <div class="col-sm-6 mt-1 mb-1">
                                                    {!! Form::label('apellidos', 'Apellidos:',['class' => 'text-uppercase']) !!}
                                                    {!! Form::text('apellidos', null, ['id' => 'apellidos','class' => 'form-control']) !!}
                                                </div>
                                                <div class="col-sm-6 mt-1 mb-1">
                                                    {!! Form::label('correo_electronico', 'Correo electrónico:',['class' => 'text-uppercase']) !!}
                                                    {!! Form::text('correo_electronico', null, ['id' => 'correo_electronico','class' => 'form-control']) !!}
                                                </div>
                                                <div class="col-sm-6 mt-1 mb-1">
                                                    {!! Form::label('telefono', 'Teléfono:',['class' => 'text-uppercase']) !!}
                                                    {!! Form::text('telefono', null, ['id' => 'telefono','class' => 'form-control']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col-12">
                                                <p id="mensajeValidacionForm" class="text-danger"></p>
                                                <button id="btnAgendarFinal" class="btn btn-primary_local" onclick="event.preventDefault();validandoTodo();">AGENDAR</button>
                                            </div>                                        
                                        </div>
                                    </div>
                                    {{-- <div class="form-group col-12 btn-group">
                                    </div> --}}
                                </div>
                                <div class="modal fade" id="validar_codigo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <h4 style="margin-top:0px!important;">Ingresa el código para guardar el cliente sin un correo electrónico.</h4>
                                                <input id="codigo_venta_mostrador" class="form-control" name="codigo_venta_mostrador" type="text" placeholder="Ingresa tu código...">
                                                <h5 class="ml-1" id="mensajeCodigoValidador"></h5 >
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                                                <button id="btnValidarcodigo" type="button" class="btn btn-primary_local btnAcceptModal" >validar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </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 text-center">
                    {{-- <div id="editar" class="col-sm-3"></div> --}}
                    <div class="col-sm-12 mt-2 mb-2" id="btnReagendar">

                    </div>
                    <div id="pagar" class="col-sm-4"></div>
                    <div id="asistencia" class="col-sm-4" ></div>
                    <div id="eliminar" class="col-sm-4" ></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 text-uppercase" id="exampleModalLabel">Advertencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-block">                                
                                <h4>Debes de añadir mínimo un servicio para crear una nueva cita</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalNODisponible" 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 text-uppercase" id="exampleModalLabel">Advertencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card-block">                                
                                <h4>La hora que solicitas no esta disponible, prueba con otra.</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-reagendar" 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">Reprogramar</h5>                
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <h4><strong>Nombre del cliente:</strong> <span id="reagendar_clienteV"></span></h4>
                        <h4><strong>Teléfono del cliente:</strong> <span id="reagendar_telefonoV"></span></h4>
                        <h4><strong>Tipo de servicio:</strong> <span id="reagendar_servicioV"></span></h4>
                        <h4><strong>Especialista:</strong> <span id="reagendar_salaV"></span></h4>
                        <h4><strong>Día de la cita: </strong><span id="reagendar_diaV"></span></h4>
                        <h4><strong>Hora de la cita:</strong> <span id="reagendar_horaV"></span></h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h2>¿Estas seguro de querer reagendar esta cita?</h2>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-row w-100">
                    <div id="AccionesAyC" class="col-sm-12 mb-2 text-center"></div>
                    <div class="col-12">
                        <hr>
                    </div>                                                     
                    <div id="reagendar_pagar" class="col-sm-4 text-center"></div>
                    <div id="reagendar_asistencia" class="col-sm-4 text-center" ></div>
                    <div id="reagendar_eliminar" class="col-sm-4 text-center" ></div>
                    <div id="reagendar_mensajeBotonera" class="col-sm-12"></div>
                </div>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-crear-cita" 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>                
                </div>
                <div class="modal-body">
                    <div class="row">
                        {{-- <div class="col-sm-12 row"> --}}
                            <div class="col-6 mt-1 mb-1">
                                Día: 
                                <br />
                                <input type="text" class="form-control w-100" id="calendario_crear_cita" value="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-6 mt-1 mb-1">
                                Hora:
                                <br />
                                <input type='text' class="form-control w-100" id='reloj_crear_cita' />
                            </div>
                            <div class="col-12 mt-1 mb-1">
                                Selecciona el servicio
                                <br />
                                {!! Form::select('servicios_id_crear_cita[]',$servicios_new_cita,null,['class' => 'js-example-placeholder-multiple col-sm-12','multiple' => 'multiple','id' => 'servicios_id_crear_cita']) !!}
                            </div>
                            <div class="col-12 mt-1 mb-1">
                                Asignar a
                                <br />
                                {!! Form::select('asginar_a', $empleados_new_cita, null, ['class' => 'form-control','id' => 'asignar_a']) !!}
                            </div>
                            <div class="col-12 text-center">
                                <p class="mt-1 mb-1" id="mensajeCrearCita"></p>
                                <input type="hidden" id="validadorEmpalme" value="false">
                                <div id="addFormCodgio" style="display: none">
                                    <h4>¿Deseas aun así agendarlo?</h4>
                                    <button type="button" class="btn btn-primary_local mostrarInputCodigoEmpalme">SI</button>
                                    <br />
                                    <br />
                                    <div id="divCodigoEmpalme" style="display: none">
                                        <input id="txtCodigoEmpalme" type="text" class="form-control w-100" placeholder="Ingresa el código de validación"  /> 
                                        <button type="button" class="btn btn-primary_local validarCodigoEmpalme">VALIDAR CÓDIGO</button>
                                    </div>
                                </div>
                                <p class="mt-1 mb-1 text-danger" id="msgFormCdogio"></p>
                            </div>
                        {{-- </div> --}}
                    </div>
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                    <button id="crearCitaManual" type="button" class="btn btn-primary_local" >validar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-reagendar-cita" 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">Reagendar cita</h5>                
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form action="" method="post"></form>
                        <div class="col-sm-12 row">
                            <div class="col-6 mt-1 mb-1">
                                Día: 
                                <br />
                                <input type="text" class="form-control w-100" id="calendario_reagendar_cita" value="">
                            </div>
                            <div class="col-6 mt-1 mb-1">
                                Hora:
                                <br />
                                <input type='text' class="form-control w-100" id='reloj_reagendar_cita' />
                            </div>
                            <input type="hidden" name="cita_id_reagendar" id="cita_id_reagendar" value="">
                            <div class="col-12 text-center">
                                <p class="mt-1 mb-1" id="mensajeReagendarCita"></p>
                                <input type="hidden" id="validadorEmpalmeReagendar" value="false">
                                <div id="addFormCodgioReagendar" style="display: none">
                                    <h4>¿Deseas aun así reagendarlo?</h4>
                                    <br />
                                    <button type="button" class="btn btn-primary_local mostrarInputCodigoEmpalmeReagendar">SI</button>
                                    <br />
                                    <br />
                                    <div id="divCodigoEmpalmeReagendar" style="display: none">
                                        <input id="txtCodigoEmpalmeReagendar" type="text" class="form-control w-100" placeholder="Ingresa el código de validación"  /> 
                                        <button type="button" class="btn btn-primary_local validarCodigoEmpalmeReagendar">VALIDAR CÓDIGO</button>
                                    </div>
                                </div>
                                <p class="mt-1 mb-1 text-danger" id="msgFormCdogioReagendar"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                    <button id="reagendarCitaManual" type="button" class="btn btn-primary_local" >agendar</button>
                </div>
            </div>
        </div>
    </div>

    <div id="intervalo_calendario" data-info="{{ $configuracion->intervalo_calendario }}"></div>
    <div id="tiempo_atras_mode" data-info="{{ $configuracion->tiempo_atras_mode }}"></div>
    <div id="tiempo_atras" data-info="{{ $configuracion->tiempo_atras }}"></div>
    <div id="mostrar_dias_calendario" data-info="{{ $configuracion->mostrar_dias_calendario }}"></div>
    <div id="contador_global_eventos" data-info="0"></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 src="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="{{ asset('/js/citas') }}/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/sweetalert/js/sweetalert.min.js"></script>
<script src="{{ asset('/js/citas') }}/es.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='{{ asset('/js/citas') }}/daygridmain.min.js'></script>
<script src='{{ asset('/js/citas') }}/timegridmain.min.js'></script>
<script src='{{ asset('/js/citas') }}/interactionmain.min.js'></script>
<script src='{{ asset('/js/citas') }}/timelinemain.min.js'></script>

<script src='{{ asset('/js/citas') }}/resource-common.min.js'></script>
<script src='{{ asset('/js/citas') }}/resource-timeline.min.js'></script>
<script src='{{ asset('/js/citas') }}/resource-timegrid.min.js'></script>

<script src='{{ asset('/js/citas') }}/inputmask.binding.js'></script>
<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>

    var intervalo_calendario = $("#intervalo_calendario").data('info');
    var tiempo_atras_mode = $("#tiempo_atras_mode").data('info');
    var tiempo_atras = $("#tiempo_atras").data('info');
    var mostrar_dias_calendario = $("#mostrar_dias_calendario").data('info');

    $("#selectServicio").select2({});
    $("#selectSala").select2({});
    $("#selectCliente").select2({});
    $("#selectEmpleado").select2({});
    var validacion_campos = false;
    $('#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 apellidos = $('[name=apellidos]');
    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(apellidos);
    // 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 = [];
        
        //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;
            }
            var clase_extra = '';
            @if($validacion)
            if(value.id == {{$cita_reagendada->id}})
            {
                var clase_extra = 'blink_me';
            }
            @endif            
            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,
                className: clase_extra
            });
        });    
    });

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

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

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

        calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid','timeGrid', 'interactionPlugin' ],
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            height: 'auto',
            droppable: false,
            editable: false, 
            nowIndicator: true, 
            navLinks: true,
            navLinkDayClick: function(date, jsEvent) {
                calendar.gotoDate(date);
                calendar.changeView('timeGridDay');
            },
            eventOverlap: function(stillEvent, movingEvent) {                
            },
            eventDurationEditable: false,
            longPressDelay: 100,
            eventLongPressDelay: 100,
            selectLongPressDelay: 100,            
            eventReceive: function(info)
            {                
                $.LoadingOverlay("show",{
                    background  : "rgba(54, 54, 54, 0.8)",
                    imageColor : "#00d896"
                });
                var datos = $(info.draggedEl).data('event');
                $.ajax({
                    url: url_dinamica+"/api/citas/pruebaDisponibilidad/"+datos.servicio_id+"/"+datos.empleado_id+"/"+info.event.start.toISOString(),
                    type:"GET",
                    dataType:"json",
                    success:function(data){
                        $.LoadingOverlay("hide");
                        if (data.data == "0") {    
                            info.event.remove();
                            $("#modalNODisponible").modal();
                        }                                        
                        if (data.data == "0") {    
                            info.event.remove();
                            $("#modalNODisponible").modal();
                        }
                        else
                        {                            
                            var contado_global = $("#contador_global_eventos").data('info');
                            contado_global++;
                            $("#contador_global_eventos").data('info',contado_global);
                            info.event.setExtendedProp('servicio_id',datos.servicio_id);
                            info.event.setExtendedProp('empleado_id',datos.empleado_id);
                            info.event.setExtendedProp('full_fecha_string',info.event.start.toISOString());
                            info.event.setExtendedProp('input_id_custom',contado_global);
                            $("#sevicio_prueba").append('<input type="hidden" value="'+datos.servicio_id+','+datos.empleado_id+','+info.event.start.toISOString()+'" id="input_id_custom_'+contado_global+'" name="servicios_seleccionados[]" class="input_validador_servicios">');
                        }
                    },
                });
            },           
            //IMPORTANTE: METODO PARA REAGENDAR -- HACERLO CON ESTE
            eventDrop: function(info) {      

                $.LoadingOverlay("show",{
                    background  : "rgba(54, 54, 54, 0.8)",
                    imageColor : "#00d896"
                });
                
                if(info.event.id != '')
                {                    
                    $.ajax({
                        url: url_dinamica+"/api/citas/disponibilidad_reagendar/"+info.event.id+"/"+info.event.start.toISOString(),
                        type:"GET",
                        dataType:"json",
                        success:function(data){
                            console.log(data);
                            setInfo(info);
                            if (data.data == "0") {
                                $("#AccionesAyC").html('<button onclick="getInfo().revert();cerrarModalReagendar();" id="btnCancelarReagendar" class="btn btn-lg  btn-inverse-dark">Cancelar</button>');                                          
                                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();
                                $('#reagendar_clienteV').html(info.event._def.extendedProps.cliente);
                                $('#reagendar_telefonoV').html(info.event._def.extendedProps.telefono);
                                $('#reagendar_servicioV').html(info.event._def.title);                                                                        
                                $('#reagendar_salaV').html(info.event._def.extendedProps.empleado);
                                $('#reagendar_diaV').html(d + "/" + m +"/" + y );
                                $('#reagendar_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 = '';
                                $('#reagendar_asistencia').html('');
                                $("#reagendar_editar").html('');
                                $('#reagendar_eliminar').html('');
                                $('#reagendar_pagar').html('');
                                $("#reagendar_mensajeBotonera").html('');                 
                                if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd > fecha_cita_actual)
                                {                                                        
                                    $("#reagendar_mensajeBotonera").html('');
                                    if(info.event._def.extendedProps.estatus == 'Asistida')
                                        {
                                        estatus = 'disabled';
                                        $('#reagendar_asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistida</a>');
                                        $("#reagendar_editar").html("");
                                    }
                                    else{
                                        $('#reagendar_asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistencia</a>');
                                        $("#reagendar_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')
                                    {
                                        $('#reagendar_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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                            '<form>'
                                        );
                                    }
                                    if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                    {
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                    }                            
                                    else{
                                        $('#reagendar_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)
                                {
                                    $("#reagendar_mensajeBotonera").html('');
                                    $('#reagendar_asistencia').html('');
                                    $("#reagendar_editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                                    $('#reagendar_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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                                        '<form>'
                                    );
                                    if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                    {
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                    }                            
                                    else{
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success disabled"  href="#" style="color: #fff;">Pagada</a>');
                                    }
                                }
                                else{
                                    $('#reagendar_asistencia').html('');
                                    $("#reagendar_editar").html('');
                                    $('#reagendar_eliminar').html('');
                                    $('#reagendar_pagar').html('');
                                    $("#reagendar_mensajeBotonera").html('Esta cita ya no esta disponible para realizar acciones');
                                }
                                probarModal();
                            }
                            else
                            {
                                $("#AccionesAyC").html('<button onclick='+'enviarReprogramado("'+info.event.id+'","'+info.event.start.toISOString()+'");cerrarModalReagendar();'+' id="btnAceptarReagendar" class="btn btn-lg  btn-primary_local">Aceptar</button> &nbsp; <button onclick="getInfo().revert();cerrarModalReagendar();" id="btnCancelarReagendar" class="btn btn-lg  btn-inverse-dark">Cancelar</button>');
                                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();
                                $('#reagendar_clienteV').html(info.event._def.extendedProps.cliente);
                                $('#reagendar_telefonoV').html(info.event._def.extendedProps.telefono);
                                $('#reagendar_servicioV').html(info.event._def.title);                                                                        
                                $('#reagendar_salaV').html(info.event._def.extendedProps.empleado);
                                $('#reagendar_diaV').html(d + "/" + m +"/" + y );
                                $('#reagendar_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 = '';
                                $('#reagendar_asistencia').html('');
                                $("#reagendar_editar").html('');
                                $('#reagendar_eliminar').html('');
                                $('#reagendar_pagar').html('');
                                $("#reagendar_mensajeBotonera").html('');                 
                                if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd > fecha_cita_actual)
                                {                                                        
                                    $("#reagendar_mensajeBotonera").html('');
                                    if(info.event._def.extendedProps.estatus == 'Asistida')
                                        {
                                        estatus = 'disabled';
                                        $('#reagendar_asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistida</a>');
                                        $("#reagendar_editar").html("");
                                    }
                                    else{
                                        $('#reagendar_asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary" id="btnAsistencia" href="{!! asset('citas/cita-cambiar-estatus/') !!}/'+id+' " style="color: #fff;">Asistencia</a>');
                                        $("#reagendar_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')
                                    {
                                        $('#reagendar_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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                            '<form>'
                                        );
                                    }
                                    if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                    {
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                    }                            
                                    else{
                                        $('#reagendar_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)
                                {
                                    $("#reagendar_mensajeBotonera").html('');
                                    $('#reagendar_asistencia').html('');
                                    $("#reagendar_editar").html("<a href='{!! url('citas/wizard/reagendar/"+id+"') !!}' id='btnEditar' class='btn btn-sm btn-info'>"+"Reagendar"+"</a>");
                                    $('#reagendar_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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                                        '<form>'
                                    );
                                    if(info.event._def.extendedProps.estatus_pago != "Pagada")
                                    {
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                                    }                            
                                    else{
                                        $('#reagendar_pagar').html('<a class="btn btn-sm btn-success disabled"  href="#" style="color: #fff;">Pagada</a>');
                                    }
                                }
                                else{
                                    $('#reagendar_asistencia').html('');
                                    $("#reagendar_editar").html('');
                                    $('#reagendar_eliminar').html('');
                                    $('#reagendar_pagar').html('');
                                    $("#reagendar_mensajeBotonera").html('Esta cita ya no esta disponible para realizar acciones');
                                }
                                probarModal();                                
                            }
                            $.LoadingOverlay("hide");
                        },
                    });
                }
                else{
                    var datos = info.oldEvent.extendedProps;
                    $.ajax({
                        url: url_dinamica+"/api/citas/pruebaDisponibilidad/"+datos.servicio_id+"/"+datos.empleado_id+"/"+info.event.start.toISOString(),
                        type:"GET",
                        dataType:"json",
                        success:function(data){
                            if (data.data == "0") {    
                                info.event.remove();
                                $("#input_id_custom_"+datos.input_id_custom).remove();
                                $("#modalNODisponible").modal();
                            }
                            else
                            {
                                console.log('disponielbve');
                                $("#input_id_custom_"+datos.input_id_custom).val(datos.servicio_id+','+datos.empleado_id+','+info.event.start.toISOString());
                            }
                        },
                    });
                    $.LoadingOverlay("hide");
                }
            },
            slotLabelFormat: [                        
                {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false,
                    omitZeroMinute: true,                            
                }
            ],
            allDaySlot: false,
            locale: 'es',
            timeZone: 'local',
            @if($validacion)
            defaultView: 'dayGridWeek',
            @else
            defaultView: 'timeGridFourDay',
            @endif
            // selectable: true,
            header: {
                left: 'prev,today,next',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,timeGridFourDay'
            },
            slotDuration: '00:'+intervalo_calendario+':00',
            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{
                    }
                }
                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){
                if(info.event.id != '')                
                {
                    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('');
                    $("#btnReagendar").html('');
                    
                    if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd > fecha_cita_actual)
                    {                              

                        if(info.event._def.extendedProps.estatus == "Apartada" && info.event._def.extendedProps.estatus_pago != 'Pagada')
                        {
                            var fecha_aux = info.event._def.extendedProps.fecha.split(' ');
                            $('#btnReagendar').html('<button class="btn btn-sm btn-primary" onclick='+'abrirModalReagendarCita("'+fecha_aux[0]+'","'+fecha_aux[1]+'","'+id+'"); style="color: #fff;">Reagendar</button>');
                        }

                        $("#mensajeBotonera").html('');
                        if(info.event._def.extendedProps.estatus == 'Asistida')
                            {
                            estatus = 'disabled';
                            $('#asistencia').html('<a class="'+ estatus +' btn btn-sm btn-primary_local" 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_local" 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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                '<form>'
                            );
                        }
                        if(info.event._def.extendedProps.estatus_pago != "Pagada")
                        {
                            $('#pagar').html('<a class="btn btn-sm btn-info" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                        }                            
                        else{
                            $('#pagar').html('<a class="btn btn-sm btn-info disabled" href="#" style="color: #fff;">Pagada</a>');
                        }
                    }
                    else if(hoyDiaStart < fecha_cita_actual && hoyDiaEnd < fecha_cita_actual)
                    {
                        if(info.event._def.extendedProps.estatus == "Apartada" && info.event._def.extendedProps.estatus_pago != 'Pagada')
                        {
                            var fecha_aux = info.event._def.extendedProps.fecha.split(' ');
                            $('#btnReagendar').html('<button class="btn btn-sm btn-primary" onclick='+'abrirModalReagendarCita("'+fecha_aux[0]+'","'+fecha_aux[1]+'","'+id+'"); style="color: #fff;">Reagendar</button>');
                        }
                        $("#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-danger" id="btnEliminar">'+"Eliminar"+'</button>'+
                                            '<form>'
                        );
                        if(info.event._def.extendedProps.estatus_pago != "Pagada")
                        {
                            $('#pagar').html('<a class="btn btn-sm btn-info" href="{!! url('caja') !!}/'+id+'" style="color: #fff;">Pagar</a>');
                        }                            
                        else{
                            $('#pagar').html('<a class="btn btn-sm btn-info 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: mostrar_dias_calendario },
                    buttonText: 'DÍA',
                    minTime: configuracion.hora_entrada,
                    maxTime: configuracion.hora_salida,
                    columnHeaderFormat:{ weekday: 'long', month: 'long', day: 'numeric', omitCommas: true }
                },
                dayGridWeek: {
                    buttonText: 'Semana',
                    header: 'dd',
                    columnHeaderFormat:{ weekday: 'short', month: 'short', day: 'numeric', omitCommas: true }
                },
                dayGridMonth: {
                    buttonText: 'Mes'
                },
                timeGridDay:{
                    minTime: configuracion.hora_entrada,
                    maxTime: configuracion.hora_salida,                    
                }
            },
            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", "#f7f7f7");
                }
            },
            
        });
        calendar.render();

        @if($validacion)
        calendar.gotoDate("{!! $cita_reagendada->fecha_hora !!}");
        @endif        

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

    function cambiarCalendario(empleado_id)
    {
        var Citas_Servicio = [];
        // $('#calendar').empty();
        $.ajax({
            url: url_dinamica+"/api/citas/obtenerService/"+empleado_id,            
            type:"GET",
            dataType:"json",
            success:function(data){
                var eventSources = calendar.getEventSources(); 
                var len = eventSources.length;
                for (var i = 0; i < len; i++) { 
                    eventSources[i].remove(); 
                }

                $.each(data.data,function(key,value){ 
                    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,
                    });
                });
                calendar.addEventSource(Citas_Servicio);
            },
        });
    }
    $("#clienteOn").on( 'change', function() {
        if( $(this).is(':checked') ) {
            $("#divDatosCliente").hide();
            $("#divClienteExistente").show();
        } else {
            $("#divDatosCliente").show();
            $("#divClienteExistente").hide();
        }
    });
    
    function cambiarPasoFinal(){        
        if($(".input_validador_servicios").val() === undefined)
        {
            $("#modal-1").modal();
        }
        else{
            animateCSS('#containerBarbers', 'fadeOutLeft');
            animateCSS('#containerCalendar','fadeOutLeft',function(){
                $("#containerCalendar").hide();
                $("#containerBarbers").hide();
                $("#formularioCliente").show();
                animateCSS('#formularioCliente','fadeInRight');
            });
            $("#btnPasoFinal").hide();
        }  
    }    

    //Animación para las transciones
    function animateCSS(element, animationName, callback) {
        const node = document.querySelector(element)
        console.log(node);
        
        node.classList.add('animated', animationName)

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

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

        node.addEventListener('animationend', handleAnimationEnd)
    }

    function probarModal(){
        $("#modal-reagendar").modal({
            keyboard: false,
            backdrop: 'static'
        });
    }
    function preuab(){
        console.log('Copiate');
        
    }
    var local_info;
    function setInfo(info){
        local_info = info;                
    }
    function getInfo(){
        return local_info;
    }

    function enviarReprogramado(cita_id,fecha)
    {
        console.log(cita_id,fecha);
        $.ajax({
            url: url_dinamica+"/api/citas/reagendar_nuevo/"+cita_id+"/"+fecha,
            type:"GET",
            dataType:"json",
            success:function(data){
                console.log(data);                                
                location.reload();
            },
        });
    }

    function cerrarModalReagendar()
    {
        $("#modal-reagendar").modal('hide');
    }

    $("#modalVentaMostrador").click(function(){
        $("#validar_codigo").modal();
    });

    $("#selectCliente").select2({
        placeholder :'Busca al cliente...',
        allowClear: true
    });
    $("#nuevoCliente").click(function(){
        $("#divDatosCliente").show();
        $("#validacion_campos").val(true);
    });
    $("#btnValidarcodigo").click(function(){
        var codigo = 0;
        if($("#codigo_venta_mostrador").val() != '')
        {
            codigo = $("#codigo_venta_mostrador").val();
        }
        $.ajax({
            url: url_dinamica+"/api/validar_codigo/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data == "CORRECTO")
                {
                    $("#mensajeCodigoValidador").css('color','#00c88b');
                    $("#mensajeCodigoValidador").html('Código correcto'); 
                    $("#check_codigo_validador").val('true');
                    setTimeout(() => {
                        $("#validar_codigo").modal('hide');
                    }, 1500);
                }
                else{
                    $("#check_codigo_validador").val('false');
                    $("#mensajeCodigoValidador").css('color','#ff6161');
                    $("#mensajeCodigoValidador").html('Código incorrecto, por favor, verifique su información');
                }
            }
        });
    });

    function validandoTodo()
    {
        $("#mensajeValidacionForm").text('');
        if($("#selectCliente").val() != null)
        {
            $.LoadingOverlay("show",{
                background  : "rgba(54, 54, 54, 0.8)",
                imageColor : "#00d896"
            });
            $("#btnAgendarFinal").attr('disabled',true);
            $("#btnAgendarFinal").addClass('btn-primary_local_disabled');
            $("#formFinal").submit();
        }
        else if($("#telefono").val() != '' && $("#nombre_cliente").val() != '')
        {
            if($("#correo_electronico").val() == '')
            {
                if($("#check_codigo_validador").val() == 'true')
                {
                    $("#formFinal").submit();
                }
                else{
                    $("#mensajeValidacionForm").text('Ingresa un correo electrónico o activa la opción "SIN EMAIL"');
                }
            }
            else{
                data = {
                    "email":$("#correo_electronico").val() 
                }
                $.ajax({
                    url: url_dinamica+"/api/validar_correo_electronico",
                    type:"POST",
                    data: data,
                    dataType:"json",
                    success:function(data){
                        if(data.data == 0)
                        {
                            mensaje = 'El correo electrónico que ingresaste ya existe en nuestra base, intenta con otro.';
                            $("#mensajeValidacionForm").text(mensaje);
                        }else{
                            $("#formFinal").submit();
                        }
                    }
                });
            }
        }
        else{
            $("#mensajeValidacionForm").text('Selecciona un cliente o agrega uno nuevo de manera correcta.');
        }
    }

    $("#selectCliente").change(function(){
        $("#nombre_cliente").val('');
        $("#apellidos").val('');
        $("#correo_electronico").val('');
        $("#telefono").val('');
    });

    // $("#nombre_cliente").keyup(function(){
    //     $('#selectCliente').val(null).trigger('change');
    // });
    // $("#apellidos").keyup(function(){
    //     $('#selectCliente').val(null).trigger('change');
    // });
    // $("#correo_electronico").keyup(function(){
    //     $('#selectCliente').val(null).trigger('change');
    // });
    // $("#telefono").keyup(function(){
    //     $('#selectCliente').val(null).trigger('change');
    // });
    function abrirModalCrearCita()
    {
        $("#servicios_id_crear_cita").select2({
            placeholder: "Selecciona los servicios que desees agregar"
        });

        $("#modal-crear-cita").modal();
        $("#calendario_crear_cita").datepicker({
            format: 'yyyy/mm/dd',
            language: 'es'
        });

        $('#reloj_crear_cita').datetimepicker({
            format: 'LT',
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
        });
        $("#reloj_crear_cita").click();
        var hora = moment(new Date()).format('h:mm A');
        $("#reloj_crear_cita").val(hora);
    }

    $("#crearCitaManual").click(function(){
        $(".input_temporales").remove();
        var calendario = $("#calendario_crear_cita").val();
        var hora = $("#reloj_crear_cita").val();
        var servicios = $("#servicios_id_crear_cita").val();
        var empleado = $("#asignar_a").val();
        var mensaje = '';
        $("#addFormCodgio").hide();
        $("#divCodigoEmpalme").hide();
        $("#msgFormCdogio").text('');
        $(".mostrarInputCodigoEmpalme").show();
        $("#validadorEmpalme").val(false);
        if(calendario == null || calendario == '')
        {
            mensaje = 'Selecciona un día';
        }
        else if(hora == null || hora == '')
        {
            mensaje = 'Selecciona una hora';
        }
        else if(servicios.length == 0)
        {
            mensaje = 'Selecciona un servicio';
        }
        else if(empleado == -1)
        {
            mensaje = 'Selecciona una barbera';
        }
        else{
            mensaje = 'Validando tu cita';
            $.LoadingOverlay("show",{
                background  : "rgba(54, 54, 54, 0.8)",
                imageColor : "#00d896"
            });
            data = {
                "calendario": calendario,
                "hora": hora,
                "servicios": servicios,
                "empleado": empleado,
            };
            $.ajax({
                url: url_dinamica+"/api/citas/pruebaDisponibilidad",
                type:"POST",
                data: data,
                dataType:"json",
                success:function(data){
                    console.log(data);
                    
                    if(data.data == "0")
                    {
                        mensaje = 'La hora que solicitas no esta disponible, intenta con otra.';
                        $("#mensajeCrearCita").text(mensaje);
                    }
                    else if(data.data == "JUNTAS")
                    {
                        mensaje = data.message;
                        $("#mensajeCrearCita").text(mensaje);
                        $("#validadorEmpalme").val(true);
                        $("#addFormCodgio").show();
                    }
                    else{
                        $("#modal-crear-cita").modal('hide');
                        animateCSS('#containerBarbers', 'fadeOutLeft');
                        animateCSS('#btnModalCrearCita', 'fadeOutLeft');
                        animateCSS('#containerCalendar','fadeOutLeft',function(){
                            $("#containerCalendar").hide();
                            $("#containerBarbers").hide();
                            $("#btnModalCrearCita").hide();
                            $("#formularioCliente").show();
                            animateCSS('#formularioCliente','fadeInRight');
                        });
                        $("#btnPasoFinal").hide();
                        $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="fecha_inicio_cita" value="'+calendario+'">');
                        $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="hora_inicio_cita" value="'+hora+'">');
                        $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="empleado_cita" value="'+empleado+'">');
                        servicios.forEach(element => {
                            $("#sevicio_prueba").append('<input type="hidden" name="servicio_seleccionados_input[]" class="input_temporales" value="'+element+'">')
                        });
                    }
                    $.LoadingOverlay("hide");
                }
            });
        }
        $("#mensajeCrearCita").text(mensaje);
    });
    
    $(".validarCodigoEmpalme").click(function(){
        var calendario = $("#calendario_crear_cita").val();
        var hora = $("#reloj_crear_cita").val();
        var servicios = $("#servicios_id_crear_cita").val();
        var empleado = $("#asignar_a").val();
        var codigo = $("#txtCodigoEmpalme").val();
        $.ajax({
            url: url_dinamica+"/api/validar_codigo/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data == "CORRECTO")
                {
                    $("#modal-crear-cita").modal('hide');
                    animateCSS('#containerBarbers', 'fadeOutLeft');
                    animateCSS('#containerCalendar','fadeOutLeft',function(){
                        $("#containerCalendar").hide();
                        $("#containerBarbers").hide();
                        $("#formularioCliente").show();
                        animateCSS('#formularioCliente','fadeInRight');
                    });
                    $("#btnPasoFinal").hide();
                    $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="fecha_inicio_cita" value="'+calendario+'">');
                    $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="hora_inicio_cita" value="'+hora+'">');
                    $("#sevicio_prueba").append('<input class="input_temporales" type="hidden" name="empleado_cita" value="'+empleado+'">');
                    servicios.forEach(element => {
                        $("#sevicio_prueba").append('<input type="hidden" name="servicio_seleccionados_input[]" class="input_temporales" value="'+element+'">')
                    });
                }
                else{
                    $("#msgFormCdogio").text('El código ingresadono es válido. Verifique su información.')
                }
            }
        });
    });

    $(".mostrarInputCodigoEmpalme").click(function(){
        $(this).hide();
        $("#divCodigoEmpalme").show();
    })

    function abrirModalReagendarCita(fecha,hora,id){
        
        $("#modal-2").modal('hide');
        $("#modal-reagendar-cita").modal();

        $("#calendario_reagendar_cita").datepicker({
            format: 'yyyy-mm-dd'
        });

        $("#calendario_reagendar_cita").val(fecha);
        $("#cita_id_reagendar").val(id);

        $('#reloj_reagendar_cita').datetimepicker({
            format: 'LT',
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
        });
        var hora = moment('12/12/2012 '+hora).format('h:mm A');
        $("#reloj_reagendar_cita").val(hora);
    };
    $("#reagendarCitaManual").click(function(){
        var calendario = $("#calendario_reagendar_cita").val();
        var hora = $("#reloj_reagendar_cita").val();
        var cita_id = $("#cita_id_reagendar").val();
        $("#addFormCodgioReagendar").hide();
        $("#validadorEmpalmeReagendar").val(false);        
        $("#divCodigoEmpalmeReagendar").hide();
        $("#msgFormCdogioReagendar").text('');
        $(".mostrarInputCodigoEmpalmeReagendar").show();
        if(calendario == null || calendario == '')
        {
            mensaje = 'Selecciona un día';
        }
        else if(hora == null || hora == '')
        {
            mensaje = 'Selecciona una hora';
        }
        else{
            mensaje = 'Validando tu cita';
            $.LoadingOverlay("show",{
                background  : "rgba(54, 54, 54, 0.8)",
                imageColor : "#00d896"
            });
            $.ajax({
                url: url_dinamica+"/api/citas/disponibilidad_reagendar/"+cita_id+"/"+calendario+"/"+hora,
                type:"GET",
                dataType:"json",
                success:function(data){
                    console.log(data);
                    
                    if(data.data == 0)
                    {
                        mensaje = 'La hora que solicitas no esta disponible, intenta con otra.';
                        $("#mensajeReagendarCita").text(mensaje);
                        $.LoadingOverlay("hide");
                    }
                    else if(data.data == "JUNTAS")
                    {
                        mensaje = data.message;
                        $("#mensajeReagendarCita").text(mensaje);
                        $("#validadorEmpalmeReagendar").val(true);
                        $("#addFormCodgioReagendar").show();
                        $.LoadingOverlay("hide");
                    }
                    else{
                        $.ajax({
                            url: url_dinamica+"/api/citas/reagendar_nuevo/"+cita_id+"/"+calendario+"/"+hora,
                            type:"GET",
                            dataType:"json",
                            success:function(data){
                                location.reload();
                                $.LoadingOverlay("hide");
                            },
                        });
                    }
                }
            });
        }
        $("#mensajeReagendarCita").text(mensaje);
    });
    $(".validarCodigoEmpalmeReagendar").click(function(){
        var calendario = $("#calendario_reagendar_cita").val();
        var hora = $("#reloj_reagendar_cita").val();
        var cita_id = $("#cita_id_reagendar").val();
        var codigo = $("#txtCodigoEmpalmeReagendar").val();
        $.ajax({
            url: url_dinamica+"/api/validar_codigo/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data == "CORRECTO")
                {
                    $.ajax({
                        url: url_dinamica+"/api/citas/reagendar_nuevo/"+cita_id+"/"+calendario+"/"+hora,
                        type:"GET",
                        dataType:"json",
                        success:function(data){
                            location.reload();
                        },
                    });
                }
                else{
                    $("#msgFormCdogioReagendar").text('El código ingresadono es válido. Verifique su información.')
                }
            }
        });
    });

    $(".mostrarInputCodigoEmpalmeReagendar").click(function(){
        $(this).hide();
        $("#divCodigoEmpalmeReagendar").show();
    });
</script>
@endsection