@extends('layouts.master')
@section('title') @lang('translation.form-layouts') @endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Forms @endslot
        @slot('title') Create Role @endslot
    @endcomponent

    <div class="row">
        <div class="col-xxl-6">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Create New Role</h4>
                </div><!-- end card header -->
                <div class="card-body">
                   <div class="live-preview">
                        <form action="{{ route('roles.store') }}" method="POST">
                            @csrf

                            <!-- RoleName -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="name" class="form-label">Role Name</label>
                                </div>
                                <div class="col-lg-9">
                                    <input id="name" name="name" type="text" 
                                    class="form-control @error('name') is-invalid @enderror"  
                                    placeholder="Enter role name" 
                                    required autofocus>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert"></span>
                                            <strong>{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>

                             <!-- Permission -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="permissions" class="form-label">Assign Permissions</label>
                                </div>
                                <div class="col-lg-9">
                                    @foreach ($permissions as $permission)
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" id="perm_{{ $permission->id }}" class="form-check-input"  required>
                                        <label class="form-check-label" for="perm_{{ $permission->id }}"> {{ $permission->name }} </label><br>
                                    @endforeach
                                </div>
                            </div>
                           
                            
                            <div class="text-end">
                                <a href="{{ route('roles.index') }}" class="btn btn-danger">Cancel</a>
                                <button type="submit" class="btn btn-primary">Add Role</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div><!--end row-->
@endsection