@extends('layouts.main')

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

@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>{{ $model->art_nr }} - {{ $model->name }}</strong>
						</div>           
						<div class="card-body">
						  
							<form action="{{ route($view_name .'.update/' .$title, $model->id) }}" method="POST">
								@method('PUT')
								@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();
		});

		$('.btn-number').click(function(e){
		    e.preventDefault();
		    
		    fieldName = $(this).attr('data-field');
		    type      = $(this).attr('data-type');
		    var input = $("input[name='"+fieldName+"']");
		    var currentVal = parseInt(input.val());
		    if (!isNaN(currentVal)) {
		        if(type == 'minus') {
		            
		            if(currentVal > input.attr('min')) {
		                input.val(currentVal - 1).change();
		            } 
		            if(parseInt(input.val()) == input.attr('min')) {
		                $(this).attr('disabled', true);
		            }

		        } else if(type == 'plus') {

		            if(currentVal < input.attr('max')) {
		                input.val(currentVal + 1).change();
		            }
		            if(parseInt(input.val()) == input.attr('max')) {
		                $(this).attr('disabled', true);
		            }

		        }
		    } else {
		        input.val(0);
		    }
		});
	</script>
@endsection