@extends('layouts.admin')

@section('content')
@php $readonly=''; @endphp
@if($action=='View')
@php $readonly='readonly'; @endphp
@endif
<style>
  /* The container */
  .label-container {
    position: relative;
    padding-left: 5px;
    margin-bottom: 12px;
    cursor: pointer;

    /* font-size: 18px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }



  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    /* background-color: #eee; */
    background-color: #fff;
    border: 1px solid #9e9e9e;
    border-radius: 3px;
  }

  /* On mouse-over, add a grey background color */
  .label-container:hover input~.checkmark {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .label-container input:checked~.checkmark {
    background-color: #2196F3;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .label-container input:checked~.checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .label-container .checkmark:after {
    left: 7px;
    top: 5px;
    width: 4px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .customer-table td {
    padding: 7px 10px !important;
  }

  .table-responsive {
    max-height: 500px;
  }
</style>
<div class="page-links">
  <a href="{{ route('dashboard') }}">Dashboard</a>
  <span> > </span>
  <a href="{{ route('roles.index') }}">Roles</a>
</div>
<div class="row">
  <div class=" col-12">
    <div class="card-main">

      <h2 class="iheading-man">{{ __($title) }}</h2>
      @if($action == 'Edit')
      <form class="form-data" id="edit_form" method="POST" action="{{ route('roles.update', [$record->id]) }}">
        {{ method_field('PUT') }}
        @else
        <form class="form-data" method="POST" id="add_form" action="{{ route('roles.store') }}">
          @endif
          @csrf
          <div class="row">
            <div class="col-6">
              @if(old('name'))
              @php $name = old('name') @endphp
              @elseif(isset($record->name) && $record->name != '')
              @php $name = $record->name; @endphp
              @else
              @php $name = ''; @endphp
              @endif

              @if(isset($rolePermissions) && $rolePermissions->permissions_ids != '')
              @php $permissions_ids = $rolePermissions->permissions_ids; @endphp
              @else
              @php $permissions_ids = ''; @endphp
              @endif
              <label for="name" class="control-label"> Role Name <small class="red">* </small></label>
              <input type="text" id="name" name="name" value="{{ $name }}" class="form-control @error('name') is-invalid @enderror" placeholder="Enter Role Name">
              <input type="hidden" name="permission_ids" id="permission_ids" value="{{ $permissions_ids }}" />
              @error('name')
              <span class="error">{{ $message }}</span>
              @enderror

            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div class="mt-4">
                <h3 class="main-heading ">Permissions: &nbsp; &nbsp;
                  @if($action!='View')
                  All <input type="checkbox" id="allCheck">
                  @endif
                </h3>
                @error('permission')
                <span class="error">{{ $message }}</span>
                @enderror
                <div class="mt-4 table-responsive">
                  <table class="table table-striped ">
                    <tbody class="check text-start">
                                            @foreach($permissionsModules as $module)
                      <tr class="main_module">
                        <td>
                          <input type="checkbox" class="module-check" id="module-{{ $x }}"> {{ $module->name }}
                        </td>
                      </tr>



                      <tr class="sub_permissions">
                        <td>
                          <div class="row mt-2 mb-4">
                            @foreach($module->permissions as $row)
                                                        @php $check='' @endphp
                            @if(in_array($row->id, $rolePermissions))
                            @php $check='checked' @endphp
                            @endif
                            <div class="col-md-3 col-4">

                              <input class="permissions module-{{ $x }}" type="checkbox" value="{{ $row->id }}" {{$check}} name="permission[]">
                              <label class="label-container">{{ $row->name }}
                                <!-- <span class="checkmark"></span> -->
                              </label>
                            </div>
                            @endforeach
                                                        @endforeach
                          </div>
                        </td>
                      </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- new-card -->
            <div class="fix-button-main">
              <div class="save-fix">
                <div class="float-end">
                  @if($action!='View')
                  <button type="submit" class="btn save-b me-3" type="button">
                    Save
                  </button>
                  @endif
                  <a type="button" class="btn btn-light me-2 float-end save-draft" href="{{ route('roles.index') }}"> {!! ($action!='View') ? 'Cancel' : 'Back' !!}</a>
                </div>
              </div>
            </div>
          </div>
        </form>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script>
  var permission_ids = $('#permission_ids').val();
  if (permission_ids != "") {
    permission_ids = permission_ids.split(',');
  } else {
    var permission_ids = [];
  }

  $(document).on('change', '#allCheck', function() {
    $('.module-check').trigger('click');
  })

  $(document).on('change', '.module-check', function() {
    classAtt = $(this).attr('id');
    if ($(this).is(':checked')) {
      $("." + classAtt).each(function(index) {
        id = $(this).val();
        if ($.inArray(id, permission_ids) < 0) {
          permission_ids.push(id);
        }
      });

      $('#permission_ids').val(permission_ids);
      $.each(permission_ids, function(index, value) {
        $('input.permissions[value="' + value + '"]').prop('checked', true);
      });

    } else {
      $("." + classAtt).each(function(index) {
        id = $(this).val();
        var index = permission_ids.indexOf(id);
        if (index !== -1) {
          permission_ids.splice(index, 1);
        }

        $('#permission_ids').val(permission_ids);
        $('input.permissions[value="' + id + '"]').prop('checked', false);

      });

    }
  });

  $(document).on('change', '.permissions', function() {
    var id = $(this).val();

    if ($.inArray(id, permission_ids) < 0) {
      permission_ids.push(id);
    } else {
      var index = permission_ids.indexOf(id);
      if (index !== -1) {
        permission_ids.splice(index, 1);
      }
    }
    $('#permission_ids').val(permission_ids);
  })
</script>
@endpush