@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title', 'Lista de usuarios')
{{-- vendor styles --}}
@section('vendor-styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/tables/datatable/datatables.min.css') }}">
@endsection
{{-- page styles --}}
@section('page-styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/page-users.css') }}">
@endsection
@section('content')
  <!-- users list start -->
  <section class="users-list-wrapper">
    <div class="users-list-table">
      <div class="invoice-create-btn mb-1">
        <a href="{{ route('users.create') }}" class="btn btn-primary glow invoice-create" role="button"
          aria-pressed="true">Criar usuário</a>
      </div>
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            <!-- datatable start -->
            <div class="table-responsive">
              <table id="users-list-datatable" class="table">
                <thead>
                  <tr>
                    <th>id</th>
                    <th>E-mail</th>
                    <th>Nome</th>
                    <th>status</th>
                    <th>edit</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($users as $item)
                    <tr>
                      <td>{{ $item->id }}</td>
                      <td>{{ $item->email }}</td>
                      <td>{{ $item->name }}</td>
                      <td><span class="badge badge-light-success">Active</span></td>
                      <td>
                        <div class="row">
                          {{-- <div class="invoice-action btn btn-warning">
                            <a href="#"
                              class="invoice-action-edit cursor-pointer">
                              <i class="bx bx-edit warning"></i>
                            </a>
                          </div> --}}
                          <div class="invoice-action">
                            <a href="{{ route('users.edit', $item->id) }}"
                              class="invoice-action-edit cursor-pointer">
                              <i class="bx bx-edit primary"></i>
                            </a>
                          </div>
                          <div class="invoice-action">
                            <form action="{{ route('users.destroy', $item->id) }}" method="post">
                              @csrf
                              @method('DELETE')
                              <button type="submit" class="invoice-action-view mr-1"
                                style="outline: thin; border: hidden; background-color: #fff;">
                                <i class="bx bx-trash-alt danger"></i>
                              </button>
                            </form>
                          </div>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- datatable ends -->
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- users list ends -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
  <script src="{{ asset('vendors/js/tables/datatable/datatables.min.js') }}"></script>
  <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
  <script src="{{ asset('js/scripts/pages/page-users.js') }}"></script>
@endsection