{%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-deduction-type">{% trans "أنواع الخصومات" %}</a>
                        </li>

                        {% if typeOfReq == 'new' %}
                          <li class="breadcrumb-item active">{% trans "إضافة نوع خصم" %}
                          </li>
                        {% else %}
                          <li class="breadcrumb-item active">{% trans "تعديل بيانات نوع خصم" %} : {{data_to_insert.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 ">
                          <!-- <p id="descriptionForState" class="col-md-12 no-padding mt-3" style="text-align: right;">
                            {{water_typeDetails.notes}}
                          </p> -->
                        </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">
                                      <div class="col-md-12">
                                          <div class="col-md-3">
                                            <div class="form-group bmd-form-group">
                                              <input type="hidden" id="id" name="id" value="{{data_to_insert.id}}">
                                              <label for="name">{% trans "الاسم" %}</label>
                                              <input type="text" required="" pattern="^[\S\s][a-zA-Z0-9\u0600-\u06FF\s\)\(\\\/\\_\-\\³\%]{1,49}\s*$"  autocomplete="off" class="form-control required" name="name" value="{{data_to_insert.name}}" id="name">
                                              <div id="invalidId" class="invalid-feedback">
                                                {% trans "من فضلك أدخل البيانات" %} {% trans "مع مراعاة إدخال حروف وأرقام فقط" %}
                                              </div>  
                                           </div>
                                           
                                          <div class="form-group bmd-form-group">
                                              <label for="code">{% trans "الكود" %}</label>
                                              <input type="text" required="" pattern="^[\S\s][a-zA-Z0-9\u0600-\u06FF\s\)\(\\\/\\_\-\\³\%]{1,69}\s*$" autocomplete="off" class="form-control required" name="code" value="{{data_to_insert.code}}" id="code">
                                              <div id="invalidCode" class="invalid-feedback">
                                                  {% trans "من فضلك أدخل الكود" %} {% trans "مع مراعاة إدخال حروف وأرقام فقط" %}
                                              </div>
                                          </div>
                                          </div>
                                          <div class="col-md-12"></div>
                                          <div id="nameError" class="text-danger mb-1 h4"></div>
                                      </div>
                                  </div>
                                  <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" />
                                  <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-deduction-type').addClass('active')
</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':"DeductionType",
                    '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 %}