@extends('layout.master')

@section('content')
  <nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">User</a></li>
      <li class="breadcrumb-item"><a href="/user/role">Role</a></li>
      <li class="breadcrumb-item active" aria-current="page">Create</li>
    </ol>
  </nav>

  <div class="card m-b-30">
    <div class="card-body">
      <div class="row">
        <form id="form_role" class="forms-sample">
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label">Nama Role</label>
                <input type="text" class="form-control required" name="name" autocomplete="off"
                  placeholder="Nama Role" value="{{ $data->name }}">
              </div>
            </div>

            @foreach ($modulAkses as $module)
              <div class="col-lg-3 col-md-4 col-sm-2">
                <div class="mb-4">
                  <div>
                    <h5 for="{{ $module['name'] }}" class="form-label">{{ $module['display'] }}</h5>
                  </div>
                  @foreach ($module->permissions ?? [] as $permission)
                    <div class="form-check form-switch mb-2">
                      <input
                        type="checkbox" class="form-check-input"
                        @if (in_array($permission->name, $hasPermission)) checked @endif
                        value="{{ $permission->id }}"
                        onchange="permissionTo(this)"
                        id={{ $permission->id }}
                      />
                      <label class="form-check-label" for="{{ $permission->id }}">
                        {{ ucwords(str_replace('_', ' ', explode('.', $permission->name)[1])) }}
                      </label>
                    </div>
                  @endforeach
                </div>
              </div>
            @endforeach
          </div>
          <div class="row mt-3">
            <div class="col-6">
              <button type="submit" class="btn btn-success btn-custom1 w-100">Simpan Data Role</button>
            </div>
            <div class="col-6">
              <a href="/user/role" class="btn btn-warning btn-custom8 w-100">Kembali ke Halaman Sebelumnya</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('custom-scripts')
  <script>
    $(document).ready(function() {
      $('#form_role').submit(function() {
        event.preventDefault();
        if (cekForm('form_role') == true) {
          let data = {
            '_token': '{{ csrf_token() }}',
            'name': $('[name="name" ]').val(),
          };
          sendJson("/user/role/{{ $data->id }}/update", data, rSends);
        }
      });
    });

    function rSends(data) {
      var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      }).then(function() {
        if (data.type == "success") {
          window.location.href = "/user/role";
        }
      })
    }

    const permissionTo = (e) => {
      $.ajax({
        url: '/user/role/' + "{{ $data->id }}" + '/permission-to/' + event.target.value,
        type: 'PUT',
        data: {
          _token: '{{ csrf_token() }}',
          checked: event.target.checked
        },
        success: function(data) {
          if (data.type != 'success'){
            swal({
              title: data.type,
              text: data.response,
              type: data.type,
              confirmButtonText: "OK"
            });

            $(e).prop('checked', !$(e).prop('checked'));
          }
        },
        error: function(data) {
          swal({
            title: 'error',
            text: 'Terjadi kesalahan',
            type: 'error',
            confirmButtonText: "OK"
          });

          $(e).prop('checked', !$(e).prop('checked'));
        },
      });
    }
  </script>
@endpush