@extends('layout.master')
@section('title','進貨單')


@section('content-title')
	<span>{{ '進貨單' }}</span>
@endsection

{{-- 清單頁 --}}
@section('content')
	<link rel="stylesheet" type="text/css" href="{{ asset('css/stock.css') }}" />
	<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

	<script type='text/javascript'>

		form_obj.module     = 'Purchase';
		form_obj.controller = 'PurchaseController';
		form_obj.route_name = '{{ basename(url()->current()) }}';

		form_obj.detail.ajax.save = function(){

			if(!$('#'+form_obj.detail.form_id)[0].checkValidity()) {

				$('.detail_loading_mask').loading('stop');
				$('#'+form_obj.detail.form_id+' #'+form_obj.detail.sb_btn).click();
			}
			else {

				var formData = new FormData($('#'+form_obj.detail.form_id)[0]);
					formData.append('module',form_obj.module);
					formData.append('controller',form_obj.controller);
					formData.append('type',formData.get(form_obj.detail.type_id));
					formData.append('id',formData.get(form_obj.detail.master_id));
					formData.append('print_log',false);



				$.ajax({
					data:formData,
					datatype: 'json',
					contentType: false,
					processData: false,
					success:function( data, textStatus, jqXHR )
					{
						// console.log(data);
						if(isJson(data)) {

							var json = JSON.parse(data);
							if(json.status) {
                                sweetAlert('success',json.msg);
                                setTimeout(function() {location.reload();}, 1000);
							} 
							else {
                                sweetAlert('error',json.msg);
							}

						} 
						else {
							console.log(data);
							$('.detail_loading_mask').loading('stop');
						}
					},
					error:ajaxError
				});
			}

		}

		form_obj.detail.ajax.get = function() {

			$.ajax({
				data:{
					module:form_obj.module,
					controller:form_obj.controller,
					type:'read',
					where: {
						id:$('#'+form_obj.detail.master_id).val(),
					},
					print_log:false,
				},
				success:function( data, textStatus, jqXHR ) {
					// console.log(data);
					if(isJson(data))
                    {
						var json = JSON.parse(data);
						form_obj.detail.displayData(json['data']['list'][0]);

						$( "#"+form_obj.master.form_id).hide();
						$( "#normal_detail").show();

						$('#'+form_obj.detail.type_id).val('update');
					}
				},
				error:ajaxError
			});
		}

		form_obj.detail.displayData = function( data ) {

			$('input,textarea,select').each(function() {
				if(this.id in data)
				{
					if(empty(data[this.id])) return;
					this.value = data[this.id];
					if(this.multiple)
					{
						$(this).val(data[this.id].split(','));
					}

					//////////////////////////////

				}
			});
			$('#invoice_id').val(data['payment']['invoice_id']);

			// 日曆套件更新日期
            $('.date_picker').each(function(i,o) {

                if($('#'+o.id).val()!='') 
                {
                    $(this).data('daterangepicker').setStartDate($('#'+o.id).val());
                    $(this).data('daterangepicker').setEndDate($('#'+o.id).val());
                }
            });
			
			// 明細項
			if(!empty(data['detail'])) { 
				for(var i=0; i<data['detail'].length; i++) {
					var detail = data['detail'][i];

					add_row();
					detail_btn_click();

					$.each(detail, function( key, value ) {
						$($('#detail_grid').find('div.row')[i]).find('.detail_'+key).val(value);

						if($('.detail_'+key+'_span').length>0) {
							if(key=='tax_amount') {
								$($('.detail_'+key+'_span')[i]).text(appendFormat(value,','));
							}
							else {
								$('.detail_'+key+'_span')[i].innerHTML = value;
							}
						}
					});
				}
			}

			// select2 update
			$('select').trigger('change.select2');
		}

		form_obj.detail.ajax.delete = function() {

			$.ajax({
				data:{
					module: form_obj.module,
					controller: form_obj.controller,
					type: $('#'+form_obj.detail.type_id).val(),
					where: {
						id:$('#'+form_obj.detail.master_id).val(),
					},
					print_log: false,
				},
				success:function( data, textStatus, jqXHR ) {

					if(isJson(data)) {

						var json = JSON.parse(data);
						if(json.status) {
                            sweetAlert('success',json.msg);
                            // setTimeout(function() {location.reload();}, 1000);
                            table.refreshTable();
						} 
						else {
                            sweetAlert('error',json.msg);
						}
					} 
					else {
						console.log(data);
						$('.loading-mask').loading('stop');
					}
					
				},
				error:ajaxError
			});
		}	
		
		$(function() {
			do_js_action(form_obj.route_name+'-$function-start');

			$('#purchase_type_id').change(function() {
				var value = $(this).val();

				$.each($('.detail_purchase_type_id'),function(k,v) {
					$(this).val(value);
				})

				$('.detail_purchase_type_id').trigger('change.select2');
			});

			$('#condition_id').change(function() {
				var value = $(this).val();

				$.each($('.detail_condition_id'),function(k,v) {
					$(this).val(value);
				})

				$('.detail_condition_id').trigger('change.select2');
			});

			$('#is_finish').change(function() {
				if( $(this).prop('checked') ) 
				{
					$('.detail_finish').bootstrapToggle('on');
				}
				else 
				{
					$('.detail_finish').bootstrapToggle('off');
				}
			});

			////////////////////////
	       	// init detail btn
			detail_btn_click();

			////////////////////////
			// 從商品轉進貨單
			if( !empty(sessionStorage.getItem('selections')) 
				&& !empty(sessionStorage.getItem('selections_type'))) {
				// show add view
				$('.add_btn').trigger('click');

				var selections = JSON.parse(sessionStorage.getItem('selections'));
				var selections_type = sessionStorage.getItem('selections_type');
				sessionStorage.removeItem('selections');
				sessionStorage.removeItem('selections_type');

				if(selections_type=="serial") {
					$.ajax({
						data:{
							module: 'Stock',
							controller: 'StockSerialController',
							type: 'read',
							where: {
								ids: selections,
							},
							print_log: false,
						},
						success:function( data, textStatus, jqXHR ) {
							console.log(data);
							if(isJson(data))
		                    {
								var json = JSON.parse(data);
								var lists = json['data']['list'];

								var counter = 0;
								lists.forEach(function(list) {
									add_row();
									detail_btn_click();

									$($('#detail_grid').find('div.row')[counter]).find('.detail_stock_id').val(list.stock_id);
									$($('#detail_grid').find('div.row')[counter]).find('.detail_serial_no').val(list.id);

									counter++;
								})

								// select2 update
								$('select').trigger('change.select2');
							}
							
						},
						error:ajaxError
					});
				}
			}

			do_js_action(form_obj.route_name+'-$function-end');
		});

		//////////////////////////////////////
		/* detail datagrid */
		function add_row()
		{
			var target = '#detail_grid';

			$(target).find('.single_select2').select2('destroy');

			var $clone = $(target).find('div.row').eq(0).clone();
			$($clone).appendTo($('#detail_grid'));// 新一列

			$($(target).find('div.row')[$('.detail_add_btn').length-1]).find('input,textarea,select').val('');// 清空
			$($(target).find('div.row')[$('.detail_add_btn').length-1]).find('datalist option').remove();
		
			$(target).find('.detail_stock_id').each(function(i,o) {
				$($('.detail_serial_no')[i]).attr('list','serial_'+(i+1));
				$($('.detail_serial_no')[i]).next('datalist').attr('id','serial_'+(i+1));
				$($('.detail_location')[i]).attr('list','location_'+(i+1));
				$($('.detail_location')[i]).next('datalist').attr('id','location_'+(i+1));
			});
			$(target).find('.single_select2').select2({
                width: '100%',
                language: "{{ app()->getLocale() }}",
            });
		}

		function detail_btn_click()
		{
			$('.detail_add_btn').unbind('click');
			$('.detail_del_btn').unbind('click');

			$('.detail_add_btn').click(function() {
				add_row();
				detail_btn_click();
			});

			$('.detail_del_btn').click(function() {
				var index = $('.detail_del_btn').index(this);
				//只剩一個不刪
				if($('.detail_del_btn').length==1)return;

				$($('#detail_grid').find('div.row')[index]).remove();

				$('.detail_stock_id').each(function(i,o){
					$($('.detail_serial_no')[i]).attr('list','serial_'+(i+1));
					$($('.detail_serial_no')[i]).next('datalist').attr('id','serial_'+(i+1));
					$($('.detail_location')[i]).attr('list','location_'+(i+1));
					$($('.detail_location')[i]).next('datalist').attr('id','location_'+(i+1));
				});
			})

			$(".input-div").mouseover(function() {
				$('.input-div').find('.input-x-img').hide();
				$(this).not('.disabled').find('.input-x-img').show();
			});

			$('.input-x-img').click(function() {
				$(this).siblings('input').val(""); 
				$(this).hide();
			});

			detail_select();
		}

		function detail_select()
		{
			$('.detail_stock_id').unbind('select2:select').on('select2:select', function (e) {
				//自動增行
				const o = $('.detail_stock_id');
				const i = o.index(this);

				var stock_id = this.value;
				$.ajax({
					data:{
						module:"Stock",
						controller:"StockSerialController",
						type:'read',
						where: {
							stock_id: stock_id,
						},
						print_log:false,
					},
					success:function( data, textStatus, jqXHR ) {
						// console.log(data);
						if(isJson(data))
						{
							var json = JSON.parse(data);
							if(json.status) {
                                json.data.list.forEach(function(item) {
									$('#serial_'+(i+1)).append(`<option value="${item.id}">${item.id}</option>`);
								})
							}
						}

						if(o[o.length-1].value=='')
						{
							if(o.length>1 && o[o.length-2].value=='')
							{
								$('.detail_del_btn')[o.length-1].click();
							}
							else
							{
								return;
							}
						}
						else if(o[o.length-1].value!='')
						{
							add_row();
							detail_btn_click();
						}
					},
					error:ajaxError
				});
			})
		}

		//////////////////////////////////////
		/* bootstrap table */
        // table init columns
        function initColumns() {
			return columns = [
				/*
				{
				    checkbox: true,
				    clickToSelect: false,
				},
				*/
				{
					field: 'date',
					title: '進貨單日期',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					field: 'code',
					title: '進貨單單號',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					field: 'partner',
					title: '進貨來源',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					field: 'contact_person',
					title: '聯絡人',
					align: 'center',
					valign: 'middle',
					sortable: true
				},
				{
					field: 'purchase_type',
					title: '進貨類別',
					align: 'center',
					valign: 'middle',
					sortable: true
				},
				{
					field: 'condition',
					title: '狀態',
					align: 'center',
					valign: 'middle',
					sortable: true
				},
				{
					field: 'warehouse',
					title: '倉庫',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					field: 'create_time',
					title: '製表時間',
					align: 'center',
					valign: 'middle',
					clickToSelect: false
				},
				{
					field: 'finish',
					title: '結案狀態',
					align: 'center',
					valign: 'middle',
					clickToSelect: false,
					formatter : function(value, row, index) {

						let checked = "";
						if(value) checked = "checked";

                        return `<input type="checkbox" class="toggle-one finish_btn" data-toggle="toggle" data-on="是" data-off="否" data-size="sm" data-key="${row.id}" onChange="finishRow(this,'${row.id}')" ${checked} >`;
                    }
				},
				{
					width: 40,
					field: 'cancel',
					title: '',
					align: 'center',
					valign: 'middle',
					clickToSelect: false,
					formatter : function(value, row, index) {

						let disabled = "";
						if(row.shipping || row.finish) disabled = "disabled";

						return `
								<a href="javascript:void(0)"
									class="edit_btn"
									data-key="${row.id}"
									onClick="editRow('${row.id}')"
									style="display: none;" ></a>
								<button type="button" data-key="${row.id}" onClick="delRow('${row.id}')" class="btn btn-danger" ${disabled} >{{ __('basic.Delete') }}</button>
								`;
					}
                }
			];
        }

        // table get data
        function getData( params ) {
        	// console.log(params);
        	$.ajax({
				data:{
					module: form_obj.module,
					controller: form_obj.controller,
					type: 'read',
					search: params.data.search,
                    offset: params.data.offset,
                    limit: params.data.limit,
                    sort: params.data.sort,
                    order: params.data.order,
					print_log: false,
				},
				success:function( data, textStatus, jqXHR ) {
					// console.log(data);
					if(isJson(data))
                    {
                        var json = JSON.parse(data);
                        if(json.status)
                        {
                            let data = [];
                            $.each(json.data.list, function(i,v) {
                                let row_data = {
                                    'id': v.id,
                                    'date': v.purchase_date,
                                    'code': v.code,
                                    'partner': v.partner.name,
                                    'contact_person': v.contact_person,
                                    'purchase_type': (!empty(v.purchase_type))?v.purchase_type.name:null,
                                    'condition': (!empty(v.condition))?v.condition.name:null,
                                    'warehouse': v.warehouse.name,
                                    'create_time': v.create_time,
                                    'finish': v.is_finish,
                                    'detail': v.detail,
                                };

                                data.push(row_data);
                            })

                            params.success({
                                total: json.data.count,
                                rows: data
                            });
                        }
                    }
				},
				error:ajaxError
			});
        }

        // build detail view
        function buildDetailTable( $el, row ) 
        {
            var i;
            var columns = [];
            var data = [];

            var columns = [
                {
                    width: 40,
                    field: 'item_index',
                    title: '{{__('basic.ItemIndex')}}',
                    sortable: false,
                    align: 'center'
                },
                {
                    field: 'stock',
                    title: '商品名稱',
                    sortable: true,
                    align: 'center'
                },
                {
                    field: 'serial_no',
                    title: '序號',
                    sortable: true,
                    align: 'center'
                },
                {
                    field: 'qty',
                    title: '{{__('basic.Qty')}}',
                    sortable: true,
                    align: 'center'
                },
                {
                    field: 'purchase_type',
                    title: '進貨類別',
                    sortable: true,
                    align: 'center'
                },
                {
                    field: 'description',
                    title: '{{__('basic.Description')}}',
                    sortable: false,
                    halign: 'center',
                    align: 'center',
                    formatter : function(value, row, index) {
                    	if(!empty(value)) {
	                        var replaceRegex = /(\n\r|\r\n|\r|\n)/g;
	                        return value.replace(replaceRegex, "<br/>");
	                    }
                    }
                },
            ];

            var detail = row.detail;
            for(i=0; i<detail.length; i++) {
                var list = {
                    "id":detail[i]['id'],
                    "item_index":i+1,
                    "stock":detail[i]['stock']['name'],
                    "serial_no":detail[i]['serial_no'],
                    "qty":detail[i]['qty'],
                    "purchase_type": (!empty(detail[i]['purchase_type']))?detail[i]['purchase_type']['name']:null,
                    "description":detail[i]['description'],
                };
				
                data.push(list);
            }

            $el.bootstrapTable({
                columns: columns,
                data: data,
                classes: 'table table-borderless table-hover table-sub',
            })
        }

        function shippingRow( el, id ) {

        	if(empty(id)) return;

        	let checked = $(el).prop("checked");
        	let text = "確定要取消出貨";
            let is_shipping = 0;
            if(checked) {
                text = "確定要出貨";
                is_shipping = 1;
            }

        	$(el).attr("onChange", "");
        	sweetConfirm('warning',text+'?').then((result) => {
                if (result.isConfirmed) {
                	 $.ajax({
                        data: {
                            module: form_obj.module,
                            controller: form_obj.controller,
                            type: 'shipping',
                            id: id,
                            is_shipping: is_shipping,
                            print_log: false,
                        },
                        success: function(data,textStatus,jqXHR) {
                            // console.log(data);
                            if(isJson(data)) {
                                var json = JSON.parse(data);
	                                if(json.status) {
	                                sweetAlert('success',json.msg);
	                                $('#dataTable').bootstrapTable('refresh');
								} 
								else {
	                                sweetAlert('error',json.msg);
	                                $(el).bootstrapToggle('toggle');
								}
                            }
                        },
                        error:ajaxError
                    });
                } else {
                	$(el).bootstrapToggle('toggle');
                }

                $(el).attr("onChange", "shippingRow(this,'"+id+"')");
            })

        }

        function finishRow( el, id ) {

        	if(empty(id)) return;

        	let checked = $(el).prop("checked");
        	let text = "確定要取消結案";
            let is_finish = 0;
            if(checked) {
                text = "確定要結案";
                is_finish = 1;
            }

        	$(el).attr("onChange", "");
        	sweetConfirm('warning',text+'?').then((result) => {
                if (result.isConfirmed) {
                	 $.ajax({
                        data: {
                            module: form_obj.module,
                            controller: form_obj.controller,
                            type: 'finish',
                            id: id,
                            is_finish: is_finish,
                            print_log: false,
                        },
                        success: function(data,textStatus,jqXHR) {
                            // console.log(data);
                            if(isJson(data)) {
                                var json = JSON.parse(data);
	                                if(json.status) {
	                                sweetAlert('success',json.msg);
	                                $('#dataTable').bootstrapTable('refresh');
								} 
								else {
	                                sweetAlert('error',json.msg);
	                                $(el).bootstrapToggle('toggle');
								}
                            }
                        },
                        error:ajaxError
                    });
                } else {
                	$(el).bootstrapToggle('toggle');
                }

                $(el).attr("onChange", "finishRow(this,'"+id+"')");
            })

        }
        //////////////////////////////////////

		add_js_action('master-data_table_event_post_body-start',function() {
			$('.toggle-one').bootstrapToggle();
		});
	</script>

	<form id="fm" name='fm' action='' method="post" enctype="multipart/form-data">
		@csrf @method('GET')
		
		<input type='hidden' id='type' name='type' value='' />
		<input type='hidden' id='master_id' name='master_id' value='' />

		<!-- Table Toolbar -->
		<div class='toolbar'>
			<div class='align-middle'>
				<button type='button' class='btn btn-sm toolbar-basic-btn both-middle add_btn' >
					<span>{{ strtoupper(__('basic.ADD')) }}</span>
				</button>
			</div>
		</div>

		<!-- Table -->
		<table id='dataTable' class='data_table'
            data-side-pagination="server"
            data-ajax="getData"
            data-detail-view="true" >
		</table>

	</form>
@endsection


<!--  Filter -->
@section('filter-title')
	<span>{{ __('basic.WorkOrder') .__('basic.FILTER') }}</span>
@endsection
@section('filter')
	
@endsection
<!--  END Filter -->

{{-- Detail --}}
{{-- @extends('layout.dialog_detail') --}}
@extends('layout.normal_detail')
@section('detail-title',__('basic.Sales'))
@section('detail-content')

	<div class='panel' style="height: calc(100% - 40px); overflow: auto; margin-top: unset;">
		<!-- Basic begin -->
		<h4>{{ __('basic.DETAIL') }}</h4>
		<div class='content-column row'>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>單號</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id='code' name="code" placeholder='自行輸入或由系統產生' autocomplete="off" />
				</div>
			</div> 
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>承辦公司</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='u2u_company_id' name='u2u_company_id' >
						{!! app('FrontendService')->getOption($select['u2u_company'],'id','name','','') !!}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>{{ __('basic.DATE') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='input-div align-middle'>
					<input type='date' class='input-column' id="purchase_date" name="purchase_date" value="{{date('Y-m-d')}}" max="9999-12-31" required />
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>業務負責人</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='' name='' >
						{{-- {!! app('FrontendService')->getOption($select['member'],'id','name','',__('basic.PleaseChoice')) !!} --}}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>進貨來源</span>
					<span class='warn'>*</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='partner_id' name='partner_id' >
						{!! app('FrontendService')->getOption($select['partner'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>聯絡人</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="contact_person" name="contact_person" placeholder='' autocomplete="off" />
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>分類</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='mbflag_type_id' name='mbflag_type_id' >
						{!! app('FrontendService')->getOption($select['mbflag_type'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>P/O NO</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="" name="" placeholder='' autocomplete="off" />
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>進貨類別</span>
					<span class='warn'>*</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='purchase_type_id' name='purchase_type_id' >
						{!! app('FrontendService')->getOption($select['purchase_type'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>狀況</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='condition_id' name='condition_id' >
						{{-- {!! app('FrontendService')->getOption($select['condition'],'id','name','',__('basic.PleaseChoice')) !!} --}}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>倉庫</span>
					<span class='warn'>*</span>
				</div>
				<div class='align-middle'>
					<select class='form-control single_select2' id='warehouse_id' name='warehouse_id' >
						{!! app('FrontendService')->getOption($select['warehouse'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>
			<div class='col-xl-3 col-lg-6 mb-4'>
				<div class='title'>
					<span>結案狀態</span>
				</div>
				<div class='align-middle'>
					<input type="checkbox" class="toggle-one" id='is_finish' name='is_finish' data-toggle="toggle" data-on="是" data-off="否" data-size="sm" >
				</div>
			</div>
		</div>
		<div class='content-column row'>
			<div class='col-12'>
				<div class='title'>
					<span>{{ __('basic.Description') }}</span>
				</div>
				<div class='align-middle'>
					<textarea class='form-control' id='description' name="description" rows=5 ></textarea>
				</div>
			</div>
		</div>
		<!-- Basic end -->
		<!-- Detail bigin -->
		<div class='content-column row'>
			<div class='col-12'>
				<div class='title'>
					<h4>細項</h4>
				</div>
			</div>
		</div>
		<div class='content-column row'>
			{{-- <label type='button' class='btn btn-sm toolbar-basic-btn both-middle upload_btn' style="margin-bottom: unset;">
				<input id="upload_file" style="display:none;" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" >
				<span>匯入Excel明細</span>
			</label> --}}
			<div class='col-12'>
				<!-- DetailGrid Title begin -->
				<div class='content-column row' style=" border-bottom: 2px solid #E3E3E3;">
					<div class='col-2 both-middle'>
						<span>{{ __('basic.Product') }}</span>
					</div>
					<div class='col-1 both-middle'>
						<span>序號</span>
					</div>
					<div class='col-1 both-middle'>
						<span>{{ __('basic.Qty') }}</span>
					</div>
					<div class='col-1 both-middle'>
						<span>進貨類別</span>
					</div>
					<div class='col-1 both-middle'>
						<span>狀態</span>
					</div>
					<div class='col-1 both-middle'>
						<span>關聯出貨單</span>
					</div>
					<div class='col-1 both-middle'>
						<span>擁有權</span>
					</div>
					<div class='col-1 both-middle'>
						<span>位置</span>
					</div>
					<div class='col-1 both-middle'>
						<span>{{ __('basic.Description') }}</span>
					</div>
					<div class='col-1 both-middle'>
						<span>結案狀態</span>
					</div>
					<div class='col-1 both-middle'>
						<span>{{ __('basic.Option') }}</span>
					</div>
				</div>
				<!-- DetailGrid Title end -->
				<!-- DetailGrid Body begin -->
				<div class='row'>
					<div class='col-12' id='detail_grid'>
						<!-- DetailGrid Body Row begin -->
						<div class='content-column row' >
							<div class='col-2 both-middle'>
								<select class='form-control single_select2 detail_stock_id' name='detail_stock_id[]' >
									<option value="">{{__('basic.PleaseChoice')}}</option>
									@foreach($select['stock'] as $value) 
										<option value="{{$value['id']}}">{{$value['code']."#".$value['name']}}</option>
									@endforeach;
								</select>
							</div>
							<div class='col-1 both-middle'>
								<div class='input-div align-middle'>
									<input type='text' class='input-column detail_serial_no' list="serial_1" name="detail_serial_no[]" autocomplete="off" />
									<datalist id="serial_1"></datalist>
								</div>
							</div>
							<div class='col-1 both-middle'>
								<div class='input-div align-middle'>
									<input type='text' class='input-column text-right detail_qty' name="detail_qty[]" autocomplete="off" />
								</div>
							</div>
							<div class='col-1 both-middle'>
								<select class='form-control single_select2 detail_purchase_type_id' name='detail_purchase_type_id[]' >
									<option value="">{{__('basic.PleaseChoice')}}</option>
									@foreach($select['purchase_type'] as $value) 
										<option value="{{$value['id']}}">{{$value['name']}}</option>
									@endforeach;
								</select>
							</div>
							<div class='col-1 both-middle'>
								<select class='form-control single_select2 detail_condition_id' name='detail_condition_id[]' >
									<option value="">{{__('basic.PleaseChoice')}}</option>
									{{-- @foreach($select['stock'] as $value) 
										<option value="{{$value['id']}}">{{$value['code']."#".$value['name']}}</option>
									@endforeach; --}}
								</select>
							</div>
							<div class='col-1 both-middle'>
								<select class='form-control single_select2 detail_sale_id' name='detail_sale_id[]' >
									<option value="">{{__('basic.PleaseChoice')}}</option>
									{{-- @foreach($select['stock'] as $value) 
										<option value="{{$value['id']}}">{{$value['code']."#".$value['name']}}</option>
									@endforeach; --}}
								</select>
							</div>
							<div class='col-1 both-middle'>
								<select class='form-control single_select2 detail_owner_id' name='detail_owner_id[]' >
									<option value="">{{__('basic.PleaseChoice')}}</option>
									{{-- @foreach($select['stock'] as $value) 
										<option value="{{$value['id']}}">{{$value['code']."#".$value['name']}}</option>
									@endforeach; --}}
								</select>
							</div>
							<div class='col-1 both-middle'>
								<div class='input-div align-middle'>
									<input type='text' class='input-column detail_location' list="location_1" name="detail_location[]" autocomplete="off" />
									<datalist id="location_1"></datalist>
								</div>
							</div>
							<div class='col-1 both-middle'>
								<div class='input-div align-middle'>
									<input type='text' class='input-column text-right detail_description' name="detail_description[]" autocomplete="off" />
								</div>
							</div>
							<div class='col-1 both-middle'>
								<div class='align-middle'>
									<input type="checkbox" class="toggle-one detail_finish" name="detail_finish[]" data-toggle="toggle" data-on="是" data-off="否" data-size="sm" >
								</div>
							</div>
							<div class='col-1 both-middle'>
								<img src="{{ asset('image/icon-act-add-lm.png')}}" class="cursor-pointer detail_add_btn search-ctrl-img" style="display: none;">
								<img src="{{ asset('image/icon_act_cancel_lm.png')}}" class="cursor-pointer detail_del_btn search-ctrl-img" >
							</div>
						</div>
						<!-- DetailGrid Body Row end -->
					</div>
				</div>
				<!-- DetailGrid Body end -->
			</div>
		</div>
		<!-- Detail end -->
	</div>

@endsection