@extends('layout.main')

@section('content')

<div class="container grid px-6 mx-auto">
        <h2
          class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
        >
          Roles
        </h2>       
        <div class="flex flex-col flex-wrap mb-8 space-y-4 md:flex-row md:items-end md:space-x-4">
            <!-- Divs are used just to display the examples. Use only the button. -->
            <div>
              <a 
              href="{{ route('roles.create') }}" 
              class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                <span>Add Role </span>
                <span class="ml-2" aria-hidden="true">+</span>
                {{-- <svg class="w-4 h-4 ml-2 -mr-1" fill="currentColor" aria-hidden="true" viewBox="0 0 20 20">
                  <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" fill-rule="evenodd"></path>
                </svg> --}}
              </a>
            </div>
          </div>
        <!-- With actions -->
        <h4
          class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300"
        >
          Roles List
        </h4>
        <div class="w-full overflow-hidden rounded-lg shadow-xs p-2">
          <div class="w-full overflow-x-auto">
            <table class="w-full whitespace-no-wrap">
              <thead>
                <tr
                  class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
                >
                  <th class="px-4 py-3">Role Title</th>
                  <th class="px-4 py-3">Role Guard</th>
                 @if(Auth::user()->can('role-edit')||Auth::user()->can('role-delete'))
                  <th class="px-4 py-3">Actions</th>
                  @endif
                </tr>
              </thead>
              <tbody
                class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800"
              >
              @unless (count($roles) == 0)
              @foreach ($roles as $role)
              <tr class="text-gray-700 dark:text-gray-400">
                <td class="px-4 py-3">
                  <div class="flex items-center text-sm">
                    
                    <div>
                      <p class="font-semibold">{{$role->name}}</p>
                      {{-- <p class="text-xs text-gray-600 dark:text-gray-400">
                        10x Developer
                      </p> --}}
                    </div>
                  </div>
                </td>
                <td class="px-4 py-3 text-sm">
                 {{$role->guard_name}}
                </td>
                {{-- <td class="px-4 py-3 text-xs">
                  <span
                    class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"
                  >
                    Approved
                  </span>
                </td> --}}
                <td class="px-4 py-3">
                  <div class="flex items-center space-x-4 text-sm">
                    @if(Auth::user()->can('role-edit'))
                    <a
                      href="{{route('roles.edit',$role->id)}}"
                      class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
                      aria-label="Edit"
                    >
                      <svg
                        class="w-5 h-5"
                        aria-hidden="true"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path
                          d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                        ></path>
                      </svg>
                    </a>
                    @endif
                    @if(Auth::user()->can('role-delete'))
                    <form action="{{route('roles.destroy',$role->id)}}" method="POST">
                      @csrf
                      @method('DELETE')
                    <button
                    onclick="return confirm('