@section('after-styles')

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
@endsection





@if( ! empty($createdBy))
    <div class="form-group">
        {!! Form::label('status_label','Status Programare',['class' => 'col-lg-2 control-label']) !!}
        <div class="col-lg-10">
            {!! Form::select('status',config('constants.appointments_status'),null,['class'=>'form-control areas', 'id'=>'status_id']) !!}
        </div>

    </div>
@endif


<div class="form-group">
    {!! Form::label('areas_label','Doctor',['class' => 'col-lg-2 control-label']) !!}
    <div class="col-lg-10">
        {!! Form::select('doctor_id',$doctors,null,['class'=>'form-control areas', 'id'=>'doctor_id']) !!}
    </div>

</div>
<input name="patient_hidden_input" type="hidden" id="patient_hidden_input" value="existing">


<div class="form-group">
    {!! Form::label('time_label',' De la data si ora',['class' => 'col-lg-2 control-label']) !!}

    <div class="col-lg-10">
        {!! Form::text('start', $start, ['class' => 'form-control ','id' => 'datepicker-start']) !!}

    </div>
</div>


<div class="form-group">
    {!! Form::label('time_label',' Pana la data si ora',['class' => 'col-lg-2 control-label']) !!}

    <div class="col-lg-10">
        {!! Form::text('end', null, ['class' => 'form-control ','id' => 'datepicker-end']) !!}

    </div>
</div>


<div class="form-group">
    {{ Form::label('details', 'Detalii', ['class' => 'col-lg-2 control-label']) }}
    <div class="col-lg-10">
        {{ Form::textarea('details', null, ['class' => 'form-control']) }}
    </div><!--col-lg-10-->
</div><!--form control-->
<div class="form-group">
    <div class="col-lg-10">

        @if( ! empty($createdBy))
            Programare creata de  {{$createdBy}} la data de {{$createdAt}}
        @endif
    </div><!--col-lg-10-->
</div><!--form control-->


</div><!-- /.box-body -->
</div><!--box-->



@section('after-scripts')

    <script src="{!! asset('js/moment.min.js') !!}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/locales.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script>

        $(function () { // document ready
            $('#patient_id').select2({
                placeholder: 'Alege pacientul',
                ajax: {
                    dataType: 'json',
                    url: '{{ route("admin.patients.ajax") }}',
                    delay: 400,
                    data: function (params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function (data, page) {
                        return {
                            results: data
                        };
                    },
                }
            });
            $intial = $('#datepicker-start').val();
            $('#datepicker-start').datetimepicker({
                daysOfWeekDisabled: [0, 6],
                locale: 'ro',
                format: 'YYYY-MM-DD HH:mm'
            });
            $('#datepicker-end').datetimepicker({daysOfWeekDisabled: [0, 6], locale: 'ro', format: 'YYYY-MM-DD HH:mm'});
//
            var startDateObj = moment($intial).format('YYYY-MM-DD HH:mm');
//
            $('#datepicker-start').val(startDateObj).trigger('update');
            var enddateObj = moment($intial).add(10, 'm').format('YYYY-MM-DD HH:mm');

            $('#datepicker-end').val(enddateObj).trigger('update');

            $('#tab_1_header').click(function () {
                $('#phone').val('');
                $('#email').val('');
                $('#name').val('');
                $('#patient_hidden_input').val('existing').trigger('change');
            });
            $('#tab_2_header').click(function () {
                $('#patient_id').val('').trigger('change');
                $('#patient_hidden_input').val('new').trigger('change');
            });


            $('#datepicker-start').on('dp.change', function (e) {
                $intial = $('#datepicker-start').val();
                var newDateObj = moment($intial).add(10, 'm').format('YYYY-MM-DD HH:mm');

                $('#datepicker-end').val(newDateObj).trigger('update');
            })


        });


    </script>






@endsection