{%extends 'base.html' %}
{%load static%}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}


{%block styles%}

{% if LANGUAGE_CODE == 'ar' %}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'css-rtl/custom-rtl.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style-rtl.css'%}">
custom-rtl.
<!-- END: Custom CSS-->
{%else%}
<!-- BEGIN: Custom CSS-->
<link rel="stylesheet" type="text/css" href="{%static 'assets/css/style.css'%}">
<!-- END: Custom CSS-->

{%endif%}

<link rel="stylesheet" type="text/css" href="{% static 'css/filepond20201101.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-image-preview.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-image-overlay.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/filepond-plugin-get-file.css' %}">

<style>

.table-responsive {
    display: table;
}

</style>
{%endblock%}


{%block content%}
<div class="content-wrapper container-xxl p-0">
    
  <div class="content-header row">
    <div class="content-header-left col-md-12 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-left mb-0">{% trans "الحضور" %}</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">{% trans "الرئيسية" %}</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#">{% trans "الأيدي العاملة" %}</a>
                        </li>
                        <li class="breadcrumb-item"><a href="/hr/list-of-attendance">{% trans "الحضور" %}</a>
                        </li>

                        {% if typeOfReq == 'new' %}
                          <li class="breadcrumb-item active">{% trans "إضافة حضور" %}
                          </li>
                        {% else %}
                          <li class="breadcrumb-item active">{% trans "تعديل بيانات حضور" %} : {{data_to_insert.employee.name}}
                          </li>
                        {% endif %}
                    </ol>
                </div>
            </div>
        </div>
    </div>
  
</div>
    <div class="content-body">



        <div class="">
            <!-- <input type="hidden" id="dataOfWaterType" value="{{water_typeDetails.id}}"> -->
            <div class="row ">
              <div class="col-md-12 col-xm-12 single-post">
                
               
                <div class="box-body">
                    <div class="tab-content">
                      <div class="tab-pane form-horizontal active" id="Listed">
                        <div class="form-group col-md-12 col-xm-12 ">
                        </div>
   
                          <!-- Start of the Form -->
                          <div class="card">
                            <div class="card-header card-header-primary greenbar" style="text-align: justify;">
                                <h4 class="card-title">{% trans "عرض الحضور" %}</h4>
                            </div>
                            <div class="card-body" style="text-align: justify;">
                                <form method="POST" id="form" class="needs-validation form-horizontal" novalidate>
                                    {% csrf_token %}
                                    
                                    <div class="row">
                                        <!-- Column 1 -->
                                        <div class="col-md-4">
                                            <div class="form-group bmd-form-group">
                                              <label for="employee">* {% trans "الموظف" %}</label>
                                              <select class="form-control" value ="{{data_to_insert.employee.id}}" name="employee" id="employee">
                                                  <option value="">{% trans "أختر" %}</option>
                                                  {% for item in all_employee %}
                                                  <option value="{{item.id}}">{{item.name}}</option>
                                                  {% endfor %}
                                              </select>
                                            </div>

                                            <div class="form-group bmd-form-group">
                                              <label for="vacation">{% trans "الإجازة" %}</label>
                                              <select class="form-control" name="vacation" id="vacation">
                                                  <option value="true" >{% trans "نعم" %}</option>
                                                  <option value="false" >{% trans "لا" %}</option>
                                              </select>
                                          </div>
                                            <div class="form-group bmd-form-group">
                                              <label for="project">* {% trans "المشروع" %}</label>
                                              <select class="form-control" value ="{{data_to_insert.project.id}}" name="project" id="project">
                                                  <option value="">{% trans "أختر" %}</option>
                                                  {% for item in all_project %}
                                                  <option value="{{item.id}}">{{item.name}}</option>
                                                  {% endfor %}
                                              </select>
                                            </div>
                                            <div class="form-group bmd-form-group">
                                                <label for="attend">{% trans "الحضور" %}</label>
                                                <input type="time" class="form-control" name="attend" value="{{data_to_insert.attend|date:'H:i'}}" id="attend">
                                            </div>
                                            <div class="form-group bmd-form-group">
                                                <label for="leave">{% trans "المغادرة" %}</label>
                                                <input type="time" class="form-control" name="leave" value="{{data_to_insert.leave|date:'H:i'}}" id="leave">
                                            </div>
                                            <div class="form-group bmd-form-group">
                                                <label for="date">{% trans "التاريخ" %}</label>
                                                <input type="date" class="form-control" name="date" value="{{data_to_insert.date|date:'Y-m-d'}}" id="date">
                                            </div>

                                        </div>

                                        <!-- Column 2 -->
                                        <div class="col-md-4">
                                            <div class="form-group bmd-form-group">
                                              <label for="main_activity">* {% trans "الحدث الأساسي" %}</label>
                                              <select class="form-control" value ="{{data_to_insert.main_activity.id}}" name="main_activity" id="main_activity">
                                                  <option value="">{% trans "أختر" %}</option>
                                                  {% for item in all_main_activity %}
                                                  <option value="{{item.id}}">{{item.name}}</option>
                                                  {% endfor %}
                                              </select>
                                            </div>

                                            <div class="form-group bmd-form-group">
                                              <label for="sub_activity">* {% trans "الحدث الثانوي" %}</label>
                                              <select class="form-control" value ="{{data_to_insert.sub_activity.id}}" name="sub_activity" id="sub_activity">
                                                  <option value="">{% trans "أختر" %}</option>
                                                  {% for item in all_sub_activity %}
                                                  <option value="{{item.id}}">{{item.name}}</option>
                                                  {% endfor %}
                                              </select>
                                            </div>

                                            <div class="form-group bmd-form-group">
                                                <label for="task">{% trans "المهمة" %}</label>
                                                <input type="text" class="form-control" name="task" value="{{data_to_insert.task}}" id="task">
                                            </div>
                                            <div class="form-group bmd-form-group">
                                                <label for="rfq">{% trans "RFQ" %}</label>
                                                <input type="text" class="form-control" name="rfq" value="{{data_to_insert.rfq}}" id="rfq">
                                            </div>


                                            <div class="form-group bmd-form-group">
                                              <label for="work_location">* {% trans "مكان العمل" %}</label>
                                              <select class="form-control" value ="{{data_to_insert.work_location.id}}" name="work_location" id="work_location">
                                                  <option value="">{% trans "أختر" %}</option>
                                                  {% for item in all_work_location %}
                                                  <option value="{{item.id}}">{{item.name}}</option>
                                                  {% endfor %}
                                              </select>
                                            </div>

                                            <div class="form-group bmd-form-group">
                                                <label for="address">{% trans "العنوان" %}</label>
                                                <input type="text" class="form-control" name="address" value="{{data_to_insert.address}}" id="address">
                                            </div>
                                        </div>

                                        <!-- Column 3 -->
                                        <div class="col-md-4">
                                            <div class="form-group bmd-form-group">
                                                <label for="progres">{% trans "التقدم" %}</label>
                                                <input type="text" class="form-control decimal-string" pattern="^[\S\s]{0,14}\S$" name="progres" value="{{data_to_insert.progres}}" id="progres">
                                            </div>
                                            <div class="form-group bmd-form-group">
                                              <label for="number_of_hours">{% trans "عدد الساعات" %}</label>
                                              <input type="text" class="form-control decimal-string" pattern="^[\S\s]{0,14}\S$" name="number_of_hours" value="{{data_to_insert.number_of_hours}}" id="number_of_hours">
                                          </div>
                                        </div>
                                    </div>

                                    <!-- Notes Section -->
                                    <section class="snow-editor">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card">
                                                    <label for="notes"> {% trans "الملاحظات" %}</label>
                                                    <div class="">
                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <div id="full-wrapper">
                                                                    <div id="full-container">
                                                                        <div class="editor"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                    <input type="hidden" id="notes" name="notes" />
                                    
                                    <!-- Submit Button -->
                                    <br />
                                    <button type="submit" class="btn btn-primary pull-right">{% trans "حفظ" %}</button>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                          </div>
                          <!-- End of the Form -->

                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
    </div>
</div>

{%endblock%}

{% block Extrajavascripts %}

<script src="{% static 'js/scripts/forms/form-quill-editor.js' %}"></script>

<script src="{% static 'js/filepond-plugin-get-file.js' %}"></script>
<script src="{% static 'js/filepond-plugin-image-preview.js' %}"></script> 
<script src="{% static 'js/filepond.js' %}"></script>

<script>
  
  $('#hr-menu').addClass('open active')
  $('#list-of-attendance').addClass('active')
</script>
<script>
$('#main_activity').val($('#main_activity').attr('value'))
$('#sub_activity').val($('#sub_activity').attr('value'))
$('#work_location').val($('#work_location').attr('value'))
$('#employee').val($('#employee').attr('value'))
</script>

<script>

    (function() {
        'use strict';
        window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
        $("#notes").val(myEditor.children[0].innerHTML)
        if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
        }
        form.classList.add('was-validated');
        }, false);
        });
        }, false);
        })();

            
    </script>
   
    <script>
      $(document).ready(function() {

      myEditor = document.querySelector('.editor')
          var notes = '{{data_to_insert.notes|safe}}'
          myEditor.children[0].innerHTML = notes

          });
    </script>
  
    <!-- <script>
      $(document).ready(function() {
         
            var form = $('form')
            $('form').submit(function (e) {
              _this = $(this)
              e.preventDefault();
              var name = $('#name').val().trim();
              
              var id =  $('#id').val()
             
              $.ajax({ 
                type: 'POST',
                url: '/checkUniquenessOfNameForModel',
                dataType: 'json',
                data: { 
                    'id':id,
                    'name':name,
                    'model':"Attendance",
                    'activity':"hr"
                },
                headers:{
                    "X-CSRFToken": csrftoken
                        },
                async: true,
                cache: true,
                success: function(result) {
            hideLoader()
                  // console.log(result[nameExists],"*********************************888888888888888")
                  if(result['nameExists'] == "true"){
                    $('#nameError').empty()
                   
                    $('#nameError').append("{% trans 'هذا الأسم موجود بالفعل'%}")
                  } 
                
                  else{
                    if ( $('form')[0].checkValidity() ) {
                      $('#nameError').empty()
                      _this.unbind('submit').submit();
                      showLoader()
        
                    }
        
                  }
        
        
                },
                  
            });
        
        
            });
        
        });
         
    </script> -->

{% endblock %}