@include(
	'main.components.breadcrumb',
	[
		'url' => 'term.view',
		'breadcrumb_before' => 'Term manage',
		'breadcrumb_after'  => (isset($method) && $method=='create') ? 'Add new term' : 'Update term'
	]
)
<div class="pcoded-inner-content">
	<div class="main-body">
		<div class="page-wrapper">
			@php
				$action = isset($method) && $method=='create' ? route('term.store') : route('term.update', $term->id);
				$title = isset($method) && $method=='create' ? 'Add new term' : 'Update term';
			@endphp
			<div class="row">
				<div class="col-sm-4">
					<div class="card">
						<div class="card-header">
							<h4 class="mb-0">{{$title}}</h4>
						</div>
						<div class="card-block">
							<p>{!! __('term.create.note') !!}</p>
						</div>
					</div>
				</div>
				<div class="col-sm-8">
					<div class="card">
						<div class="card-block">
							<form action="{{$action}}" method="post">
								@csrf
								<div class="form-group row">
									<div class="col-sm-6">
										<label class="col-form-label">Term name&nbsp;<span class="text-danger">(*)</span></label>
										<input type="text" class="form-control @error('name') form-control-danger @enderror" name="name" value="{{old('name', $term->name ?? '')}}">
										@error('name')<div class="alert alert-danger">{{ $message }}</div>@enderror
									</div>
									<div class="col-sm-6">
										<label class=" col-form-label">Term code&nbsp;<span class="text-danger">(*)</span></label>
										<input type="text" class="form-control @error('code') form-control-danger @enderror" name="code" value="{{old('code', $term->code ?? '')}}">
										@error('code')<div class="alert alert-danger">{{ $message }}</div>@enderror
									</div>
								</div>
								<div class="form-group row">
									<div class="col-sm-6">
										<label class="col-form-label">Vocabulary&nbsp;<span class="text-danger">(*)</span></label>
										<select class="form-control setupSelect2 vocabulary_id" name="vocabulary_id">
											<option value="">-- Select --</option>
											@foreach($vocs as $voc)
											<option value="{{$voc->id}}" {{old('vocabulary_id', $term->vocid ?? '') == $voc->id ? 'selected' : ''}}>{{$voc->name}}</option>
											@endforeach
										</select>
										@error('name')<div class="alert alert-danger">{{ $message }}</div>@enderror
									</div>
									<div class="col-sm-6">
										<div class="row">
											<div class="col-sm-6">
												<label class="col-form-label d-block">Publish</label>
												@if(isset($method) && $method=='create')
												<input type="checkbox" class="js-switch status" name="publish" value="1" checked />
												@else
												<input type="checkbox" class="js-switch status" name="publish" value="{{$term->publish ?? ''}}" @if(isset($term->publish) && $term->publish == \App\Constants\Number::PUBLISH) checked @endif />
												@endif
											</div>
											<div class="col-sm-6">
												<div class="color-select">
													<label class="col-form-label d-block">Color</label>
													<div class="color-option">
													@if(isset($term->color))
														@php
															$color = explode('|', $term->color);
														@endphp
															<span class="color-box" style="background:{{isset($color[0]) ? $color[0] : 'transparent'}};"></span>
															<span>{{isset($color[1]) ? $color[1] : 'Transparent'}}</span>
													@else
														<span class="color-box" style="background:transparent;"></span>
														<span>Color</span>
													@endif
													</div>
													<div class="color-options" style="display:none;">
													@if(config('apps.general.color'))
														@foreach(config('apps.general.color') as $color => $name)
														<div data-value="{{$color}}">
															<span class="color-box" style="background:{{$color}};"></span>
															<span class="color-name">{{$name}}</span>
														</div>
														@endforeach
													@endif
													</div>
												</div>
												<input type="hidden" name="color" class="color-storage" />
											</div>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-sm-12">
										<label class="col-form-label">Description</label>
										<textarea rows="2" class="form-control" name="description">{{old('description', $term->description ?? '')}}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-form-label">Rules</label>
									<div class="row">
										<div class="col-sm-12 rule-list">
										@if(isset($term) && $term->meta)
										@foreach($term->meta as $key => $val)
											<div class="row meta-item mb-2">
												<div class="col-sm-6">
													<input class="form-control" name="meta_key[]" value="{{$key}}">
												</div>
												<div class="col-sm-4 pl-0">
													<input class="form-control" name="meta_value[]" value="{{$val}}">
												</div>
												<div class="col-sm-2 pl-0">
													<button type="button" class="btn waves-effect waves-dark btn-danger btn-outline-danger prn-0 mrn-0 rule-remove-item">
														<i class="feather icon-trash-2"></i>
													</button>
												</div>
											</div>
										@endforeach
										@endif
										</div>
									</div>
									<button type="button" class="btn btn-primary prn-0 mrn-0 meta-add-new"><i class="icofont icofont-plus"></i></button>
								</div>
								<div class="action text-right">
									<a href="{{route('term.view')}}" class="btn btn-outline-primary waves-effect waves-light">{{__('general.button.cancel')}}</a>
									<button type="submit" class="btn btn-primary waves-effect waves-light">{{__('general.button.save')}}</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	document.querySelectorAll('.color-select').forEach(select => {
		const selected = select.querySelector('.color-option');
		const options = select.querySelector('.color-options');

		selected.addEventListener('click', () => {
			options.style.display = options.style.display === 'block' ? 'none' : 'block';
		});

		options.querySelectorAll('div').forEach(opt => {
			opt.addEventListener('click', () => {
				selected.innerHTML = opt.innerHTML;
				options.style.display = 'none';
				// Lưu giá trị nếu cần: 
				const colorStorage = document.querySelector('.color-storage');
				colorStorage.value = opt.dataset.value + '|' + opt.querySelector('.color-name').innerHTML;
			});
		});

		// Đóng khi click ngoài
		document.addEventListener('click', e => {
			if (!select.contains(e.target)) options.style.display = 'none';
		});
	});
</script>