@extends('admin.layouts.app')
@section('content')
@section('page-name', __('Users'))

@push('styles')
    <!-- Custom styles for the checkboxes -->
<style>
/* Custom styles for checkboxes */
.form-check-input {
    display: none; /* Hide the default checkbox */
}

/* Style for label, to position the icons properly */
.form-check-label {
    position: relative;
    padding-left: 30px; /* Give space for the icon */
    cursor: pointer;
    display: inline-block;
}

/* Custom unchecked and checked icons */
.permission-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px; /* Icon size */
    color: #888; /* Default color for unchecked */
}

/* Checked state icon visibility */
.form-check-input:checked + .form-check-label .fas.fa-check {
    color: white; /* Color for checked state */
    background-color: green; /* Color for checked state */
    display: inline-block;
}

/* Unchecked state icon visibility */
.form-check-input:not(:checked) + .form-check-label .far.fa-square {
    color: #888; /* Default color for unchecked state */
    display: inline-block;
}

/* Hover effect for checkboxes */
.form-check-input:checked + .form-check-label:hover .fas.fa-check {
    color: darkgreen;
}

.form-check-input:not(:checked) + .form-check-label:hover .far.fa-square {
    color: darkgrey;
}

</style>

@endpush


<div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <!-- Add New Button -->
        @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('user-create'))
        <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">
            {{ __('Add New') }}
        </a>
        @endif


        <div class="card mb-4">
          <div class="card-header pb-0">
            <h6>{{ __('Users Table') }}</h6>

          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
                {{ $dataTable->table() }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>


  @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('user-create'))
  @include('admin.users.create')
  @endif

  @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('user-update'))
  @include('admin.users.update')
  @endif
  @if (auth()->user()->hasRole('admin') || auth()->user()->hasPermission('user-permission'))
  @include('admin.users.permissions')
  @endif

@endsection
@push('scripts')

{{ $dataTable->scripts(attributes: ['type' => 'module']) }}

<script src="{{ asset('admin/ajax/users.js') }}?v={{ time() }}"></script>
<script>
       let routes = {
            store: "{{ route('users.store') }}",
            edit: "{{ route('users.edit') }}", // Dynamic route for edit
            update: "{{ route('users.update') }}", // Dynamic route for update
            destroy: "{{ route('users.destroy') }}",
            status: "{{ route('users.status') }}" ,
            permissions: "{{ route('users.permissions') }}",
            updatePermissions: "{{ route('users.updatePermissions') }}",

        };
</script>


<script>
    $('#role').select2({
        dropdownParent: $('#addModal')
    });

    $('#edit-role').select2({
        dropdownParent: $('#editModal')
    });
</script>


@endpush