@extends('layout.master')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <div class="main-content side-content pt-0">
        <div class="main-container container-fluid">
            <div class="inner-body">
            <div class="row p-5">
           <div class="col-md-3">
           <a href="{{ route('role.permission') }}" class="btn btn-primary mb-3">
                    <i class="fa-solid fa-plus"></i> {{ __('Create New Role') }}
                </a>
           </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header card-body table-border-style">
                            {{-- <h5></h5> --}}
                            <div class="table-responsive">
                                <table class="table" id="pc-dt-simple">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Role') }}</th>
                                            <th>{{ __('Permissions') }}</th>
                                            <th width="200px">{{ __('Action') }}</th>
                                        </tr>
                                    </thead>



                                    <tbody>
                                        @foreach ($roles as $role)
                                        <tr>
                                            <td>{{ $role->name }}</td>
                                            <td style="white-space: inherit">
                                                @foreach ($role->permissions()->pluck('name') as $permission)
                                                <span class="badge rounded p-2 m-1 px-3 bbtn">
                                                    <a href="#" style="font-family: monospace;font-weight: 500; color:#000">{{ $permission }}</a>
                                                </span>
                                                @endforeach
                                            </td>
                                            <td class="Action">

                                                   

                                                    <a href="{{ URL::to('role/' . $role->id . '/edit')}}" class="mx-3 btn btn-warning " ><i class="ti-pencil text-white"></i></a>

                                               

                                                     @can('role delete')
                                                        {!! Form::open(['method' => 'DELETE', 'route' => ['role.destroy', $role->id], 'id' => 'delete-form-' . $role->id]) !!}
                                                            <button type="submit" class="mx-3 btn btn-danger">
                                                              Delete
                                                            </button>
                                                        {!! Form::close() !!}
                                                    @endcan

                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    @if(Session::has('message'))
        var type = "{{ Session::get('alert-type', 'info') }}";
        switch(type){
            case 'info':
                toastr.info("{{ Session::get('message') }}");
                break;
            case 'warning':
                toastr.warning("{{ Session::get('message') }}");
                break;
            case 'success':
                toastr.success("{{ Session::get('message') }}");
                break;
            case 'error':
                toastr.error("{{ Session::get('message') }}");
                break;
        }
    @endif
</script>
@endsection('content')