@extends('layout.master')
@section('title',__('basic.Products'))


@section('content-title')
	<span>{{ __('basic.Products') }}</span>
@endsection

{{-- 清單頁 --}}
@section('content')
	<link rel="stylesheet" type="text/css" href="{{ asset('css/stock.css') }}" />

	<script type='text/javascript'>
		form_obj.module='Stock';
		form_obj.controller='StockBomController';
		form_obj.route_name='{{ basename(url()->current()) }}';
		form_obj.use_dialog=false;

		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('stock_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);
							alert(json.msg);
							if(json.status)
							{
								parent.$.fn.colorbox.close();//關閉視窗
								location.reload();
							}
							else
							{
								console.log(json.data);
								$('.detail_loading_mask').loading('stop');
							}
						}
						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]);
						// openDialog('update','{{ __('basic.EDIT') }}',form_obj.detail);

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

						$('#'+form_obj.detail.type_id).val('update');

					}
					else
					{
						console.log(data);
					}
				},
				error:ajaxError
			});
		}

		form_obj.detail.displayData = function(data)
		{
			$('input,textarea,select').not('[type="checkbox"]').each(function()
			{
				if(this.id in data)
				{
					if(!empty(data[this.id])) this.value = data[this.id];
					if(this.multiple)
					{
						$(this).val(data[this.id].split(','));
					}
				}
			});

			$('input[type="checkbox"]').prop('checked', false);

			$('input[type="checkbox"]').each(function(i,o){
				if(o.name.indexOf('meta[')>=0){
					var field = '';
					if($(o).data('field')!=undefined){
						field = $(o).data('field');
					}else{
						field = o.id;
					}

				}else{
					field = o.name;
				} 
				if(data[field]==undefined)return;

				if(data[field]==o.value){
					o.checked=true;
				}					
			});


			if(!empty(data['stock_custom']))
			{
			    $.each(data['stock_custom'], function(key,value) {

			    	var custom_option_obj = $('input[name="'+value['stock_option_id']+'[]"][value="'+value['stock_option_detail_id']+'"]');
			    	if(custom_option_obj.length>0){
						custom_option_obj.prop('checked', true);
					}

					if(value['stock_option_id']=="size") {
						$('.'+value['stock_option_detail_id']+'_pt').show();
						$('.'+value['stock_option_detail_id']+'_setting').show();
					}

					/*
					$.each(value['detail'], function(detail_index,detail_value) {

						var custom_option_obj = $('input[name="'+value['stock_option_id']+'[]"][value="'+detail_value['stock_option_detail_id']+'"]');

						if(custom_option_obj.length>0){
							custom_option_obj.prop('checked', true);
						}	
					});	
					*/
				});
			}

			if(!empty(data['price']))
			{
			    $.each(data['price'], function(key,value) {
			    	// $('.'+key+'_pt').show();
			    	$('#'+value['size']+'_price').val(value['price']);
				});
			}

			if(!empty(data['detail']))
			{ 
				// console.log(data['detail']);
				for(var i=0; i<data['detail'].length; i++) 
				{
					var detail = data['detail'][i];

					detail_add_row();
					detail_btn_click();

					$.each(detail, function(key,value) {

						$($('#bom_detail').find('.detail_'+key)[i]).val(value);	

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

					if(isJson(detail['qty'])) {
						var qty = JSON.parse(detail['qty']);
						$.each(qty, function(key,value) {
							// $('.'+key+'_setting').show();
							$($('.detail_'+key)[i]).val(value);
						});
					}
						
				}
			}


			//日曆套件更新日期
			$('.date_picker').each(function(i,o){
				if($('#'+o.id).val()!=''){
					$(this).data('daterangepicker').setStartDate($('#'+o.id).val());
					$(this).data('daterangepicker').setEndDate($('#'+o.id).val());
				}
			});

			c_dz._target = '.picture';
			c_dz.option.maxFiles = 1;
			c_dz.option.params.type = 'insert';
			c_dz.option.params.master_id = data['related_stock_id'];
			c_dz.init();

			//照片建立預覽
			if(!empty(data['img_file_name'])){

				var img_arr = data['img_file_name'].split(',');
				var img_org_arr = data['img_file_org_name'].split(',');
				var media_type_arr = data['file_media_type'].split(',');

				var params={
					master_id:data['related_stock_id'],
					// type:'img',
					name_arr:img_arr,
					org_name_arr:img_org_arr,
					media_type_arr:media_type_arr,
				}

				//畫面清空
				$('.file_upload .dz-default').siblings().remove();

				c_dz.createFile($(c_dz._target)[0],0,img_arr.length-1,params);
			}


			//chosen更新
			$('select').trigger('chosen:updated');
		}

		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);
						alert(json.msg);
						if(json.status)
						{
							location.reload();
						}
						else
						{
							console.log(json.data);
							$('.loading-mask').loading('stop');
						}
					}
					else
					{
						console.log(data);
						$('.loading-mask').loading('stop');
					}					
				},
				error:ajaxError
			});
		}	
		
		$(function() {

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

			//事件
			$( "#"+form_obj.detail.dialog_id).on('dialogopen',function(event,ui){
				logger('in');
				if($('#'+form_obj.detail.type_id).val() =='create' ){
					c_dz._target = '.picture';
			  		c_dz.option.params.type = 'insert';
					c_dz.init();
				}else if($('#'+form_obj.detail.type_id).val() =='update'){
					// var member_id = $('#'+form_obj.detail.master_id).val();
				}

				c_dz._target = '.picture';
		  		c_dz.option.params.type = 'insert';
		  		// c_dz.option.params.master_id = member_id;
				c_dz.init();

				
			});

			//重新綁定
			$('.add_btn').click(function()
			{
				var stock_id = getUUID();
				$('#related_stock_id').val(stock_id);

				// openDialog('create','{{ __('basic.ADD') }}',form_obj.detail,'');
				c_dz._target = '.picture';
		  		c_dz.option.maxFiles = 1;
		  		c_dz.option.params.type = 'insert';
		  		c_dz.option.params.master_id = stock_id;
				c_dz.init();


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

				$('#'+form_obj.detail.type_id).val('create');
			});


			$('.size').click(function()
			{
				$('.setting_row').hide();
				$('.price_row').hide();
				$('input[name="size[]"]:checked').each(function() {
				   var val = $(this).val();

				   $('.'+val+'_setting').show();
				   $('.'+val+'_pt').show();
				});
			});

			//////////////////////
			detail_btn_click();

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

		function detail_add_row()
		{
			$($('#bom_detail').find('div.detail_row').clone()[0]).appendTo($('#bom_detail'));
			$($('#bom_detail').find('div.detail_row')[$('.detail_add_btn').length-1]).find('input').val('');
			// $($('#bom_detail').find('div.row')[$('.detail_add_btn').length-1]).find('span').text('');

			//reset chosen
			$('.chosen-container-single:last').remove();
			$('.detail_stock_id:last').chosen({width:'100%',search_contains:true});
			$('.detail_stock_id:last').parent().css('overflow','visible');

			//reset index
			$('.detail_item_index').each(function(i,o) {
				o.innerHTML=i+1;
			});
		}

		function detail_stock_select()
		{

			$('.detail_stock_id').unbind('change');
			$('.detail_stock_id').chosen().change(function() {

				var index = $('.detail_stock_id').index(this);
				var id    = this.value;
				var o     = $('.detail_stock_id');

				$($('.detail_stock_unit_name_span')[index]).text('');


				///////////////////////////////////////////////
				//自動增行
				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!='')
				{
					detail_add_row();
					detail_btn_click();
				}

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

								$($('.detail_stock_unit_name_span')[index]).text(data.stock_unit);
							}
							else
							{
								console.log(data);
							}
						},
						error:ajaxError
					});
				}
			})
		}

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

			$('.detail_add_btn').click(function() {

				detail_add_row();
				// 新的按鈕也要掛載
				detail_btn_click();
			});

			$('.detail_del_btn').unbind('click').click(function() {

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

				$($('#bom_detail').find('div.detail_row')[index]).remove();

				//reset index
				$('.detail_item_index').each(function(i,o) {
					o.innerHTML=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_stock_select();
		}

		add_js_action('master-data_table_event_post_body-start',function() {

		});
	</script>

	<style type="text/css">
		.stock_custom .title span{
			font-size: 16px;
		}

		.stock_custom .stock_custom_detail_area span{
			font-size: 14px;
		}
		

	</style>

	<form id="fm" name='fm' action='{{ url('project.project_type') }}' 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='' />

		<div class='toolbar'>
			<div class='align-middle'>
				{{-- <button type='button' class='btn btn-sm toolbar-basic-btn extra-btn both-middle' >
					<span>{{ __('basic.FILTER') }}</span> &nbsp
					<svg height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg"><title/><rect fill="#464646" height="6" rx="2" width="6" x="2" y="6"/><rect fill="#464646" height="6" rx="2" width="6" x="9" y="12"/><rect fill="#464646" height="6" rx="2" width="6" x="16" y="7"/><rect fill="#464646" height="2" width="2" x="4" y="2"/><rect fill="#464646" height="8" width="2" x="4" y="14"/><rect fill="#464646" height="2" width="2" x="11" y="20"/><rect fill="#464646" height="8" width="2" x="11" y="2"/><rect fill="#464646" height="3" width="2" x="18" y="2"/><rect fill="#464646" height="7" width="2" x="18" y="15"/></svg>
				</button>

				<button type='button' class='btn btn-sm toolbar-basic-btn extra-btn both-middle' >
					<span>{{ __('basic.EXPORT') }}</span> &nbsp
					<svg height="18px" version="1.1" viewBox="0 0 18 18" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#666666" id="Core" transform="translate(-87.000000, -213.000000)"><g id="exit-to-app" transform="translate(87.000000, 213.000000)"><path d="M7.1,12.6 L8.5,14 L13.5,9 L8.5,4 L7.1,5.4 L9.7,8 L0,8 L0,10 L9.7,10 L7.1,12.6 L7.1,12.6 Z M16,0 L2,0 C0.9,0 0,0.9 0,2 L0,6 L2,6 L2,2 L16,2 L16,16 L2,16 L2,12 L0,12 L0,16 C0,17.1 0.9,18 2,18 L16,18 C17.1,18 18,17.1 18,16 L18,2 C18,0.9 17.1,0 16,0 L16,0 Z" id="Shape"/></g></g></g></svg>
				</button> --}}

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

		<table class='data_table' data-classes='table table-borderless table-hover' data-toolbar='.toolbar' data-pagination="true" data-search="true" data-search-align='left' data-locale='{{ app()->getLocale() }}' >
			<thead>
				<tr>
					<th data-sortable="true"  data-align='center' data-halign='center' data-width='40'></th>
					<th data-sortable="true"  data-align='center' data-halign='center'>{{ __('basic.Name') }}</th>
					<th data-sortable="true"  data-align='center' data-halign='center'>{{ __('basic.Classification') }}</th>
					<th data-sortable="true"  data-align='center' data-halign='center'>{{ __('basic.Description') }}</th>
					<th data-sortable="true"  data-align='center' data-halign='center' data-width='40'></th>
				</tr>
			</thead>
			<tbody>
				{{-- {{ var_dump($data) }} --}}
				@for($d=0;$d<count($data['list']);$d++)
					@php $row = $data['list'][$d] @endphp
				<tr>
					<td>{{ $d+1 }}</td>
					<td>
						<input type="hidden" class="data_id" value="{{ $row->id }}" />
						<a href='javascript:void(0)' data-key="{{ $row->id }}" class='edit_btn'>{{ $row->name ?? '--' }}</a>
					</td>
					<td>{{ $row->stock_classification_name ?? '--' }}</td>
					<td>{{ $row->description ?? '--' }}</td>
					<td><img src="{{ asset('image/icon_act_cancel_lm.png')}}" data-key="{{ $row->id }}" class="cursor-pointer remove_btn search-ctrl-img"></td>
				</tr>
				@endfor
			</tbody>
		</table>
	</form>
@endsection


{{-- 明細頁 --}}
{{-- @extends('layout.dialog_detail') --}}
@extends('layout.normal_detail')
@section('detail-title',__('basic.Products'))
@section('detail-content')

	<div class='panel'>
		<h4>{{ __('basic.Detail') }}</h4>

		<div class="form-group">
			<div class='dropzone_css file_upload picture' id='picture' style="width: 60%">
				<div class="dz-default dz-message both-middle" style=''>
					<i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 120px; color: #0099FF"></i>
					<div class='both-middle' style="">
						<div style="margin-left: 12px">
							<div class='both-middle' style="background-color: #11CFBD;height: 50px;width: 217px;">
								<span style="color: white;">Choose a file to Upload</span>
							</div>
							<span>Or drag and drop the file Here</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class='content-column row'>
			<div class='col-12'>
				<div class='title'>
					<span>{{ __('basic.Name') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='input-div align-middle'>
					<input type='hidden' class='input-column' id="related_stock_id" name="related_stock_id" />
					<input type='text' class='input-column' id="name" name="name" placeholder='' required />
				</div>
			</div>
		</div>

		<div class='content-column row'>
			<div class='col-6'>
				<div class='title'>
					<span>{{ __('basic.Brand') }}</span>
					<span class='warn'>*</span>
				</div>
				{{-- <div style="width: calc(100% - 52px);"> --}}
					<select class='form-control' id='stock_brand_id' name='stock_brand_id' >
						{!! app('FrontendService')->getOption($data['select']['brand'],'id','name','','') !!}
					</select>
				{{-- </div> --}}
				{{-- <button type='button' class='btn btn-sm add-main-btn ' id='add_stock_category' style="margin-left: auto;" >
					<svg height="16px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#FF6E00"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
				</button> --}}
			</div>

			<div class='col-6'>
				<div class='title'>
					<span>{{ __('basic.Classification') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='align-middle'>
					<select class='form-control' id='stock_classification_id' name='stock_classification_id' >
						{!! app('FrontendService')->getOption($data['select']['classification'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>

			{{-- <div class='col-6'>
				<div class='title'>
					<span>{{ __('basic.Category') }}</span>
					<span class='warn'>*</span>
				</div>
				<select class='form-control' id='stock_category_id' name='stock_category_id' >
					{!! app('FrontendService')->getOption($data['select']['category'],'id','name','',__('basic.PleaseChoice')) !!}
				</select>
			</div> --}}
		</div>

		<div class='content-column row'>
			<div class='col-6'>
				<div class='title'>
					<span>{{ __('basic.UnitofMeasurement') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='align-middle'>
					<select class='form-control' id='stock_unit_id' name='stock_unit_id' >
						{!! app('FrontendService')->getOption($data['select']['stock_unit'],'id','name','',__('basic.PleaseChoice')) !!}
					</select>
				</div>
			</div>

			{{--<div class='col-6'>
				<div class='title'>
					<span>{{ __('basic.Price') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="price" name="price" placeholder='' required />
				</div>
			</div>--}}
		</div>

		<div class='content-column row'>

			<div class='col-12'>
				<div class='align-middle row'>
					<div class='col-12'>
						<div class='title'>
							<span>{{ __('basic.Description') }}</span>
						</div>
						<div class=' align-middle full-col'>
							<textarea class='form-control' id='description' name="description" rows=5 ></textarea>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<div class='panel stock_custom'>
		<div>
			<h4>客製化選項</h4>
		</div>

		@foreach ($data['select']['stock_option'] AS $stock_option_index => $stock_option_value)
			<div class='d-flex content-column'>
				<div class='col-1 both-middle title'>
					<input type='hidden' name='stock_option[]' value="{{$stock_option_value['id']}}">
					<span>{{$stock_option_value['name']}}</span>
				</div>

				<div class='stock_custom_detail_area row col-11'>
					@foreach ($stock_option_value['detail'] AS $detail_index => $detail_value)
						@php 
						$checked = ""; 
						if($detail_value['id']=="l") $checked = "checked";
						@endphp
						<div class='d-flex align-middle col-2'>
							<input type="checkbox" class="{{$stock_option_value['id']}}" name="{{$stock_option_value['id']}}[]" value="{{ $detail_value['id'] }}" style="width:20px;height:20px;" {{$checked}}>
							<span class='ml-1'>{{ $detail_value['name'] }}</span>
						</div>
					@endforeach


					{{-- <div class='d-flex align-middle ml-4'>
						<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
						<span class='ml-1'>熱</span>
					</div>

					<div class='d-flex align-middle ml-4'>
						<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
						<span class='ml-1'>溫</span>
					</div>

					<div class='d-flex align-middle ml-4'>
						<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
						<span class='ml-1'>冰</span>
					</div> --}}
				</div>
			</div>
		@endforeach

		{{-- <div class='d-flex content-column'>
			<div class='col-1 both-middle title'>
				<span>溫度</span>
			</div>

			<div class='both-middle stock_custom_detail_area'>
				<div class='d-flex align-middle ml-4'>
					<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
					<span class='ml-1'>熱</span>
				</div>

				<div class='d-flex align-middle ml-4'>
					<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
					<span class='ml-1'>溫</span>
				</div>

				<div class='d-flex align-middle ml-4'>
					<input type="checkbox" name="select_others_program[]" value="" style="width:20px;height:20px;">
					<span class='ml-1'>冰</span>
				</div>
			</div>

		</div>


		<div class='d-flex content-column'>
			<div class='col-1 both-middle title'>
				<span>容量</span>
			</div>
		</div> --}}
	</div>

	<div class='panel stock_price'>
		<div>
			<h4>價錢</h4>
		</div>
		<div class='content-column row price_row l_pt'>
			<div class='col-2'>
				<div class='title'>
					<span>大杯</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="l_price" name="l_price" />
				</div>
			</div>
		</div>
		<div class='content-column row price_row m_pt' style="display: none;">
			<div class='col-2'>
				<div class='title'>
					<span>中杯</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="m_price" name="m_price" />
				</div>
			</div>
		</div>
		<div class='content-column row price_row s_pt' style="display: none;">
			<div class='col-2'>
				<div class='title'>
					<span>小杯</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="s_price" name="s_price" />
				</div>
			</div>
		</div>
	</div>

	<div class="align-middle row panel-margin-top">
		<div class='col-12'>
			<div class='panel'>
				<div class='align-middle row'>
					<div class='col-6 align-middle'>
						<div>
							<h4>{{ __('basic.RecipeDetail') }}</h4>
						</div>
					</div>
					<div class='col-6 align-middle' style='justify-content: flex-end;'>
						{{-- <button type='button' class='btn btn-sm add-main-btn-str-b both-middle' >
							DOWNLOAD &nbsp
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18pt" height="18pt" viewBox="0 0 18 18" version="1.1">
							<g id="surface1">
							<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 12.375 4.5 L 12.375 13.125 C 12.375 14.78125 11.03125 16.125 9.375 16.125 C 7.71875 16.125 6.375 14.78125 6.375 13.125 L 6.375 3.75 C 6.375 2.714844 7.214844 1.875 8.25 1.875 C 9.285156 1.875 10.125 2.714844 10.125 3.75 L 10.125 11.625 C 10.125 12.039062 9.792969 12.375 9.375 12.375 C 8.957031 12.375 8.625 12.039062 8.625 11.625 L 8.625 4.5 L 7.5 4.5 L 7.5 11.625 C 7.5 12.660156 8.339844 13.5 9.375 13.5 C 10.410156 13.5 11.25 12.660156 11.25 11.625 L 11.25 3.75 C 11.25 2.09375 9.90625 0.75 8.25 0.75 C 6.59375 0.75 5.25 2.09375 5.25 3.75 L 5.25 13.125 C 5.25 15.40625 7.097656 17.25 9.375 17.25 C 11.652344 17.25 13.5 15.40625 13.5 13.125 L 13.5 4.5 Z M 12.375 4.5 "/>
							</g>
							</svg>
						</button> --}}
					</div>
				</div>
				<div class='content-column row' style=" border-bottom: 2px solid #E3E3E3;">
					<div class='col-2 align-middle'>
						<span>#</span>
					</div>

					<div class='col-4 both-middle'>
						<span>{{ __('basic.ItemName') }}</span>
					</div>

					{{--<div class='col-2 both-middle'>
						<span>{{ __('basic.Unit') }}</span>
					</div>--}}

					<div class='col-4 both-middle'>
						<span>{{ __('basic.Qty') }}</span>
					</div>

					<div class='col-2 both-middle'>
						<span>{{ __('basic.Option') }}</span>
					</div>
				</div>
				<div class='row'>
					<div class='col-12' id='bom_detail'>
						<div class='content-column row detail_row' >
							<div class='col-2 align-middle'>
								<span class='detail_item_index'>1</span>
							</div>

							<div class='col-4 both-middle'>
								<select class='form-control detail_stock_id' name='detail_stock_id[]' >
									{!! app('FrontendService')->getOption($data['select']['stock'],'id','name','',__('basic.PleaseChoice')) !!}
								</select>
							</div>

							{{--<div class='col-2 both-middle'>
								<span class='detail_stock_unit_name_span'></span>
							</div>--}}

							<div class='col-4 both-middle'>
								<div class="container-fluid">
									<div class='content-column row' style=" border-bottom: 2px solid #E3E3E3;">
										<div class='col-6 both-middle'>
											<span>size</span>
										</div>
										<div class='col-6 both-middle'>
											<span>ml</span>
										</div>
									</div>
									<div class="detail_setting" id="detail_setting_1">
										<div class='content-column row setting_row l_setting' >
											<div class='col-6 both-middle'>
												大杯
											</div>
											<div class='col-6 both-middle'>
												<div class='input-div align-middle'>
													<input type='text' class="input-column detail_l" name="detail_l[]">
												</div>
											</div>
										</div>
										<div class='content-column row setting_row m_setting' style="display:none;" >
											<div class='col-6 both-middle'>
												<input type='hidden' class="input-column detail_size" >
												中杯
											</div>
											<div class='col-6 both-middle'>
												<div class='input-div align-middle'>
													<input type='text' class="input-column detail_m" name="detail_m[]">
												</div>
											</div>
										</div>
										<div class='content-column row setting_row s_setting' style="display:none;" >
											<div class='col-6 both-middle'>
												小杯
											</div>
											<div class='col-6 both-middle'>
												<div class='input-div align-middle'>
													<input type='text' class="input-column detail_s" name="detail_s[]">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class='col-2 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>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection