@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">
              </div>
            </div>
          </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/add", 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/" + data.data.id + "/edit"; 
        }
      })
    }
  </script>
@endpush