@extends('layouts.master')

@section('body')
    <div class="flex justify-between">
        <h3 class="text-orange-400 text-base md:text-3xl font-medium">Roles</h3>
        @permission('create_role')
            <div class="flex">
                <a href="{{ route('roles.create') }}"
                    class="flex items-center justify-center text-xs md:text-base px-1 py-2 md:!px-4 md:!py-2 bg-orange-500 text-white rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="10"
                        height="10">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" />
                    </svg>
                    Yenisini yarat
                </a>
            </div>
        @endpermission
    </div>
    <div class="flex flex-col mt-8">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
                <table class="min-w-full text-center">
                    <thead>
                        <tr>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Adı
                            </th>
                            <th
                                class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                Tənzimlə
                            </th>
                        </tr>
                    </thead>

                    <tbody class="bg-white">
                        @foreach ($roles as $role)
                            <tr>
                                <td
                                    class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                    {{ $role->name }}
                                </td>
                                <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5">
                                    @permission('edit_role')
                                        <a href="{{ route('roles.edit', $role->id) }}">
                                            Düzəliş et
                                        </a>
                                    @endpermission
                                    @permission('delete_role')
                                        <form action="{{ route('roles.destroy', $role->id) }}" method="POST"
                                            class="inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" onclick="return confirm('Silmək istədiyinizdən əminsiniz?')"
                                                class="text-red-500 hover:text-red-700 text-xs md:text-base">
                                                / Sil
                                            </button>
                                        </form>
                                    @endpermission
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@if (session('success'))
    @section('script')
        <script>
            toastr.options = {
                "progressBar": true,
                "closeButton": true
            }
            toastr.success("{{ session('success') }}", "Uğurlu!");
        </script>
    @endsection
@endif
@if (session('error'))
    @section('script')
        <script>
            toastr.options = {
                "progressBar": true,
                "closeButton": true
            }
            toastr.error("{{ session('error') }}", "Xəta!");
        </script>
    @endsection
@endif