@extends('layout.master')
@section('content')

<style>
    tr{
        border-bottom: 1px solid #00882b;
    }
  
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <div style="margin-top: 10px">
            <a href="{{ route('role.create') }}" class="btn btn-primary mb-3" >
                <i class="fa fa-plus"></i> {{ __('Create New Role') }}
            </a>
        </div>


        <div class="card-header card-body table-border-style">
            <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">
                                    @php $counter = 0; @endphp

                                    @foreach ($role->permissions()->pluck('name') as $permission)
                                        @if ($counter % 3 === 0 && $counter !== 0)
                                            </div>
                                            <div class="d-block"> 
                                        @elseif ($counter === 0)
                                            <div class="d-block">
                                        @endif

                                        <span class="badge rounded p-2 m-1 px-3 bbtn">
                                            <a href="#" 
                                            style="font-family: 'Courier New', monospace; font-weight: 700; background-color: #00882b; color: #fff; text-decoration: none; padding: 10px 10px; display: inline-block; border-radius: 5px;">
                                                {{ $permission }}
                                            </a>
                                        </span>
                                        @php
                                            $counter++;
                                        @endphp

                                        @if ($loop->last)
                                            </div>
                                        @endif
                                    @endforeach
                                </td>
                                    <td>

                                    @can('role edit')

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

                                    @endcan

                                    @can('role delete')

                                    <form action="{{ route('role.destroy', $role->id) }}" method="POST" id="delete-form-{{ $role->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <a href="javascript:void(0);" 
                                           onclick="deleteConfirmation({{ $role->id }})" 
                                           class="mx-3 btn btn-danger">
                                            <i class="fa fa-trash text-white"></i>
                                        </a>
                                    </form>
                                    
                                    <script>
                                        function deleteConfirmation(roleId) {
                                            if (confirm('Kya aap waqai is role ko delete karna chahte hain?')) {
                                                document.getElementById('delete-form-' + roleId).submit();
                                            }
                                        }
                                    </script>
                                    
                                    @endcan

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

    </div>
</div>
@endsection

@push('scripts')
    <script>

        $(document).ready(function () {
            $('#save-stage2').DataTable({
                "lengthMenu": [[100, 500, 1000], [100, 500, 1000]]
            });
        });

    </script>
@endpush