@extends('layout.main')

@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <h2 class="mb-2 page-title">{{__('nav.users')}}</h2>
        <p class="card-text"></p>
        <div class="row my-4">
          <!-- Small table -->
          <div class="col-md-12">
            <div class="card shadow">
              <div class="card-header">
                {{-- add button right aligned  --}}
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                  </div>
                  @if (Auth::user()->can('user-create'))
                  <div class="col-auto">
                    <a href="{{route('users.create')}}" class="btn btn-sm btn-primary">{{__('nav.add_user')}}</a>
                  </div>
                  @endif
                </div>
              </div>
              <div class="card-body">
                <!-- table -->
                <table class="table datatables" id="dataTable-1">
                  <thead>
                    <tr>
                      <th>{{__('nav.name')}}</th>
                      <th>{{__('nav.role')}}</th>
                      <th>{{__('nav.action')}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    @forelse($users as $role )
                    <tr>
                      <td>{{$role->name}}</td>
                      <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm mr-2 ">
                                <img class="rounded" src="@if($role->avatar){{ Storage::url($role->avatar)}} @else{{asset('dashboard/assets/products/p4.jpg')}}@endif" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>{{$role->username}}</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">{{$role->email}}</span>
                                </div>
                            </div>
                        </div>
                      </td>
                      <td>
                          <div class="hstack gap-2 fs-15">
                              @if( Auth::user()->can('user-edit'))<a aria-label="anchor" href="{{route('users.edit', $role->id)}}" title="Edit Role" class="btn btn-sm btn-success"><i class="fe fe-edit-3 fe-16"></i></a>@endif
                              @if(Auth::user()->can('user-delete'))
                              <button  type="button" class="btn btn-sm btn-danger"  data-toggle="modal" data-target="#modal-delete{{$role->id}}"><i class="fe fe-trash-2 fe-16"></i></button>
                              <div class="modal fade"  id="modal-delete{{$role->id}}" tabindex="-1" aria-labelledby="modal-new-address" aria-hidden="true">
                                  <div class="modal-dialog  modal-dialog-centered">
                                      <div class="modal-content">
                                          <div class="modal-header">
                                              <h6 class="modal-title" id="staticBackdropLabel">
                                              </h6>
                                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                              </button>
                                              
                                          </div>
                                          <div class="modal-body">
                                              <form action="{{route('users.destroy',$role->id)}}" method="post">
                                                  @csrf
                                                  @method('DELETE')
                                              <div class="row gy-3">
                                                  <div class="col-xl-6">
                                                      <H2>Are you Sure ?</H2>
                                                      <p>You won't be able to revert this!</p> 
                                                  </div>                                       
                                              </div>
                                          
                                          </div>
                                          <div class="modal-footer">
                                              <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                                              <button type="submit" class="btn btn-danger">Yes, Delete It</button>
                                          </div>
                                      </form>
                                      
                                      </div>
                                  </div>
                              </div>
                              @endif
                          </div>
                      </td>
                      
                    </tr>
                    @empty
                    @endforelse
                    
                    
                  </tbody>
                </table>
              </div>
            </div>
          </div> <!-- simple table -->
        </div> <!-- end section -->
      </div> <!-- .col-12 -->
    </div> <!-- .row -->
  </div> <!-- .container-fluid -->

@endsection

@push('scripts')
    {{-- <script src='{{ asset('dashboard/js/jquery.dataTables.min.js')}}'></script> --}}
    <script src='{{ asset('dashboard/js/dataTables.js')}}'></script>
    {{-- <script src='{{asset('dashboard/js/dataTables.bootstrap4.min.js')}}'></script> --}}
    <script src='{{asset('dashboard/js/dataTables.buttons.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.dataTables.js')}}'></script>
    <script src='{{asset('dashboard/js/pdfmake.min.js')}}'></script>
    <script src='{{asset('dashboard/js/vfs_fonts.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.html5.min.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.print.min.js')}}'></script>
    <script>
      $('#dataTable-1').DataTable({
        autoWidth: true,
        "lengthMenu": [
          [16, 32, 64, -1],
          [16, 32, 64, "All"]
        ],
        layout: {
        topStart: {
            buttons: [ 
              {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':not(:last-child)'  // Excludes the last column from the export
                        }
                    },
                    {
                        extend: 'pdf',
                        orientation: 'portrait',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
            ]
        }
    }
      });
    </script>
@endpush('scripts')