@extends('layouts.master')
@section('title') Create Role @endsection
@section('css')
 <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/css/slimselect.min.css')}}">


@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') Create Role  @endslot
@endcomponent
<style>
.form-control{
	color: #314667 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.disable{
   cursor: not-allowed;
   pointer-events: none;
}
.divs{
    border:2px solid black;
}
.success-msg,
            .error-msg {
              margin: 10px 0;
              padding: 10px;
              border-radius: 3px 3px 3px 3px;
            }
            .error-msg {
              color: #D8000C;
              background-color: #FFBABA;
            }
            .success-msg {
              color: #270;
              background-color: #DFF2BF;
            }

</style>

<div class="row">
    <div class="col-12">
        <div class="card mb-2">
           <div class="card-body">

                               @if (Session::get('error'))
                                    <div class="error-msg alert">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <i class="fa fa-times-circle"></i>
                                        {{ Session::get('error') }}
                                    </div>
                                @endif

                                  <!-- For Success Messages -->
                                @if (Session::get('success'))
                                <div class="success-msg alert">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    <i class="fa fa-check"></i>
                                    {{ Session::get('success') }}
                                </div>
                                @endif


            <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('roles.store')}}" novalidate>
                 @csrf

                      <div class="form-group row mb-4">
                       <label for="projectname" class="col-form-label col-lg-2">Role</label>
                       <div class="col-lg-10">
                         <input type="text" class="form-control" name="title" id="title" placeholder="Enter title" value="{{ old('title') }}" required>
                           @if($errors->has('title'))
                            <div class="error">{{ $errors->first('title') }}</div>
                            @endif

                       </div>
                     </div>


<!--
                    <div class="form-group">
                        <label for="formrow-quest_name-input"></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" id="title" placeholder="Enter title" value="{{ old('title') }}" required>{!! $errors->first('title', '<span class="help-block" style="width: 100%;
    margin-top: 0.25rem; font-size: 80%;  color: #f46a6a;">:message</p>') !!}
                        <div class="invalid-feedback">
                          Please Enter Role Name
                        </div>
                    </div> -->
                <div class="form-group row mb-4">
                <label for="projectname" class="col-form-label col-lg-2">Permissions</label>
                <div class="col-lg-10">
                <div class="row ">
                        <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                        <ul class="permission-tree m-0 p-0 list-unstyled float-start">

                        <li class="d-inline-block">
                        <input type="checkbox" class="checkboxclass1" id="checkboxclass1">
                        <label for="checkboxclass1"><b>Admin Panel</b></label><br>
                        <p id="checkBoxes">
                        @foreach($admin as $role)
                                <input type="checkbox" class="checkbox_main1" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                @endforeach
                        </p>

                        </ul>
                        </div>
                        <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                        <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                            <li class="d-inline-block">
                                <input type="checkbox"  class="checkboxclass2" id="checkboxclass2">
                                <label for="checkboxclass2"><b>All Roles</b></label>
                            <li>
                                @foreach($roles as $role)
                                <input type="checkbox"  class="checkbox_main2" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                @endforeach
                            </li>
                            </li>
                        </ul>
                        </div>

                        <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                            <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                <li class="d-inline-block">
                                    <input type="checkbox"  class="checkboxclass3" id="checkboxclass3">
                                    <label for="checkboxclass3"><b>All Permissions</b></label>
                                <li>
                                    @foreach($permissions as $role)
                                    <input type="checkbox" class="checkbox_main3" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                    <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                    @endforeach
                                </li>
                                </li>
                            </ul>
                            </div>

                            <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                                <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                    <li class="d-inline-block">
                                        <input type="checkbox"  class="checkboxclass4" id="checkboxclass4">
                                        <label for="checkboxclass4"><b>All Admin-Users</b></label>
                                    <li>
                                        @foreach($admin_users as $role)
                                        <input type="checkbox" class="checkbox_main4" name="permissions[]"  value="{{ $role->id }}" id="{{ $role->id }}">
                                        <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                        @endforeach
                                    </li>
                                    </li>
                                </ul>
                                </div>

                            <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                                <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                    <li class="d-inline-block">
                                        <input type="checkbox"  class="checkboxclass5" id="checkboxclass5">
                                        <label for="checkboxclass5"><b>All Campaign</b></label>
                                    <li>
                                        @foreach($campaign as $role)
                                        <input type="checkbox" class="checkbox_main5" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                        <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                        @endforeach
                                    </li>
                                    </li>
                                </ul>
                                </div>


                            <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                                <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                    <li class="d-inline-block">
                                        <input type="checkbox" class="checkboxclass6" id="checkboxclass6">
                                        <label for="checkboxclass6"><b>All Donors</b></label>
                                    <li>
                                        @foreach($donors as $role)
                                        <input type="checkbox"  class="checkbox_main6" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                        <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                        @endforeach
                                    </li>
                                    </li>
                                </ul>
                                </div>


                            <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                                <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                    <li class="d-inline-block">
                                        <input type="checkbox" class="checkboxclass7" id="checkboxclass7">
                                        <label for="checkboxclass7"><b>All Reports</b></label>
                                    <li>
                                        @foreach($reports as $role)
                                        <input type="checkbox"  class="checkbox_main7" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                        <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                        @endforeach
                                    </li>
                                    </li>
                                </ul>
                                </div>


                            <div class="col-md-3 divs mr-3 mb-2 ml-1 p-2">
                                <ul class="permission-tree m-0 p-0 list-unstyled float-start">
                                    <li class="d-inline-block">
                                        <input type="checkbox" class="checkboxclass8" id="checkboxclass8">
                                        <label for="checkboxclass8"><b>All Settings</b></label>
                                    <li>
                                        @foreach($settings as $role)
                                        <input type="checkbox" class="checkbox_main8" name="permissions[]" value="{{ $role->id }}" id="{{ $role->id }}">
                                        <label for="{{ $role->id }}">{{ $role->title}}</label><br>
                                        @endforeach
                                    </li>
                                    </li>
                                </ul>
                                </div>
                        </div>
                    </div>
            </div>

                       <div class="row justify-content-end">
                        <div class="col-lg-10">
                                <button class="btn btn btn-success" type="submit" id="save">Create Role</button>
                                <a href="../roles" class="btn btn-danger">Cancel</a>
                         </div>
                        </div>

                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function(){
        $("form[name='frm1']").validate({

            rules: {
              title: "required",
            },
            // Specify validation error messages
            messages: {
              title: "Please provide a role",

            },
            submitHandler: function(form) {
              form.submit();
            }
          });



     $(".checkboxclass1").click(function () {
       $(".checkbox_main1").prop('checked', $(this).prop('checked'));
    });
    $(".checkboxclass2").click(function () {
       $(".checkbox_main2").prop('checked', $(this).prop('checked'));
    });

    $(".checkboxclass3").click(function () {
       $(".checkbox_main3").prop('checked', $(this).prop('checked'));
    });

    $(".checkboxclass4").click(function () {
       $(".checkbox_main4").prop('checked', $(this).prop('checked'));
    });

    $(".checkboxclass5").click(function () {
       $(".checkbox_main5").prop('checked', $(this).prop('checked'));
    });
    $(".checkboxclass6").click(function () {
       $(".checkbox_main6").prop('checked', $(this).prop('checked'));
    });
    $(".checkboxclass7").click(function () {
       $(".checkbox_main7").prop('checked', $(this).prop('checked'));
    });
    $(".checkboxclass8").click(function () {
       $(".checkbox_main8").prop('checked', $(this).prop('checked'));
    });
});
</script>
@endsection