@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/select2.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
  @endpush
  <div class="preloader" id="preloader" >
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
          <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">Master {{$title}}</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-4 mt-2">
          <div class="card">
            <div class="card bg-info" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <h5 class="card-title">Form Input Data</h5>
              <form id="form_member" action="{{ route('sistem-user-simpan') }}" method="POST">
                @csrf
                <div class="row">
                  <div class="col-md-12">
                    <label class="form-label mt-3">Role Akses <span style="color: red;">*</span></label>
                    <select class="form-control pilih2" name="role_access" required>
                      <option selected disabled>--Pilih Role Akses--</option>
                      @foreach ($role as $r)
                      <option value="{{ $r->id }}">{{ $r->role_access }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <label class="form-label mt-3">Jenis Kelamin <span style="color: red;">*</span></label>
                <select class="form-control" name="sex" required>
                  <option selected disabled>--Pilih Jenis Kelamin--</option>
                  <option value="1">Laki-laki</option>
                  <option value="2">Perempuan</option>
                </select>
                <label class="form-label mt-3">Nama Lengkap <span style="color: red;">*</span></label>
                <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama Lengkap" required>
                <label class="form-label mt-3">Email / Username <span style="color: red;">*</span></label>
                <input type="text" class="form-control" name="email" placeholder="Email" required>
                <label class="form-label mt-3">Password <span style="color: red;">*</span></label>
                <input type="password" class="form-control" name="password" id="password" placeholder="Password" required>
                <div class="form-check mt-2">
                  <input class="form-check-input" type="checkbox" id="ceklist" onclick="centang()">
                  <label for="ceklist" class="form-check-label text-muted">Lihat password</label>
                </div>
                <hr>
                <button type="submit" class="btn btn-sm btn-primary">Simpan</button>
              </form>
            </div>
          </div>
        </div>
        <div class="col-sm-8 mt-2">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Form List Data</h5>
              <div class="table-responsive">
                <table id="tabelku" class="table table-striped display" style="width: 100%;">
                  <thead>
                    <tr>
                      <th class="text-center">No</th>
                      <th>Nama</th>
                      <th>Email / Username</th>
                      <th>Jenis Kelamin</th>
                      <th>Role Akses</th>
                      <th>Status</th>
                      <th class="text-center"><i class="demo-psi-gear"></i></th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('sistem::user.modal')
  @include('sistem::user.js')

@endsection