@extends('admin.layouts.master')

@section('page_title', __('admin.Add New :name', ['name' => __('admin.Role')]))

@section('page_heading', __('admin.Add New :name', ['name' => __('admin.Role')]))

@section('page_text', __('admin.Add New :name', ['name' => __('admin.Roles')]))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Role')

@section('page_breadcrumb_item2', 'Add Role')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-flush">
                <div class="card-body">
                    <form id="signupForm" class="col-md-8 " method="post" action="{{ route('role.store') }}"
                        novalidate>
                        @csrf
                        <div class="d-flex flex-column mb-7 fv-row">

                            <label for="name" class="fs-6 fw-semibold mb-2">@lang('admin.Role')</label>

                            <input type="text" required class="form-control" maxlength="20" required id="name" name="name"
                                placeholder="" />
                        </div>
                        <div class="d-flex flex-column mb-7 fv-row">


                            <label for="guard_name" class="fs-6 fw-semibold mb-2">@lang('admin.Guard')</label>

                            <div>
                                <input type="text" required class="form-control" maxlength="10" id="guard_name"
                                    name="guard_name" placeholder="Guard Name (Web, Admin etc)" />
                            </div>
                        </div>
                        <div class="d-flex flex-column mb-7 fv-row">
                            <label for="level" class="fs-6 fw-semibold mb-2">Level</label>
                            <div>
                                <select name="level" required id="level" class="form-select " data-control="select2">
                                    <option value="" selected></option>
                                    @foreach ($levels as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="d-flex flex-column mb-7 fv-row">
                            <strong>Permission:</strong>
                            <div class="row mt-3">
                                @foreach ($permission as $value)
                                    <div class="col-4 ">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permission[]"
                                                id="permission-{{ $value->id }}" value="{{ $value->id }}">
                                            <label class="form-check-label" for="permission-{{ $value->id }}">
                                                {{ $value->name }} </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="d-flex flex-column mb-7 fv-row">
                            <div class="divider"></div>
                            <div class="clearfix">

                                <button type="submit" id="next-btn"
                                    class="btn-shadow btn-wide float-right   btn-hover-shine btn btn-primary">
                                    @lang('admin.Submit')
                                </button>
                                <a href="{{ route('role.index') }}" id="prev-btn"
                                    class="btn-shadow float-right btn-wide  mr-3 btn btn-outline-secondary">
                                    @lang('admin.Cancel')
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection