@extends('layout')


@section('content')
<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="#"><i class="icon-home2 position-left"></i> User</a></li>
			<li class="active">Pengguna</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Pengguna</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">    

	    &nbsp; <button class="btn btn-primary" type="button" id="btn_tambah_user">Tambah</button>
	    <div class="table-responsive">
	    <table class="table datatable-basic table-striped table_user">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Nama Pengguna</th>
					<th>Username</th>
					<th>Password</th>
					<th>Group</th>
					<th>lokasi</th>
					<th>Gudang</th>
					<th>Proses</th>
					<th>Status</th>
					<th class="text-center" width="11%">Aksi</th>
				</tr>	
			</thead>
			<tbody>

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

<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data Form Pengguna</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal form-validate-jquery" autocomplete="off" id="form_user">
	      			<input type="hidden" name="popup_id">
	      					<div class="form-group">
			      				<label class="control-label col-sm-4">Nama Pengguna</label>
			      				<div class="col-sm-8">
			      					<input type="text" name="popup_nama" class="form-control">
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Group</label>
			      				<div class="col-sm-8">
			      					<!-- <input type="text" name="popup_link" class="form-control"> -->
			      					<select class="form-control select-search" name="popup_group">
			      						
			      					</select>
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Lokasi</label>
			      				<div class="col-sm-8">
			      					<select class="form-control select-search" name="popup_idlokasi">
			      						
			      					</select>
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Gudang</label>
			      				<div class="col-sm-8">
			      					<select class="form-control select-search" name="popup_idgudang[]" id="popup_idgudang" multiple="multiple">
			      						
			      					</select>
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Proses</label>
			      				<div class="col-sm-8">
			      					<select class="form-control select-search" name="popup_idproses[]" id="popup_idproses" multiple="multiple">
        					@php foreach($data['proses'] as $row){         					
        					if($row->nama_proses2 == ''){
        						echo '<optgroup label="'.$row->nama_proses.'">';
        					} else {
        					@endphp
        					<option value="{{ $row->id_proses }}"> {{ $row->nama_proses2.' - '.$row->nama_proses }}
        					</option>
        					@php
        					}
        					if($row->nama_proses == ''){
        					echo '</optgroup>';
        					} } @endphp
			      					</select>
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Status</label>
			      				<div class="col-sm-8">
			      					<div class="radio">
			      						<label>
                              			<input type="radio" class="control-success" id="status_active" name="popup_status" value="1" > Aktif
                            			</label>
			      					</div>
			      					<div class="radio">
			      						<label>
                              			<input type="radio" class="control-warning" id="status_nonactive" name="popup_status" value="2"> Tidak Aktif
                            			</label>
			      					</div>
			      				</div>
			      			</div>

			      			<hr>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Username <span class="text-danger">*</span></label>
			      				<div class="col-sm-8">
			      					<input type="text" name="popup_username"  class="form-control">
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Password <span class="text-danger">*</span></label>
			      				<div class="col-sm-8">
			      					<div class="input-group">
			      					<input type="password" name="popup_password" id="password" class="form-control" placeholder="Minimun 5 karakter">
			      					<span class="input-group-addon toggle-password" toggle="#password"><i id="icon-mata" class="fa fa-eye"></i></span>
			      					</div>
			      				</div>
			      			</div>
			      			<div class="form-group">
			      				<label class="control-label col-sm-4">Konfirmasi Password <span class="text-danger">*</span></label>
			      				<div class="col-sm-8">
			      					<input type="password" name="popup_repassword" id="re_password" class="form-control">
			      				</div>
			      			</div>
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-primary" id="btn_popup_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>

<script type="text/javascript">
	var tb;
	var formBarang = $("#form_user");

	$(document).ready(function(){
		tb = $(".table_user").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('user/tampil') }}',
	        columns: [
	            {data: 'rownum', name: 'rownum', orderable: false, searchable: false, render : function(data, type, full, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'nama', name: 'nama'},
	            {data: 'username', name: 'username'},
	            {data: 'password', name: 'password'},
	            {data: 'nama_group', name: 'nama_group'},
	            {data: 'nama_lokasi', name: 'nama_lokasi'},
	            {data: 'nama_gudang', name: 'nama_gudang'},
	            {data: 'nama_proses', name: 'nama_proses'},
	            {data: 'status', name: 'status', searchable: false, className : 'text-center'},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false, className : 'text-center'}
	        ],
		});

		get_gudang();
    	$(".toggle-password").click(function() {
		  $("#icon-mata").toggleClass("fa-eye fa-eye-slash");
			  var input = $($(this).attr("toggle"));
			  if (input.attr("type") == "password") {
			    input.attr("type", "text");
			  } else {
			    input.attr("type", "password");
			  }
		});

	})

	$("#btn_tambah_user").click(function(){
		$("[name=popup_id]").val('');
		$("[name=popup_nama]").val('');
		$("[name=popup_username]").val('');
		$("[name=popup_password]").val('');
		$("[name=popup_repassword]").val('');
		$("[name=popup_group").val(null).trigger('change');
		$("[name=popup_idlokasi]").val(null).trigger('change');
		$("#popup_idgudang").val(null).trigger('change');
		$("#popup_idproses").val(null).trigger('change');
		$("input:radio[name=popup_status][value=1]")[0].checked=false;
		$("input:radio[name=popup_status][value=2]")[0].checked=false;
		validator.resetForm();
		// Success
	    $(".control-success").uniform({
	        wrapperClass: 'border-success-400 text-success-600'
	    });
	    // Warning
	    $(".control-warning").uniform({
	        wrapperClass: 'border-warning-400 text-warning-600'
	    });
		disabled('#btn_popup_simpan', false);
		
		$("#exampleModal").modal("show");
	})	


	function get_gudang(){
		$.ajax({
			url: "{{ url('user/get_gudang') }}",
			success: function(respon){
				$("#popup_idgudang").html('');	
				if(respon.gudang.length > 0){
					for(i in respon.gudang){
						$("#popup_idgudang").append('<option value="'+respon.gudang[i].id_gudang+'" nama="'+respon.gudang[i].nama_gudang+'">'+respon.gudang[i].nama_gudang+'</option>');
					}
				}

				$("[name=popup_idlokasi]").html('');
				$("[name=popup_idlokasi]").append('<option value="">--- Pilih Lokasi Produksi ---</option>');
				if(respon.lokasi.length > 0){
					for(i in respon.lokasi){
						$("[name=popup_idlokasi]").append('<option value="'+respon.lokasi[i].id_lokasi+'" nama="'+respon.lokasi[i].nama_lokasi+'">'+respon.lokasi[i].nama_lokasi+'</option>');
					}
				}

				$("[name=popup_group]").html('');
				$("[name=popup_group]").append('<option value="">--- Pilih Group ---</option>');
				if(respon.group.length > 0){
					for(i in respon.group){
						$("[name=popup_group]").append('<option value="'+respon.group[i].kode_group+'" nama="'+respon.group[i].nama_group+'">'+respon.group[i].nama_group+'</option>');
					}
				}
			}
		})
	}

	function edit_table(id){
		var id_user = $("#table_id"+id).val();
		var nama = $("#table_nama"+id).val();
		var username = $("#table_username"+id).val();
		var password = $("#table_password"+id).val();
		var group = $("#table_group"+id).val();
		var id_gudang = $("#table_idgudang"+id).val();
		var id_lokasi = $("#table_idlokasi"+id).val();
		var id_proses = $("#table_idproses"+id).val();
		var status = $("#table_status"+id).val();

		$("[name=popup_id]").val(id_user);
		$("[name=popup_nama]").val(nama);
		$("[name=popup_username]").val(username);
		$("[name=popup_password]").val(password);
		$("[name=popup_repassword]").val(password);
		$("[name=popup_group]").val(group).trigger('change');
		var array_gudang = id_gudang.split(",");
		var array_proses = id_proses.split(",");
		$("#popup_idgudang").val(array_gudang).trigger('change');
		$("#popup_idproses").val(array_proses).trigger('change');
		$("[name=popup_idlokasi]").val(id_lokasi).trigger('change');
		// $("input:radio[name=popup_status][value="+status+"]")[0].checked = true;
		$("input:radio[name=popup_status][value=" + status + "]")[0].checked=true;

		validator.resetForm();
	    // Success
	    $(".control-success").uniform({
	        wrapperClass: 'border-success-400 text-success-600'
	    });
	    // Warning
	    $(".control-warning").uniform({
	        wrapperClass: 'border-warning-400 text-warning-600'
	    });

		$("#exampleModal").modal('show');
	}


	function hapus(id){
		swal({
			title: 'Anda yakin akan menghapus item ini?',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya',
			cancelButtonText: 'Tidak',
		}).then((result) => {
		 	if(result.value){
		 		$.ajax({
					url: "{{ url('user/hapus')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
					tb.ajax.reload();
					}
				})
		 	}
		})
	}

	$("#btn_popup_simpan").click(function(){
		var nama = $("[name=popup_nama]").val();
		var username = $("[name=popup_username]").val();
		var password = $("[name=popup_password]").val();
		var repassword = $("[name=popup_repassword]").val();
		var group = $("[name=popup_group]").val();
		var lokasi = $("[name=popup_idlokasi]").val();
		var gudang = $("[name=popup_idgudang]").val();
		var status_aktif = $("#status_active").val();
		var status_nonactive = $("#status_nonactive").val();
		var status = $('input[name="popup_status"] :checked').val();
		/*console.log(nama,username,password,repassword,group,lokasi,gudang, status, status_active, status_nonactive);*/
		if(nama != '' && username != '' && password != '' && repassword != '' && (status_active 
			!= '' || status_nonactive != '') && (lokasi != '' || gudang != '')){
			disabled('#btn_popup_simpan', true);
			$.ajax({
				url: "{{ url('user/simpan')}} ",
				type: 'post',
				data: $("#form_user").serialize(),
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					if(respon.status == 1){
					tb.ajax.reload();
						$("#exampleModal").modal('hide');
					}else{
						$("#info_barang").text('Kode sudah ada!');
					}
					 disabled('#btn_popup_simpan', false);
				}
			})
		}
	})


// Setup validation
    // ------------------------------

    // Initialize
    var validator = $(".form-validate-jquery").validate({
        errorClass: 'validation-error-label',
        successClass: 'validation-valid-label',
        highlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        errorPlacement: function(error, element) {

            // Styled checkboxes, radios, bootstrap switch
            if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) {
                if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo( element.parent().parent().parent().parent() );
                }
                 else {
                    error.appendTo( element.parent().parent().parent().parent().parent() );
                }
            }

            // Unstyled checkboxes, radios
            else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                error.appendTo( element.parent().parent().parent() );
            }

            // Input with icons and Select2
            else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                error.appendTo( element.parent() );
            }

            // Inline checkboxes, radios
            else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                error.appendTo( element.parent().parent() );
            }

            // Input group, styled file input
            else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                error.appendTo( element.parent().parent() );
            }

            else {
                error.insertAfter(element);
            }
        },
        validClass: "validation-valid-label",
        success: function(label) {
            label.addClass("validation-valid-label").text("Success.")
        },
        rules: {
            popup_username: {
                minlength: 5
            },
            popup_password: {
                minlength: 5
            },
            popup_repassword: {
                equalTo: "[name=popup_password]"
            }            
        }
    });

    // Reset form
    $('#reset').on('click', function() {
        validator.resetForm();
    });

</script>


@endsection