@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('manager/manager.role_management')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="{{$aliasVal}}/home">{{trans('manager/manager.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{$aliasVal}}/role">{{trans('manager/manager.role')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($manager) && ($manager->id))
                        {{trans('manager/manager_create.edit_role')}}
                    @else
                        {{trans('manager/manager_create.add_new_role')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($role, ['method' => isset($role) && $role->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('manager/manager_create.role_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('manager/manager_create.add_role_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#account-details-vertical" role="tab" id="account-details-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('manager/manager_create.role_permissions')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('manager/manager_create.add_role_permissions')}}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('manager/manager_create.role_details')}}</h5>
                        <small class="text-muted">{{trans('manager/manager_create.enter_role_details')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="name">{{trans('manager/manager_create.role_name')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('name', isset($role) && $role->name ? $role->name : old('name'), ['class' => 'form-control', 'id' => 'name']) !!} {!! $errors->first('name', '
                                    <label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('description') ? 'has-error' : '' }}}">
                                <label class="form-label" for="description">{{trans('manager/manager_create.role_description')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('description', isset($role) && $role->description ? $role->description : old('description'), ['class' => 'form-control', 'id' => 'description']) !!} {!! $errors->first('description', '
                                    <label class="error" for="description">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('manager/manager_create.status')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="status" required>
                                @foreach($roleStatus as $val)
                                    <option value="{{$val}}"  @if(isset($role) && ($role->status == $val) || (old('status') == $val)) selected @endif>{{ucwords($val)}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('manager/manager_create.previous')}}</span>
                            </button>
                            <button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('manager/manager_create.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="account-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="account-details-vertical-trigger" style="">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('manager/manager_create.this_role_can')}}</h5>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-6" onclick="select_unselect_all()">
                            <input class="form-check-input" id="permissions_all" name="permissions_all" value="0" type="checkbox">
                            <label for="permissions_all" class="form-check-label">All</label>
                        </div>
                        @foreach($modules as $module)
                            <div class="col-md-12 col-3">
                                @foreach($module->sub_menu as $sub_module)
                                    @if (count($sub_module->permissions)>0)
                                        <br/><hr/>
                                        <label for="permission{{$module->id}}" class="form-check-label mb-1"> <span class="fw-bold">Module :</span> {{$module->name}} <span class="fw-bold">& Sub Module :</span> {{$sub_module->name}}</label><br/>
                                    @endif
                                    @foreach($sub_module->permissions as $perm)
                                        <input class="form-check-input permissions_" name="permissions[]" value="{{$perm->id}}" id="permission{{$perm->id}}" @if($role && $role->can_role($perm->alias)) checked @endif type="checkbox">
                                        <label for="permission{{$perm->id}}" class="form-check-label">{{$perm->name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    @endforeach
                                @endforeach
                            </div>                                    
                        @endforeach
                    </div>
                    <br><br><br>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('manager/manager_create.previous')}}</span>
                            </button>
                            <button type="submit" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('manager/manager_create.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->
<script type="text/javascript">
    function select_unselect_all() {
        let x = document.querySelector(`#permissions_all`);
        if (x.checked) {
            document.querySelectorAll(`.permissions_`).forEach(element => {
                element.checked = true;
            });
        } else {
            document.querySelectorAll(`.permissions_`).forEach(element => {
                element.checked = false;
            });
        }
    }
</script>
@endpush