@extends('layout')


@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Master</a></li>
			<li class="active">Gudang</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Gudang</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<button class="btn btn-primary" type="button" id="btn_tambah_gudang">Tambah</button>
	    </div>
	    <table class="table table-striped tabel_gudang">
	    	<thead>
				<tr>
					<th width="5%">No</th>
					<th width="30%">Nama Gudang</th>
					<th width="20%">Lokasi</th>
					{{-- <th width="20%">Keterangan</th> --}}
					<th width="20%">Alamat</th>
					<th width="20%" class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    </table>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data</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" autocomplete="off" id="form_gudang">
	      			<input type="hidden" name="id_gudang">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Gudang</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_nama_gudang" class="form-control">
	      				</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_lokasi">
	      						@php 
	      						foreach($data['lokasi'] as $l){ @endphp
	      						<option value="{{ $l->id_lokasi }}">{{ $l->nama_lokasi }}</option>
	      						@php
	      						}
	      						@endphp
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Keterangan</label>
	      				<div class="col-sm-8">
	      					
	      					<textarea class="form-control" name="popup_keterangan" rows="2"></textarea>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Alamat</label>
	      				<div class="col-sm-8">
	      					<textarea class="form-control" name="popup_alamat"></textarea>
	      				</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 tabel_gudang;

	$(document).ready(function(){
		tabel_gudang = $(".tabel_gudang").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('gudang/get_gudang') }}',
	        columns: [
	            {data: 'rownum', name: 'rownum', orderable: false, searchable: false, render : function(data, type, full, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'nama_gudang', name: 'g.nama_gudang'},
	            {data: 'nama_lokasi', name: 'ml.nama_lokasi'},
	            {data: 'alamat', name: 'g.alamat'},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
		});
	})

	$("#btn_tambah_gudang").click(function(){
		$("[name=id_gudang]").val('');
		$("[name=popup_nama_gudang]").val('');
		$("[name=popup_keterangan]").val('');
		$("[name=popup_alamat]").val('');
		$("[name=popup_lokasi").val(null).trigger('change');
		$("#exampleModal").modal('show');
		 
	})


	function edit(id){
		$("[name=id_gudang]").val($("#table_idgudang"+id).val());
		$("[name=popup_nama_gudang]").val($("#table_nama"+id).val());
		$("[name=popup_keterangan]").val($("#table_keterangan"+id).val());
		$("[name=popup_alamat]").val($("#table_alamat"+id).val());
		$("[name=popup_lokasi]").val($("#table_lokasi"+id).val()).trigger("change");
		$("[name=id_gudang]").val(id);

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

	$("#btn_popup_simpan").click(function(){
		var id = $("[name=id_gudang]").val();
		var nama = $("[name=popup_nama_gudang]").val();
		var ket = $("[name=popup_keterangan]").val();
		var alamat = $("[name=popup_alamat]").val();
		var lokasi = $("[name=popup_lokasi]").val();

		if(nama != '' && ket != '' && alamat != '' && lokasi != ''){
			$.ajax({
				url: "{{ url('gudang/simpan') }}",
				type: 'post',
				dataType: 'json',
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				data: $("#form_gudang").serialize(),
				success: function(respon){
					tabel_gudang.ajax.reload();
					$("#exampleModal").modal('hide');
				}
			})
		}
	})

	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('gudang/hapus')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
						tabel_gudang.ajax.reload();
					}
				})
		 	}
		})
	}
</script>

@endsection