@extends('layouts.backend')
@section('content-header')
    <h1>
        {{ trans('backend.properties') }}
    </h1>
@stop

@section('content')
<div class="row">
	<div class="col-xs-12">
		@include('common.errors')
		<div class="box">
			<div class="box-header">
			</div>
			<!-- /.box-header -->
			<div class="box-body">
				<form class="form-inputs" id="project-form" action="{{ route('properties.store') }}" data-parsley-validate="true" method="post">
					@include('backend.properties._form')
				</form>
			</div>
			<!-- form -->
		</div>
		<!-- forms div -->
	</div>
</div>
@stop

@section('scripts')
<script type='text/javascript'>
	$(document).ready(function() {
		$('#tagsId').keyup(function() {
			var text = $(this).val();
			$('#super_tags_id').find('option').not(':selected').remove();
			var url = '{{ route("tags.show", ":id") }}';
			url = url.replace(':id', text);
			$.ajax({
				url: url,
				type: 'get',
				dataType: 'json',
				contentType: "application/x-www-form-urlencoded;charset=utf-8",
				success: function(response) {
					var len = 0;
					if (response != null) {
						len = response.length;
					}
					if (len > 0) {
						$("#super_tags_id").html('');
						// Read data and create <option >
						for (var i = 0; i < len; i++) {
							var id = response[i].id;
							var title = response[i].title["ar"];
							var option = "<option value='" + id + "'>" + title + "</option>";
							$("#super_tags_id").append(option);
						}
					}
				}
			})
		});
	});
</script>
<script>
	maxFiles = 20; // max images to upload
	ImageNotRequired = true;
	if (ImageNotRequired === true) {
		ImageMustHasPrimary = False;
	}
	$("a.makePrimary").on("click", function(event) {
		event.preventDefault();
		$("input.main_media_image").remove();
		filename = $(this).attr('rel');
		var main_image = '<input class="main_media_image" rel="' + filename + '" type="hidden" name="main_image" value="' + filename + '" />';
		$('.form-inputs').append(main_image);
		$("a.makePrimary").show();
		$(this).hide();

	});

	$('.tagsMutliple').selectize({
		delimiter: ',',
		persist: true,
		create: true
	});
</script>
<script type="text/javascript">
	$(document).ready(function()

		{
			var x = 0; //Initial field counter
			var list_maxField = 10; //Input fields increment limitation

			//Once add button is clicked
			$('.list_add_button').click(function() {
				//Check maximum number of input fields
				if (x < list_maxField) {
					x++; //Increment field counter
					var list_fieldHTML = '<div class="row"><div class="col-xs-4 col-sm-4 col-md-4"><div class="form-group">Label (AR)<input name="label[' + x + ']" type="text" placeholder="Type Item Label" class="form-control"/></div><div class="form-group">Label (En)<input name="label_en[' + x + ']" type="text" placeholder="Type Item Label (EN)" class="form-control"/></div></div><div class="col-xs-7 col-sm-7 col-md-7"><div class="form-group">Input (AR)<input name="input[' + x + ']" type="text" placeholder="Type Item Input" class="form-control"/></div><div class="form-group">Input (EN)<input name="input_en[' + x + ']" type="text" placeholder="Type Item Input (EN)" class="form-control"/></div></div><div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="list_remove_button btn btn-danger">-</a></div></div>'; //New input field html 
					$('.list_wrapper').append(list_fieldHTML); //Add field html
				}
			});

			//Once remove button is clicked
			$('.list_wrapper').on('click', '.list_remove_button', function() {
				$(this).closest('div.row').remove(); //Remove field html
				x--; //Decrement field counter
			});
		});
</script>

@endsection