@extends('layouts.dashboard')

@section('content')

<!-- Page Header -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Employees Salary List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Salary</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<!-- Main Content -->
<section class="content">
  <div class="container-fluid">

    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <table id="salaryTable" class="table table-striped table-bordered text-center">
              <thead>
                <tr>
                  <th class="text-center">Sr No.</th>
                  <th>Name</th>
                  <th>Employee ID</th>
                  <th class="text-center">Mobile Number</th>
                  <th>Email</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($employees as $index => $employee)
                <tr>
                  <td class="text-center">{{ $index + 1 }}</td>
                  <td>{{ $employee->name }}</td>
                  <td>{{ $employee->employee_id }}</td>
                  <td class="text-center">{{ $employee->mobile_number }}</td>
                  <td>{{ $employee->email }}</td>
                  <td>
                    <a href="{{ route('salary.slip', ['id' => $employee->id]) }}" class="btn btn-sm btn-primary" title="View Salary Slip">
                      <i class="fas fa-eye"></i>
                    </a>
                    <a href="{{ route('salary.edit', ['id' => $employee->id]) }}" class="btn btn-sm btn-warning text-white" title="Edit Salary">
                      <i class="fas fa-edit"></i>
                    </a>
                    <!-- Salary Slip Button -->


                </tr>
                @empty
                <tr>
                  <td colspan="6" class="text-center">No active employees found.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>



@endsection



@push('scripts')

<script>
  $(document).ready(function() {
    $('#salaryTable').DataTable({
      "pageLength": 15, // ✅ Default number of rows per page
      lengthChange: false,
      "lengthMenu": [
        [10, 15, 20, 50, -1],
        [10, 15, 20, 50, "All"]
      ],
      "searching": true,
      "ordering": true,
      "paging": true,
      "info": true,

    });
  });
</script>
@endpush