@extends('backend.layouts.app')
@section('backend_title', 'Admin Brand List')

@section('backend_content')

<div class="mt-4 row">
  <div class="col-lg-12 col-12">
    <div class="card">
      <div class="pb-0 card-header">
          <div class="d-lg-flex">
              <div>
                  <h5 class="mb-0">Salary Sheet</h5>
                  <p class="mb-0 text-sm">
                  </p>
              </div>
          </div>
      </div>
      <div class="p-0 card-body">
          <form action="{{ route('salary_sheet_Store') }}" method="POST">
            @csrf
              <div class="col-lg-3 col-12 d-flex justify-content-start py-3">
                  <div class="col-lg-10 col-8">
                      <div class="ms-2">
                          <label for="date_from">Select Month:</label>
                          <select id="salary_month_name" class="form-control py-2 w-50" name="salary_month_name" required>
                              <option value="">Select any one</option>
                              @foreach ($monthList as $item)
                              <option value="{{ $item->id}}" class="text-xs">{{ $item->month_name}}</option>
                              @endforeach
                          </select>
                      </div>
                  </div>
              </div>
         
        <div class="table-responsive">
          <table class="table table-flush" id="products-list">
            <thead class="thead-light">
              <tr>
                <th class="text-xs border-top-0 text-uppercase w-2">Sl No.</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Employee Id</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Employee Name</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Salary</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Loan</th>
                <th class="text-xs border-top-0 text-uppercase w-4">OT/ Benefit</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Loan Deduc</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Deduc</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Net Payable</th>
                <th class="text-xs border-top-0 text-uppercase w-4">Payment</th>
                <th class="text-xs border-top-0 text-uppercase w-8">Note (if)</th>
              </tr>
            </thead>
            <tbody>
              @isset($employeeList)
                  @forelse ($employeeList as $index=>$item)
                    <tr>
                        <td>
                          <div class="d-flex align-items-center">
                            <p class="mb-0 text-xs font-weight-bold ms-2">{{ $index +1}}</p>
                          </div>
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="hidden" readonly class="form-control my-2 text-xs" name="employee_id[]" id="" value="{{ $item->id}}">
                          <input type="text" readonly class="form-control my-2 text-xs" id="" value="{{ $item->employee_id}}">
                          <input type="hidden" class="employee-select" value="{{ $item->id}}">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" readonly class="form-control my-2 text-xs" name="employee_name[]" id="" value="{{ $item->name}}">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" readonly class="form-control py-1 text-xs salary" name="basic_salary[]" value="{{ $item->basic_salary}}">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" readonly class="form-control py-1 text-xs due_amount" id="" value="">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" class="form-control py-1 text-xs ot" name="ot[]" value="">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" class="form-control py-1 text-xs loan_deduc" name="loan_deduc[]" value="">
                        </td>

                        <td class="font-weight-bold">
                          <input type="text" class="form-control py-1 text-xs deduc" name="others_deduc[]" value="">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" readonly class="form-control py-1 text-xs net_payable" name="net_payable[]" value="">
                        </td>
        
                        <td class="font-weight-bold">
                          <input type="text" readonly class="form-control py-1 text-xs net_payment" name="net_payment[]" value="">
                        </td>
        
                        <td class="text-sm">
                          <input type="text" class="form-control py-1 text-xs" name="note[]" value="">
                        </td>
                    </tr>
                      
                  @empty
                      <tr>
                        <td class="text-sm" colspan="3">Data Not Found!!</td>
                      </tr>
                  @endforelse
                      <div class="float-end mt-4">
                          <button type="submit" class="btn btn-primary btn-sm ms-2">Save Salary Sheet</button>
                      </div>
              @endisset
            </tbody>
          </form>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
      $('.employee-select').each(function () {
          var employeeId = $(this).val();
          var $row = $(this).closest('tr');

          if (employeeId) {
              $.ajax({
                  url: '{{ url("admin/advance/get-advance-amount") }}/' + employeeId,
                  type: 'GET',
                  dataType: 'json',
                  success: function (result) {
                      if (result) {
                          $row.find('.due_amount').val(result.dueAmount);
                      } else {
                          $row.find('.due_amount').val(0);
                      }
                  },
                  error: function (error) {
                      console.log(error);
                  }
              });
          } else {
              $row.find('.due_amount').val(0);
          }
      });


  });


window.onload = function() {
  
  var rows = document.querySelectorAll('#products-list tbody tr');

  rows.forEach(function(row) {
    
    var salaryField = row.querySelector('.salary');
    var netPayableField = row.querySelector('.net_payable');
    var netPaymentField = row.querySelector('.net_payment');

    var employeeSalary = parseFloat(salaryField.value) || 0;
    
   
    netPayableField.value = employeeSalary;
    netPaymentField.value = employeeSalary;

  
    function updateValues() {
      var otField = row.querySelector('.ot');
      var loanDeducField = row.querySelector('.loan_deduc');
      var deducField = row.querySelector('.deduc');

      var otAmount = parseFloat(otField.value) || 0;
      var loanDeduc = parseFloat(loanDeducField.value) || 0;
      var deduc = parseFloat(deducField.value) || 0;

   
      var currentNetPayable = employeeSalary + otAmount - loanDeduc - deduc;

    
      netPayableField.value = currentNetPayable;
      netPaymentField.value = currentNetPayable;
    }

    // Add event listeners for each row's ot, loan_deduc, and deduc inputs
    row.querySelector('.ot').addEventListener('input', updateValues);
    row.querySelector('.loan_deduc').addEventListener('input', updateValues);
    row.querySelector('.deduc').addEventListener('input', updateValues);
  });
};










</script>




  @endsection

  @section('beackend_scripts')
  
  @endsection