@extends('layouts.admin')

@section('title', 'ကက်တလောက်ထည့်သွင်းရန်ပုံစံ')

@section('content')
<div class="container-fluid">
	<div class="row mb-2">
		<div class="col-sm-6">
			<h4 class="m-0 text-dark">ကက်တလောက်ထည့်သွင်းရန်ပုံစံ</h4>
		</div><!-- /.col -->
		
	</div><!-- /.row -->

	@include('admins.partials.breadcrumbs')
</div><!-- /.container-fluid -->

<!-- Main content -->
<section class="content">
	<div class="container-fluid">
    	<div class="row d-flex justify-content-center">
            <div class="col-11">
                <div class="card">
                	<div class="card-header shadow-sm">
						<i class="fas fa-plus-square mr-3"></i>
						<span>စာရင်းထည့်သွင်းရန်ပုံစံ</span>
    				</div>
    				<!-- /.card-header -->
    				<div class="card-body  my-3">
    					<div class="row d-flex justify-content-center">
    						<div class="col-6">

    							<!-- Create Form -->
					        	<form role="form" id="catalog-form" action="{{ route('admin.catalog.store') }}" method="POST">
					        		@csrf
						        	<div class="card-body">
										<div class="form-group">
											<label for="product_number">ထုတ်ကုန်နံပါတ်</label>
											<input type="text" name="product_number" class="form-control" id="product_number" placeholder="0 445 110 030	" required autocomplete="product_number" autofocus value="{{ old('product_number') }}">

											@if ($errors->has('product_number'))
											    <span class="text text-danger" role="alert">
													<strong>{{ $errors->first('product_number') }}</strong>
												</span>
											@endif
										</div>

										<div class="form-group">
											<div class="row col-12 part-container mb-2">
												<div class="col-9">
													<label for="valve_number[]">အစိတ်အပိုင်းနံပါတ်</label>

													<input type="text" name="valve_number[]" class="form-control" id="valve_number" placeholder="0 445 110 030 1" required autocomplete="valve_number" autofocus value="{{ old('valve_number') }}">

													@if ($errors->has('valve_number'))
													    <span class="text text-danger" role="alert">
															<strong>{{ $errors->first('valve_number') }}</strong>
														</span>
													@endif
												</div>

												<!-- Delete Button -->
												<!-- <input type="button" class="form-control mt-5 col-3 btn-sm btn-danger deli-tsp-remove-btn" value="-"> -->
											</div>
											<!-- /.part-container -->

											<!-- Add Button -->
											<div class="row col-12" id="part-add-btn-div">
												<div class="col-3">
													<button class="form-control mt-2 btn-sm btn-success part-add-btn" type="button"><span class="text-lg">+</span></button>
												</div>
											</div>
										</div>
		                            </div>
					        		<!-- /.card-body -->
					        	</form>
    						</div>
    					</div>
    					<div class="row mt-2 float-right" form="my-form">
    						<div class="col-md-12 d-flex">
					        	<button form="catalog-form" type="reset" onclick="window.location.replace('{{ url()->previous() }}')">ပယ်ဖျက်မည်</button>
					        	<button form="catalog-form" type="submit" class="btn btnBtn btn-sm px-4 mx-3">ထည့်သွင်းမည်</button>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- /.card -->
    		</div>
    	</div>
	</div><!-- /.container-fluid -->
</section>

@push('scripts')
	<script type="text/javascript">
		$(document).ready(function () {
			$(document).on('click', '.part-add-btn', function () {

				container = $('.part-container').first().clone();
				container.find('label').remove();
				var removeBtn = $('<input/>').attr({
			        type: "button",
			        class: "form-control col-3 btn-sm btn-danger deli-tsp-remove-btn",
			        value: '-'
			    });
				container.insertAfter(".part-container:last").append(removeBtn);
			});

			$(document).on('click', '.deli-tsp-remove-btn', function () {
				$(this).parent('.part-container').remove();
			});
		});
	</script>
@endpush

@endsection