@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> Master</a></li>
			<li class="active"> Komposisi Warna</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Input Komposisi</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<form class="form-horizontal" method="post" action="{{ url('komposisi/simpan') }}" autocomplete="off" >
	    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    	<input type="hidden" name="id_komposisi" value="{{ $data['data']['id_komposisi']}}">
        	
        	<div class="col-sm-6">
        		<div class="form-group">
        			<label class="control-label col-sm-4">Nama Warna</label>
        			<div class="col-sm-8">
        				<input type="text" name="nama_warna" class="form-control" value="{{ $data['data']['nama_warna']}}" required>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Inisial Warna</label>
        			<div class="col-sm-8">
        				<input type="text" name="inisial_warna" class="form-control" value="{{ $data['data']['inisial']}}" required>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Jumlah</label>
        			<div class="col-sm-8">
        				<input type="text" name="jumlah_warna" class="form-control number-only" value="{{ $data['data']['jumlah_warna']}}" required>
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Satuan</label>
        			<div class="col-sm-8">
        				<select class="form-control select-search" name="satuan_warna" required>
        					<option value="">--- Pilih Satuan ---</option>
        					@php 
        					$sel = $data['data']['satuan_warna'];
        					foreach($data['satuan'] as $d){ @endphp
        					<option value="{{ $d->id_satuan}}" {{($d->id_satuan==$sel) ? "selected":""}}>{{ $d->nama_satuan}}</option>
        					@php } @endphp
        				</select>
        			</div>
        		</div>
        		
        		
        	</div>

        	<div class="col-sm-12 form-group">
        	<h5 class="panel-title">Detail Barang</h5>
        	<br><a href="#" class="btn btn-success" style="margin-bottom: 1%;" id="btn_tambah_item">Tambah</a></div>
        	<div class="col-sm-12">
        		
        	<table class="table table-stripped" id="table_barang">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Kode Barang</th>
					<th>Nama Barang</th>
					<th>Jumlah</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    </table>
	    	<div class="form-group pull-right">
             	<button class="btn btn-primary" type="submit">Simpan</button>
             </div>
		<input type="hidden" name="td_total" class="form-control">
		<input type="hidden" name="td_netto" class="form-control">
	    </form>
	</div>
</div>

<!---Modal--->
<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</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">
	      			<input type="hidden" name="popup_id_table">

	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Barang</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_barang">
	      							
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Jumlah <b id="popup_satuanawal"></b></label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_jumlah" class="form-control number-only" onkeyup="maksimal($(this))">
	      				</div>
	      			</div>
	      			<div class="form-group" id="div_konversi">
	      				<label class="control-label col-sm-4">Jumlah <b id="popup_satuanakhir"></b></label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_jumlah_konv" class="form-control number-only" onkeyup="maksimal($(this))">
	      				</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>


<input type="hidden" name="store_konversi_awal" class="form-control">
<input type="hidden" name="store_konversi_akhir" class="form-control">
<input type="hidden" name="store_konversi" class="form-control">

<!----Modal---->
<script type="text/javascript">
	$("#btn_tambah_item").click(function(){
		$("[name=popup_id_table]").val('');
		$("[name=popup_barang]").val(null).trigger('change');
		$("[name=popup_jumlah]").val('');
		$("#div_konversi").addClass('hide');

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

	

	var table_barang;
	var tb_no = parseInt(10000);
	$(document).ready(function(){
		table_barang = $("#table_barang").DataTable({
			"paging": false
		});
		table_barang.on( 'order.dt search.dt', function () {
            table_barang.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();

		var id = '{{ $data['data']['id_komposisi']}}';
		if(id != ''){
			get_edit(id);
		}
		get_barang();
		// get_satuan();
	})

	function get_barang(){
		$.ajax({
			url: '{{ url('komposisi/get_barang') }}',
			success: function(respon){
				$("[name=popup_barang]").html('');
				$("[name=popup_barang]").append('<option value="">--- Pilih Barang ---</option');
				if(respon.length > 0){
					for(i in respon){
						$("[name=popup_barang]").append('<option value="'+respon[i].id_barang+'" nama="'+respon[i].nama_barang+'" kode="'+respon[i].kode_barang+'">'+respon[i].kategori+' - '+respon[i].nama_sub+' - '+respon[i].kode_barang+' - '+respon[i].nama_barang+'</option>');
					}
				}else{
					$("[name=popup_barang]").html('');
					$("[name=popup_barang]").append('<option value="" kode="">Data Kosong</option>');
				}

			}
		})
	}

	/*function get_satuan(){
		$.ajax({
			url: '{{ url('komposisi/get_satuan') }}',
			success: function(respon){
				$("[name=satuan_warna]").html('');
				$("[name=satuan_warna]").append('<option value="">--- Pilih Satuan ---</option');
				if(respon.length > 0){
					for(i in respon){
						$("[name=satuan_warna]").append('<option value="'+respon[i].id_satuan+'" nama="'+respon[i].nama_satuan+'" satuan="'+respon[i].satuan+'">'+respon[i].nama_satuan+'</option>');
					}
				}else{
					$("[name=satuan_warna]").html('');
					$("[name=satuan_warna]").append('<option value="" kode="">Data Kosong</option>');
				}

			}
		})
	}*/

	// $("[name=popup_barang]").change(function(){
	// 	var id = $("[name=popup_barang]").val();

	// 	$.ajax({
	// 		url: "{{ url('komposisi/get_jml') }}",
	// 		type: 'post',
	// 		dataType: 'json',
	// 		data: {id : id},
	// 		headers : {
	// 				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	// 			},
	// 		success: function(result){
	// 			if(result.length > 0){
	// 				$("[name=popup_jumlah]").val(result[0].stok);
	// 			}else{
	// 				$("[name=popup_jumlah]").val('0');
	// 			}
	// 		}
	// 	})

	// })

	$("[name=popup_barang]").change(function(){
		var id = $("[name=popup_barang]").val();
		var nilai = parseInt(0);
		$.ajax({
			url: "{{ url('komposisi/get_konversi') }}",
			type: 'post',
			dataType: 'json',
			data: {id : id},
			headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
			success: function(result){
				if(result.length > 0){
					$("#div_konversi").removeClass('hide');
					$("#popup_satuanawal").text(result[0].satuan_awal);
					$("#popup_satuanakhir").text(result[0].satuan_akhir);
					var n = parseInt(result[0].nilai_akhir)/parseInt(result[0].nilai_awal);
					$("[name=store_konversi]").val(n);
				}else{
					$("#div_konversi").addClass('hide');
					$("[name=popup_jumlah_konv]").val('');
					$("#popup_satuanawal").text(result.satuan_awal);
					$("#popup_satuanakhir").text('');				
				}

				$("[name=popup_jumlah]").attr('min', 0);

				$("[name=popup_jumlah_konv]").attr('min', 0);
			}
		})

	})

	$("#btn_popup_simpan").click(function(){
		var id_data = $("[name=popup_id_table]").val();
		var id_barang = $("[name=popup_barang]").val();
		var nama_barang = $("[name=popup_barang] :selected").attr('nama');
		var kode = $("[name=popup_barang] :selected").attr('kode');
		var jumlah = $("[name=popup_jumlah]").val();
		var jumlah_konv = $("[name=popup_jumlah_konv]").val();
		if(isNaN(jumlah_konv) || jumlah_konv == ''){
			jumlah_konv = jumlah;
		}
		var id_status = '';
		if(id_barang != ''){
			if(id_data == ''){
				table_barang.row.add(['<div><center></center></div>',
					'<div id="list_kode'+tb_no+'">'+kode+'</div>',
					'<div id="list_nama'+tb_no+'">'+nama_barang+'</div>',
					'<div id="list_jumlah'+tb_no+'">'+jumlah+'</div>',
					'<div><button type="button" class="btn bg-warning-400" onclick="edit_table('+tb_no+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
					'<input type="hidden" name="tabel_id[]" id="tabel_id'+tb_no+'" value="">'+
					'<input type="hidden" name="tabel_idbarang[]" id="tabel_idbarang'+tb_no+'" value="'+id_barang+'">'+
					'<input type="hidden" name="tabel_jumlah[]" id="tabel_jumlah'+tb_no+'" value="'+jumlah+'">'+
					'<input type="hidden" name="tabel_jumlah_konv[]" id="tabel_jumlah_konv'+tb_no+'" value="'+jumlah_konv+'">'
					]).draw(false);
				
			}else{
				$("#list_kode"+id_data).text(kode);
				$("#list_nama"+id_data).text(nama_barang);
				$("#list_jumlah"+id_data).text(jumlah);

				$("#tabel_id"+id_data).val(id_data);
				$("#tabel_idbarang"+id_data).val(id_barang);				
				$("#tabel_jumlah"+id_data).val(jumlah);
				$("#tabel_jumlah_konv"+id_data).val(jumlah_konv);
				
			}
			$("#exampleModal").modal('hide');
			tb_no++;
		}

	})

	function get_edit(id){
		$.ajax({
			url: "{{ url('komposisi/get_edit')}} ",
			type: 'post',
			data: {id : id,},
			headers : {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				if(respon.length > 0){
					for(i in respon){
						table_barang.row.add(['<div><center></center></div>',
							'<div id="list_kode'+respon[i].id+'">'+respon[i].kode_barang+'</div>',
							'<div id="list_nama'+respon[i].id+'">'+respon[i].nama_barang+'</div>',
							'<div id="list_jumlah'+respon[i].id+'">'+respon[i].jumlah+'</div>',
							'<div><button type="button" class="btn bg-warning-400" onclick="edit_table('+respon[i].id+')"><i class="icon-pencil"></i> </button><button class="btn bg-danger-800" type="button" onclick="hapus($(this))"><i class="icon-eraser"></i></button></div>'+
							'<input type="hidden" name="tabel_id[]" id="tabel_id'+respon[i].id+'" value="'+respon[i].id+'">'+
							'<input type="hidden" name="tabel_idbarang[]" id="tabel_idbarang'+respon[i].id+'" value="'+respon[i].id_barang+'">'+
							'<input type="hidden" name="tabel_jumlah[]" id="tabel_jumlah'+respon[i].id+'" value="'+respon[i].jumlah+'">'+
							'<input type="hidden" name="tabel_jumlah_konv[]" id="tabel_jumlah_konv'+respon[i].id+'" value="'+respon[i].jumlah_konv+'">'
							]).draw(false);
					}

				}
				
			}
		})
	}

	function edit_table(id){
		var id_barang = $("#tabel_idbarang"+id).val();
		var jumlah = $("#tabel_jumlah"+id).val();
		var jumlah_konv = $("#tabel_jumlah_konv"+id).val();

		$("[name=popup_id_table]").val(id);
		$("[name=popup_barang]").val(id_barang).trigger('change');
		$("[name=popup_jumlah]").val(jumlah);
		$("[name=popup_jumlah_konv]").val(jumlah_konv);

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

	
	function hapus(d){
	table_barang.row(d.parents('tr')).remove().draw();
	
	}

	$("[name=popup_jumlah]").keyup(function(){
		var jum = parseFloat($("[name=popup_jumlah]").val());
		if(isNaN(jum) || jum == 0 || jum == ''){
			jum = parseFloat(0);
		}
		var nilai = parseFloat($("[name=store_konversi]").val());

		var tot = jum*nilai;
		$("[name=popup_jumlah_konv]").val(tot);
	})

	$("[name=popup_jumlah_konv]").keyup(function(){
		var jum = parseFloat($("[name=popup_jumlah_konv]").val());
		if(isNaN(jum) || jum == 0 || jum == ''){
			jum = parseFloat(0);
		}
		var nilai = parseFloat($("[name=store_konversi]").val());

		var tot = jum/nilai;
		$("[name=popup_jumlah]").val(tot);
	})	


</script>

@endsection