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

@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_over_time')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('hr.monthly_main_salary_over_time') .' ' .($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-over-time.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="">{{__('messages.please_select')}}</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="over_time_table">
                  <thead class="custom_thead">
                      <th>{{__('hr.employee')}}</th>
                       <th>{{__('hr.days_count')}}</th>
                      <th>{{__('hr.over_time_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_over_times.create')

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


@section('javascript')
 <script>

   $(document).ready(function(){

       var over_time_table = $('#over_time_table').DataTable({
           processing: true,
           serverSide: true,
           fixedHeader: false,
           ajax: {
               url: '/hr/main-salary-over-time/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();
               }
           },
           columns: [
               {
               data:'employee_code',
               name:'employee_code'
                 },
                {
                   data:'total_days',
                   name:'total_days'
               }, {
                   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, #over_times_type_search',function() {
           over_time_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');
                               over_time_table.ajax.reload();
                           } else {
                               $('div.EditModal').modal('hide');
                               toastr.error(result.msg);
                               over_time_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");
               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_days_Add: {
                       required: true,
                   },
                   over_time_type: {
                       required: true,
                   },
               },
               messages: {
                   employee_code_Add: {
                       required: '{{__("hr.please_select_employee")}}',
                   },over_time_type: {
                       required: '{{__("hr.please_select_over_times_type")}}',
                   },total_days_Add: {
                       required: '{{__("hr.please_select_total_days")}}',
                   },
               }
           });
       });

       $(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', '');
                      form[0].reset();
                      toastr.success(result.msg);
                      form.find('button[type="submit"]').removeAttr('disabled');
                      over_time_table.ajax.reload();
                  } else {
                      $('#AddModal').modal('hide');
                      form[0].reset();
                      toastr.error(result.msg);
                      form.find('button[type="submit"]').removeAttr('disabled');
                  }
              },
          });


      });

      $(document).on('input','#total_days_Add',function(e){
         var total_days_Add=$(this).val();
         if(total_days_Add==""){total_days_Add=0;}
         var day_salary_add=$("#day_salary_add").val();
         $("#total_amount_Add").val(total_days_Add*day_salary_add*1);
      });

      $(document).on('input','#total_days_edit',function(e){
         var total_days_edit=$(this).val();
         if(total_days_edit==""){total_days_edit=0;}
         var day_salary=$("#day_salary").val();
         $("#total_amount_edit").val(total_days_edit*day_salary*1);
      });


       $(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);
                               over_time_table.ajax.reload();
                           } else {
                               toastr.error(result.msg);
                           }
                       },
                   });
               }
           });
       });

   });
   
   
</script>

@endsection