@extends('layouts.app_hr')
@section('title',__('hr.main_salary_p_loan'))

@section('content')

@section('content')

   <!-- Content Header (Page header) -->
<section class="content-header">
      <nav aria-label="breadcrumb">
         <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
               <a href="#">{{__('home.home')}}</a>
            </li>
            <li class="breadcrumb-item">
               <a href="#">{{__('hr.salaries')}}</a>
            </li>
            <li class="breadcrumb-item active">{{__('hr.main_salary_p_loan')}}</li>
         </ol>
      </nav>

   </section>

   <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
      <div class="card-widget-separator-wrapper">
         <div class="card-body card-widget-separator">
            <div class="row gy-4 gy-sm-1">
               <form method="POST" action="{{ route('main-salary-p-loan.print_search') }}" target="_blank">
                  @csrf
                  <div class="row" style="padding: 5px;">
                     <div class="col-md-3 ">
                        <div class="form-floating form-floating-outline">
                           <select name="employee_code_search" id="employee_code_search" class="form-control select2 ">
                              <option value="">{{__('hr.search_all')}} </option>
                              @if (@isset($employees) && !@empty($employees))
                                 @foreach ($employees as $info )
                                    <option value="{{ $info->employee_code }}"> {{ $info->first_name }}({{ $info->employee_code }})
                                    </option>
                                 @endforeach
                              @endif
                           </select>
                           <label for="employee_code_search"> {{__('hr.employee')}}</label>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-floating form-floating-outline">
                           <select name="payment_status_search" id="payment_status_search" class="form-control select2">
                              <option value="">{{__('hr.search_status')}} </option>

                              <option value="1">{{__('hr.paid_done')}}</option>
                              <option value="0">{{__('hr.paid_wait')}}</option>
                           </select>
                           <label  for="payment_status_search"> {{__('hr.paid_status')}}</label>
                        </div>
                     </div>
                     <div class="col-md-3 ">
                        <div class="form-floating form-floating-outline">
                           <select name="is_archived_search" id="is_archived_search" class="form-control select2">
                              <option value="">{{__('hr.search_status')}} </option>
                              <option value="1">{{__('hr.archived')}}</option>
                              <option value="0">{{__('hr.opened')}}</option>
                           </select>
                           <label for="is_archived_search">{{__('hr.archive_status')}}</label>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group">
                           <button type="post" class="btn  btn-info">طباعة البحث</button>
                        </div>
                     </div>

                  </div>
               </form>

            </div>
         </div>
      </div>
   </div>
    <!-- Main content -->
   <section class="content">

      <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
         <div class="card-body">
            <div class="add-new">
                   <button  class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddModal">{{__('messages.add')}}</button>

            <div class="table-responsive mt-4 " >
               <table   class="table table-bordered table-hover "  id="main_salary_p_loan_table">
                  <thead class="bg-primary">
                  <th>  @lang('hr.employee_code')</th>
                  <th>  @lang('hr.employee')</th>
                  <th>  @lang('hr.p_loan_total_amount')</th>
                  <th>  @lang('hr.month_number')</th>
                  <th>  @lang('hr.paid_status')</th>
                  <th>  @lang('hr.finished')</th>
                  <th>  @lang('messages.action')</th>

                  </thead>
               </table>
            </div>
         </div>

      </div>


   </section>

   @include('hr.main_salary_employee_p_loans.create')
   <div class="modal  modal-top fade modal-xl EditModal" id="EditModal" ></div>

   <div class="modal  modal-top fade modal-xl " id="InstalmentDetailsModal">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header mb-5 ">
               <h5 class="modal-title " id="backDropModalTitle">{{__('hr.p_loan_instalment_details')}}</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="InstalmentDetailsModalBody" style="background-color: white;color: black;">

            </div>
            <div class="modal-footer  ">
               <button type="button" class="btn btn-info print">{{__('messages.print')}}</button>
               <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{__('messages.close')}}</button>
            </div>
         </div>
      </div>
   </div>



@endsection
@section('javascript')
   <script>
      $(document).ready(function(){
         var main_salary_p_loan_table = $('#main_salary_p_loan_table').DataTable({
            processing: true,
            serverSide: true,
            fixedHeader: false,
            ajax: {
               url: '/hr/main-salary-p-loan',
               data: function(d) {
                  d.employee_code = $('#employee_code_search').val();
                  d.is_archived = $('#is_archived_search').val();
                  d.paid_status = $('#payment_status_search').val();
               }
            },
            columns: [
                {
               data:'employee_code',
               name:'employee_code'
                },
               {
               data:'employee_name',
               name:'employee_name'
                },
               {
               data:'total_amount',
               name:'total_amount'
               },
               {
               data:'month_number',
               name:'month_number'
               },  {
               data:'paid_status',
               name:'paid_status'
               }, {
               data:'is_archived',
               name:'is_archived'
               },{
               data:'action',
               name:'action'
               },
            ],
         });
         $(document).on('change', '#employee_code_search, #is_archived_search, #payment_status_search',function() {
            main_salary_p_loan_table.ajax.reload();
         });

         $(document).on('change','#employee_code_Add',function(e){

            if($(this).val()==""){
               $("#salary_add").val(0);
               $(".day_salary_add").val(0);
            }else{
               var salary = $("#employee_code_Add option:selected").data("s");
               var day_salary = $("#employee_code_Add option:selected").data("dp");
               $("#salary_add").val(salary*1);
               $("#day_salary_add").val(day_salary*1);
               $(".related_employees_add").show();
            }


         });
         $(document).on('change','#employee_code_edit',function(e){
            if($(this).val()==""){
               $("#salary_edit").val(0);
               $(".day_salary_edit").val(0);
            }else{
               var salary = $("#employee_code_edit option:selected").data("s");
               var day_salary = $("#employee_code_edit option:selected").data("dp");
               $("#salary_edit").val(salary*1);
               $("#day_salary_edit").val(day_salary*1);
               $(".related_employees_edit").show();
            }
         });

         function recalulate_add_p_row() {
            var total_amount_Add = $("#total_amount_Add").val();
            if (total_amount_Add == "") {
               total_amount_Add = 0;
            }
            var month_number_Add = $("#month_number_Add").val();
            if (month_number_Add == "") {
               month_number_Add = 0;
            }
            if (total_amount_Add != 0 && month_number_Add != 0) {
               var month_instalment = parseFloat(total_amount_Add) / parseFloat(month_number_Add);
               $("#month_instalment").val(month_instalment.toFixed(2) * 1);
            } else {
               $("#month_instalment").val(0);
            }
         }
         $(document).on('input', '#total_amount_Add', function(e) {
            recalulate_add_p_row();
         });

         $(document).on('input', '#month_number_Add', function(e) {
            recalulate_add_p_row();
         });

        function recalulate_edit_p_row() {
            var total_amount_edit = $("#total_amount_edit").val();
            if (total_amount_edit == "") {
               total_amount_edit = 0;
            }
            var month_number_edit = $("#month_number_edit").val();
            if (month_number_edit == "") {
               month_number_edit = 0;
            }
            if (total_amount_edit != 0 && month_number_edit != 0) {
               var month_instalment_edit = parseFloat(total_amount_edit) / parseFloat(month_number_edit);
               $("#month_instalment_edit").val(month_instalment_edit.toFixed(2) * 1);
            } else {
               $("#month_instalment_edit").val(0);
            }
         }
         $(document).on('input', '#total_amount_edit', function(e) {
            recalulate_edit_p_row();
         });

         $(document).on('input', '#month_number_edit', function(e) {
            recalulate_edit_p_row();
         });


         $(function() {
            $("#add_form").validate({
               errorPlacement: function(error, element) {
                  $(element).append('<li>' + error.text() + '</li>');
                  error.appendTo($('.toast'));

               },
               errorElement: 'div',
               rules: {
                  employee_code_Add: {
                     required: true,
                  },
                  total_amount_Add: {
                     required: true,
                  },
                  year_and_month_start_date: {
                     required: true,
                  },
               },
               messages: {
                  employee_code_Add: {
                     required: '{{__("hr.please_select_employee")}}',
                  },total_amount_Add: {
                     required: '{{__("hr.please_insert_amount")}}',
                  },year_and_month_start_date: {
                     required: '{{__("hr.please_insert_year_and_month_start_date")}}',
                  }
               }
            })

            $("#edit_form").validate({
               errorPlacement: function(error, element) {
                  $(element).append('<li>' + error.text() + '</li>');
                  error.appendTo($('.toast'));

               },
               ignore: ":hidden:not(.selectpicker)",
               errorElement: 'div',
               rules: {
                  employee_code_edit: {
                     required: true,
                  },
                  total_amount_edit: {
                     required: true,
                  },month_number_edit: {
                     required: true,
                  },
               },
               messages: {
                  employee_code_edit: {
                     required: '{{__("hr.please_select_employee")}}',
                  },total_amount_edit: {
                     required: '{{__("hr.please_insert_amount")}}',
                  },month_number_edit: {
                     required: '{{__("hr.please_select_month_number")}}',
                  }
               }
            });

         });


         $(document).on('submit', 'form#add_form', function(e) {
            e.preventDefault();
            var form = $(this);
            var data = form.serialize();
            $.ajax({
               method: 'POST',
               url: $(this).attr('action'),
               dataType: 'json',
               data: data,
               beforeSend: function(xhr) {
                  __disable_submit_button(form.find('button[type="submit"]'));
               },
               success: function(result) {
                  if (result.success == true) {
                     $('#AddModal').modal('hide');
                     $('.selectpicker').selectpicker('val', '');
                     toastr.success(result.msg);
                     form.find('button[type="submit"]').removeAttr('disabled');
                     main_salary_p_loan_table.ajax.reload();
                  } else {
                     $('#AddModal').modal('hide');
                     $('.selectpicker').selectpicker('val', '');
                     toastr.success(result.msg);
                     form.find('button[type="submit"]').removeAttr('disabled');
                     main_salary_p_loan_table.ajax.reload();
                  }
               },
            });
         });

         $(document).on('click', 'button.load_edit_this_row', function() {
            $('div.EditModal').load($(this).data('href'), function() {
               $(this).modal('show');
               $('form#edit_form').submit(function(e) {
                  e.preventDefault();
                  var form = $(this);
                  var data = form.serialize();
                  $.ajax({
                     method: 'POST',
                     url: $(this).attr('action'),
                     dataType: 'json',
                     data: data,
                     beforeSend: function(xhr) {
                        __disable_submit_button(form.find('button[type="submit"]'));
                     },
                     success: function(result) {
                        if (result.success == true) {
                           $('div.EditModal').modal('hide');
                           form[0].reset();
                           toastr.success(result.msg);
                           form.find('button[type="submit"]').removeAttr('disabled');
                           main_salary_p_loan_table.ajax.reload();
                        } else {
                           $('div.EditModal').modal('hide');
                           toastr.error(result.msg);
                           main_salary_p_loan_table.ajax.reload();
                        }
                     },
                  });
               });
            })
         });

         $(document).on('click', 'button.pay_button', function() {
            swal({
               title: LANG.sure,
               text: LANG.pay_p_loan,
               icon: 'info',
               buttons: true,
               dangerMode: false,
            }).then(willDelete => {
               if (willDelete) {
                  var href = $(this).data('href');
                  var data = $(this).serialize();

                  $.ajax({
                     method: 'get',
                     url: href,
                     dataType: 'json',
                     data: data,
                     success: function(result) {
                        if (result.success == true) {
                           toastr.success(result.msg);
                           main_salary_p_loan_table.ajax.reload();
                        } else {
                           toastr.error(result.msg);
                        }
                     },
                  });
               }
            });
         });

         $(document).on('click', 'button.delete_button', function() {
            swal({
               title: LANG.sure,
               text: LANG.pay_p_loan,
               icon: 'error',
               buttons: true,
               dangerMode: true,
            }).then(willDelete => {
               if (willDelete) {
                  var href = $(this).data('href');
                  var data = $(this).serialize();

                  $.ajax({
                     method: 'Delete',
                     url: href,
                     dataType: 'json',
                     data: data,
                     success: function(result) {
                        if (result.success == true) {
                           toastr.success(result.msg);
                           main_salary_p_loan_table.ajax.reload();
                        } else {
                           toastr.error(result.msg);
                        }
                     },
                  });
               }
            });
         });

         $(document).on('click', '.load_instalment_details', function(e) {
            var id = $(this).data("id");
            jQuery.ajax({
               url: '{{ route('main-salary-p-loan.load_instalment') }}',
               type: 'post',
               'dataType': 'html',
               cache: false,
               data: {
                  "_token": '{{ csrf_token() }}',
                  id: id
               },
               success: function(data) {
                  $("#InstalmentDetailsModalBody").html(data);
                  $("#InstalmentDetailsModal").modal("show");
               },
               error: function() {
                  alert("عفوا لقد حدث خطأ ");
               }
            })
         });

      })


   </script>

@stop