@extends('layouts.back-end.body')
@section('content')
<style>
    .header-txt{
        border: solid 1px;
        background-color: gainsboro;
        padding: 10px;
        margin-bottom: 15px;
        font-weight: 400;
        font-size: 16px;
    }
    .list-header{
        color: #708090;
    }
    .form-check-label{
        color: black !important;
    }
    .permission-title{
        text-align:center;
        margin-bottom: 1.5rem;
        padding: 10px;
    }
    @media (max-width: 576px) { 
        .header-txt{
            display:none;
        }
    }
    @media (max-width: 768px) { 
        .header-txt{
            display:none;
        }
    }
</style>
<div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
		<div class="row g-3 align-items-center justify-content-between">
			<div class="col-auto">
            <h1 class="app-page-title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
  <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
</svg> <span class="sub-navicate">{{ __('message.role') }} <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
            <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg> {!! $role->name !!} </h1></span>
			</div>
			<div class="col-auto no-padding-margin" id="back-to-list">
                        <div class="page-utilities">
                            <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                                <div class="col-auto">
                                    <div class="table-search-form row gx-1 align-items-center">
                                        <div class="col-auto">
                                        <a href="{{route('roles.index')}}"><button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                </svg> {{ __('message.go back') }}</button></a>
                                        </div>
                                    </div>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//table-utilities-->
                    </div><!--//col-auto-->
			</div>
		</div>

        <div class="app-card app-card-notification shadow-sm mb-4">
            <div class="app-card-body p-4 input-p-4">
                <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding" style="text-align:left;padding: 15px 45px;">
                    <label class="permission-title"><h4>{{ __('message.permissions') }}</h4></label>

                    <!-- <div class="col-lg-3 col-md-3 col-sm-3 header-txt"><span class="list-header">List</span></div>
                    <div class="col-lg-3 col-md-3 col-sm-3 header-txt"><span class="list-header">Create</span></div>
                    <div class="col-lg-3 col-md-3 col-sm-3 header-txt"><span class="list-header">Edit</span></div>
                    <div class="col-lg-3 col-md-3 col-sm-3 header-txt"><span class="list-header">Delete</span></div> -->
                    @foreach($rolePermissions as $v)
                        <div class="form-check mb-3 col-lg-3 col-md-3 col-sm-3" style="border:solid 1px;">
                            <input class="form-check-input" type="checkbox" disabled="" style="margin-left: -20px;" value="" id="settings-checkbox-1" checked="">
                            <label class="form-check-label" for="settings-checkbox-1" style="opacity: unset;">
                                {!! $v->name !!}
                            </label>
                        </div>
                    @endforeach	
                </div>
            </div>
        </div>
	</div>
</div>
@endsection