@extends('layouts.main')

@section('title', 'Okis 3.0 | Leistung anlegen')

@section('content')

	<div class="container">
		<div class="row">
			<div class="col-xl-9 mt-5">
				<div class="col-xl-8 mx-md-auto">
					<div class="card">
						<div class="card-header card-title">
							<strong>Neue Leistung anlegen</strong>
						</div>					 
						<div class="card-body">
							
							<form action="{{ route($view_name .'.store/' .$title) }}" method="POST" novalidate class="needs-validation">
								@csrf
								@include($view_name.'._' .$title .'_form')
							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
@endsection

@section('js-scripts')
	<script>

		dselect(document.querySelector('#material-select'))
		dselect(document.querySelector('#material_cleradent-select'))
		dselect(document.querySelector('#material_germandent-select'))
		dselect(document.querySelector('#material_centric-select'))
		$('.dropdown.dselect-wrapper button').on('click', function(e) {
			$(this).next().css('', 'translate3d(0px, 420px, 0px)');
		});

		$('a#add-step').on('click', function(e) {
			var step_html = [
				'<div class="row">',
					'<div class="col-md-4">',
						'<input autocomplete="off" name="erfassung_steps_name[]" type="text" class="form-control" placeholder="Bezeichnung">',
					'</div>',
					'<div class="col-md-4">',
						'<input autocomplete="off" name="erfassung_steps_artnr[]" type="text" class="form-control" placeholder="ArtNr">',
					'</div>',
					'<div class="col-md-3">',
						'<input autocomplete="off" name="erfassung_steps_value[]" type="text" class="form-control" placeholder="Wert">',
					'</div>',
					'<div class="col-md-1">',
						'<a class="btn btn-secondary btn-sm delete_step px-2" href="#add-step">x</a>',
					'</div>',
				'</div>',
			].join("\n");
			$('.capture_steps').append(step_html);
			$('.delete_step').on('click', function(e) {
				$(this).closest('.row').remove();
			});
		});
		$('.delete_step').on('click', function(e) {
			$(this).closest('.row').remove();
		});
	</script>
@endsection