<div class="row">
	<div class="col-lg-8">
		<div class="row mb-3">
			<div class="col-3">
				{{ Form::label('model', 'Familles de produit') }}<br>
				@include('components.form.select', [
					'name' => 'product_type',
					'id_name' => 'product_type',
					'list' => $models_options,
					'value' => $article['product_type'] ?? null,
					'class' => 'select2',
					'with_empty' => '',
					'required' => true
				])
			</div>
			<div class="col-6">
				{{ Form::label('model_id', 'Produit') }}<br>
				@include('components.form.select', [
					'name' => 'product_id',
					'id_name' => 'product_id',
					'list' => $products ?? [],
					'value' => $article['product_id'] ?? null,
					'class' => 'select2',
					'with_empty' => ''
				])
			</div>
			<div class="col-3">
				{{ Form::label('ref', 'Référence') }}<br>
				@include('components.form.input', ['name' => 'ref', 'value' => $article['ref'] ?? null])
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-8">
				{{ Form::label('name', 'Nom') }}<br>
				@include('components.form.input', ['name' => 'name', 'value' => $article['name'] ?? null, 'required' => true])
			</div>
			<div class="col-4">
				{{ Form::label('article_nature_id', __('shop.article_natures.name')) }}<br>
				@include('components.form.select', [
					'name' => 'article_nature_id',
					'list' => $natures_options,
					'value' => $article['article_nature_id'] ?? null,
					'class' => 'select2',
					'with_empty' => '',
					'required' => true
				])
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-8">
				{{ Form::label('categories', __('shop.shelves.title')) }}<br>
				@include('components.form.select', [
					'name' => 'categories[]',
					'list' => $categories_options,
					'values' => $article['categories'] ?? null,
					'class' => 'select2',
					'multiple' => true
				])
			</div>
			<div class="col-2">
				{{ Form::label('visible', 'Visible') }}<br>
				@include('components.form.toggle', [
					'name' => 'visible',
					'value' => ($article['visible'] ?? null),
					'on' => __('oui'),
					'off' => __('non'),
					'meta' => 'data-id=' . ($article['id'] ?? null),
					'size' => 'sm',
				])
			</div>
			<div class="col-2">
				{{ Form::label('homepage', __('Accueil')) }}<br>
				@include('components.form.toggle', [
					'name' => 'homepage',
					'value' => ($article['homepage'] ?? null),
					'on' => __('oui'),
					'off' => __('non'),
					'meta' => 'data-id=' . ($article['id'] ?? null),
					'size' => 'sm',
				])
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-12">
				{{ Form::label('tags', 'Tags') }}<br>
				@include('components.form.selects.select-tree', [
					'name' => 'tags[]',
					'list' => $tags_list,
					'values' => $article['tags'] ?? null,
					'class' => 'select2',
					'multiple' => true
				])
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-12" id="product_description">
				@include('Admin.Shop.Articles.partials.product.description')
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-12">
				{{ Form::label('description', 'Description') }}
				@include('components.form.textarea', [
					'name' => 'description',
					'value' => $article['description'] ?? null,
					'class' => 'editor',
					'required' => true
				])
			</div>
		</div>

	</div>
	<div class="col-lg-4">
		<div id="product_images_inherited">
			@include('Admin.Shop.Articles.partials.product.images')
		</div>
		@include('components.uploader.widget', [
			'load_url' => route('Admin.Shop.Articles.getImages', ['id' => $article['id'] ?? false]),
			'delete_url' => route('Admin.Shop.Articles.deleteImage'),
			'title' => 'Photos',
			'name' => 'images'
		])
		@include('Admin.Core.Comments.partials.comments', [
			'model' => 'Shop.Article',
			'model_id' => $article['id'] ?? false,
			'comments' => $article['comments'] ?? false
		])
	</div>
</div>

@push('js')
	<script>
		
		$("#product_id").change( function(e) {
			var product = $('#product_id').select2('data');
			var name = product[0]['text'];
			$('input[name="name"]').val(name);

			var product_type = $('#product_type').select2('data');
			var name = product_type[0]['id'];
			var url = "{{ route('Admin.Shop.Articles.getProductDescription') }}/" + product[0]['id'] + '/' + btoa(name);
			$('#product_description').load(url);

			var url = "{{ route('Admin.Shop.Articles.getProductImages') }}/" + product[0]['id'] + '/' + btoa(name);
			$('#product_images_inherited').load(url);
		});

		$('#product_type').change( function() {
			var product_type = $(this).val();
			switch (product_type) {
				case 'App\\Models\\Botanic\\Specie':
					var url = '{{ route('Admin.Botanic.Species.getSelect') }}';
					break;
				case 'App\\Models\\Botanic\\Variety':
					var url = '{{ route('Admin.Botanic.Varieties.getSelect') }}';
					break;
				case 'App\\Models\\Shop\\Merchandise':
					var url = '{{ route('Admin.Shop.Merchandises.getSelect') }}';
					break;
			}
			loadProducts(url);
		});

		function loadProducts(url) {
			$.ajax({
				url : url,
				method : 'POST',
				data: {model: $('#product_type').val()},
				success : function(data) {
					setOptions('#product_id', data);
					// $("#product_id").select2({data: data});
					// $("#product_id").trigger('change');
				}
			});
		}

	</script>
@endpush