@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"/>
<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">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .daterangepicker .ranges li.active{
		background: #00c88b !important;
	}
	.daterangepicker td.in-range{
		background: #00c88c38;
	}
	.daterangepicker td.active, .daterangepicker td.active:hover{
		background: #00c88b;
	}
	.btnArrow{
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    #daterange{
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
    .month{
        /* padding: 10px;
        background: #00c88a; */
    }
    .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: 30px;
    }
    .card-header{
        background:#fff;
    }
    .modal-header{
        background-color: #00c88b;
    }
    .modal-header h5{
        /* //font-family: 'Poppins'; */
        font-size: 35px;
        font-weight: 400;
        color: #fff;
    }
    .modal-content {
        border: 0px solid #ebedf2;
        border-radius: 0.3rem;
    }
    .modal-body h4{
        font-family:'Poppins';
        font-weight:400;
        font-size:20px;
        background:#fff;
    }
    .modal-body,.modal-footer {
        background:#fff;
    }
    .fc-center h2{
        font-family:'Poppins';
        font-weight:400;
        font-size:23px;
        color:#67666a;
    }
    .select2,.card-header div div h5{
        font-family:'Poppins';
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],#select2-selectSala-result-v48f-0 {
        background-color: #00c88b;
        color: white;
    }
    .select2-container{
        width:100% !important;
    }
    .card-block{
        position: relative;
    }
    .text-info {
        color: #00c88b !important;
    }
    #loader {
        /*IMPORTANTE*/
        position: absolute;
        top: 50%;
        margin-top: 0px;
        margin-left:50%;
        margin-right:40%;
    }

    @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;
    }

    #promedio-diario, #promedio-asistencias
    {
        font-family: "Fixture ebold", sans-serif;
        font-size: 1.125rem;
        color: #343a40;
    }




    /* ipad Mini Portrait */
    @media only screen and (max-width:768px){

        .btnAccionesCalendar i{
            font-size: 25px;
        }

    }


</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-9 text-right" id="filtroFechas">
                                <div class="btn-group w-50">
                                    <button class="btnArrow" data-tipo="anterior"> < </button>
                                    <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{ $inicio_mes.' / '.$fin_mes }}" />
                                    <button class="btnArrow" data-tipo="siguiente"> > </button>
                                </div>
                            </div>
                            <div class="col-3 mt-0 mb-0">
                                <button type="button" id="btnModalCrearCita" class="btn btn-primary_local float-right" onclick="abrirModalCrearCita();">
                                    CREAR CITA
                                </button>
                            </div>
                            <div id="containerCalendar" class="col-12 primerPasoContenedores">
                                <div class="spinner-border text-primary_local" style="margin: 0 auto;display:none" role="status" id="loader">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <div class="card-body" id="citaCero">
                                    <h4 class="card-title text-uppercase">Citas agendadas


                                    @if(Auth::user()->tipo_usuario != 'Empleado')
                                        <p>Promedio: <span id="promedio-diario"> $1,000.00</span>
                                        Real: <span id="promedio-asistencias"> $1,000.00</span></p>
                                    @endif

                                    </h4>
                                    <div class="table-responsive">
                                        <table class="table" id="table-citas">
                                            <thead>
                                                <tr>
                                                    <th>Hora</th>
                                                    <th>Servicio</th>
                                                    <th>Cliente</th>
                                                    <th>Asignado a</th>
                                                    <th>Costo</th>
                                                    <th>Estatus</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tbody-citas">
                                                                                        @foreach ($citas_dia_actual as $item)
                                                <tr>
                                                    <td style="line-height: 22px"> {{$item->fecha_hora->format('d/m/Y')}} <br /> {{$item->fecha_hora->format('h:i a')}}</td>
                                                    <td>{{$item->servicio->nombre}}</td> 
                                                    <td style="line-height: 22px">
                                                        <a href="{{ URL::to('/')}}/clientes/{{$item->cliente->id}}" target="blank">
                                                            {{$item->cliente->nombre.' '.$item->cliente->a_paterno.' '.$item->cliente->a_materno}}
                                                        </a>
                                                        <br /> {{ $item->cliente->telefono }}
                                                        <br />
                                                        <div style="width: auto;" class="badge badge-success badge-pill">AS - {{ $asistidas[$item->cliente->id] }}</div>
                                                        <div style="width: auto;" class="badge badge-danger badge-pill">C - {{ $canceladas[$item->cliente->id] }}</div>
                                                        <div style="width: auto;" class="badge badge-warning badge-pill">AP - {{ $apartadas[$item->cliente->id] }}</div>
                                                        <div style="width: auto;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">RA - {{ $reagendadas[$item->cliente->id] }}</div>
                                                    </td>
                                                    <td>
                                                        {{$item->empleado->usuario->name.' '.$item->empleado->usuario->a_paterno.' '.$item->empleado->usuario->a_materno}}
                                                        <br />
                                                        @if($item->cita_anterior != NULL)
                                                            <strong>Reagenda: </strong>
                                                        @else
                                                            <strong>Agenda: </strong>
                                                        @endif
                                                        @if($item->user_id != NULL)
                                                            {{$item->usuario->name.' '.$item->usuario->a_paterno }}
                                                        @else
                                                            Anonimo
                                                        @endif
                                                    </td>
                                                    <td>
                                                        ${{$item->servicio->costo}}

                                                                                                                <br>
                                                        @if($item->venta_id)
                                                        <b>Tipo de pago: </b>
                                                        <br>
                                                        {{ $item->venta->tipo_pago}}
                                                        @endif
                                                        <br>
                                                        @if (count($item->propinas) > 0)
                                                            <b>Propinas:</b><br>
                                                            @foreach ($item->propinas as $propina)
                                                                <b>{{ $propina->empleado->usuario->name }}:</b>$ {{ $propina->cantidad }}<br />
                                                            @endforeach
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($item->estatus == "Asistida" && $item->estatus_pago == 'Pagada')
                                                            <div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Asistida</div>
                                                        @elseif($item->estatus == "Apartada" && $item->estatus_pago != 'Pagada')
                                                            <div style="width: 90px" class="badge badge-warning badge-pill">Apartada</div>
                                                        @elseif($item->estatus_pago == "Pagada")
                                                            <div style="width: 90px" class="badge badge-info badge-pill">Pagada</div>
                                                        @elseif($item->estatus == "Cancelada")
                                                            <div style="width: 90px" class="badge badge-danger badge-pill">Cancelada</div>
                                                        @elseif($item->estatus == "Asistida")
                                                            <div style="width: 90px" class="badge badge-success badge-pill">Asistida</div>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="btn-group">
                                                            @if($item->estatus == "Asistida" && $item->estatus_pago == 'Pagada')
                                                                <div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>
                                                                @if (empty($item->propina))
                                                                    <a onclick="armarModalPropina({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Propina" href="#" class="btnAccionesCalendar text-success"><i class="mdi  mdi-star-circle"></i></a>
                                                                @endif
                                                                <a href="{!! url('encuesta/'.$item->id); !!}" data-toggle2="tooltip" data-placement="top" title="Encuesta" class="btnAccionesCalendar text-success"><i class="mdi mdi-check"></i></a>

                                                            @elseif($item->estatus == "Apartada" && $item->estatus_pago != 'Pagada')
                                                                <a data-toggle2="tooltip" data-placement="top" title="Pagar" href="{!! url('caja/'.$item->id) !!}" class="btnAccionesCalendar text-info">
                                                                    <i class="mdi mdi-cash-usd"></i>
                                                                </a>
                                                                <a onclick="armarModalAsistencia({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>
                                                                <a onclick="abrirModalReagendarCita('{{$item->fecha_hora->format('Y-m-d')}}','{{ $item->fecha_hora->format('H:i') }}','{{ $item->id }}');" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>
                                                                <a onclick="armarModalEliminar({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>
                                                                <a target="_blank" href="https://api.whatsapp.com/send?phone=+521{!! $item->cliente->telefono !!}&text=Buenas%20tardes%20Sr.%20{!! $item->cliente->a_paterno !!},%20su%20cita%20quedo%20agendada%20 con fecha {{$item->fecha_hora->format('d/m/Y')}} y hora {{$item->fecha_hora->format('h:i a')}}, %20le%20recordamos%20ser%20puntual,%20que%20tenga%20un%20excelente%20día." class="btnAccionesCalendar text-info"><i class="mdi mdi-whatsapp"></i></a>
                                                            @elseif($item->estatus_pago == "Pagada")
                                                                <a onclick="armarModalAsistencia({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>
                                                                <a onclick="abrirModalReagendarCita('{{$item->fecha_hora->format('Y-m-d')}}','{{ $item->fecha_hora->format('H:i') }}','{{ $item->id }}');" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>
                                                            @elseif($item->estatus == "Asistida")
                                                                <a data-toggle2="tooltip" data-placement="top" title="Pagar" href="{!! url('caja/'.$item->id) !!}" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>
                                                                <a onclick="armarModalPropina({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Propina" href="#" class="btnAccionesCalendar text-success"><i class="mdi  mdi-star-circle"></i></a>
                                                                <a href="{!! url('encuesta/'.$item->id); !!}" data-toggle2="tooltip" data-placement="top" title="Encuesta" class="btnAccionesCalendar text-success"><i class="mdi mdi-check"></i></a>
                                                            @endif
                                                            @if(Auth::user()->tipo_usuario == 'Admin' || Auth::user()->email ==  'marketing3@birdev.mx')
                                                                <a href="{!! route('citas.edit', [$item->id]) !!}" data-placement="top" title="Editar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-pen"></i></a>
                                                            @endif
                                                        </div>
                                                    </td>

                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-body standby" id="ceroCitas" style="display:none">
                                    <h3 class="card-title">No hay citas agendadas</h3>
                                </div>
                            </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 !!} - {!! $cliente->telefono !!}</option>
                                            @endforeach
                                        </select>
                                        <br>
                                        <br>
                                        <div class="row mt-4">
                                            <div class="col-4">
                                                <button style="background-color: #00c88b; color: #fff" type="button" id="nuevoCliente" class="mt-1 btn w-100">+ nuevo cliente</button>
                                            </div>
                                            <div class="col-4">
                                                <button style="background-color: #d8d8d8; color: #fff" type="button" id="modalVentaMostrador" class="mt-1 btn w-100">sin email</button>
                                            </div>
                                            <div class="col-4">
                                                <button style="background-color: #00c88b; color: #fff" type="button" id="clienteReward" class="mt-1 btn w-100">reward</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 class="col-sm-6 mt-1 mb-1">
                                                    <label for="nacimiento" class="text-uppercase">fecha de nacimiento:</label>
                                                    <input class="form-control" placeholder="dd/mm/aaaa" name="nacimiento" type="text" id="nacimiento">
                                                </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>




<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 class="modal fade" id="validar_reward" 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">Cliente reward</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;">Ingrese el código de la tarjeta reward o escanee el código de barras</h4>
                <input id="codigo_reward" class="form-control" name="codigo_reward" type="text" placeholder="Ingresa tu código...">
                <h5 class="ml-1" id="mensajeCodigoValidadorReward"></h5 >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                <button id="btnValidarcodigoReward" type="button" class="btn btn-primary_local btnAcceptModal" >validar</button>
            </div>
        </div>
    </div>
</div>

<div id="modales"></div>

<!-- Modal propina -->
<div class="modal fade" id="modalAgregarPropina" tabindex="-1" role="dialog" aria-labelledby="modalAgregarPropinaLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</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-12">
                  <input type="text" name="cantidadPropina" id="cantidadPropina" class="form-control" placeholder="Cantidad">
              </div>
              <div class="col-6">
                  <select name="tipoPropina" id="tipoPropina" class="form-control">
                      <option value="-1">Seleciiona un tipo</option>
                      <option value="Efectivo">Efectivo</option>
                      <option value="Tarjeta">Tarjeta</option>
                  </select>
              </div>

              {{-- TODO: cambiar por datos de barberas --}}


                <div class="col-6">
                    <select name="colaborador" id="colaborador" class="form-control">
                        <option value="-1">Seleciona un colaborador</option>
                        @foreach ($empleados as $empleado)
                            <option value="{{ $empleado->id }}">{{ $empleado->usuario->name}} {{ $empleado->usuario->a_paterno }}</option>
                        @endforeach
                    </select>
                </div>

              <div class="col-12 ">
                  <h3 class="text-danger text-center" id="msnErrorPropina"></h3>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-secondary_local" data-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-sm btn-primary_local" id="btnAgregarPropina">Agregar</button>
        </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/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 src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{!! asset('files_custom/assets/input-mask/jquery.inputmask.js')!!}"></script>
<script>
    var url_dinamica = "{!! URL::to('/') !!}";
    var inicio = "{{ $inicio_mes}}";
	var fin = "{{ $fin_mes}}";
    var cita_id_propina = 0;
    var promedio = {{ $suma }};

    @if(Auth::user()->tipo_usuario != 'Empleado')
        var promedio_contenedor = document.getElementById('promedio-diario');
        promedio_contenedor.innerHTML = '$'+promedio;
    @endif


    var pagadas = {{ $suma_pagadas }};
    var asistencias = document.getElementById('promedio-asistencias');
    asistencias.innerHTML = '$'+pagadas;

    $('#nacimiento').inputmask({
        mask: "99/99/9999"
    });

    $('#telefono').inputmask(
        {
            mask: "(999) 999-9999"
        }
    );


    $('#loader').removeClass('spinner-border');
    $("#selectCliente").select2({
        placeholder :'Busca al cliente...',
        allowClear: true
    });

    $('#daterange').daterangepicker({
        "cancelButtonClasses": "btn btn-secondary",
        "applyButtonClasses" : "btn btn-primary_local",
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        "startDate": inicio,
        "endDate": fin,
        "opens": "center",
        "locale": {
            "format": "DD-MMM-YYYY",
            "separator": " / ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizado",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mie",
                "Jue",
                "Vie",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
    });

    $(".btnArrow").click(function(){
		$.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
			$('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);

			actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

    function actualizarDatos(){
        var result = $("#daterange").val().split('/');
        var suma = 0;
        var suma_pagadas = 0;
        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);
        console.log(fecha_inicio,fecha_final);
        $("#tbody-citas").remove();
        $("#ceroCitas").hide();
        $("#citaCero").hide();


        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/citas_rango_/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);
            console.log(datos);
            if (datos == "ERROR") {
                $("#loader").hide();
                $("#ceroCitas").show();
            }
            else{
                $("#containerCalendar").removeClass('standby');
                $("#loader").hide();
                var agregar = '<tbody id="tbody-citas">';
                data.data.forEach(element => {
                    suma = suma + element.costo;
                    if(element.estatus_pago == "Pagada"){
                        suma_pagadas = suma_pagadas + element.costo;
                    }
                    agregar = agregar + '<tr>'+
                    '<td style="line-height: 22px">'+element.fecha+'<br />'+element.hora+'</td>'+
                    '<td>'+element.servicio+'</td>'+
                    '<td style="line-height: 22px"><a href="'+url_dinamica+'/clientes/'+element.cliente_id+'">'+element.cliente+'</a><br />'+element.telefono+'<br />'+
                        '<div style="width: auto;" class="badge badge-success badge-pill">AS - '+element.asistadas+'</div>'+
                        '<div style="width: auto;" class="badge badge-danger badge-pill">C - '+element.canceladas+'</div>'+
                        '<div style="width: auto;" class="badge badge-warning badge-pill">AP - '+element.apartadas+'</div>'+
                        '<div style="width: auto;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">RA - '+element.reagendadas+'</div>'+
                        '</td>'+
                    '<td>'+element.empleado + '<br /> <strong>Agenda: </strong> ' + element.agendada + '</td>'+
                    '<td>$'+element.costo+'</td>';
                    if(element.estatus == "Asistida" && element.estatus_pago == "Pagada")
                    {
                        agregar = agregar + '<td><div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Asistida</div></td>';
                    }
                    else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-warning badge-pill">Apartada</div></td>';
                    }
                    else if(element.estatus_pago == "Pagada")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-info badge-pill">Pagada</div></td>';
                    }
                    else if(element.estatus == "Cancelada")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-danger badge-pill">Cancelada</div></td>';
                    }
                    else if(element.estatus == "Asistida")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-success badge-pill">Asistida</div></td>';
                    }
                    agregar = agregar + '<td><div class="btn-group">';
                    if(element.estatus_tiempo == "normal")
                    {
                        if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
                        {
                            agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
                        }
                        else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
                            '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
                            '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
                            '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>'+
                            '<a target="_blank" href="https://api.whatsapp.com/send?phone=+521'+element.telefono+'&text=Buenas%20tardes%20Sr.%20'+element.cliente+',%20su%20cita%20quedo%20agendada%20 con fecha '+element.fecha+' y hora '+element.hora+', %20le%20recordamos%20ser%20puntual,%20que%20tenga%20un%20excelente%20día." class="btnAccionesCalendar text-info"><i class="mdi mdi-whatsapp"></i></a>';
                        }
                        else if(element.estatus_pago == "Pagada")
                        {
                            agregar = agregar + '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
                            '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
                        }
                        else if(element.estatus == "Asistida")
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
                        }
                    }
                    else{
                        if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
                        {
                            agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
                        }
                        else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
                            '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
                            '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>';
                        }
                        else if(element.estatus_pago == "Pagada")
                        {
                            agregar = agregar + '<a onclick="abrirModalReagendarCita('+element.info_reagendar+')" data-toggle2="tooltip" data-placement="top" title="Reagendar" href="#" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
                        }
                        else if(element.estatus == "Asistida")
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
                        }
                    }

                    @if(Auth::user()->tipo_usuario == 'Admin' || Auth::user()->email ==  'marketing3@birdev.mx')
                        agregar = agregar + '<a href="'+url_dinamica+'/citas/'+element.id+'/edit" data-placement="top" title="Editar" class="btnAccionesCalendar text-primary"><i class="mdi mdi-pen"></i></a>';
                    @endif

                    agregar = agregar + '</div></td></tr>';
                });
                agregar = agregar + '</tbody>';
                $('#promedio-diario').html('$'+(suma).toLocaleString('en'));
                $('#promedio-asistencias').html('$'+(suma_pagadas).toLocaleString('en'));
                $("#table-citas").append(agregar)
                $("#table-citas").show();
                $("#citaCero").show();
                $('[data-toggle2="tooltip"]').tooltip();
            }
        })
        .fail(function(error) {
            console.log('error',error);
        });
    }

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });

    function animateCSS(element, animationName, callback) {
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)

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

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

        node.addEventListener('animationend', handleAnimationEnd)
    }

    function 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('#btnModalCrearCita', 'fadeOutLeft');
                        animateCSS('#filtroFechas', 'fadeOutLeft');
                        animateCSS('#containerCalendar','fadeOutLeft',function(){
                            $("#containerCalendar").hide();
                            $("#btnModalCrearCita").hide();
                            $("#filtroFechas").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('#btnModalCrearCita', 'fadeOutLeft');
                    animateCSS('#filtroFechas', 'fadeOutLeft');
                    animateCSS('#containerCalendar','fadeOutLeft',function(){
                        $("#containerCalendar").hide();
                        $("#btnModalCrearCita").hide();
                        $("#filtroFechas").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();
        var user_id = {!!Auth::user()->id!!};

        $("#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+"/"+user_id,
                            type:"GET",
                            dataType:"json",
                            success:function(data){
                                location.reload();
                                $.LoadingOverlay("hide");
                            },
                        });
                    }
                }
            });
        }
        $("#mensajeReagendarCita").text(mensaje);
    });

    $(".mostrarInputCodigoEmpalmeReagendar").click(function(){
        $(this).hide();
        $("#divCodigoEmpalmeReagendar").show();
    });

    $(".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();
        var user_id = {!!Auth::user()->id!!};

        if(codigo == '')
        {
            codigo = '-_-';
        }
        $.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+"/"+user_id,
                        type:"GET",
                        dataType:"json",
                        success:function(data){
                            location.reload();
                        },
                    });
                }
                else{
                    $("#msgFormCdogioReagendar").text('El código ingresadono es válido. Verifique su información.')
                }
            }
        });
    });

    // ---------------------------
    function armarModalAsistencia(id)
    {
        $("#modales").html('<div class="modal fade" id="modalAd" 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">'+
                        '<h1>RECUERDA</h1><h3> brindar el mejor servicio al cliente</h3>'+
                        '<hr />'+
                        '<h4 style="margin-top:0px!important;"> Al confirmar tu cita sera marcada como asistida, ¿estás seguro de continuar? </h4>'+
                    '</div>'+
                    '<div class="modal-footer">'+
                        '<button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>'+
                        '<a href="'+url_dinamica+'/citas/cita-cambiar-estatus/'+id+'" class="btn btn-primary_local btnAcceptModal" >aceptar</a>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>');
        $("#modalAd").modal();
    }

    function armarModalEliminar(id)
    {
        $("#modales").html('<div class="modal fade" id="modalDelete" 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;"> Al confirmar tu cita sera eliminada de forma definitiva, ¿estás seguro de continuar? </h4>'+
                    '</div>'+
                    '<div class="modal-footer">'+
                        '<button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>'+
                        '<form action="'+url_dinamica+'/citas/cita-eliminar/'+id+'" method="POST" role="form" id="form_"'+id+'>'+
                        '<button type="submit" class="btn btn-primary_local">aceptar</button>'+
                            '{{ method_field("DELETE") }}'+
                            '{{ csrf_field() }}'+
                        '</form>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>');
        $("#modalDelete").modal();
    }

    $("#nuevoCliente").click(function(){
        $("#divDatosCliente").show();
        $("#validacion_campos").val(true);
    });

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

    $("#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($("#nombre_cliente").val() != '' && $('#telefono').val().length == 14 && $('#nacimiento').val().length == 10 && !($('#nacimiento').val().indexOf('_') > -1) && !($('#telefono').val().indexOf('_') > -1) )
        {
            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.');
        }
    }

    $("#clienteReward").click(function(){
        $("#validar_reward").modal();
        setTimeout(() => {
            $("#codigo_reward").focus();
        }, 600);
    });

    $("#codigo_reward").keypress(function(){
        $("#codigo_reward").val($("#codigo_reward").val().replace(" ",""));
    });

    $("#btnValidarcodigoReward").click(function(){
        var codigo_reward = $("#codigo_reward").val();
        // codigo_reward
        // mensajeCodigoValidadorReward
        codigo_reward =  codigo_reward.replace(" ","");
        if(codigo_reward != '')
        {
            codigo = $("#codigo_reward").val();
        }else{
            codigo = 0;
        }
        $.ajax({
            url: url_dinamica+"/api/validar_codigo_reward/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data.validacion == true)
                {
                    $("#mensajeCodigoValidadorReward").css('color','#00c88b');
                    $("#mensajeCodigoValidadorReward").html('Código correcto');
                    $("#selectCliente").val(data.data.reward.cliente_id).trigger("change");
                    $("#puntosDisponible").text('Puntos disponibles: '+data.data.reward.puntos_totales);
                    setTimeout(() => {
                        $("#validar_reward").modal('hide');
                    }, 1500);
                }
                else{
                    $("#mensajeCodigoValidadorReward").css('color','#ff6161');
                    $("#mensajeCodigoValidadorReward").html('Código incorrecto, por favor, verifique su información');
                    $("#selectCliente").val().trigger("change");
                    $("#puntosDisponible").text();
                }
            }
        });
    });

    function armarModalPropina(id)
    {
        console.log(id);
        cita_id_propina = id;
        $("#modalAgregarPropina").modal();
    }

    $('#btnAgregarPropina').click(function(){
    //limpiamos error en caso de que exista
    const error = $('#msnErrorPropina');
    error.html('');
    //validar la seleccion de los campos
    let cantidad = $('#cantidadPropina').val();
    let cantidadNum = +cantidad;
    let tipo = $('#tipoPropina').val();
    let colaborador = $('#colaborador').val();

    if(cantidad === false){ error.html('Por favor llena los campos correctamente.'); return false; }
    else if(cantidad === ""){ error.html('El campo cantidad no puede ser vacio.'); return false;}
    else if(isNaN(cantidadNum)){ error.html('El campo cantidad debe ser positivo y un número.'); return false;}
    else if(cantidadNum <= 0){ error.html('El campo cantidad debe ser mayor a cero.'); return false;}

    if(tipo == -1){ error.html('Por favor selecciona un tipo de propina.'); return false;}

    if(colaborador == -1){ error.html('Por favor selecciona un colaborador.'); return false;}

    var data =
    {
        cantidad: cantidad,
        tipo: tipo,
        empleado_id: colaborador,
        cita_id: cita_id_propina
    };

    $.ajax({
        method: 'post',
        url         :   "{{ URL::to('/') }}/api/ventas/propinas",
        data        :   data,
        dataType    :   'json'
    }).done(function(data) {
        location.reload();
    });



});


</script>
@endsection