@extends('layouts.app')

@section('content')
<div class="container-fluid">
  <div class="row-fluid">
    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
    <h3 class="page-title">
        Create New Attendance : {{ $name->name }}
    </h3>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="#">Dashboard</a> 
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="#">Store</a><i class="icon-angle-right"></i></li>
        <li><a href="#">Name</a><i class="icon-angle-right"></i></li>
        <li><a href="#">Attendance</a></li>
    </ul>
    <!-- END PAGE TITLE & BREADCRUMB-->
  </div>
  <div class="row-fluid">
    <div class="span12">
    <a href="{{ url('/admin/name') }}/{{ $id }}" title="Back"><button class="btn green btn-xs"><i class="m-icon-swapleft m-icon-white" aria-hidden="true"></i> Back</button></a>
    <br/>
    <br/>
    <div class="panel panel-default">
      <div class="panel-body">
        {!! Form::open(['url' => ['/admin/name/attendance/create', $id],'class'=>'form-vertical','id'=>'myform','files' => true]) !!}

        <div class="portlet box green">
          <div class="portlet-title">
            <div class="caption"><i class="icon-globe"></i>Attendance Records</div>
            <div class="tools">
              <a href="javascript:;" class="reload"></a>
              <a href="javascript:;" class="remove"></a>
            </div>
          </div>
          <div class="portlet-body">
            <div class="row-fluid">
              
              <div class="span2">
                <div class="control-group {{ $errors->has('attendance_type_id') ? 'error' : ''}}">
                  <label class="control-label">{!! Html::decode(Form::label('attendance_type_id', 'Type<span class="required">*</span>', ['class' => 'col-md-4 control-label'])) !!}</label>
                  <div class="controls">
                    {!! Form::select('attendance_type_id',['' => 'Select Type'] + $page_data['attendance_type']->toArray() , null, ['class' => 'm-wrap span12']) !!}
                    {!! $errors->first('attendance_type_id', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="span3">
                <div class="control-group {{ $errors->has('date_out') ? 'error' : ''}}">
                  <label class="control-label">{!! Html::decode(Form::label('date_out', 'Date Out<span class="required">*</span>', ['class' => 'col-md-4 control-label'])) !!}</label>
                  <div class="controls">
                    {!! Form::text('date_out', null, ['class' => 'm-wrap span12']) !!}
                    {!! $errors->first('date_out', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="span3">
                <div class="control-group {{ $errors->has('date_in') ? 'error' : ''}}">
                  <label class="control-label">{!! Html::decode(Form::label('date_in', 'Date In<span class="required">*</span>', ['class' => 'col-md-4 control-label'])) !!}</label>
                  <div class="controls">
                    {!! Form::text('date_in', null, ['class' => 'm-wrap span12','onChange'=>'calculate_diff()']) !!}
                    {!! $errors->first('date_in', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="span2">
                <div class="control-group {{ $errors->has('days') ? 'error' : ''}}">
                  <label class="control-label">{!! Html::decode(Form::label('days', 'Days <span class="required">*</span>', ['class' => 'col-md-4 control-label'])) !!}</label>
                  <div class="controls">
                    {!! Form::text('days', null, ['class' => 'm-wrap span12']) !!}
                    {!! $errors->first('days', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="span2">
                <div class="control-group {{ $errors->has('remark') ? 'error' : ''}}">
                <label class="control-label">{!! Html::decode(Form::label('remark', 'Remark <span class="required">*</span>', ['class' => 'col-md-4 control-label'])) !!}</label>
                <div class="controls">
                    {!! Form::text('remark', null, ['class' => 'm-wrap span12']) !!}
                    {!! $errors->first('remark', '<p class="help-block">:message</p>') !!}
                </div>
                </div>
              </div>

            </div>
        
            <div class="row-fluid">
              <div class="span12">
                <div class="control-group">
                  <div class="controls">
                    <div class="col-md-offset-4 col-md-4">
                      {!! Form::submit(isset($submitButtonText) ? $submitButtonText : 'Create', ['class' => 'btn green']) !!}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>    
        </div>

        {!! Form::close() !!}
      </div>
    </div>
    </div>
  </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
  jQuery('#myform').validate( {
    highlight: function(element) {
        jQuery(element).closest('.control-group').addClass('error');
        jQuery(element).closest('.control-group').addClass('error');
    },
    unhighlight: function(element) {
        jQuery(element).closest('.control-group').removeClass('error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    focusInvalid: false, // do not focus the last invalid input
    ignore: "", // validate all fields including form hidden input
    rules: {
      'attendance_type_id': {
        required: true,
      },
      'date_in': {
        required: true,
        date : true,
      },
      'date_out': {
        required: true,
        date : true,
      },
      'days': {
        required: true,
        digits : true,
      },
      'remark': {
        required: true,
      },
    },
    errorPlacement: function (error, element) {
      if(element.parent('.input-group').length) {
          error.insertAfter(element.parent());
      } else { 
        error.insertAfter(element);
      }
    },
    messages: {
      'attendance_type_id': {
        required: "The type field is required",
      },
      'date_in' : {
        required : "The date in field is required",
      },
      'date_out': {
        required : "The date out field is required",
      },
      'days': {
        required : "The days field is required",
      },
      'remark': {
        required: "The rmk field is required",
      },     
    }
  });
});

function calculate_diff(){
  var d1 = $('#date_out').val();
  var d2 = $('#date_in').val();
  var date1 = new Date(d1);
  var date2 = new Date(d2);
  var timeDiff = Math.abs(date2.getTime() - date1.getTime());
  var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
  $('#days').val(diffDays);
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
$( "#date_in" ).datepicker({ dateFormat: 'yy-mm-dd' });
});

$(function(){
$( "#date_out" ).datepicker({ 
  dateFormat: 'yy-mm-dd',
  onSelect: function(date) {
    $("#date_in").datepicker('option', 'minDate', date);
  }
});
});

</script>
 
@endsection