@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">Roles</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    @if(auth()->user()->isAdmin() || auth()->user()->can('roles.create'))
    <a href="{{ route('admin.roles.create') }}" class="btn btn-sm btn-primary "><i class="fa fa-plus-circle"></i> Add Role</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="role-list">
          <thead>
            
            <th scope="col">Role</th>
            <th scope="col">Description</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody></tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

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




<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    const showLoader = window.showLoader || function(){ try { window.AppLoader && window.AppLoader.show(); } catch(_) {} };
    const hideLoader = window.hideLoader || function(){ try { window.AppLoader && window.AppLoader.hide(); } catch(_) {} };
    var loaderTimer = null;
    var table = $('#tbl-users').DataTable({
      processing: false,
      serverSide: true,
      deferRender: true,
      searchDelay: 300,
      ajax: {
        url: '{{ route('admin.roles.datatable') }}',
        type: 'GET',
        beforeSend: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
          loaderTimer = setTimeout(function(){ showLoader(); }, 200);
        },
        complete: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        },
        error: function(){
          try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
          hideLoader();
        }
      },
      columns: [
        { data: 'name', name: 'name' },
        { data: 'description', name: 'description' },
        { data: 'actions', name: 'actions', orderable: false, searchable: false }
      ],
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      order: [[0, 'desc']],
      columnDefs: [
        { targets: ['action'], orderable: false }
      ],
      drawCallback: function(){
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      }
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $(document).on('click', '.delete-role', function() {
        var roleId = $(this).data('id');
        var row = $(this).closest('tr');
        // First, check if any users are associated with this role
        $.get('{{ route('admin.roles.hasUsers', ['id' => ':id']) }}'.replace(':id', roleId), function(response) {
            if (response.hasUsers) {
                Swal.fire({
                    title: 'Cannot Delete Role',
                    text: 'There are users associated with this role. Please remove them before deleting the role.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            } else {
                // No users, show the delete confirmation
                Swal.fire({
                    title: 'Are you sure?',
                    text: "This role will be deleted. You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/admin/roles/' + roleId, // Adjust route as needed
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.status === 'success') {
                                    row.remove();
                                    toastr.success(response.message);
                                } else {
                                    toastr.error(response.message || 'Failed to delete role');
                                }
                            },
                            error: function(xhr) {
                                toastr.error('An error occurred. Please try again.');
                            }
                        });
                    }
                });
            }
        });
    });
  });

</script>

@endsection