@extends('employer.layouts.app')
@section('content')
@component('employer.layouts.partials.breadcrumbs')
@endcomponent
<style>
  .select2-container {
    z-index: 999;
  }
</style>
<div class="container mt-4">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#hourlyPay">All Employees</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#fixedPay">Choose Employee</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="hourlyPay" class="tab-pane active">
      <div class="card mt-3">
        <div class="card-header bg-primary text-white">
          <h4>All Employees</h4>
        </div>
        <div class="card-body">
          <form action="{{route('employer.payroll.generate.web')}}" method="get">
            @csrf
            <input type="hidden" id="payroll_type" name="payroll_type" value="1" />
            <div class="row">
              <div class="col-12 text-center">
                <button type="submit" class="btn btn-primary btn-sm">Generate Payroll</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div id="fixedPay" class="tab-pane">
      <div class="card mt-3">
        <div class="card-header bg-primary text-white">
          <h4>Choose Employee</h4>
        </div>
        <div class="card-body">
          <form action="{{route('employer.payroll.generate.web')}}" method="get">
            @csrf
            <input type="hidden" id="payroll_type" name="payroll_type" value="0" />
            <div class="row">
              <div class="col-sm-4">
                <div class="form-group">
                  <label class="control-label">Business<span class="text-danger"></span></label>
                  <select name="business" id="business1" class="@if ($errors->has('business')) is-invalid @endif">
                    <option selected="true" value=" ">All Business</option>
                    @foreach($businesses as $business)
                    <option value="{{$business->id}}">{{$business->name}}</option>
                    @endforeach
                  </select>
                  <div class="invalid-feedback">{{ $errors->first('business') }}</div>
                </div>
              </div><!-- Col -->
              <div class="col-sm-4">
                <div class="form-group">
                  <label class="control-label">Branch<span class="text-danger"></span></label>
                  <select name="branch" id="branch1" class="@if ($errors->has('branch')) is-invalid @endif">
                    <option selected="true" value=" ">All Branch</option>
                    @foreach($branches as $branch)
                    <option value="{{$branch->id}}">{{$branch->name}}</option>
                    @endforeach
                  </select>
                  <div class="invalid-feedback">{{ $errors->first('branch') }}</div>
                </div>
              </div><!-- Col -->
              <div class="col-sm-4">
                <div class="form-group">
                  <label class="control-label">Department<span class="text-danger"></span></label>
                  <select name="department" id="department" class="@if ($errors->has('department')) is-invalid @endif">
                    <option selected="true" value=" ">All Department</option>
                    @foreach($departments as $department)
                    <option value="{{$department->id}}">{{$department->dep_name}}</option>
                    @endforeach
                  </select>
                  <div class="invalid-feedback">{{ $errors->first('department') }}</div>
                </div>
              </div><!-- Col -->
            </div><!-- Row -->
            {{-- ////// --}}
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="control-label">Select Employees</label>
                  <select id="employees" class="form-control @if ($errors->has('user')) is-invalid @endif" name="users[]" value="{{ old('user') }}" multiple="multiple">
                    @foreach ($users as $user)
                    <option value="{{$user->id}}">{{$user->id}} - {{$user->employee_id}} - {{$user->first_name}} {{$user->last_name}}</option>
                    @endforeach
                  </select>
                  <div class="invalid-feedback">{{ $errors->first('user') }}</div>
                </div>
              </div><!-- Col -->
            </div>



            <div class="row">
              <div class="col-12 text-center">
                <button type="submit" class="btn btn-primary btn-sm">Generate Payroll</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

@include('employer.Payroll.list')


@endsection
@push('custom_js')
<script src="{{ asset('admin_assets/vendors/datatables.net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('admin_assets/vendors/datatables.net-bs4/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('admin_assets/js/data-table.js') }}"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<script>
  // Example JavaScript function to populate modal with data
  function openModalWithData(data) {
    // Parse the JSON string into a JavaScript object
    var responseData = JSON.parse(data);
    var content = '<ul>';
    responseData.assign_deductions.forEach(function(deduction) {

      content += `<li class="row"> <div class="col-md-6">${deduction.deduction.name}</div><div class="col-md-6"> $${deduction.rate}</div> </li>`;
    });

    content += '</ul>';

    $('#deductionsContent').html(content);

    // console.log(data);

    var allowancecontent = '<ul>';
    responseData.assign_allowances.forEach(function(allowance) {

      console.log(allowance);

      if (responseData.total_allowance != '0') {
        allowancecontent += `<li class="row"> <div class="col-md-6">${allowance.allowance.type}</div><div class="col-md-6"> $${allowance.rate}</div> </li>`;
      }
    });
    allowancecontent += '</ul>';
    $('#allowanceContent').html(allowancecontent);

    //alert(parseFloat(responseData.total_commission));

    var commissioncontent = '<ul>';
    responseData.assign_commission.forEach(function(commission) {
      if (responseData.total_commission != '0') {
        commissioncontent += `<li class="row"> <div class="col-md-6">${commission.name}</div><div class="col-md-6"> $${commission.rate}</div> </li>`;
      }
    });
    allowancecontent += '</ul>';
    $('#commissionContent').html(commissioncontent);






    //allowanceContent
    // Update modal body with data
    //   document.getElementById('sharePublicInfo').querySelector('.modal-body').innerHTML = data;
    var other_deduction = responseData.total_deduction - responseData.fnpf_deduction;
    var srt = 0;
    var total_tax = responseData.total_tax + srt;
    document.getElementById('income_tax').innerHTML = '$' + parseFloat(responseData.total_tax).toFixed(2);
    document.getElementById('total_tax').innerHTML = '$' + parseFloat(responseData.total_tax).toFixed(2);
    document.getElementById('total_deduction').innerHTML = '$' + parseFloat(responseData.total_deduction).toFixed(2);
    document.getElementById('total_allowance').innerHTML = '$' + parseFloat(responseData.total_allowance).toFixed(2);
    document.getElementById('total_bonus').innerHTML = '$' + parseFloat(responseData.total_bonus).toFixed(2);
    document.getElementById('total_commission').innerHTML = '$' + parseFloat(responseData.total_commission).toFixed(2);
    document.getElementById('fnpf_deduction').innerHTML = '$' + parseFloat(responseData.fnpf_deduction).toFixed(2);

    var baseSalary = parseFloat(responseData.total_earnings); // Parse responseData.total_tax to a float
    var roundedbaseSalary = baseSalary.toFixed(2); // Round to 2 decimal places
    var basicSalary = parseFloat(responseData.base_salary);
    var roundedbasicSalary = basicSalary.toFixed(2);
    document.getElementById('basic_salary').innerHTML = '$' + roundedbasicSalary;
    document.getElementById('base_salary').innerHTML = '$' + roundedbaseSalary;
    document.getElementById('net_salary').innerHTML = '$' + parseFloat(responseData.net_salary).toFixed(2);
    document.getElementById('gross_salary').innerHTML = '$' + parseFloat(responseData.gross_salary).toFixed(2);
    //total_deduct
    document.getElementById('total_deduct').innerHTML = '$' + parseFloat(responseData.total_deduction).toFixed(2);
    //  document.getElementById('paid_salary').innerHTML = '$' + parseFloat(responseData.paid_salary).toFixed(2);
    //  document.getElementById('total_earnings').innerHTML = '$' + parseFloat(responseData.total_earnings).toFixed(2);


    //  document.getElementById('other_deduction').innerHTML =  '$'+other_deduction;



    //fnpf_deduction
    // Show the modal
    $('#sharePublicInfo').modal('show');
  }
</script>


<script>
  $(document).ready(function() {
    $('#employees').select2({
      placeholder: "--Select--",
      allowClear: true
    });

  });
</script>

<script type="text/javascript">
  let token = "{{csrf_token()}}";
  (function($) {
    $('#business1').change(function(e) {
      var id = $(this).val();
      $('#branch1').find('option').not(':first').remove();

      $.ajax({
        type: 'get',
        url: '/employer/report/employment_period/get_branch/' + id,
        dataType: 'json',
        success: function(response) {
          var len = 0;
          if (response != null) {
            len = response['data'].length;
          }
          if (len > 0) {
            for (var i = 0; i < len; i++) {
              var id = response['data'][i].id;
              var name = response['data'][i].name;
              var option = "<option value='" + id + "'>" + name + "</option>";
              $('#branch1').append(option);
            }
          }
        }
      });
    });
    $('#branch1').change(function(e) {
      var id = $(this).val();
      $('#department').find('option').not(':first').remove();

      $.ajax({
        type: 'get',
        url: '/employer/report/employment_period/get_department/' + id,
        dataType: 'json',
        success: function(response) {
          var len = 0;
          if (response != null) {
            len = response['data'].length;
          }
          if (len > 0) {
            for (var i = 0; i < len; i++) {
              var id = response['data'][i].id;
              var name = response['data'][i].dep_name;
              var option = "<option value='" + id + "'>" + name + "</option>";
              $('#department').append(option);
            }
          }
        }
      });
    });
    $('#department').change(function(e) {
      var id = $(this).val();
      $('#user').find('option').not(':first').remove();

      $.ajax({
        type: 'get',
        url: '/employer/report/employment_period/get_user/' + id,
        dataType: 'json',
        success: function(response) {
          var len = 0;
          if (response != null) {
            len = response['data'].length;
          }
          if (len > 0) {
            for (var i = 0; i < len; i++) {
              var id = response['data'][i].id;
              var name = response['data'][i].first_name;
              var option = "<option value='" + id + "'>" + name + "</option>";
              $('#user').append(option);
            }
          }
        }
      });
    });
  })(jQuery);
</script>


@endpush