@extends('backend.layouts.app')

@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Create Role</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
         <li class="breadcrumb-item"><a href="{{route('roles')}}">Role</a></li>

                                   <li class="breadcrumb-item active">Create Role</li>
         </ol>
      </div>
   </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-primary">

<!-- Flash Messages --           >
<!-- Include flash message handling if needed -->

<form action="{{ route('roles.store') }}" method="post" id="submit-page" enctype="multipart/form-data">
    @csrf

    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                    <label for="name">Name<span class="danger" style="color:red">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control stop_first_space" placeholder="Enter Name">
                    @if ($errors->has('name'))
                        <span class="invalid-feedback d-block">{{ $errors->first('name') }}</span>
                    @endif
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                    <label for="name">Permission<span class="danger" style="color:red">*</span></label><br/>
                    <label id="permission[]-error" class="error" for="permission[]" style="display: none;">Please select at least one permission.</label>
                    <label>
                    <div class="custom-control custom-checkbox"  onclick='selects()' >
                                                    <input type="checkbox"

                                                                                                                 class="custom-control-input" id="select-all">
                                                    <label class="custom-control-label" for="select-all">
                                                    Select All
                                                    </label>
                                                    <br/>
                                                </div>


                                </label>
                                  <div class="row">
                        @foreach($permission as $key => $data)


                        @php $strippedName = config('constant.manager')[$key]; @endphp
                        @if($strippedName != "Testimonial" && $strippedName != "FAQ" &&  $strippedName != ['Newsletter'] &&  $strippedName != "Subscription" && $strippedName !="Newsletter Subscription" )
                            <div class="col-md-3">
                                <h4 class="mt-3" style="margin-bottom: 5%;">
                                    <b>{{ $strippedName }}</b>
                                </h4>

                                @foreach($data as $k => $value)
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" name="permission[]" value="{{ $value->permission_id }}" class="custom-control-input" id="permission-{{ $value->permission_id }}">
                                    <label class="custom-control-label" for="permission-{{ $value->permission_id }}">
                                        {{ $value->permission->name }}
                                    </label>
                                  </br>
                                </div>



                                @endforeach
                            </div>
                            @endif
                        @endforeach
                    </div>
                    @if(session()->has('permission_error'))
                        <span class="invalid-feedback d-block">{{ session()->get('permission_error') }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="card-footer">
        <button id="submit-page-btn" class="btn btn-primary btn-flat submit-form" type="submit">
            <i class="fa fa-fw fa-save"></i> Submit
        </button>
    </div>
</form>

            </div>
        </div>
    </div>
</div>
<script>
       function selects() {
    // Get the "Select All" checkbox
    var selectAllCheckbox = document.getElementById('select-all');
    // Get all checkboxes with the name 'permission[]'
    var checkboxes = document.getElementsByName('permission[]');

    // Loop through all checkboxes and set their checked state based on the "Select All" checkbox
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type === 'checkbox') {
            checkboxes[i].checked = selectAllCheckbox.checked;
        }
    }
}
     document.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            $.validator.addMethod("regex", function(value, element, regexp) {
                var re = new RegExp(regexp);
                return this.optional(element) || re.test(value);
            }, "Please check your input.");


            // Validate the create form
            $('#submit-page').validate({
                rules: {
                                name: {
                        required: true,
                        maxlength: 50
                    },
                    'permission[]': {
                        required: true
                    }
                },
                errorClass: "error",
                highlight: function(element) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                },
                submitHandler: function(form) {
                    $(form).find('button[type="submit"]').attr("disabled", true);
                    form.submit();
                }
            });


        });
    });
</script>
@stop


