@extends('layout')
@section('content')
    <!-- begin::main content -->
    <main class="main-content">
        <div class="container">
            <!-- begin::page header -->
            <div class="page-header">
                <h3>{{ __('message.role') }}</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">{{ __('message.dashboard') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('message.role') }}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">
                
                    <div class="card-header">
                        <a href="{{ asset('add-role') }}" class="btn btn-primary text-uppercase text-white">
                            <i class="fa fa-plus text-white pr-2"></i>{{ __('message.role') }}
                        </a>
                    </div>
            
                <div class="card-body">
                    <table id="example1" class="table table-striped table-bordered">
                        
                        <thead>
                            <tr>
                                <th>{{ __('message.id') }}</th>
                                <th>{{ __('message.name') }}</th>
                                <th>{{ __('message.slug') }}</th>
                                @if (Auth::user()->can('view-role-permission') || Auth::user()->type=="superadmin")
                                    <th>{{ __('message.permission') }}</th>
                                @endif
                                <th style="width:200px;">{{ __('message.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($roles))
                                @foreach ($roles as $role)
                                    <tr>
                                        <td>{{ $role->id }}</td>
                                        <td>{{ $role->name }}</td>
                                        <td>{{ $role->slug }}</td>
                                        @if (Auth::user()->can('view-role-permission') || Auth::user()->type=="superadmin")
                                            <td>
                                                <a class="btn btn-square btn-dark text-white"
                                                    href="{{ asset('permission/' . $role->id) }}">
                                                    <i class="fa fa-plus fa-lg"></i>
                                                </a>
                                            </td>
                                        @endif
                                        <td>
                                            <div class="btn-group">
                                                {{-- Edit --}}
                                                @if (Auth::user()->can('edit-role') || Auth::user()->type=="superadmin")
                                                    <a class="btn btn-square btn-success text-white"
                                                        href="{{ asset('edit-role/' . $role->id) }}">
                                                        <i class="fa fa-edit text-white fa-lg"></i>
                                                    </a>
                                                @endif
                                                {{-- Delete --}}
                                                @if (Auth::user()->can('delete-role') || Auth::user()->type=="superadmin")
                                                    <a class="btn btn-square btn-danger text-white delete-confirm"
                                                        href="javascript:;"
                                                        link="{{ asset('delete-role/' . $role->id) }}">
                                                        <i class="fa fa-trash text-white fa-lg"></i>
                                                    </a>
                                                @endif

                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <!-- begin::dataTable -->
    <script src="{{ asset('public/admin/vendors/dataTable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('public/admin/vendors/dataTable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('public/admin/vendors/dataTable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('public/admin/js/examples/datatable.js') }}"></script>
    <!-- end::dataTable -->
@endpush