<div class='panel-body'>
  <style>
  #dashboard .block-attend > .panel-body {max-height: none; overflow: visible; padding: 0 20px 20px;}
  #dashboard .block-attend > .panel-body > .panel-heading {margin: 0 -20px;}
  .block-attend > .panel-body {padding-top: 0}
  .block-todoes {position: relative; padding-top: 42px; overflow: visible !important; padding-bottom: 0;}
  .block-todoes .todoes-input {position: absolute; top: 0; right: 0; left: 0; padding: 0 0 20px 0;}
  .block-todoes .todoes-input .form-control::-webkit-input-placeholder {font-size: 12px; line-height: 20px;color: #a4a8b6;}
  .block-todoes .todoes-input .form-control::-moz-placeholder {font-size: 12px; line-height: 20px; color: #a4a8b6;}
  .block-todoes .todoes-input .form-control:-ms-input-placeholder {font-size: 12px; line-height: 20px;color: #a4a8b6;}
  .block-todoes .todoes-input .form-control::placeholder {font-size: 12px; line-height: 20px; color: #a4a8b6;}
  .block-todoes .todoes {padding: 0 10px; margin: 0 -20px; max-height: 280px; overflow: auto; overflow-x:hidden}
  .block-todoes .todoes > li {position: relative; padding: 5px 10px 5px 35px; list-style: none; white-space:nowrap; height: 28px}
  .block-todoes .todoes > li:hover {background-color: #e9f2fb;}
  .block-todoes .todoes > li > a {display: block; position: absolute; top: 5px; right: 10px; left: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .block-todoes .todo-title {padding: 5px;}
  .block-todoes .todo-pri {margin: 0 5px;}
  .block-todoes .todo-time {display: inline-block; padding: 0 5px; font-size: 12px; color: #8e939a; width: 100px;}
  .block-todoes .todo-check {position: absolute; top: 4px; left: 10px; display: block; width: 20px; height: 20px; font-size: 20px; color: transparent; cursor: pointer; background: #fff; border: 2px solid #eee; border-radius: 50%;}
  .block-todoes .todo-check:hover {border-color: #8e939a;}
  .block-todoes .active > .todo-check {color: #00da88; background: transparent;border: none;}
  .block-todoes .todoes-form {position: absolute; top: -58px; right: 0; left: -20px; z-index: 1011; max-width: 500px; padding: 12px 20px 20px; visibility: hidden; background: #fff; -webkit-box-shadow: 0 0 20px 0 #bdc9d8; box-shadow: 0 0 20px 0 #bdc9d8; opacity: 0;-webkit-transition: .4s cubic-bezier(.175, .885, .32, 1); -o-transition: .4s cubic-bezier(.175, .885, .32, 1); transition: .4s cubic-bezier(.175, .885, .32, 1); -webkit-transition-property: opacity, visibility; -o-transition-property: opacity, visibility; transition-property: opacity, visibility; border-radius: 4px;}
  .block-todoes .todoes-form .form-group > label {padding-left: 0;}
  .block-todoes .todoes-form .form-group > label.text-center {text-align: center!important;}
  .block-todoes .todoes-form > .form-group:last-child {margin-bottom: 0;}
  .block-todoes .todoes-form > h3 {padding: 0 20px 15px; margin: 0 -20px 5px; font-size: 14px; line-height: 20px;}
  .block-todoes.show-form .todoes-form {visibility: visible; opacity: 1;}

  .block-calendar .calendar-view .table-bordered, .block-calendar .calendar-view .table-bordered td, .block-calendar .calendar-view .table-bordered th {border: none; text-align: center;}
  .block-calendar .calendar-view .table-bordered td, .block-calendar .calendar-view .table-bordered th {padding: 0;}
  .block-calendar .day > .heading > .month, .block-calendar .day, .block-calendar .day > .content {display: none!important;}
  .block-calendar .current-month {cursor: pointer;}
  .block-calendar .current-month .day {display: block!important;}
  .block-calendar .current-month .day > .heading > .number {display: block; line-height: 20px; width: 20px; margin: 5px auto; border-radius: 50%; position: relative}
  .block-calendar .has-todo .day > .heading > .number:before {content: ' '; display: block; background: #E7EAF2; width: 6px; height: 6px; position: absolute; top: -2px; right: -2px; border-radius: 50%}
  .block-calendar .current-month.current .day > .heading > .number, .block-calendar .current-month.current .day > .heading > .number:before, .block-calendar .current-month.selected .day > .heading > .number {background: #1CA5FF; color: #fff;}
  .block-calendar .current-month.selected .day > .heading > .number, .block-calendar .current-month.selected .day > .heading > .number:before {background: #1CA5FF}
  .calendar-view .table-bordered th {font-size: 14px;}
  .block-calendar .calendar-view {max-width: 360px; margin: 0 auto; border-top: 1px solid #E7EAF2; border-bottom: 1px solid #E7EAF2; padding: 10px 0;}
  .block-calendar .weekend-head, .block-calendar .weekend-day > .day > .heading > .number {color: #A6AAB8}
  .block-calendar .calendar-header {max-width: 360px; margin: 0 auto 10px; table-layout: auto;}
  .block-calendar .calendar-header .table-col,
  .block-calendar strong,
  .block-calendar small,
  .block-calendar .calendar-header .btn {vertical-align: middle;}
  .block-calendar .calendar-header .btn {color: #D3D3D3; margin: 0 2px;}
  .block-calendar .calendar-header .btn:hover {color: #1CA5FF;}
  .block-calendar strong {line-height: 20px; font-size: 18px; font-weight: bold; color: #1CA5FF; display: inline-block;}
  .block-calendar small {line-height: 20px; font-size: 12px; display: inline-block; margin-left: 6px; position: relative; top: 2px;}
  </style>
  <div class='block-calendar'>
    <div class='calendar-header table-row'>
      <div class='table-col text-center'>
        <button type='button' class='btn btn-link btn-mini btn-change-view' data-type='prevYear'><i class='icon icon-caret-left'></i></button>
        <strong class='calendar-current-year'></strong><small><?php echo $lang->year;?></small>
        <button type='button' class='btn btn-link btn-mini btn-change-view' data-type='nextYear'><i class='icon icon-caret-right'></i></button>
      </div>
      <div class='table-col text-center'>
        <button type='button' class='btn btn-link btn-mini btn-change-view' data-type='prevMonth'><i class='icon icon-caret-left'></i></button>
        <strong class='calendar-current-month'></strong><small><?php echo $lang->month;?></small>
        <button type='button' class='btn btn-link btn-mini btn-change-view' data-type='nextMonth'><i class='icon icon-caret-right'></i></button>
      </div>
      <div class='table-col text-center'>
        <button type='button' class='btn btn-link btn-mini btn-change-view' data-type='today'><?php echo $lang->today;?></button>
      </div>
    </div>
    <div class='calendar-wrapper'></div>
  </div>
  <div class='panel-heading'>
    <strong class='title'><?php echo $lang->todo->common;?></strong>
  </div>
  <div class='block-todoes'>
    <div class="todoes-input">
      <div class="todo-form-trigger"><input type="text" placeholder="<?php echo $lang->todo->lblClickCreate?>" autocomplete="off" class="form-control"></div>
      <form class="form-horizontal todoes-form layer" method='post' target='hiddenwin' action='<?php echo $this->createLink('todo', 'create', 'date=today&account=');?>'>
        <h3><?php echo $lang->todo->create;?></h3>
        <div class="form-group">
          <label for="todoName" class="col-sm-2"><?php echo $lang->todo->name?></label>
          <div class="col-sm-9 required"><input type="text" class="form-control" autocomplete="off" name="name"></div>
        </div>
        <div class="form-group">
          <label for="todoPri" class="col-sm-2"><?php echo $lang->todo->pri?></label>
          <div class="col-sm-4"><?php echo html::select('pri', $lang->todo->priList, '', "class='form-control chosen'");?></div>
        </div>
        <div class="form-group">
          <label for="todoDate" class="col-sm-2"><?php echo $lang->todo->date?></label>
          <div class="col-sm-9 ">
            <div class="input-control has-icon-right">
              <input type="text" class="form-control date" id="todoDate" name="date" placeholder="" autocomplete='off'>
              <label for='todoDate' class="input-control-icon-right"><i class="icon icon-calendar"></i></label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="todoBegin" class="col-sm-2"><?php echo $lang->todo->beginAndEnd?></label>
          <div class="col-sm-4">
            <select name="begin" id="todoBegin" class="form-control">
              <option value=""><?php echo $lang->todo->lblDisableDate;?></option>
            </select>
          </div>
          <label class="col-sm-1 text-center hide-empty-begin" for="todoEnd"> ~ </label>
          <div class="col-sm-4 hide-empty-begin">
            <select name="end" id="todoEnd" class="form-control"></select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2"></div>
          <div class="col-sm-10">
            <div class="checkbox-primary">
              <input type="checkbox" name="private" id="private" value="1">
              <label for="private"><?php echo $lang->todo->private?></label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2"></div>
          <div class="col-sm-10 form-actions no-margin">
            <?php echo html::hidden('type', 'custom');?>
            <?php echo html::commonButton($lang->save, "btn btn-primary btn-wide", "onclick='ajaxCreateTodo(this)'");?>
            <button type="button" class="btn btn-wide todo-form-trigger" data-trigger="false"><?php echo $lang->goback;?></button>
          </div>
        </div>
      </form>
    </div>
    <ul class="todoes">
      <?php foreach($todos as $id => $todo):?>
      <?php $class= strpos('done,closed', $todo->status) !== false ? "class='active'" : '';?>
      <li data-id='<?php echo $todo->id?>' <?php echo $class;?>>
        <span class="todo-check icon icon-check-circle"></span>
        <a href="<?php echo $this->createLink('sys.todo', 'view', "todoID={$todo->id}");?>" data-toggle='modal'>
          <?php if ($todo->date == '0000-00-00') :?>
          <span class="todo-time"><?php echo $lang->todo->periods['future'] ?></span>
          <?php else:?>
          <span class="todo-time" data-time='<?php echo date(DT_DATE1, strtotime($todo->date));?>'><?php echo date(DT_DATE4, strtotime($todo->date)) . ' ' . $todo->begin;?></span>
          <?php endif;?>
          <span class="todo-pri label-pri label-pri-<?php echo $todo->pri?>" title="<?php echo zget($lang->todo->priList, $todo->pri);?>"><?php echo zget($lang->todo->priList, $todo->pri);?></span>
          <span class="todo-title" title='<?php echo $todo->name;?>'><?php echo $todo->name;?></span>
        </a>
      </li>
      <?php endforeach;?>
    </ul>
  </div>
  <?php include '../../../sys/common/view/calendar.html.php';?>
  <?php js::set('priList', $lang->todo->priList);?>
  <script>
  $(function()
  {
      // Todoes block
      if(!$.fn.blockTodoes)
      {
          $.fn.blockTodoes = function()
          {
              return this.each(function()
              {
                  var $block = $(this);
                  if($block.data('blockTodoes')) return;
                  $block.data('blockTodoes', 1);
                  var $form = $block.find('form');
                  var $titleInput = $form.find('[name="name"]');

                  var toggleForm = function(toggle)
                  {
                      if(toggle === undefined)
                      {
                          toggle = !$block.hasClass('show-form');
                      }
                      $block.toggleClass('show-form', toggle);
                      $block.find('.date').datepicker();
                      if(toggle)
                      {
                          setTimeout(function() {$titleInput.focus();}, 50);
                      }
                  };
                  $block.on('click', '.todo-form-trigger', function()
                  {
                      toggleForm($(this).data('trigger'));
                  });

                  $form.timeSpanControl(
                  {
                      onChange: function($control)
                      {
                          $control.trigger('chosen:updated');
                      }
                  }).find('[name="begin"]').trigger('chosen:updated');
              });
          };
      }

      $('.block-todoes').blockTodoes().on('click', '.todo-check', function()
      {
          var $liTag     = $(this).closest('li');
          var isFinished = $liTag.hasClass('active');
          var todoID     = $liTag.data('id');
          var methodName = isFinished ? 'activate' : 'finish';
          $.get(createLink('todo', methodName, "todoID=" + todoID), function()
          {
              if(!isFinished) $liTag.addClass('active');
              if(isFinished) $liTag.removeClass('active');
          });
      });

      // Init calendar in block
      if (!$.fn.blockCalendar)
      {
          $.fn.blockCalendar = function()
          {
              return this.each(function()
              {
                  var $block = $(this);
                  if($block.data('blockCalendar')) return;
                  $block.data('blockCalendar', 1);

                  var $calendar = $block.find('.calendar-wrapper');
                  if(!$calendar.length) return;

                  var $todoes = $block.closest('.panel-block').find('.todoes');
                  var getTodoDays = function(asMap)
                  {
                      var result = asMap ? {} : [];
                      $todoes.find('li>a>.todo-time[data-time]').each(function()
                      {
                          var date = $(this).data('time');
                          if(asMap) result[Date.create(date).toDateString()] = true;
                          else result.push(date);
                      });
                      return result;
                  };

                  var $year           = $block.find('.calendar-current-year');
                  var $month          = $block.find('.calendar-current-month');
                  var daysHasTodoMap  = getTodoDays(true);
                  var selectedDate    = null;
                  var calendarOptions =
                  {
                      withHeader: false,
                      langs:
                      {
                          zh_cn: {weekNames: ['一', '二', '三', '四', '五', '六', '日']},
                          zh_tw: {weekNames: ['一', '二', '三', '四', '五', '六', '日']},
                          en:    {weekNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
                      },
                      dayFormater: function($day, printDate)
                      {
                          var printDateStr = printDate.toDateString();
                          $day.toggleClass('has-todo', !!daysHasTodoMap[printDateStr])
                              .toggleClass('selected', selectedDate === printDateStr);
                      },
                      beforeDisplay: function(e)
                      {
                          $year.text(e.date.getFullYear());
                          $month.text(e.date.getMonth() + 1);
                      }
                  };
                  $calendar.calendar(calendarOptions);
                  var calendar = $calendar.data('zui.calendar');

                  // Load todos from server
                  var loadTodos = function(date, callback)
                  {
                      $.get(createLink('sys.todo', 'calendar', 'date=' + date.format('yyyyMMdd'), 'json'), function(response)
                      {
                          if(response.status == 'success')
                          {
                              var data = JSON.parse(response.data);
                              var events = data && data.data && data.data.events;
                              $todoes.empty();
                              if(events && events.length)
                              {
                                  $.each(events, function(idx, todoEvent)
                                  {
                                      var finish = todoEvent.data.status == 'done' || todoEvent.data.status == 'closed';
                                      var date   = Date.create(todoEvent.start);
                                      var liHtml =
                                      [
                                          '<li data-id="' + todoEvent.id + '"' + (finish ? ' class="active"' : '') + '>',
                                          '<span class="todo-check icon icon-check-circle' + (finish ? '' : '-empty') + '"></span>',
                                          '<a href="' + createLink('sys.todo', 'view', 'todoID=' + todoEvent.id) + '" data-toggle="modal">',
                                          '<span class="todo-time" data-time="' + date.format('yyyy-MM-dd') + '">' + date.format('M<?php echo $lang->month;?>d<?php echo $lang->day;?> hh:mm') + '</span>',
                                          '<span class="todo-pri label-pri label-pri-' + todoEvent.data.pri + '" title="' + v.priList[todoEvent.data.pri] + '">' + v.priList[todoEvent.data.pri] + '</span>',
                                          '<span class="todo-title" title="' + todoEvent.title + '">' + todoEvent.title + '</span>',
                                          '</a>',
                                          '</li>'
                                      ];
                                      $todoes.append(liHtml.join(''));
                                  });
                                  callback();
                              }
                          }
                      }, 'json');
                  };

                  // Refresh calendar
                  var refreshCalender = function(viewDate, setViewDateAsSelected, daysWithTodo)
                  {
                      viewDate = Date.create(viewDate);
                      if(daysWithTodo)
                      {
                          if($.isArray(daysWithTodo))
                          {
                              daysHasTodoMap = {};
                              $.each(daysWithTodo, function(idx, date)
                              {
                                  daysHasTodoMap[Date.create(date).toDateString()] = true;
                              });
                          }
                          else daysHasTodoMap = daysWithTodo;
                      }
                      else if(daysWithTodo === undefined)
                      {
                          loadTodos(viewDate, function(todyDays)
                          {
                              $todoes
                              if(calendar.date.toDateString() === viewDate.toDateString())
                              {
                                  refreshCalender(viewDate, false, todyDays || getTodoDays());
                              }
                          });
                      }
                      if(setViewDateAsSelected) selectedDate = viewDate.toDateString();
                      calendar.display('month', viewDate);

                  };

                  $block.on('click', '.btn-change-view', function()
                  {
                      var type = $(this).data('type');
                      var date = calendar.date.clone();
                      if(type === 'prevYear')
                      {
                          date.setFullYear(date.getFullYear() - 1);
                      }
                      else if(type === 'nextYear')
                      {
                          date.setFullYear(date.getFullYear() + 1);
                      }
                      else if(type === 'prevMonth')
                      {
                          date.addMonths(-1);
                      }
                      else if(type === 'nextMonth')
                      {
                          date.addMonths(1);
                      }
                      else if(type === 'today')
                      {
                          date = new Date();
                      }
                      refreshCalender(date);
                  });
              });
          };
      }

      $('.block-calendar').blockCalendar();
  });

  function ajaxCreateTodo(obj)
  {
      var $todoes = $(obj).closest('.block-todoes');
      var $form   = $(obj).closest('form');
      var $name   = $form.find("input[name='name']").val();
      if($name == '')
      {
          $("input[name='name']").addClass('has-error');
          $('#nameLabel').remove();
          $("input[name='name']").after('<div id="nameLabel" class="text-danger help-text"><?php echo sprintf($lang->error->notempty, $lang->todo->name) ?></div>');
          setTimeout('clearError()', 2000)
          return false;
      }
      $.ajax(
      {
          type: "POST",
          dataType: "json",
          url: $form.attr('action'),
          data: $form.serialize(),
          success: function(todo)
          {
              $todoes.removeClass('show-form');
              $todoes.closest('.show-form').removeClass('show-form');
              $todoes.find('.show-form').removeClass('show-form');
              refreshBlock($todoes.parents('div.panel[id^=block]'));
          }
      });
  }

  function clearError()
  {
      $("input[name='name']").removeClass('has-error');
      $('#nameLabel').remove();
  }
  </script>
</div>