@extends('layouts.app')

@section('style')
@endsection

@section('content')
<h1 class="h3 mb-2 text-gray-800">Daftar Pengguna</h1>

<div class="card shadow mb-4">
	<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
	<h6 class="m-0 font-weight-bold text-primary">Tabel Pengguna</h6>
	<div>
		<button class="btn btn-sm btn-primary tambah"><i class="fas fa-fw fa-plus" title="Tambah Pengguna"></i></button>
	</div>
	</div>
	<div class="card-body">
	<div class="table-responsive">
		<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
			<thead>
				<tr>
					<th>No</th>
					<th>Username</th>
					<th>Password</th>
					<th>e-Mail</th>
					<th>Role</th>
					<th>Aksi</th>
				</tr>
			</thead>
			<tbody>
				@php $no = 1; @endphp
                @foreach($pengguna as $row)
				<tr>
					<td>{{$no++}}</td>
					<td>{{$row->username}}</td>
					<td>{{$row->password}}</td>
					<td>{{$row->email}}</td>
					<td>{{$row->role}}</td>
					<td>
						<button class="btn btn-sm btn-warning ubah" data-pengguna="{{$row}}"><i class="fas fa-fw fa-edit" title="Ubah Pengguna"></i></button>
						<button class="btn btn-sm btn-danger hapus" data-id="{{$row->id}}"><i class="fas fa-fw fa-trash" title="Hapus Pengguna"></i></button>
					</td>
				</tr>
				@endforeach
			</tbody>
		</table>
	</div>
	</div>
</div>

@endsection

@section('modal')
<form id="hapuspengguna" method="POST">
	@method("delete")
	@csrf
</form>
@endsection

@section('script')
<script>
	jQuery(function($) {
		var formpengguna = '<form id="modalform" action="{{route("tambahpengguna")}}" method="POST">'+
								'@csrf'+
								'<div class="form-group">'+
									'<label for="username">Nama Pengguna :</label>'+
									'<input type="text" class="form-control" id="username" name="username" placeholder="Nama Pengguna">'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="password">Kata Sandi :</label>'+
									'<input type="password" class="form-control" id="password" name="password" placeholder="Kata Sandi">'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="email">e-Mail :</label>'+
									'<input type="email" class="form-control" id="email" name="email" placeholder="e-Mail">'+
								'</div>'+
								'<div class="form-group">'+
									'<label for="role">Role :</label>'+
									'<select class="form-control" id="role" name="role">'+
									'<option value="">-- Pilih Role --</option>'+
									'<option value="super">Super Admin</option>'+
									'<option value="admin" selected>Admin</option>'+
									'</select>'+
								'</div>'+
			    			'</form>';

		$(".tambah").on("click",function(){
			var id = $(this).data("id");
			var frm = bootbox.dialog({
			    title: 'Tambah Pengguna',
			    message: formpengguna,
			    size: 'large',
			    onEscape: true,
			    backdrop: true,
			    buttons: {
			        fee: {
			            label: 'Ok',
			            className: 'btn-primary',
			            callback: function(){
			            	// $("#role").attr("disabled",false);
			            	$("#modalform").submit();
			            	return false;
			            }
			        }
			    }
			});
			frm.on('shown.bs.modal', function () {
				$("#modalform").validate({
					rules: {
						username: "required",
						password: {
							required: true,
            minlength: 8,
						},
						email: "required",
					},
					messages: {
						username: "Nama Pengguna tidak boleh kosong",
						password: {
							"required":"Kata Sandi tidak boleh kosong",
							"minlength":"Minimal 8 Karakter",
						},
						email: "e-Mail tidak boleh kosong",
					}
				});
			})
		});

		$(".ubah").on("click",function(){
			var pengguna = $(this).data("pengguna");
			var frm = bootbox.dialog({
			    title: 'Ubah Pengguna',
			    message: formpengguna,
			    size: 'large',
			    onEscape: true,
			    backdrop: true,
			    buttons: {
			        fee: {
			            label: 'Ok',
			            className: 'btn-primary',
			            callback: function(){
			            	// $("#role").attr("disabled",false);
			            	$("#modalform").submit();
			            	return false;
			            }
			        }
			    }
			});
			frm.on('shown.bs.modal', function () {
				$("#modalform").attr("action","pengguna/"+pengguna["id"]);
				$('#modalform').prepend(' @method("put") ');
				$("#username").val(pengguna["username"]);
				$("#password").attr("placeholder", "Kosongkan jika tidak ingin mengubah kata sandi");
				$("#email").val(pengguna["email"]);
				$("#role").val(pengguna["role"]);
				$("#modalform").validate({
					rules: {
						username: "required",
						password: { minlength:8 },
						email: "required",
					},
					messages: {
						username: "Nama Pengguna tidak boleh kosong",
						password: "Kata Sandi minimal 8 Karater",
						email: "e-Mail tidak boleh kosong",
					}
				});
			})
		});

		$(".hapus").on("click",function(){
			$("#hapuspengguna").attr("action","pengguna/" +  $(this).data('id'));
			bootbox.confirm("Apa anda yakin akan menghapus?", function(result){
				if(result){
	            	$("#hapuspengguna").submit();
				}
			});
		});

	})
</script>
@endsection