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

@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="#">{{__('hr.salaries')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('hr.main_salary_p_loan')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('hr.monthly_main_salary_p_loan') .' ' .($finance_cln_periods_data['month']->name .' '. $finance_cln_periods_data['finance_year'] )}}</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
                        <input type="hidden" id="financial_period_id_search" name="financial_period_id_search" value="{{ $finance_cln_periods_data['id']  }}" >
                         <div class="row" style="padding: 5px;">
                    <div class="col-sm-3   fv-plugins-icon-container ">
                        <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_for_search) && !@empty($employees_for_search))
                                    @foreach ($employees_for_search 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-sm-3   fv-plugins-icon-container ">
                        <div class="form-floating form-floating-outline">
                            <select  name="is_archived_search" id="is_archived_search" class="form-control select2">
                                <option value="">{{__('messages.please_select')}}</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-sm-3   fv-plugins-icon-container ">
                        <div class="form-floating form-floating-outline mt-1">
                            <button type="post" class="btn btn-info waves-effect waves-light custom_button" >{{__('hr.print_search')}}</button>
                        </div>
                    </div>

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

<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">
              @if($finance_cln_periods_data['is_open']==1)
                  <button  class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddModal">{{__('messages.add')}}</button>
              @endif
          </div>
          <div   class=" table-responsive mt-4">
              <table   class="table table-bordered table-hover" id="p_loan_table">
                  <thead class="custom_thead">
                      <th>{{__('hr.employee')}}</th>
                      <th>{{__('hr.p_loan_total_amount')}}</th>
                      <th>{{__('hr.added_by')}}</th>
                      <th>{{__('hr.updated_by')}}</th>
                      <th>{{__('hr.status')}}</th>
                      <th>{{__('messages.action')}}</th>
                  </thead>
                  <tbody>

                  </tbody>
              </table>

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

@stop

@include('hr.main_salary_employee_p_loans.create')

<div class="modal  modal-top fade modal-xl EditModal" id="EditModal" ></div>


@section('javascript')
 <script>

   $(document).ready(function(){

       var p_loan_table = $('#p_loan_table').DataTable({
           processing: true,
           serverSide: true,
           fixedHeader: false,
           ajax: {
               url: '/hr/main-salary-p_loan/datatable',
               data: function(d) {
                   d.financial_period_id = $('#financial_period_id_search').val();
                   d.employee_code = $('#employee_code_search').val();
                   d.is_archived = $('#is_archived_search').val();
                   d.p_loan_type_id = $('#p_loans_type_search').val();
               }
           },
           columns: [
               {
               data:'employee_code',
               name:'employee_code'
                 },
               {
                   data:'total_amount',
                   name:'total_amount'
               },
               {
                   data:'added_by',
                   name:'added_by'
               },
               {
                   data:'updated_by',
                   name:'updated_by'
               },
               {
                   data:'is_archived',
                   name:'is_archived'
               },
               {
                   data:'action',
                   name:'action'
               }
           ],
       });

       $(document).on('change', '#employee_code_search, #is_archived_search, #p_loans_type_search',function() {
           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'),
                       data: data,
                       beforeSend: function(xhr) {
                           __disable_submit_button(form.find('button[type="submit"]'));
                       },
                       success: function(result) {
                           if (result.success == true) {
                               $('div.EditModal').modal('hide');

                               toastr.success(result.msg);
                               p_loan_table.ajax.reload();
                           } else {
                               $('div.EditModal').modal('hide');
                               toastr.error(result.msg);
                            }
                       },
                   });
               });
           })
       });

       $(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");
         var financial_period_id = $("#employee_code_Add option:selected").data("financial_period_id");
         $("#salary_add").val(salary*1);
         $("#day_salary_add").val(day_salary*1);
         $("#financial_period_id").val(financial_period_id);
         $(".related_employees_add").show();
       }


      });

       $(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,
                   },
               },
               messages: {
                   employee_code_Add: {
                       required: '{{__("hr.please_select_employee")}}',
                   },total_amount_Add: {
                       required: '{{__("hr.please_insert_amount")}}',
                   }
               }
           });
           $("#edit_form").validate({
               errorPlacement: function(error, element) {
                   $(element).append('<li>' + error.text() + '</li>');
                   error.appendTo($('.toast'));

               },
               errorElement: 'div',
               rules: {
                   employee_code: {
                       required: true,
                   },
                   total_amount_edit: {
                       required: true,
                   },
               },
               messages: {
                   employee_code: {
                       required: '{{__("hr.please_select_employee")}}',
                   },total_amount_edit: {
                       required: '{{__("hr.please_insert_amount")}}',
                   }
               }
           });
       });


       $(document).on('submit', 'form#add_form', function(e) {

           e.preventDefault();
           var form = $(this);
           var data = form.serialize();
           $.ajax({
              method: 'POST',
              url: $(this).attr('action'),
              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');
                      p_loan_table.ajax.reload();
                  } else {
                      $('#AddModal').modal('hide');
                      toastr.error(result.msg);
                      form.find('button[type="submit"]').removeAttr('disabled');
                  }
              },
          });


      });


       $(document).on('click', 'button.delete_button', function() {
           swal({
               title: LANG.sure,
               text: LANG.confirm_delete,
               icon: 'warning',
               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);
                               p_loan_table.ajax.reload();
                           } else {
                               toastr.error(result.msg);
                           }
                       },
                   });
               }
           });
       });
      

   });
   
   
</script>

@endsection