@extends('layouts.admin')

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

@section('content')

@push('styles')
	<style type="text/css">
		.part-remove-btn  {
			margin-top: -15px;
		}
	</style>
@endpush

<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-12">

    							<!-- Create Form -->
					        	<form role="form" id="warehouse-form" action="{{ route('admin.catalog.store') }}" method="POST">
					        		@csrf
						        	<div class="card-body">
						        		<div class="catalog-group">
											<!-- Catalog Row -->
											<div class="row catalog-row mb-2" data-index="0">
												<div class="row border border-primary rounded col-11">
													<!-- Products -->
													<div class="form-group mt-4 col-6">
														<label for="catalog[0][product_id]">ထုတ်ကုန်</label>
														<input class="form-control products-list" autocomplete="off" type="text" name="catalog[0][product_id]" value="{{\Request::get('products')}}" list="products" />
													    @if(!empty($products))
														    <datalist id="products">
														        <select class="products-select">
														            @foreach ($products as $key => $value)
														            	<option value="{{ $value }}">
													                @endforeach
														        </select>
														    </datalist>
													    @endif
													</div>

													<!-- Parts -->
													<div class="form-group mt-4 col-5 part-group">
														<div class="row col-12 part-row">
															<div class="col-10">
																<label for="catalog[0][part_id][0]">အစိတ်အပိုင်းများ</label>
																<input class="form-control parts-list" autocomplete="off" type="text" name="catalog[0][part_id][0]" value="{{\Request::get('parts')}}" list="parts" />
															    @if(!empty($parts))
																    <datalist id="parts">
																        <select class="parts-select">
																            @foreach ($parts as $key => $value)
																            	<option value="{{ $value }}">
															                @endforeach
																        </select>
																    </datalist>
															    @endif
															</div>

															<!-- Delete Part Button Goes Below-->
															<div class="row col-2 ml-1 mt-5 delete-part-div"></div>
														</div>

														<!-- Part Add Button -->
														<div class="row">
															<div class="col-3">
																<button class="form-control mt-2 btn-sm btn-success part-add-btn" type="button">အသစ်ဖန်တီး</button>
															</div>
														</div>
													</div>
												</div>

												<!-- Delete Catalog Button Goes Below-->
												<div class="row col-1 ml-1 mt-5 delete-catalog-div"></div>
											</div>

											<!-- Catalog Add Button -->
											<div class="row">
												<div class="col-2">
													<button class="form-control mt-2 btn-sm btn-success catalog-add-btn" type="button">အသစ်ဖန်တီး</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="warehouse-form" type="reset" onclick="window.location.replace('{{ url()->previous() }}')">ပယ်ဖျက်မည်</button>
					        	<button form="warehouse-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 () {

			// Catalog
			$(document).on('click', '.catalog-add-btn', function () {
				container = $(this).parents('.catalog-group').find('.catalog-row').last().clone();
				var removeBtn = $('<input/>').attr({
			        type: "button",
			        class: "form-control btn btn-danger catalog-remove-btn",
			        value: 'ဖျက်ပါ'
			    });
				container.find('.products-list').attr('name', "catalog[" + $('.products-list').length + "]" + "[product_id]").val('');

				jQuery.each(container.find('.parts-list'), function(i, val) {
					$(val).attr('name', "catalog[" + $('.products-list').length + "]" + "[part_id][" + i + "]").val('');
				});

				container.attr('data-index', $('.products-list').length);
				container.find('.delete-catalog-div').html(removeBtn);
				container.insertAfter(".catalog-row:last");
			});

			$(document).on('click', '.catalog-remove-btn', function () {
				$(this).parents('.catalog-row').remove();
			});

			// Parts
			$(document).on('click', '.part-add-btn', function () {
				container = $(this).parents('.part-group').find('.part-row').last().clone();
				var removeBtn = $('<input/>').attr({
			        type: "button",
			        class: "form-control btn btn-danger part-remove-btn",
			        value: 'ဖျက်ပါ'
			    });
			    selectedOption = $('.parts-list').val();
				container.find('.parts-list').attr('name', "catalog[" + $(this).parents('.catalog-row').attr('data-index') + "]" + "[part_id][" + $(this).parents('.part-group').find('.parts-list').length + "]").val('');
				container.find('.delete-part-div').html(removeBtn);
				container.insertAfter($(this).parents('.part-group').find('.part-row').last());
			});

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

@endsection