@extends('layout')


@section('content')

<style type="text/css">
	 .table-form>tbody>tr>th, .table-form>tfoot>tr>th, .table-form>thead>tr>td, .table-form>tbody>tr>td, .table-form>tfoot>tr>td{
		    padding: 5px;
		   -- vertical-align: middle;
		}
		table.table-form tbody>tr.selected, table.table-form tbody>tr.selected td, table.table-form tbody>tr>.selected{
		    color: white !important;
		    background-color: #49b6d6 !important;
		}

	 table, th, td, input, textarea, select {
            color:  black !important; 
        }
        .help-block {
 
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
</style>
<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">Pick Tenun</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Pick Tenun</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('pick/simpan') }}" autocomplete="off" >
	    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	    	<input type="hidden" name="id_pick" value="{{ $data['data']['id_pick']}}">
	    	
        	<div class="col-sm-6">
        		<div class="form-group">
        			<label class="control-label col-sm-4">Nama Pick</label>
        			<div class="col-sm-8">
        				<input type="text" name="nama_pick" class="form-control text-uppercase" placeholder="Nama Pick" value="{{$data['data']['nama_pick']}}">
        			</div>
        		</div>
        		<div class="form-group">
        			<label class="control-label col-sm-4">Motif</label>
        			<div class="col-sm-8">
        				<select class="form-control select-search" id="motif" name="id_motif">
        					<option value="">--- Pilih Motif ---</option>
        					@php $sel = $data['data']['id_motif'] ;
        					foreach($data['motif'] as $d){ @endphp
        					<option value="{{$d->id_motif}}" {{ ($d->id_motif == $sel) ? "selected":"" }}>{{$d->nama_motif}}</option>
        				@php } @endphp
        				</select>
        			</div>
        		</div>
        		<div class="form-group">
	    			<label class="control-label col-sm-4">Jenis Produksi </label>
	    			<div class="col-sm-8">
	    				<select class="form-control select-search" name="id_lokasi">
	    					<option value="">--- Pilih Jenis ---</option>
	    					@php $sel = $data['data']['id_lokasi'];
	    					foreach($data['lokasi'] as $d){@endphp
	    					<option value="{{$d->id_lokasi}}" {{ ($d->id_lokasi == $sel) ? "selected":"" }} >{{ $d->nama_lokasi }}</option>
	    					@php } @endphp
	    				</select>
	    			</div>
	    		</div>
        	</div>
        	<div class="col-sm-6">
        		<div class="form-group">
        			<label class="control-label col-sm-4">Status</label>
        			<div class="col-sm-8">
        				<select class="form-control select-search" name="status">
        				<option value="">--- Pilih Jenis ---</option>
        				@php $sel = $data['data']['id_lokasi']; @endphp
        				<option value="1" {{ ("1" == $sel) ? "selected":"" }}>Aktif</option>
        				<option value="2" {{ ("2" == $sel) ? "selected":"" }}>Tidak Aktif</option>
        				</select>
        			</div>
        		</div>
        	</div>

        	<div class="col-sm-12 form-group">
        	<h5 class="panel-title">Detail Barang</h5>
        		<br>
        		<button href="#" class="btn btn-success" style="margin-bottom: 1%;" id="btn_tambah_item" type="button">Tambah</button>
        	</div>
        	<div class="col-ms-12 ">
        	<div class="panel-body table-responsive">
        	<table class="table table-stripped table-bordered" id="table_barang">
	    	<thead>
				<tr>
					<th width="3%">No</th>
					<th>Jenis Pick</th>
					<th>Pick Atas</th>
					<th>Pick Bawah</th>
					<th>Upah</th>
					<th>Status</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
	    </table>
	</div>
        	</div>
   
	    </div>

	    <div class="panel-footer">
	    	<div class="form-group col-md-12 col-sm-12">
				<a href="{{url('pick')}}" class="btn bg-warning-400">Kembali</a>
				<div class="form-group pull-right">
					<button class="btn btn-primary" type="submit">Simpan</button>
				</div>
			</div>
	    </div>

	    </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">Jenis Pick</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_jenis">
	      						<option value="">--- Pilih Jenis ---</option>
	      						<option value="1" nama="Penambahan">Penambahan</option>
	      						<option value="2" nama="Pas">Pas</option>
	      						<option value="3" nama="Pengurangan">Pengurangan</option>
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Pick Atas</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_pickAtas" class="form-control number-only">
	      					<p class="pull-right" id="help_popup_pickAtas"></p>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Pick Bawah</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_pickBawah" class="form-control number-only">
	      					<p class="pull-right" id="help_popup_pickBawah"></p>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Upah</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_upah" class="form-control number-only">
	      					<p class="pull-right" id="help_popup_upah"></p>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Status</label>
	      				<div class="col-sm-8">
        				<select class="form-control select-search" name="popup_status">
        				<option value="">--- Pilih Jenis ---</option>
        				<option value="1">Aktif</option>
        				<option value="2">Tidak Aktif</option>
        				</select>
        			</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">

<input type="hidden" name="store_konversiorder" class="form-control">

<!----Modal---->
<script type="text/javascript">
	$("#btn_tambah_item").click(function(){
		$("[name=popup_id_table]").val('');
		$("[name=popup_jenis]").val('').trigger('change');
		$("[name=popup_pickAtas]").val('');
		$("[name=popup_pickBawah]").val('');
		$("#help_popup_pickAtas").text('');
		$("#help_popup_pickBawah").text('');
		$("[name=popup_upah]").val('');
		$("#help_popup_upah").text('');
		$("[name=popup_status]").val('').trigger('change');
		$("#exampleModal").modal('show');	
	})

	var table_barang;
	var tb_no = parseInt(10000);
	var id_upahtenun;
	$(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();

		id_pick = '{{$data['data']['id_pick']}}';
		if(id_pick != ''){
			get_edit(id_pick);
		}	
	})
	
	$("#btn_popup_simpan").click(function(){
		var id_data = $("[name=popup_id_table]").val();
		var id_jenis 	= $("[name=popup_jenis] :selected").val();
		var nama_jenis 	= $("[name=popup_jenis] :selected").attr('nama');
		var pick_atas 	= $("[name=popup_pickAtas]").val();
		var pick_bawah 	= $("[name=popup_pickBawah]").val();
		var upah 	= $("[name=popup_upah]").val();
		var status 	= $("[name=popup_status]").val();
		var d_status = '';
		if(status == '1'){
			var d_status = '<label class="label bg-success-400">Aktif</label>';
		}else if(status == '2'){
			var d_status = '<label class="label bg-danger-400">Tidak Aktif</label>'
		}
		if(id_jenis != '' && pick_atas != '' && pick_bawah != '' && upah != ''){
			if(id_data == ''){
				table_barang.row.add(['<div><center></center></div>',
					'<div id="list_jenis'+tb_no+'">'+nama_jenis+'</div>',
					'<div id="list_pickAtas'+tb_no+'">'+format_angka(pick_atas)+'</div>',
					'<div id="list_pickBawah'+tb_no+'">'+format_angka(pick_bawah)+'</div>',
					'<div id="list_upah'+tb_no+'">'+accounting.formatMoney(upah)+'</div>',
					'<div id="list_status'+tb_no+'">'+d_status+'</div>',
					'<div><button type="button" class="btn btn-xs bg-warning-400" onclick="edit_table('+tb_no+')"><i class="icon-pencil"></i> </button> <button class="btn btn-xs 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_idjenis[]" id="tabel_idjenis'+tb_no+'" value="'+id_jenis+'">'+
					'<input type="hidden" name="tabel_pickAtas[]" id="tabel_pickAtas'+tb_no+'" value="'+pick_atas+'">'+
					'<input type="hidden" name="tabel_pickBawah[]" id="tabel_pickBawah'+tb_no+'" value="'+pick_bawah+'">'+
					'<input type="hidden" name="tabel_upah[]" id="tabel_upah'+tb_no+'" value="'+upah+'">'+
					'<input type="hidden" name="tabel_status[]" id="tabel_status'+tb_no+'" value="'+status+'">'
					]).draw(false);
			}else{
				$("#list_jenis"+id_data).text(nama_jenis);
				$("#list_pickAtas"+id_data).text(format_angka(pick_atas));
				$("#list_pickBawah"+id_data).text(format_angka(pick_bawah));
				$("#list_upah"+id_data).text(accounting.formatMoney(upah));
				$("#list_status"+id_data).text("");
				$("#list_status"+id_data).append(d_status);
				/*if(status == 1){
				$("#list_status"+id_data).text('Aktif');
				}else if(status == 2){
				$("#list_status"+id_data).text('Tidak aktif');
				}else{
				$("#list_status"+id_data).text('Belum pilih status');
				}*/

				$("#tabel_id"+id_data).val(id_data);
				$("#tabel_idjenis"+id_data).val(id_jenis);				
				$("#tabel_pickAtas"+id_data).val(pick_atas);
				$("#tabel_pickBawah"+id_data).val(pick_bawah);
				$("#tabel_upah"+id_data).val(upah);
				$("#tabel_status"+id_data).val(status);
			}

			$("#exampleModal").modal('hide');
			tb_no++;
		}
	})

	function edit_table(id){

		var id_jenis 	= $("#tabel_idjenis"+id).val();
		var pick_atas 	= $("#tabel_pickAtas"+id).val();
		var pick_bawah 	= $("#tabel_pickBawah"+id).val();
		var upah 		= $("#tabel_upah"+id).val();
		var status 		= $("#tabel_status"+id).val();

		$("[name=popup_id_table]").val(id);
		$("[name=popup_jenis]").val(id_jenis).trigger('change');
		$("[name=popup_pickAtas]").val(pick_atas);
		$("[name=popup_pickBawah]").val(pick_bawah);
		$("[name=popup_upah]").val(upah);
		$("[name=popup_status]").val(status).trigger('change');
		
		$("#help_popup_pickAtas").text(format_angka(pick_atas));
		$("#help_popup_pickBawah").text(format_angka(pick_bawah));
		$("#help_popup_upah").text(accounting.formatMoney(upah));

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


	$("[name=popup_pickAtas]").keyup(function(){
		var rp = format_angka($("[name=popup_pickAtas]").val());
		$("#help_popup_pickAtas").text(rp);
	});

	$("[name=popup_pickBawah]").keyup(function(){
		var rp = format_angka($("[name=popup_pickBawah]").val());
		$("#help_popup_pickBawah").text(rp);
	})

	$("[name=popup_upah]").keyup(function(){
		var rp = accounting.formatMoney($("[name=popup_upah]").val());
		$("#help_popup_upah").text(rp);
	})



	function get_edit(id){
		$.ajax({
			url: "{{ url('pick/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_jenis'+respon[i].id_pick_barang+'">'+respon[i].nama_pick+'</div>',
							'<div id="list_pickAtas'+respon[i].id_pick_barang+'">'+format_angka(respon[i].pick_atas)+'</div>',
							'<div id="list_pickBawah'+respon[i].id_pick_barang+'">'+format_angka(respon[i].pick_bawah)+'</div>',
							'<div id="list_upah'+respon[i].id_pick_barang+'">'+accounting.formatMoney(respon[i].upah)+'</div>',
							'<div id="list_status'+respon[i].id_pick_barang+'">'+respon[i].nama_status+'</div>',
							'<div><button type="button" class="btn btn-xs bg-warning-400" onclick="edit_table('+respon[i].id_pick_barang+')"><i class="icon-pencil"></i> </button> <button class="btn btn-xs 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_pick_barang+'" value="'+respon[i].id_pick_barang+'">'+
							'<input type="hidden" name="tabel_idjenis[]" id="tabel_idjenis'+respon[i].id_pick_barang+'" value="'+respon[i].jenis_pick+'">'+
							'<input type="hidden" name="tabel_pickAtas[]" id="tabel_pickAtas'+respon[i].id_pick_barang+'" value="'+respon[i].pick_atas+'">'+
							'<input type="hidden" name="tabel_pickBawah[]" id="tabel_pickBawah'+respon[i].id_pick_barang+'" value="'+respon[i].pick_bawah+'">'+
							'<input type="hidden" name="tabel_upah[]" id="tabel_upah'+respon[i].id_pick_barang+'" value="'+respon[i].upah+'">'+
							'<input type="hidden" name="tabel_status[]" id="tabel_status'+respon[i].id_pick_barang+'" value="'+respon[i].status+'">'
							]).draw(false);
					}
				}
				
			}
		})
	}


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

</script>

@endsection