@extends('front.layout')
@section('header')
<section class="content-header">
    <h1>
        <span class="text-capitalize">{{ trans('Create Appointment') }}</span>	    
    </h1>
    <ol class="breadcrumb">
        <li>{{ trans('Contact') }}</li>
        <li class="active">{{ trans('Create Appointment') }}</li>
    </ol>
</section>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="box">
            <div class="box-header with-border">
                <h3>Create new Appointment with {{$contact->first_name.' '.$contact->last_name}}</h3>
            </div>
            {{ Form::open(array('id' => 'create_appointment_form',"data-toggle"=>"validator")) }}
            <div class="box-body row">
                <div class="form-group col-md-6">
                    <label for="start_time">Start time</label>
                    {{ Form::text('start_time','',['class' => 'form-control','id' => 'start_time', 'required' => 'true']) }}
                </div>
                <div class="form-group col-md-6">
                    <label for="end_time">End time</label>
                    {{ Form::text('end_time','',['class' => 'form-control','id' => 'end_time', 'required' => 'true']) }}
                </div>
                <div class="form-group col-md-12">
                    <label for="description">Message/Description</label>
                    {{ Form::textarea('description','',['class' => 'form-control','id' => 'description', 'rows' => 5]) }}
                </div>
            </div>
            <div class="box-footer">
                <small>email will be sent to <i>{{$contact->email}}</i></small>
                <br>
                {{ Form::button('<span class="fa fa-envelope-o"></span> Send Email',['type' => 'submit','class' => 'btn btn-success ladda-button']) }}                                
            </div>
            {{ Form::close() }}
        </div>
    </div>
</div>
@endsection
@section('after_scripts')
<script charset="UTF-8" src="{{ asset('js/moment-with-locales.js') }}"></script>
<script charset="UTF-8" src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>
<script charset="UTF-8" src="{{ asset('js/validator.min.js') }}"></script>

<script>

$('#start_time').datetimepicker({
    useCurrent: false, //Important! See issue #1075
    minDate: moment()
});
$('#end_time').datetimepicker({
    useCurrent: false, //Important! See issue #1075
    minDate: moment()
});
$('#create_appointment_form').validator()
</script>
@endsection