@extends('admin.layout.main')
@section('title', @trans('rolePermission.addRolePermission'))
  
@section('content')
  
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 align-items-center d-flex breadcrumb-style">
              <h1 class="m-0">@lang('rolePermission.addRolePermission')</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('rolePermission.dashboard') </a></li>
                <li class="breadcrumb-item"><a href="{{ route('role-permission.index') }}">@lang('rolePermission.moduleHeading')</a></li>
                <li class="breadcrumb-item active">@lang('rolePermission.add')</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 w-100 px-3 py-2">
              <form method="post" action="{{route('role-permission.store')}}" class="form row mb-0 pt-3 validate"id="dataForm" enctype="multipart/form-data">
              @csrf
                <div class="col-md-6">
                  <div class="">
                    <div class="form-item form-float-style">
                      <input type="text" id="name" name ="name" autocomplete="off" required value="">
                      <label for="rolname">@lang('rolePermission.rollName') <span class="req-star">*</span></label>
                    </div>
                  </div>

                  <div class="">
                    <!-- <div class="form-item"> -->
                    
                    <div class="form-floating form-float-style form-group required mb-3">
                        <div class="form-item form-float-style serach-rem mb-3">
                          <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" name="status" id="status" class="order-td-input selectpicker select-text height_drp is-valid">
                              <option value="1" selected>@lang('rolePermission.active')</option>
                              <option value="0">@lang('rolePermission.inActive')</option>
                            </select>
                            <label class="select-label searchable-drp" style="font-size: 12px; font-weight: 400 !important;">@lang('rolePermission.status')</label>
                          </div>                        
                        </div>
                    </div>
                    <!-- </div> -->
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="">
                    <div class="form-item form-float-style mb-3">
                      <!-- <textarea type="text" id="comment" autocomplete="off" required="" value=""></textarea> -->
                      <textarea type="text" id="meta_description" name="description" autocomplete="off" required=""></textarea>
                      <label for="comment">@lang('rolePermission.roleDescription') <span class="req-star">*</span></label>
                    </div>
                  </div>
                </div>


                <div class="mb-3">
                  <div class="discount mt-3">
                    <div class="">
                      <div class="table-card ">
                        <!-- /.card-header -->
                        <div class="card-body table-radius table-responsive p-0">
                          <table class="table table-head-fixed text-nowrap">
                            <thead class="td-data-color">
                              <tr>
                                <th class="">
                                  <!-- <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1"> -->
                                  <!-- <span>@lang('rolePermission.selectAll')</span> -->
                                  <span>Module</span>
                                </th>
                                
                                <th>@lang('rolePermission.add')</th>
                                <th>@lang('rolePermission.view')</th>
                                <th>@lang('rolePermission.edit')</th>
                                <th>@lang('rolePermission.delete')</th>
                                <th>@lang('rolePermission.import')</th>
                                <th>@lang('rolePermission.export')</th>
                              </tr>
                            </thead>
                            <tbody class="td-data-color th-data-color">

                            @foreach($getModuleList as $module)
                              <tr>
                                 <th class="">
                                 
                                  <!-- <input class="form-check-input" type="checkbox" value="" name="check" > -->
                                  {{ $module->module_name }}
                                </th> 
                                <td class=""><label class="switch">
                                    <input type="checkbox" name="module[{{$module->module_code}}][create]" class="{{$module->group_code}}_create_box" id="{{$module->module_code}}_create_box" data-module="{{$module->module_code}}" onchange="myCreateFunction($(this).attr('data-module'));">
                                    <span class="slider"></span>
                                  </label></td>
                                <td class=""><label class="switch">
                                    <input type="checkbox"  name="module[{{$module->module_code}}][read]" class="{{$module->group_code}}_read_box" id="{{$module->module_code}}_read_box" data-read="{{$module->module_code}}" onchange="myReadFunction($(this).attr('data-read'));">
                                    <span class="slider"></span>
                                  </label></td>
                                <td class=""><label class="switch">
                                    <input type="checkbox" name="module[{{$module->module_code}}][update]" class="{{$module->group_code}}_update_box" id="{{$module->module_code}}_update_box" data-module="{{$module->module_code}}" onchange="myUpdateFunction($(this).attr('data-module'));">
                                    <span class="slider"></span>
                                  </label></td>
                                <td class=""><label class="switch">
                                    <input type="checkbox" name="module[{{$module->module_code}}][delete]" class="{{$module->group_code}}_delete_box" id="{{$module->module_code}}_delete_box" data-module="{{$module->module_code}}" onchange="myDeleteFunction($(this).attr('data-module'));">
                                    <span class="slider"></span>
                                  </label></td>
                                <td class="">
                                @if(($module['module_code'] == 'PRODUCTS') || ($module['module_code'] == 'PRODUCT_ATRRIBUTES'))
                                <label class="switch">
                                    <input type="checkbox" name="module[{{$module->module_code}}][import]" class="{{$module->group_code}}_import_box" id="{{$module->module_code}}_import_box" data-module="{{$module->module_code}}" onchange="myImportFunction($(this).attr('data-module'));">
                                    <span class="slider"></span>
                                  </label>
                                @else
                                @endif
                                </td>
                                <td class="">
                                @if(($module['module_code'] == 'CATEGORIES') || ($module['module_code'] == 'PRODUCTS') || ($module['module_code'] == 'PRODUCT_ATRRIBUTES') || ($module['module_code'] == 'USERS'))
                                <label class="switch">
                                    <input type="checkbox" name="module[{{$module->module_code}}][export]" class="{{$module->group_code}}_export_box" id="{{$module->module_code}}_export_box" data-module="{{$module->module_code}}" onchange="myExportFunction($(this).attr('data-module'));">
                                    <span class="slider"></span>
                                  </label>
                                @else
                                @endif
                                </td>
                              </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </div>
                        <!-- /.card-body -->
                      </div>
                      <!-- /.card -->
                    </div>
                  </div>
                </div>


                <div class="cards-btn">
                  <button type="submit" id = "disBtn" class="btn btn-success form-btn-success">@lang('rolePermission.submit')</button>
                  <!-- <button type="button" class="btn btn-danger form-btn-danger">Cancel</button> -->
                  <a href="{{ route('role-permission.index') }}" class="btn btn-danger form-btn-danger">@lang('rolePermission.cancel')</a>
                </div>

              </form>



            </div>
            <!-- /.row -->
          </div>
          <!--/. container-fluid -->
      </section>
  @endsection
  @section('js')
  <!-- Page specific script -->
  <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script> 
  <script>
      function myCreateFunction(elem)
      {
        if($('#'+elem+'_create_box').is(":checked"))
        {
          $('#'+elem+'_read_box').prop('checked',true);
        }
        
      }
      function myReadFunction(elem)
      {
        $('#'+elem+'_create_box').prop('checked',false);
        $('#'+elem+'_delete_box').prop('checked',false);
        $('#'+elem+'_update_box').prop('checked',false);
        $('#'+elem+'_import_box').prop('checked',false);
        $('#'+elem+'_export_box').prop('checked',false);
      }
      function myUpdateFunction(elem)
      {
        if($('#'+elem+'_update_box').is(":checked"))
        {
          $('#'+elem+'_read_box').prop('checked',true);
        }
      }
      function myDeleteFunction(elem)
      {
        if($('#'+elem+'_delete_box').is(":checked"))
        {
          $('#'+elem+'_read_box').prop('checked',true);
        }
      }
      function myImportFunction(elem)
      {
        if($('#'+elem+'_import_box').is(":checked"))
        {
          $('#'+elem+'_read_box').prop('checked',true);
        }
        
      }
      function myExportFunction(elem)
      {
        if($('#'+elem+'_export_box').is(":checked"))
        {
          $('#'+elem+'_read_box').prop('checked',true);
        }
        
      }
      $("#SETTINGS_read_box").click(function() {
        if ($(this).is(":checked")) {
          console.log('hello');
          // $(":checkbox:is('.SETTINGS_read_box')").prop('checked', $(this).is(':checked'));
          $('.SETTINGS_read_box').prop('checked',true);
        } else {
          console.log('else');
          // $("#SETTINGS_read_box").prop('checked', $(":checkbox:not('#SETTINGS_read_box'):checked").length);
          $('.SETTINGS_read_box').prop('checked',false);
          $('.SETTINGS_create_box').prop('checked',false);
          $('.SETTINGS_update_box').prop('checked',false);
          $('.SETTINGS_delete_box').prop('checked',false);
        }
      });
      $("#SETTINGS_create_box").click(function() {  
        if ($(this).is(":checked")) {
          // $(":checkbox:is('.SETTINGS_create_box')").prop('checked', $(this).is(':checked'));
          $('.SETTINGS_create_box').prop('checked',true);
          $('.SETTINGS_read_box').prop('checked',true);
        } else {
          // $("#SETTINGS_create_box").prop('checked', $(":checkbox:not('#SETTINGS_create_box'):checked").length);
          $('.SETTINGS_create_box').prop('checked',false);
        }
      });
      $("#SETTINGS_update_box").click(function() {
        if ($(this).is(":checked")) {
          // $(":checkbox:is('.SETTINGS_update_box')").prop('checked', $(this).is(':checked'));
          $('.SETTINGS_update_box').prop('checked',true);
          $('.SETTINGS_read_box').prop('checked',true);
        } else {
          // $("#SETTINGS_update_box").prop('checked', $(":checkbox:not('#SETTINGS_update_box'):checked").length);
          $('.SETTINGS_update_box').prop('checked',false);
        }
      });
      $("#SETTINGS_delete_box").click(function() {
        if ($(this).is(":checked")) {
          // $(":checkbox:is('.SETTINGS_delete_box')").prop('checked', $(this).is(':checked'));
          $('.SETTINGS_delete_box').prop('checked',true);
          $('.SETTINGS_read_box').prop('checked',true);
        } else {
          // $("#SETTINGS_delete_box").prop('checked', $(":checkbox:not('#SETTINGS_delete_box'):checked").length);
          $('.SETTINGS_delete_box').prop('checked',false);
        }
      });
      // $("#SETTINGS_import_box").click(function() {
      //   if ($(this).is(":checked")) {
      //     // $(":checkbox:is('.SETTINGS_import_box')").prop('checked', $(this).is(':checked'));
      //     $('.SETTINGS_import_box').prop('checked',true);
      //   } else {
      //     // $("#SETTINGS_import_box").prop('checked', $(":checkbox:not('#SETTINGS_import_box'):checked").length);
      //     $('.SETTINGS_import_box').prop('checked',false);
      //   }
      // });
      // $("#SETTINGS_export_box").click(function() {
      //   if ($(this).is(":checked")) {
      //     // $(":checkbox:is('.SETTINGS_export_box')").prop('checked', $(this).is(':checked'));
      //     $('.SETTINGS_export_box').prop('checked',true);
      //   } else {
      //     // $("#SETTINGS_export_box").prop('checked', $(":checkbox:not('#SETTINGS_export_box'):checked").length);
      //     $('.SETTINGS_export_box').prop('checked',false);
      //   }
      // });
      
      
  </script>
  <script>
    document.getElementById('flexCheckDefault1').onclick = function () {
      var checkboxes = document.getElementsByName('check');
      for (var checkbox of checkboxes) {
        checkbox.checked = this.checked;
      }
    }
    </script>
  <script>
    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    $(function () {        
      //jquery Form validation
      $('#dataForm').validate({
          onkeyup: false, //turn off auto validate whilst typing
        rules: {
          name: {
            required: true,
            noSpace:true,
            lettersonly: true,
            remote: {
                url: "{{route('admin.role-permission.checkExist')}}",
                type: "post",
                data: {
                  name: function() {
                    return $("#name").val();
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }
            
          },
          description: {
            required: true,
            maxlength: 300
            //noSpace:true
            // lettersonly: true
          },
        },
        messages: {
          name: {
            required: "Please Enter Roll Name",
            remote: "Role Name is already taken"

          },
          description: {
            required: "Please Enter Description",
            maxlength: "Description must be no more than 300 characters."
          },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) { 
              $("#disBtn").attr("disabled", true);
              form.submit();
        }
      });
    });



      CKEDITOR.replace('editor1');
      CKEDITOR.on('instanceReady', function (evt) {
        var editor = evt.editor;

        editor.on('change', function (e) {  
          var contentSpace = editor.ui.space('contents');
          var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
          var ckeditorFrame = ckeditorFrameCollection[0];
          var innerDoc = ckeditorFrame.contentDocument;
          var innerDocTextAreaHeight = $(innerDoc.body).height();
          console.log(innerDocTextAreaHeight);
        });
      });
    
    (function ($) {
      $(document).ready(function () {
        var slider = $("#range"),
          output = $("#output");

        output.text(slider.val());
        slider.on("input", function () {
          output.text(slider.val());
        });
      });
    })(jQuery);

    
  </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

  @append