@extends('layouts.app')

  @section('content')
    <div class="row">

      <div class="col-md-12 collapse" id="box-bulkupload">
        <div class="box-info">
          <h2><b>{!! trans('messages.bulk_upload') !!}</b> {!! trans('messages.offday') !!}</h2>
          <div class="additional-icon">
            <button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-bulkupload"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
          </div>
          {!! Form::model('attendance',['files'=>'true', 'method'=>'POST', 'route'=>['upload-column','attendance'], 'class'=>'upload-attendance-form', 'id'=>'upload-attendance-form', 'data-submit'=>'noAjax']) !!}
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label class="sr-only" for="file">{!! trans('messages.upload').' '.trans('messages.file') !!}</label>
                  <input type="file" name="file" id="file" class="btn btn-success btn-sm file-input" title="{!! trans('messages.select').' '.trans('messages.file') !!}">
                  {!! Form::submit(trans('messages.upload'),['class' => 'btn btn-primary btn-sm']) !!}
                </div>
              </div>
            </div>
            {!! Form::hidden('upload_type','offday') !!}
          {!! Form::close() !!}
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <a href="/attendance/download-excel-template?type=off">
                  <i class="fa fa-cloud-download"></i> {{ trans('messages.download').' '.trans('messages.offday').' '.trans('messages.template') }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-12 collapse" id="box-add">
        <div class="box-info">
          <h2><b>{!! trans('messages.add_new') !!}</b> {!! trans('messages.offday') !!}</h2>
          <div class="additional-icon">
            <button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-add"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
          </div>
          {!! Form::open(['url'=>'/attendance-offday-add', 'role'=>'form', 'class'=>'offday-form', 'id'=>'offday-form']) !!}
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  {!! Form::label('users',trans('messages.user'),['class'=>'required']) !!}
                  {!! Form::select('users[]',$users,'',['class'=>'form-control show-tick', 'title'=>trans('messages.select_one_or_more'), 'multiple'=>'multiple', 'data-actions-box'=>'true']) !!}
                </div>
              </div>
              <div class="col-md-2">
      					<div class="form-group">
      						{!! Form::label('date_off',trans('messages.offday'),['class'=>'required']) !!}
      						{!! Form::input('text','date_off','',['class'=>'form-control datepicker', 'placeholder'=>trans('messages.offday'), 'readonly'=>'true']) !!}
      					</div>
      				</div>
            </div>
            {!! Form::submit(trans('messages.save'),['class' => 'btn btn-primary pull-right']) !!}
          {!! Form::close() !!}
        </div>
      </div>

      <div class="col-md-12">
        <div class="box-info">
          <h2><b>{{ trans('messages.calendar').' | '.trans('messages.offday') }}</b></h2>
          <div class="additional-icon">
            <a href="#" data-toggle="collapse" data-target="#box-bulkupload"><button class="btn btn-sm btn-primary"><i class="fa fa-upload icon"></i> {!! trans('messages.bulk_upload') !!}</button></a>
            <a href="#" data-toggle="collapse" data-target="#box-add"><button class="btn btn-sm btn-primary"><i class="fa fa-plus icon"></i> {!! trans('messages.add_new') !!}</button></a>
          </div>
          <div>
            <div style="text-align:center; margin-bottom:15px;"><b>Tips: </b> Click on calendar event to remove the off-day record</div>
            <div id="offday_calendar"></div>
          </div>
        </div>
      </div>

    </div>
  @endsection