@extends('layouts/layoutMaster')

@section('title', 'Salary')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/cards-advance.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('content')
<div class="row">
	<div class="card p-3">
		<h4 class="mb-4">
		  <span class="fheading">Salary
		  <a href="javascript::void(0)" data-bs-toggle="offcanvas" id="create" data-bs-target="#offcanvasAddUser" class="btn  ml-5" title="Add" style="float:right; background-color:{{Config::get('app.BUTTON_COLOR')}};color: white"><i class="fa-solid fa-plus"></i></a>

      <a href="javascript::void(0)"  class="btn" title="Export" id="Export" style="float:right; background: {{Config::get('app.BUTTON_COLOR')}};margin-right: 15px;"><i class="fa-solid fa-file-export"></i></a>
		</h4>

     <div class="row">
      
      <div class="col-md-3">
        <label><b>Select Worker</b></label>
        <select class="form-control" id="worker_id" name="worker_id">
          <option value="">Select Worker</option>
          @foreach($users as $worker)
            <option value="{{$worker->id}}">{{$worker->name}}</option>
          @endforeach
        </select>
      </div>

       <div class="col-md-3">
        <label><b>Select Year</b></label>
        <select class="form-control" id="year_filter" name="year">
          <option value="">Select Year</option>
          @for($i = 1;$i<=5;$i++)
            @if($i == 1)
            <option value="{{$year}}">{{$year}}</option>
            @else
                        <option value="{{$year}}">{{$year}}</option>
            @endif
          @endfor
        </select>
      </div>

       <div class="col-md-3">
        <label><b>From Month</b></label>
         <select class="form-control" id="from_month_name_filter" name="from_month">
          <option value="">Select Month</option>
          @foreach($months as $key => $month)
            <option value="{{$key+1}}">{{$month}}</option>
          @endforeach
        </select>
      </div>

      <div class="col-md-3">
        <label><b>To Month</b></label>
         <select class="form-control" id="to_month_name_filter" name="to_month">
          <option value="">Select Month</option>
          @foreach($months as $key => $month)
            <option value="{{$key+1}}">{{$month}}</option>
          @endforeach
        </select>
      </div>
      </div>

    <div class="table-responsive">
  		<table class="table table-bordered yajra-datatable">
  		    <thead>
  		        <tr>
  		            <th>No</th>
                  <th>Worker Name</th>
                  <th>Site</th>
                  <th>Worker Id</th>
  		  <th>Month&Year</th>
                <!--   <th>Working Hour</th>
                  <th>Advance</th>
                  <th>Deduction</th> -->
                  <th>Amount</th>
                  <!-- <th>Document</th> -->
                  <th>Status</th>
  		            <th style="width: 85px !important;">Action</th>
  		        </tr>
  		    </thead>
  		    <tbody>
  		    </tbody>
  		</table>
    </div>
	</div>
</div>


<div class="offcanvas offcanvas-end"  tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasAddUserLabel" class="offcanvas-title"><span id="heading"></span> Salary</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
    <form class="add-new-user pt-0" id="form-data" onsubmit="return false" enctype="multipart/form-data">
      @csrf

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Worker <span class="text-danger">*</span></b></label>
        <input type="hidden" name="id" id="id" class="form-control" >
        <select class="form-control" id="user_id" name="user_id">
          <option value="">Select Worker</option>
          @foreach($users as $user)
            <option value="{{$user->id}}">{{$user->name}} ({{$user->worker_id}})</option>
          @endforeach
        </select>
        <small id="userErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Month<span class="text-danger">*</span></b></label>
        <select class="form-control" id="month_name" name="month_name">
          <option value="">Select Month</option>
          @foreach($months as $month)
            <option value="{{$month}}">{{$month}}</option>
          @endforeach
        </select>
        <small id="month_nameErr" class="text-danger"></small>
      </div>
      <div class="mb-3">
        <label class="form-label" for="year"><b>Select Year<span class="text-danger">*</span></b></label>
        <select name="year" class="form-control" id="year">
          <!-- JavaScript will populate the year options -->
        </select>
        <small id="yearErr" class="text-danger"></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Working Days <span class="text-danger">*</span></b></label>
        <input type="integer" name="working_days" class="form-control" id="working_days" placeholder="Enter Working Days">
        <small id="working_daysErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Working Hour </b></label>
        <input type="integer" name="working_hour" class="form-control" id="working_hour" placeholder="Enter Working Hour">
        <small id="working_hourErr" class="text-danger"  ></small>
      </div>

       <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Advance </b></label>
        <input type="integer" name="advance" class="form-control" id="advance" placeholder="Enter Advance">
        <small id="advanceErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Deduction </b></label>
        <input type="integer" name="deduction" class="form-control" id="deduction" placeholder="Enter Deduction">
        <small id="deductionErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Amount <span class="text-danger">*</span></b></label>
        <input type="integer" name="amount" class="form-control" id="amount" placeholder="Enter Amount">
        <small id="amountErr" class="text-danger"  ></small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Salary Slip </b></label>
        <input type="file" name="salary_slip" class="form-control" id="salary_slip">
        <small id="salary_slipErr" class="text-danger"  ></small>
      </div>


      <div class="mb-3">
        <label class="form-label" for="add-user-fullname"><b>Select Status</b></label>
         <select class="form-control" id="status" name="status">
          <option value="">Select Status</option>
          <option value="Paid">Paid</option>
          <option value="Unpaid">Unpaid</option>
        </select>
        <small id="statusErr" class="text-danger"  ></small>
      </div>


      <div class="mb-3" style="float: right;">
        <button type="reset" id="cancelBtn" class="btn btn-danger " data-bs-dismiss="offcanvas">Cancel</button>
        <button type="submit" class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit-btn submit-form" id="createBtn" style="background-color: {{Config::get('app.BUTTON_COLOR')}}; color: white;">Create</button>
      </div>
    </form>
  </div>
</div>
@include('content.Admin.Layoutes.Footer')
@endsection


@section('page-script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
     // JavaScript to populate the year dropdown with a range of years
  const currentYear = new Date().getFullYear();
  const selectYear = document.getElementById('year');
  const startYear = 2000;  // Starting year, you can change it as needed
  const endYear = currentYear;

  for (let year = endYear; year >= startYear; year--) {
    const option = document.createElement('option');
    option.value = year;
    option.text = year;
    selectYear.appendChild(option);
  }
  //Table Create
  $(function () {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
         ajax: {
                url: "{{ route('salary') }}",
                type:'GET',
                data: function (d) {
                    d.year_filter            = $('#year_filter').val()
                    d.from_month_name_filter = $('#from_month_name_filter').val()
                    d.to_month_name_filter   = $('#to_month_name_filter').val()
                    d.worker_id              = $('#worker_id').val()
                }
            },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'user_name', name: 'user_name'},
            {data: 'site_name', name: 'site_name'},
            {data: 'worker_id', name: 'worker_id'},
            {data: 'month_name', name: 'month_name'},
            // {data: 'working_days', name: 'working_days'},
            // {data: 'working_hour', name: 'working_hour'},
            // {data: 'advance', name: 'advance'},
            // {data: 'deduction', name: 'deduction'},
            {data: 'amount', name: 'amount'},
            // { 
            //     data: 'salary_slip', 
            //     name: 'salary_slip',
            //     render: function ( data, type, full, meta ) {
            //           return '<a href="'+data+'"" target="balnk" title="View Salary Slip" class="btn btn-info btn-sm"><i class="fa-regular fa-file" size="50px"></i></a>'
            //     }
            // },
            { 
                data: 'status', 
                name: 'status',
                render: function ( data, type, full, meta ) {
                      if(data == 'Paid'){
                          return '<small class="badge bg-label-success"; text-capitalized="">'+data+'</small>'
                      }else{
                          return '<small class="badge bg-label-danger"; text-capitalized="">'+data+'</small>'
                      }
                    }
            },
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ]
    });
  });

  $("#from_month_name_filter,#to_month_name_filter,#year_filter,#worker_id").change(function() { 
        $('.yajra-datatable').DataTable().draw();
  });

  //Create
  $('#create').click(function(){
    $("#createBtn").prop('disabled', false);
    $('#createBtn').html('Create');
  	$('#heading').html('Create')
  	$('#createBtn').html('Create')
    $('#id').val('')

    EmptyError()
    $('#form-data').trigger("reset");
  })

  // Empty Error
  function EmptyError(){
    $('#userErr').html('');
    $('#month_nameErr').html('');
    $('#nameErr').html('');
    $('#working_daysErr').html('');
    $('#working_hourErr').html('');
    $('#advanceErr').html('');
    $('#deductionErr').html('');
    $('#amountErr').html('');
    $('#salary_slipErr').html('');
    $('#statusErr').html('');
    $('#yearErr').html('');
  }

  //Edit
  $('body').delegate('.edit', 'click', function() {
      $("#createBtn").prop('disabled', false);
      $('#createBtn').html('Create');
  	  EmptyError()
      $('#heading').html('Edit')
      $('#createBtn').html('Update')

      var id = $(this).attr("data-id")
      $.ajax({
		  url: "{{ route('salary.edit') }}", 
        method: "POST",  
        data:{id:id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },  
        dataType: 'json',
        success: function(response) {
          $('#id').val(response.id)
          $('#user_id').val(response.user_id)
          $('#month_name').val(response.month_name)
          $('#working_days').val(response.working_days)
          $('#working_hour').val(response.working_hour)
          $('#advance').val(response.advance)
          $('#deduction').val(response.deduction)
          $('#amount').val(response.amount)
          $('#status').val(response.status)
        }
      })
    })

 //Form Submit
  $('#form-data').on('submit', function(event){
      EmptyError()
      event.preventDefault();
      $.ajax({
         url:"{{ route('salary.save') }}",
         method:"POST",
         data:new FormData(this),
         dataType:'JSON',
         contentType: false,
         cache: false,
         processData: false,
         beforeSend: function() {
              $("#createBtn").prop('disabled', true);
              // var html = $('#createBtn').html()
              $('#createBtn').html('....Please wait');
          },
          success: function(response) {
            if(response.status == 400){
              printErrorMsg(response.error);
              $("#createBtn").prop('disabled', false);
              if($('#id').val()){
                $('#createBtn').html('Update');
              }else{
                $('#createBtn').html('Create');
              }
              return false
            }
            $('.yajra-datatable').DataTable().ajax.reload();

            $(".modalForm").modal('hide');
            $("#cancelBtn").click()
            printSuccessMsg(response.msg);
          },
          error: function(response) { 
                $('#userErr').text(response.responseJSON.errors.user_id);
                $('#month_nameErr').text(response.responseJSON.errors.month_name);
                $('#nameErr').text(response.responseJSON.errors.name);
                $('#yearErr').text(response.responseJSON.errors.year);
                $('#working_daysErr').text(response.responseJSON.errors.working_days);
                $('#working_hourErr').text(response.responseJSON.errors.working_hour);
                $('#advanceErr').text(response.responseJSON.errors.advance);
                $('#deductionErr').text(response.responseJSON.errors.deduction);
                $('#amountErr').text(response.responseJSON.errors.amount);
                $('#salary_slipErr').text(response.responseJSON.errors.salary_slip);
                $('#statusErr').text(response.responseJSON.errors.status);
                $("#createBtn").prop('disabled', false);
                if($('#id').val()){
                  $('#createBtn').html('Update');
                }else{
                  $('#createBtn').html('Create');
                }
                
          }    
        });
  });

  //Delete Popup
  $('body').delegate('.deleteData', 'click', function() {
  	  $('#deleteRecord').html('Site')
  	  $('#modalCenter').modal('show');
  	  var id = $(this).attr("data-id")
  	  $('#delete_id').val(id)
  })

  // Delete
  $('#delete').click(function(){
     $("#delete").prop('disabled', true);
     $('#delete').html('Deleteing');
     var id = $('#delete_id').val();
	  $.ajax({
		url: "{{ route('salary.delete') }}", 
        method: "POST",  
        data:{id:id},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },  
        dataType: 'json',
        success: function(response) {
      	  $('.yajra-datatable').DataTable().ajax.reload();
          $("#modalCenter").modal('hide');
          $("#delete").prop('disabled', false);
          $('#delete').html('Delete');
          printSuccessMsg('Salary Deleted Successfully..');
        }
      })
  })

  //Export Data
  $('#Export').click(function(){
      var search            = $('.dataTables_filter input').val();
      var from_month_name_filter = $('#from_month_name_filter').val();
      var to_month_name_filter = $('#to_month_name_filter').val();
      var year_filter = $('#year_filter').val();
      var worker_id = $('#worker_id').val()
      window.location.href = window.origin+'/admin/salary-export?search='+search+'&from_month_name_filter='+from_month_name_filter+"&to_month_name_filter="+to_month_name_filter+"&year_filter="+year_filter+"&worker_id="+worker_id;
  })
</script>

@endsection