{% 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;
    }
</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">
             <div class="layui-inline">
                <input type="radio"  name="day-type" value="1"  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">
              <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">
              <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-form-item" style="padding-top: 25px;">
        {% layui_inline f.leave_payment_type %}
      </div>
      <div class="layui-form-item">
        {% layui_inline f.category %}
      </div>
    <div class="layui-form-item">
      <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">
      {% 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',], function () {
      form = layui.form;
      function getEvents(start) {
        var daytype = $("input[name=day-type]:checked").val() ? $("input[name=day-type]:checked").val() : 0;
        var events = [];
        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;
                     $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                    var event = {item: 1, title: 'Full Day'};
                    events.push(event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = 1;
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = {item: 1, title: 'Full Day'};
                  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;
                     $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                    var event = {item: 2, title: 'First Half'};
                    events.push(event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = 2;
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = {item: 2, title: 'First Half'};
                  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;
                     $('#leave_applied_data').val(JSON.stringify(existing_leave_data));
                    var event = {item: 3, title: 'Second Half'};
                    events.push(event);
                  }
              }else{
                  var new_leave_applied_data = {};
                  var ldate = start.toISOString().substring(0, 10);
                  new_leave_applied_data[ldate] = 3;
                  $('#leave_applied_data').val(JSON.stringify(new_leave_applied_data));
                  var event = {item: 3, title: 'Second Half'};
                  events.push(event);
              }
          } else {
               layer.alert(gettext('Please_select_leave_day_type'),
                                            {title: gettext('system_exception')
                                            , icon: 5
                                            , btn: gettext('btn_confirm')}
                                        );
          }
          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;
      }

      $('#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');
          }

        },
        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] == 1) {
                    count += 1;
                } else {
                    count += 0.5;
                }
            }
          }
          $('#id_daily_quantity').val(count);
        }
      });

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


