@extends('layouts.app')

@section('content')
<div class="page-content row">
    <!-- Page header -->
    <div class="page-header">
      <ul class="breadcrumb">
        <li><a href="{{ URL::to('dashboard') }}">{{ Lang::get('core.home') }}</a></li>
		<li><a href="{{ URL::to('ebaylistings?return='.$return) }}">{{ $pageTitle }}</a></li>
        <li class="active"> Item Specifics </li>
      </ul>
	 </div>
 	<div class="page-content-wrapper">
		<div class="sbox">
			<div class="sbox-title"> <h4> {{ $pageTitle }} </h4></div>
			<div class="sbox-content">
				@include('ebaylistings/partials/tabs')
				<br />
				<br />
				{!! Form::open(array('name' => 'listonebay', 'class' => 'specForm', 'url'=>'ebaylistings/specifics/'.$id, 'parsley-validate'=>'','novalidate'=>' ')) !!}
				<table id="listingTable" class="table table-striped table-bordered" >
					<thead>
						<th>Name</th>
						<th>Mode</th>
						<th>Value</th>
						<th></th>
					</thead>
					<tbody>
						@foreach($specifics as $specific)
							<tr>
								<td>
									<div @if(isset($specific["required"]) && $specific["required"])class="required"@endif>
										@if(!isset($specific["fromEbay"]))
											{!! Form::text('specific[name]['.$specific["specificName"].']',$specific["specificName"],array('class'=>'form-control')) !!}
										@else
											{{$specific["specificName"]}}
											{!! Form::hidden('specific[name]['.$specific["specificName"].']') !!}
										@endif
									</div>
								</td>
								@if(isset($specific["required"]) && $specific["required"])
									<td>{!! Form::select('specific[mode]['.$specific["specificName"].']',$helper->getItemSpecificRequiredModes(),$specific["valueMode"],array('required'=>'required', 'class'=>'modeSelect form-control', 'data-change'=>$specific["specificName"], 'data-required'=>$specific["required"])) !!}</td>
								@else
									<td>{!! Form::select('specific[mode]['.$specific["specificName"].']',$helper->getItemSpecificModes(),$specific["valueMode"], array('class'=>'modeSelect form-control', 'data-change'=>$specific["specificName"])) !!}</td>
								@endif
								<td class="specVal">
									@if($specific["valueMode"] == 1 || (isset($specific["fromEbay"]) && $specific["required"] && $specific["valueMode"] != 2))
									@if(isset($specific["valueCustomValue"]) && isset($specific["required"]) && $specific["required"])
											{!! Form::text('specific[value]['.$specific["specificName"].']',$specific["valueCustomValue"],array('required'=>'required', 'class'=>'form-control')) !!}
										@else
											{!! Form::text('specific[value]['.$specific["specificName"].']',isset($specific["valueCustomValue"])?$specific["valueCustomValue"]:'', array('class'=>'form-control')) !!}
										@endif
									@elseif(isset($specific["valueCustomAttribute"]) && $specific["valueMode"] == 2)
										@if(isset($specific["required"]) && $specific["required"])
											{!! Form::select('specific[value]['.$specific["specificName"].']',$helper->getAllAttributes(),$specific["valueCustomAttribute"],array('required'=>'required', 'class'=>'form-control')) !!}
										@else
											{!! Form::select('specific[value]['.$specific["specificName"].']',$helper->getAllAttributes(),$specific["valueCustomAttribute"], array('class'=>'form-control')) !!}
										@endif
									@endif
								</td>
								<td style="width:50px;">
									@if(!isset($specific["fromEbay"]))
										<button type="button" class="btn btn-danger btn-xs removeSpec" ><i class="fa fa-times-circle"></i></button>
									@endif
								</td>
							</tr>
						@endforeach
					</tbody>
					<tfoot>
						<td colspan="4">
							<button type="submit" name="submit" class="btn btn-primary btn-sm" ><i class="fa  fa-save "></i> {{ Lang::get('core.sb_save') }}</button>
							<button type="button" class="btn btn-info btn-sm addSpec"><i class="fa  fa-plus-circle"></i> Add Custom Specific</button>
						</td>
					</tfoot>
				</table>
				{!! Form::close() !!}
				<script>
					var allAttributes = {!! $allAttributesJson !!};
					attributeOptions = function(){
						var options = '';
						$.each(allAttributes, function(i,obj){
							options += '<option value="'+obj+'">'+obj+'</option>'
						});
						return options;
					};
					jQuery(document).ready(function(){
						$('#listingTable').on('change', '.modeSelect', function(){
							if($('form.specForm').length){
								$('form.specForm').parsley().destroy();
							}
							var changeElem = $(this).attr('data-change');
							var specificValueHtml = '';
							var isRequired = $(this).attr('data-required') ? ' required="required"':'';
							switch($(this).val()){
								case '0':
									break;
								case '1':
									specificValueHtml += '<input class="form-control" name="specific[value]['+changeElem+']" type="text"'+isRequired+'>';
									break;
								case '2':
									specificValueHtml += '<select class="form-control" name="specific[value]['+changeElem+']"'+isRequired+'>';
									specificValueHtml += attributeOptions();
									specificValueHtml += '</select>';
									break;
							}
							$(this).parents('tr').find('td.specVal').html(specificValueHtml);
							if($('form.specForm').length){
								$('form.specForm').parsley({
									excluded: '.note-image-url, .note-link-url, .note-video-url, .note-image-input'
								});
							}
						});
						$('.addSpec').click(function(){
							var temprow = $('form.specForm tbody').find('tr').length + 1;
							var rowHtml = '<tr>';
								rowHtml += '<td><input name="specific[name]['+temprow+']" type="text" required class="dynamicSpecName form-control"></td>';
								rowHtml += '<td><select data-required="1" class="modeSelect form-control" data-change="'+temprow+'" name="specific[mode]['+temprow+']"><option value="1">Custom Label/Value</option><option value="2">Custom Label/Attribute</option></select></td>';
								rowHtml += '<td class="specVal"><input class="form-control" name="specific[value]['+temprow+']" type="text" required></td>';
								rowHtml += '<td style="width:50px;"><button type="button" class="btn btn-danger btn-xs removeSpec" ><i class="fa fa-times-circle"></i></button></td>'
								rowHtml += '</tr>';
							if($('form.specForm').length){
								$('form.specForm').parsley().destroy();
							}
							$('form.specForm tbody').append(rowHtml);
							if($('form.specForm').length){
								$('form.specForm').parsley({
									excluded: '.note-image-url, .note-link-url, .note-video-url, .note-image-input'
								});
							}
						});
						$('#listingTable').on('keyup','.dynamicSpecName', function(){
							var newName = $(this).val();
							$(this).attr('name','specific[name]['+newName+']');
							$(this).parents('tr').find('[name*="value"]').attr('name','specific[value]['+newName+']');
							$(this).parents('tr').find('.modeSelect').attr('data-change',newName ).attr('name','specific[mode]['+newName+']');
						});
						$('#listingTable').on('click','.removeSpec', function(){
							$(this).parents('tr').remove();
						});
					});
				</script>
			</div>
		</div>
	</div>
</div>
@stop
@push('scripts')
<script>

</script>
@endpush