@extends('layout.master')
@section('parentPageTitle', 'Profesionales')
@section('title', 'Reagendamiento')
@section('page-style')
    <link rel="stylesheet" href="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.css')}}">  
    <link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">

    <style type="text/css">

    .btn-group.select .btn{
        display: none;
    }

    .select{
        padding: 5px;
        border-radius: 15px;
    }


    .Highlighted a{
       background-color : Green !important;
       background-image :none !important;
       color: White !important;
       font-weight:bold !important;
       font-size: 12pt;
    }

    .ui-highlight .ui-state-default{
        background: red !important;
        border-color: red !important;
        color: white !important;
    }

    .ui-highlight2 .ui-state-default{
        background: green !important;
        border-color: green !important;
        color: white !important;
    }



    </style>


@stop

@section('content')


    

    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="header">
                    <h2 align="center"><strong>Reagendamiento</strong></h2>

                </div>
                <div class="body">
                    <form action="{{ route('profesionales.reagendar_cita') }}" id="formReagendarCita" method="post">

                        
                        <div class="row clearfix">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-8">
                                Paciente: {{$dataCita[0]->paciente_nombre}} {{$dataCita[0]->paciente_apellidopaterno}} {{$dataCita[0]->paciente_apellidomaterno}}<br>
                                Fecha programada: {{$dataCita[0]->fecha}}<br>
                                Hora programada: {{$dataCita[0]->hora_ini}}<br>
                            </div>
                            <div class="col-sm-2"></div>
                        </div>
                        <hr>

                        

                        
                        {{ csrf_field() }}

                        <div class="row clearfix div_fecha_cita">
                            <div class="col-sm-3" align="right">
                                <div class="form-group">
                                    <label>
                                        Fecha
                                    </label>
                                </div>
                            </div>    
                            <div class="col-sm-3">                                
                                <div class="form-group ">
                                    <input type="text" placeholder="" id="fecha_cita" name="fecha_cita" class="form-control calendario" value="" autocomplete="off">
                                </div>
                            </div> 
                                          
                        </div>

                        <div class="row clearfix div_hora_cita">
                            <div class="col-sm-3" align="right">
                                <div class="form-group">
                                    <label>
                                        Hora
                                    </label>
                                </div>
                            </div>    
                            <div class="col-sm-3">                                
                                <div class="form-group">
                                    <input type="text" placeholder="" id="hora_cita" name="hora_cita" class="form-control timepicker" value="" style="position: sticky; display: block;" autocomplete="off">
                                </div>
                            </div> 
                        </div>
                                     

                        

                        <div class="row clearfix" align="right">          
                            <div class="col-sm-12">
                                <button type="submit" class="btn btn-primary btn-round">Registrar</button>
                                <button type="button" class="btn btn-default btn-round btn-simple" onclick="window.history.back()">Cancelar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>




@stop



@section('page-script')


<script src="{{asset('assets/jquery-ui.js')}}"></script>
<script src="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.js')}}"></script>
<script type="text/javascript">

$(function () {

    
    var tempArray = null;

    $.datepicker.regional['es'] = {
         closeText: 'Cerrar',
         prevText: '< Ant',
         nextText: 'Sig >',
         currentText: 'Hoy',
         monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
         monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
         dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
         dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
         dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
         weekHeader: 'Sm',
         dateFormat: 'dd-mm-yy',
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: false,
         yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['es']);


    $('.div_hora_cita').hide();

    var token = $('meta[name="csrf-token"]').attr('content');
    var profesional_id = "