{% load i18n static %}
{% load common %}
{#{% autoescape off %}#}
{% block extend_js %}
  <link rel="stylesheet" type="text/css" href="{% static "css/fullcalendar.min.css" %}"/>
{% endblock %}
<style>
    #id-frame-selected-container{
        display:none;
    }
    .fc-widget-content.fc-today {
            background: #ffffff !important;
            box-shadow: rgb(150, 157, 159) 1px 1px 15px inset;
        }
</style>


<div style="padding: 10px;height: 470px;width: 1270px;overflow-x: hidden;">
   <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}">
    {% csrf_token %}
    {% with form.form as f %}
    <div class="layui-row">
      <div class="layui-col-md2" style="width:38%">
        <div class="layui-card">
      <div style=" ">{{ f.emp }}</div>
        </div>
      </div>
      <div class="layui-col-md5" style="width:35%">
        <div class="layui-card">
          <div class="layui-card-body" style="padding: 0 5px;">
            <div id="fullcalendar" style="height: 450px"></div>
          </div>
        </div>
      </div>
      <div class="layui-col-md2" style="width:27%">
          <div class="layui-form-item" style="margin-bottom: 0px;">
             <div class="layui-inline">
                <input type="radio"  name="day-type" value="1"  checked="checked" title="{% trans 'att_aleave_full_day' %}">
             </div>
             <div class="layui-inline">
                 <p class="fulldata" style="font-size: 15px;"></p>
             </div>
          </div>
          <div class="layui-form-item" style="margin-bottom: 0px;">
              <div class="layui-inline">
                <input type="radio"   name="day-type" value="2"  title="{% trans 'att_aleave_first_half' %}"><span class="layui-inline "></span>
             </div>
              <div class="layui-inline">
                 <p class="firstdata" style="font-size: 15px;"></p>
             </div>
          </div>
          <div class="layui-form-item" style="margin-bottom: 0px;">
              <div class="layui-inline">
                <input type="radio"   name="day-type" value="3"  title="{% trans 'att_aleave_second_half' %}"><span class="layui-inline "></span>
             </div>
              <div class="layui-inline">
                 <p class="seconddata" style="font-size: 15px;"></p>
             </div>
          </div>
          <div class="layui-card-body" >
              <table id="leave_timetable" class="layui-hide" lay-filter="leaveTimetable"></table>
          </div>
      <div class="layui-form-item" style="padding-top: 5px;margin-bottom: 0px;">
        {% layui_inline f.leave_payment_type %}
      </div>
      <div class="layui-form-item" style="margin-bottom: 0px;">
        {% layui_inline f.category %}
      </div>
    <div class="layui-form-item" style="margin-bottom: 0px;">
      <label class="layui-form-label">{% trans 'staff_leave_dailyquantity' %}<span class="required">*</span></label>
      <div class="layui_inline">
        <input id="id_daily_quantity" type="text" name="days" autocomplete="off" placeholder="" class="layui-input" readonly>
      </div>
    </div>
    <div class="layui-form-item" style="margin-bottom: 0px;">
      {% layui_inline f.reason %}
    </div>
      </div>
      <input id="leave_applied_data" type="hidden" name="leave_applied_data" value="">
    </div>
    {% endwith %}
  </form>
</div>
<script>
  $(function () {
    layui.use(['form', 'laydate', 'table', 'tablePlug'], function () {
      form = layui.form;
      var table = layui.table, tablePlug = layui.tablePlug, form = layui.form, laydate = layui.laydate;
      function getEvents(start) {
        var daytype = $("input[name=day-type]:checked").val() ? $("input[name=day-type]:checked").val() : 0;
        var events = [];
        var checkStatus = table.checkStatus('leave_timetable');
        if (checkStatus.data.length <= 0){
          layer.msg(gettext("Please select Time Table"), {icon: 5});
          return;
        }
        var table_id = checkStatus.data[0].id
        var leave_applied_data = $('#leave_applied_data').val();
        var count = eval($('#id_daily_quantity').val());
          if (eval(daytype) == 1) {
              if(leave_applied_data){
                  var existing_leave_data = JSON.parse(leave_applied_data);
                  var key = start.toISOString().substring(0, 10);
                  if(key in existing_leave_data){
                      var events = [];
                  }else{
                      $('#id_daily_quantity').val(count+1);
                      existing_leave_data[key] = [1, table_id];
                      $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                      var event = checkStatus.data.map(function (item, index) {
                          return {
                              item: 1,
                              title: 'Full Day',
                              time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                          };
                      });
                      events.push(...event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = [1, table_id];
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = checkStatus.data.map(function (item, index) {
                      return {
                          item: 1,
                          title: 'Full Day',
                          time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                      };
                  });
                  events.push(...event);
              }

          } else if (eval(daytype) == 2) {
               if(leave_applied_data){
                  var existing_leave_data = JSON.parse(leave_applied_data);
                  var key = start.toISOString().substring(0, 10);
                  if(key in existing_leave_data){
                      var events = [];
                  }else{
                      $('#id_daily_quantity').val(count+0.5);
                      existing_leave_data[key] = [2, table_id];
                      $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                      var event = checkStatus.data.map(function (item, index) {
                          return {
                              item: 1,
                              title: 'First Half',
                              time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                          };
                      });
                      events.push(...event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = [2, table_id];
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = checkStatus.data.map(function (item, index) {
                      return {
                          item: 1,
                          title: 'First Half',
                          time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                      };
                  });
                  events.push(...event);
              }
          } else if (eval(daytype) == 3) {
               if(leave_applied_data){
                  var existing_leave_data = JSON.parse(leave_applied_data);
                  var key = start.toISOString().substring(0, 10);
                  if(key in existing_leave_data){
                      var events = [];
                  }else{
                      $('#id_daily_quantity').val(count+0.5);
                      existing_leave_data[key] = [3, table_id];
                      $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                      var event = checkStatus.data.map(function (item, index) {
                          return {
                              item: 1,
                              title: 'Second Half',
                              time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                          };
                      });
                      events.push(...event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = [3, table_id];
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = checkStatus.data.map(function (item, index) {
                      return {
                          item: 1,
                          title: 'Second Half',
                          time_table: `${item.alias}(${item.in_time}-${item.out_time})`
                      };
                  });
                  events.push(...event);
              }
          }
          if(leave_applied_data){

          }else{
              if(eval(daytype) == 1){
                $('#id_daily_quantity').val(1);
              }else if(eval(daytype) == 2){
                $('#id_daily_quantity').val(0.5);
              }else if(eval(daytype) == 3){
                $('#id_daily_quantity').val(0.5);
              }
          }
            return events;
      }
       var timetableOpts = {
        id: 'leave_timetable'
        , elem: "#leave_timetable"
        , height: 155
        , text: {none: gettext('none_data')}
        , request: {
          pageName: 'page',
          limitName: 'page_size'
        }
        , page: {
          layout: ['limit', 'count']
          , limit: 100
          , limits: [100]
        }
        , cols: [[
          {field: 'id', type: 'radio'},
          {field: 'alias', title: "{% trans 'timeInterval_field_alias' %}", width: 120},
          {field: 'in_time', title: "{% trans 'timeInterval_field_checkIn' %}", width: 80},
          {field: 'out_time', title: "{% trans 'timeInterval_field_checkOut' %}", width: 90, templet: function (data) {
            if(data.cross_day > 0){
                return data.out_time + '<sup>+'+data.cross_day + '</sup>';
            }else{
                return data.out_time;
            }
          }},
        ]]
        , url: '/att/api/timeintervals/'
        };
       var timeTable = table.render(timetableOpts);
      $('#fullcalendar').fullCalendar({
        height: 370
        , header: {
          center: '',
          right: 'today prev,next'
        }
        , isRTL:false
        , monthNames : [
          gettext('fullcal_January'), gettext('fullcal_February'), gettext('fullcal_March'), gettext('fullcal_April')
          , gettext('fullcal_May'), gettext('fullcal_June'), gettext('fullcal_July'), gettext('fullcal_August')
          , gettext('fullcal_September'), gettext('fullcal_October'), gettext('fullcal_November'), gettext('fullcal_December')
        ]
        , monthNamesShort : [
          gettext('fullcal_Jan'), gettext('fullcal_Feb'), gettext('fullcal_Mar'), gettext('fullcal_Apr')
          , gettext('fullcal_May'), gettext('fullcal_Jun'), gettext('fullcal_Jul'), gettext('fullcal_Aug')
          , gettext('fullcal_Sep'), gettext('fullcal_Oct'), gettext('fullcal_Nov'), gettext('fullcal_Dec')
        ]
        , dayNames : [
          gettext('fullcal_Sunday'), gettext('fullcal_Monday'), gettext('fullcal_Tuesday'), gettext('fullcal_Wednesday')
          , gettext('fullcal_Thursday'), gettext('fullcal_Friday'), gettext('fullcal_Saturday')
        ]
        , dayNamesShort : [
          gettext('fullcal_Sun'), gettext('fullcal_Mon'), gettext('fullcal_Tue'), gettext('fullcal_Wed')
          , gettext('fullcal_Thur'), gettext('fullcal_Fri'), gettext('fullcal_Sat')
        ]
        , editable: false
        , selectable: true
        , select: function (start, end) {
          var daytype = $("input[name=day-type]:checked").val() ? $("input[name=day-type]:checked").val() : 0;
          var events = getEvents(start);
          if (events.length > 0) {
            events.forEach(function (item, index) {
              var event = $.extend({start: start}, item);
              $('#fullcalendar').fullCalendar('renderEvent', event, true); // stick? = true
            });
          } else {
            $('#fullcalendar').fullCalendar('unselect');
          }

        }
        , eventMouseover: function (event) {
            $(this).popover({
                title: event.time_table,
                trigger: 'hover',
                placement: "right",
                atMouse: true,
                container: '#fullcalendar'
            }).popover('show');
        }
        , eventMouseout: function (event, jsEvent, view) {
            $(this).popover({}).popover('hide')
        }
        ,eventClick: function (event) {
          $('#fullcalendar').fullCalendar('removeEvents', event._id);
          var leave_applied_data = $('#leave_applied_data').val();
          var ldate = event.start;
          var key = ldate.toISOString().substring(0, 10);
          var existing_leave_data = JSON.parse(leave_applied_data);
          delete existing_leave_data[key];
          $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
          var count = 0;
          for(var x in existing_leave_data){
            if(x) {
                if (existing_leave_data[x][0] == 1) {
                    count += 1;
                } else {
                    count += 0.5;
                }
            }
          }
          $('#id_daily_quantity').val(count);
        }
      });

    });
  });
</script>
{#{% endautoescape %}#}


