@extends('backend.layouts.admin.app')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Staff</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    @if(auth()->user()->isAdmin() || auth()->user()->can('staff.create'))
    <a href="{{ route('admin.staff.create') }}" class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Staff</a>
    @endif
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0">
      
        <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="staff-list">
          <thead>
            <th scope="col">Name</th>
            <th scope="col">Role</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
            
            <th scope="col">Creation Date</th>
            <th scope="col">Status</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody>
            @forelse($staffUsers as $staff)
            <tr>
              <td data-type='text'>{{ $staff->name }}</td>
              <td data-type='text'>{{ $staff->roles->first()->name ?? 'No Role' }}</td>
              <td data-type='text'>{{ $staff->email }}</td>
              <td data-type='text'>{{ $staff->phone_accounts }}</td>
              
              <td data-type='none'>{{ $staff->created_at->format('d/m/Y') }}</td>
              <td data-type='none'>
                @if(auth()->user()->isAdmin() || auth()->user()->can('staff.edit'))
                <div class="form-check form-switch">
                  <input class="form-check-input status-toggle" type="checkbox" role="switch" 
                         data-staff-id="{{ $staff->id }}"
                         {{ $staff->status_label == 'active' ? 'checked' : '' }}
                         aria-checked="{{ $staff->status_label == 'active' ? 'true' : 'false' }}">
                  <span class="d-none">{{ $staff->status_label }}</span>
                </div>
                @else
                <span class="badge badge-{{ $staff->status_label == 'active' ? 'success' : 'secondary' }}">
                  {{ ucfirst($staff->status_label) }}
                </span>
                @endif
              </td>
              <td data-type='none'>
                @if(auth()->user()->isAdmin() || auth()->user()->can('staff.edit'))
                <a href="{{ route('admin.staff.edit', $staff->id) }}" class="me-3">
                  <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>
                </a>
                @endif
                @if(auth()->user()->isAdmin())
                <a href="#" class="delete-staff" data-staff-id="{{ $staff->id }}">
                  <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                </a>
                @endif
              </td>
            </tr>
            @empty
            
            @endforelse
          </tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->




<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="d-flex justify-content-end flex-wrap">
      <div class="custom-width-200 position-relative me-2">
        <select id="roleFilter" class="form-control max-w-200">
          <option value="">All Roles</option>
          @foreach($roles as $role)
            <option value="{{ $role->name }}">{{ $role->name }}</option>
          @endforeach
        </select>
      </div>
      <div class="custom-width-200 position-relative me-2">
        <select id="statusFilter" class="form-control max-w-200">
          <option value="">All Status</option>
          <option value="active">Active</option>
          <option value="inactive">Inactive</option>
        </select>
      </div>
    </div>
  `);

  // Role Filter
  $('#roleFilter').on('change', function () {
      let selectedRole = $(this).val();
      table.column(1).search(selectedRole).draw(); // column 1 = Role
  });

  $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
  const selectedStatus = $('#statusFilter').val().toLowerCase();
  if (!selectedStatus) return true;

  // Get the actual row node
  var table = $('#tbl-users').DataTable();
  var row = table.row(dataIndex).node();
  // Find the hidden span with the status value
  var statusText = $(row).find('td').eq(5).find('span.d-none').text().trim().toLowerCase();

  return statusText === selectedStatus;
});

$('#statusFilter').on('change', function () {
  $('#tbl-users').DataTable().draw();
});


  // Status toggle event
  $(document).on('change', '.status-toggle', function() {
    const staffId = $(this).data('staff-id');
    const status = $(this).prop('checked') ? '1' : '0';
    const element = $(this);
    
    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type: 'POST',
      url: '{{ route("admin.staff.update-status") }}',
      data: {
        staff_id: staffId,
        status: status
      },
      success: function(response) {
        if (response.success) {
          element.attr('aria-checked', status.toString());
          toastr.success('Staff status updated successfully!', 'Success', {
            timeOut: 3000,
            progressBar: true,
            closeButton: true
          });
          location.reload();
        } else {
          toastr.error('Failed to update staff status. Please try again.', 'Error', {
            timeOut: 5000,
            progressBar: true,
            closeButton: true
          });
        }
      },
      error: function(xhr) {
        let errorMessage = 'An error occurred while updating the status.';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage, 'Error', {
          timeOut: 5000,
          progressBar: true,
          closeButton: true
        });
      }
    });
  });

  // Delete staff event
  $(document).on('click', '.delete-staff', function(e) {
    e.preventDefault();
    const staffId = $(this).data('staff-id');
    const staffName = $(this).closest('tr').find('td:first').text();
    
    Swal.fire({
      title: 'Are you sure?',
      text: `Do you want to delete staff user "${staffName}"?`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        var url = '{{ route("admin.staff.destroy", ":id") }}';
        url = url.replace(':id', staffId);
        
        $.ajax({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type: 'DELETE',
          url: url,
          success: function(response) {
            if (response.success) {
              toastr.success('Staff user deleted successfully');
                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                toastr.error('Failed to delete staff user.', 'Error', {
                  timeOut: 3000,
                  progressBar: true,
                  closeButton: true
                });
            }
          },
          error: function(xhr) {
            let errorMessage = 'An error occurred while deleting the staff user.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMessage = xhr.responseJSON.message;
            }
            Swal.fire(
              'Error!',
              errorMessage,
              'error'
            );
          }
        });
      }
    });
  });
});
</script>

@endsection