@extends('backend.layouts.app')
@section('content')
<div class="row mx-auto">
    <div class="col-sm-9">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ translate('Role Details') }}</h4>
                
            </div>
            <div class="card-body">
            <form action="{{ route('role.store') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <x-input-component name="name" label="Role Name" value="" type="text" :required="1"/>

                <div class="row">
                    <div class="col-md-12">
                        <h5 class="mb-3 mt-3">Pemissions</h5>
                    </div>
                </div>
                
                @foreach($permission as $value)
                    <ul class="list-group mb-4">
                        <li class="list-group-item bg-light" aria-current="true">{{ translate(Str::headline($value[0]['section'])) }}</li>
                        <li class="list-group-item">
                            <div class="row">
                                @foreach ($value as $key => $per)
                                    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                        <div class="p-2 border mt-1 mb-2">
                                            <label class="control-label d-flex">{{ translate(Str::headline($per->name)) }}</label>
                                            <label class="rns-switch rns-switch-primary">
                                                <input type="checkbox" name="permission[]" class="form-control demo-sw" value="{{ $per->name }}">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </li>
                    </ul>
                @endforeach
                
                <div class="text-end">
                    <button type="submit" class="btn btn-primary">Add Role</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
@endsection