{%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%}




  
{%endblock%}

{%block content%}

<div class="content-wrapper container-xxl p-0 ">
  
    <div class="content-body">
      <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 active">{% trans "الخصومات" %}
                              </li>
                          </ol>
                      </div>
                  </div>
              </div>
          </div>
        
      </div>

        <div class="content-body">
      
            <!-- Basic table -->
            <section id="basic-datatable">
                <div class="row">
                    <div class="col-12">
                        <div class="card  p-3 mb-3 border  rounded">
                          
                          <table id="listTable" class="table table-responsive">
                            <thead>
                              <tr>
                                <th class=""><a href="#">{% trans "#" %}</a></th>
                                <th class=""><a href="#">{% trans "أسم الموظف" %}</a></th>




                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "عرض تفاصيل الخصومات" %}
                                <th class="exclude-column"><a href="#">{% trans "عرض التفاصيل" %} </a></th>
                                {% endif %}{% endfor %}

                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تحديث الخصومات" %}
                                <th class="exclude-column"><a href="#">{% trans "تحديث" %} </a></th>
                                {% endif %}{% endfor %}

                                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "حذف الخصومات" %}
                                <th class="exclude-column"><a href="#">{% trans "حذف" %} </a></th>
                                {% endif %}{% endfor %}
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>


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



    </div>
</div>
{%endblock%}



{% block Extrajavascripts %}

<script>
  $('#hr-menu').addClass('open active')
  $('#list-of-deduction').addClass('active')

</script>


<script>
            
            $('#listTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    "url": "/hr/get-list-of-deduction",
                    "data": function ( d ) {
                        
                    }
                },
                aoColumns: [
                {
                className: "","mData": null, "sWidth": "5%", "mRender": function (item, type, row, meta) {
                    // Increment the counter for each row
                    var counter = meta.row + meta.settings._iDisplayStart + 1;
                          hideLoader();
                    return '<a>' + counter + '</a>';
                }

                },
                {
                  className: "","mData": null, "sWidth": "25%","mRender": function (item) { 
                      return '<a>'+item.name+'</a>';
                    
                }
                }

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "عرض تفاصيل الخصومات" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                    
                      return '<a class="ml-4 bluefont" href="/hr/deduction-details?id='+item.hash_id+'"><i class="fa fa-info"></i></a>';
                 
                 } }                 
                {% endif %}{% endfor %}

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تحديث الخصومات" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                    return '<a class="ml-4 bluefont" href="/hr/add-new-deduction?type=edit&id='+item.hash_id+'"><i class="fa fa-edit"></i></a>';

                    }
                }                 
                {% endif %}{% endfor %}

                {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "حذف الخصومات" %}
                ,
                {
                  className: "", "mData": null, "sWidth": "12.5%","mRender": function (item) { 
                    
                    
                    return '<a class="ml-4 bluefont"href="javascript:void(0)" nameOfItem="'+item.name+'"  idOfItem="'+item.id+'" onclick="askToDeleteItemWithId(this);"><i class="fa fa-trash"></i></a>';
                

                    }
                }           
                {% endif %}{% endfor %}
              
                
            ]
            ,
      dom:
        '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-right"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
      displayLength: 7,
      lengthMenu: [7, 10, 25, 50, 75, 100, 6000],
      
      buttons: [
      {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "تصدير بيانات الخصومات" %}
            
        {
          extend: 'collection',
          className: 'btn btn-outline-secondary dropdown-toggle mr-2',
          text: feather.icons['share'].toSvg({ class: 'font-small-4 mr-50' }) + ' تصدير البيانات',
          buttons: [
          {
            extend: 'print',
            text: feather.icons['printer'].toSvg({ class: 'font-small-4 mr-50' }) + 'Print',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (win) {
              $(win.document.body).find('h1')
              .css('text-align', 'center')  // Align the header text in the center
              .text('فيما يلي بيان بالخصومات');
            },


          },

          {
            extend: 'excel',
            text: feather.icons['file'].toSvg({ class: 'font-small-4 mr-50' }) + 'Excel',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (xlsx) {
              var sheet = xlsx.xl.worksheets['sheet1.xml'];
              var headerRow = $('row', sheet).eq(0);
              $('c', headerRow).each(function () {
                var headerText = 'فيما يلي بيان بالخصومات'; 
                $('is t', this).text(headerText);
              });
            }
          },
        
          {
            extend: 'copy',
            text: feather.icons['copy'].toSvg({ class: 'font-small-4 mr-50' }) + 'Copy',
            className: 'dropdown-item',
            exportOptions: {
              columns: ':not(.exclude-column)'
            },
            customize: function (data) {
              var headerText = 'فيما يلي بيان بالخصومات'; 
              return headerText  + ' ' + data; // Prepend the header text to the copied data
            }
          },
          ],
          init: function (api, node, config) {
            $(node).removeClass('btn-secondary');
            $(node).parent().removeClass('btn-group');
            setTimeout(function () {
              $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
            }, 50);
          }
        },
       
        {% endif %}{% endfor %}

        {% for permission in userProfile.role.permissionGeneral.all %}{% if permission.name == "إضافة الخصومات" %}
        {
          text: feather.icons['plus'].toSvg({ class: 'mr-50 font-small-4' }) + '{% trans "إضافة خصم" %}',
          className: 'create-new btn btn-primary',
          attr: {
            'data-toggle': 'modal',
            'data-target': '#modals-slide-in'
          },
          action: function (e, dt, node, config)
            {
                //This will send the page to the deduction specified
                window.location.href = '/hr/add-new-deduction?type=new';
            }
        }
        {% endif %}{% endfor %}

      ],
      language: {
        paginate: {
          // remove previous & next text from pagination
          previous: '&nbsp;',
          next: '&nbsp;'
        }
      }
                
            } );
    
    
    
   
            function askToDeleteItemWithId(element){
  Swal.fire({
              title: '<strong>{% trans "هل تريد حذف هذا العنصر" %} </strong>',
              icon: 'warning',
              html:
                '<div class="tD-responsive table-responsive">'+
                '<table class="tD table">'+
                    '<thead><tr><th colspan="2">{% trans "تفاصيل العنصر" %}</th></tr></thead>'+
                    '<tbody>'+
                        '<tr>'+
                            '<td width="20%"><strong>{% trans "أسم العنصر" %} </strong></td>'+
                            '<td>'+$(element).attr('nameOfItem')+'</td>'+
                        '</tr>'+
                    '</tbody>'+
                '</table>'+
            '</div>',
              showCloseButton: true,
              showCancelButton: true,
              focusConfirm: false,

              confirmButtonText:'<i class="fa fa-trash"></i> {% trans "حذف" %}',
              confirmButtonColor: '#d33',
              confirmButtonAriaLabel: 'Thumbs up, great!',
              cancelButtonText:'<i class="fa fa-times-circle-o"></i> {% trans "غلق" %}',
              cancelButtonAriaLabel: 'Thumbs down'
            }).then((result) => {
              if (result.value) {


                showLoader();
                $.ajax({
                  type: 'POST',
                  url: '/hr/delete-deduction',
                  dataType: 'json',
                  data: { 
                      'id': $(element).attr('idOfItem')
                  },
                  headers:{
                      "X-CSRFToken": csrftoken
                          },
                  cache: false,
                  success: function(result) {
            hideLoader()
                    hideLoader();
                      if(result.Result == "Success"){
                        Swal.fire(
                          '{% trans "تم الحذف" %}',
                          '{% trans "حذف بنجاح" %}',

                          'success'
                        ).then((result) => {
                          if (result.value) {
                        location.reload();
                          }
                        });
                        }else{
                          Swal.fire(
                            '{% trans "خطأ" %}',
                            '{% trans "خطأ خلال الحذف" %}',
                            '{% trans "خطأ" %}'
                          )
                        }
                  
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                  hideLoader();
                  Swal.fire(
                    '{% trans "خطأ" %}',
                    '{% trans "خطأ خلال الحذف" %}',
                    '{% trans "خطأ" %}'
                  )
                  }
              });

                
              }
            });
}


    </script>
                         
   
{% endblock %}