@extends('Centaur::layout')

@section('title',  __('basic.role.mn'))

@section('content')
<section class="pageSection">
    <header class="page-header">
        <div class="pageTitle">
            <h1>@lang('basic.role.mn')</h1>
        </div>
        <div class="optionContainer">
            <div class="dropdownContainer">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ URL::asset('images/Basic/Download.svg')}}" alt="Download" class="" height="20px" loading="lazy" />
                    Export
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li>
                        <a href="{{ route('roles.index') }}" class="dropdown-item " media="print" onclick="window.print();return false;">
                            <span class="icon icon_print" aria-hidden="true" ></span>Print
                        </a>
                    </li>
                </ul>
            </div>
            @if (Sentinel::getUser()->hasAccess(['roles.create']) )
                <div class="createButton">
                    <a class="btn btn-primary btn_create" href="{{ route('roles.create') }}" data-bs-toggle="modal" data-bs-target="#myModal" data-title="{{ __('basic.create') . ' ' .  __('basic.role.gen')}}">
                        <span class="icon icon_plus_wh"></span>
                    </a>
                </div>
            @endif
        </div>
    </header>
    <main class="page-main">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 d-flex flex-wrap">
                <table class="table table-hover dataTable paginationTable orderingTable nofilter w-100" id="dataTable">
                    <thead>
                        <tr>
                            <th>@lang('basic.name')</th>
                            <th>@lang('basic.slug')</th>
                            <th class="col-8" style="width: 50%">@lang('basic.permissions')</th>
                            <th class="not_sortable">@lang('basic.options')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($roles as $role)
                            <tr class="">
                                <td class="align-top">{{ $role->name }}</td>
                                <td class="align-top">{{ $role->slug }}</td>
                                <td class="align-top">
                                    <p class="">
                                        @if ($role->permissions)
                                            @php
                                                $i = 1;
                                            @endphp
                                            @foreach ($role->permissions as $key => $permission)
                                                <span class="{!! $i > 10 ? 'hidden_role_' . $role->id . ' d-none' : '' !!}">{{ $key }}<span>{!! $i < count($role->permissions) ? ', ': '' !!}</span></span>
                                                @php
                                                    $i++;
                                                @endphp
                                            @endforeach
                                            @if (count($role->permissions) > 10)
                                                ...<span class="icon icon_hide showHiddenClass" data-show="hidden_role_{{$role->id}}"></span>
                                            @endif
                                        @endif
                                        {{-- {!! $role->permissions ? implode(", ", array_keys($role->permissions)) : '' !!} --}}
                                    </p>
                                </td>
                                <td class="not_sortable align-top">
                                    <div class="dropdownContainer">
                                        <p class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <span class="icon icon_more more_vertical"></span>
                                        </p>
                                        @if (Sentinel::getUser()->hasAccess(['roles.update']) || Sentinel::getUser()->hasAccess(['roles.delete']))
                                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                @if (Sentinel::getUser()->hasAccess(['roles.update']) )
                                                    <li>
                                                        <a href="{{ route('roles.edit', $role->id) }}" class="btn btn_edit" data-bs-toggle="modal" data-bs-target="#myModal" data-title="{{ __('basic.edit') . ' ' . __('basic.role.ak') }}">
                                                            <span class="icon icon_edit"></span>
                                                            @lang('basic.edit')
                                                        </a>
                                                    
                                                    </li>
                                                @endif
                                                @if (Sentinel::getUser()->hasAccess(['roles.delete']) && ! $userRoleIds->contains($role->id))
                                                    <li>
                                                        <a href="{{ route('roles.destroy', $role->id) }}" class="btn btn_delete danger action_confirm" data-method="delete" data-token="{{ csrf_token() }}">
                                                            <span class="icon icon_delete"></span>
                                                            @lang('basic.delete')
                                                        </a>
                                                    </li>
                                                @endif
                                            </ul>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</section>
@stop