@extends('layouts.admin')

@section('title', 'ဂိုဒေါင်ကုန်ချစာရင်းပြုပြင်ရန်ပုံစံ')

@section('content')

@push('styles')
	<style type="text/css">
		.product-loading-remove-btn, .part-loading-remove-btn  {
			margin-top: 32px;
		}
	</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.warehouse_loadings.update', $warehouse_loading->id) }}" method="POST">
					        		@method('PUT')
					        		@csrf
						        	<div class="card-body">
										<div class="form-group">
											<div class="row col-12">
												<div class="col-4">
													<label for="longitude">ဂိုဒေါင်</label>
													<select class="form-control d-inline select2" name="warehouse_id" required disabled>
														@if(!empty($warehouses))
															<option value="">ရွေးချယ်ပါ</option>
															@foreach ($warehouses as $key => $value)
																@if(old('warehouse_id') == $key)
																	<option value="{{ $key }}" selected="selected">{{ $value }}</option>
																@elseif($warehouse_loading->warehouse_id == $key)
																	<option value="{{ $key }}" selected="selected">{{ $value }}</option>
																@else
																	<option value="{{ $key }}">{{ $value }}</option>
																@endif
															@endforeach
														@endif
													</select>

													@if ($errors->has('warehouse_id'))
													    <span class="text text-danger" role="alert">
															<strong>{{ $errors->first('warehouse_id') }}</strong>
														</span>
													@endif
												</div>
											
												<div class="col-4">
													<label for="loaded_date">ကုန်ချရက်စွဲ</label>
													<div class="input-group date" id="reservationdate" data-target-input="nearest">
														<input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" name="loaded_date" value="{{ old('loaded_date')? old('loaded_date') : date('m/d/Y', strtotime($warehouse_loading->loaded_at)) }}" required />
														<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
															<div class="input-group-text"><i class="fa fa-calendar"></i></div>
														</div>
													</div>
												</div>
												
												<div class="col-4">
													<label for="longitude">ကုန်ချအချိန်</label>
													<div class="input-group date" id="timepicker" data-target-input="nearest">
														<input type="text" class="form-control datetimepicker-input" data-target="#timepicker" name="loaded_time" value="{{ old('loaded_time')? old('loaded_time') : date('h:i A', strtotime($warehouse_loading->loaded_at)) }}" required />
														<div class="input-group-append" data-target="#timepicker" data-toggle="datetimepicker">
															<div class="input-group-text"><i class="far fa-clock"></i></div>
														</div>
													</div>
												</div>
											</div>
										</div>

										<!-- Products and Parts -->
										<div class="row">

											<!-- Products -->
											<div class="form-group col-6">
												@if(!empty($warehouse_loading->products->count() > 0))
													@foreach ($warehouse_loading->products as $key => $value)
														<input type="hidden" name="products[{{ $key }}][id]" value="{{ $value->id }}">
														<div class="row col-12 products-container">
															<div class="col-7">
																<label for="products[0][product_id]">ထုတ်ကုန်</label>
																<input class="form-control products-list" autocomplete="off" type="text" name="products[{{ $key }}][product_id]" value="{{ $value->product->product_number }}" list="products" />
															    @if(!empty($products))
																    <datalist id="products">
																        <select class="products-select">
																            @foreach ($products as $productKey => $productValue)
																            	<option value="{{ $productValue }}">
															                @endforeach
																        </select>
																    </datalist>
															    @endif
															</div>

															<div class="col-2">
																<label for="products[{{ $key }}][total_products]">အရေအတွက်</label>
																<input class="form-control products-count" autocomplete="off" type="number" name="products[{{ $key }}][total_products]" value="{{ old('products[$key][total_products]')? old('products[$key][total_products]') : $value->total_products }}" min="0" />
															</div>

															{{--
																@if($key != 0)
																	<input type="button" class="form-control col-2 btn-sm btn-danger product-loading-remove-btn" value="-">
																@endif
															--}}
														</div>
													@endforeach

												@else

													<div class="row col-12 products-container">
														<div class="col-7">
															<label for="products[0][product_id]">ထုတ်ကုန်</label>
															<input class="form-control products-list" autocomplete="off" type="text" name="products[0][product_id]" 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>

														<div class="col-2">
															<label for="products[0][total_products]">အရေအတွက်</label>
															<input class="form-control products-count" autocomplete="off" type="number" name="products[0][total_products]" min="0" />
														</div>
													</div>
												@endif

												<!-- Add Button -->
												<div class="row col-12" id="products-add-btn-div">
													<div class="col-3">
														<button class="form-control mt-2 btn-sm btn-success product-loading-add-btn" type="button"><span class="text-lg">+</span></button>
													</div>
												</div>
											</div>

											<!-- Parts -->
											<div class="form-group col-6">
												@if(!empty($warehouse_loading->parts->count() > 0))
													@foreach ($warehouse_loading->parts as $key => $value)
														<input type="hidden" name="parts[{{ $key }}][id]" value="{{ $value->id }}">
														<div class="row col-12 parts-container">
															<div class="col-7">
																<label for="parts[0][part_id]">အစိတ်အပိုင်းများ</label>
																<input class="form-control parts-list" autocomplete="off" type="text" name="parts[{{ $key }}][part_id]" value="{{ $value->part->valve_number }}" list="parts" />
															    @if(!empty($parts))
																    <datalist id="parts">
																        <select class="parts-select">
																            @foreach ($parts as $partKey => $partValue)
																            	<option value="{{ $partValue }}">
															                @endforeach
																        </select>
																    </datalist>
															    @endif
															</div>

															<div class="col-2">
																<label for="parts[{{ $key }}][total_parts]">အရေအတွက်</label>
																<input class="form-control parts-count" autocomplete="off" type="number" name="parts[{{ $key }}][total_parts]" value="{{ old('parts[$key][total_parts]')? old('parts[$key][total_parts]') : $value->total_parts }}" min="0" />
															</div>

															{{--
																@if($key != 0)
																	<input type="button" class="form-control col-2 btn-sm btn-danger part-loading-remove-btn" value="-">
																@endif
															--}}
														</div>
													@endforeach

												@else

													<div class="row col-12 parts-container">
														<div class="col-7">
															<label for="parts[0][part_id]">အစိတ်အပိုင်းများ</label>
															<input class="form-control parts-list" autocomplete="off" type="text" name="parts[0][part_id]" 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>

														<div class="col-2">
															<label for="parts[0][total_parts]">အရေအတွက်</label>
															<input class="form-control parts-count" autocomplete="off" type="number" name="parts[0][total_parts]" value="{{ $value->total_parts }}" min="0" />
														</div>
													</div>
												@endif

												<!-- Add Button -->
												<div class="row col-12" id="parts-add-btn-div">
													<div class="col-3">
														<button class="form-control mt-2 btn-sm btn-success part-loading-add-btn" type="button"><span class="text-lg">+</span></button>
													</div>
												</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 () {

			// Products
			$(document).on('click', '.product-loading-add-btn', function () {
				container = $('.products-container').first().clone();
				var removeBtn = $('<input/>').attr({
			        type: "button",
			        class: "form-control col-2 btn-sm btn-danger product-loading-remove-btn",
			        value: '-'
			    });
			    selectedOption = $('.products-list').val();
				container.find('.products-list').attr('name', "products[" + $('.products-list').length + "]" + "[product_id]").val('');
				container.find('.products-count').attr('name', "products[" + $('.products-count').length + "]" + "[total_products]").val('');
				container.find('.products-select').find('option[value="' + selectedOption + '"]').remove();
				container.insertAfter(".products-container:last").append(removeBtn);
			});

			$(document).on('click', '.product-loading-remove-btn', function () {
				$(this).parent('.products-container').remove();
			});

			// Parts
			$(document).on('click', '.part-loading-add-btn', function () {
				container = $('.parts-container').first().clone();
				var removeBtn = $('<input/>').attr({
			        type: "button",
			        class: "form-control col-2 btn-sm btn-danger part-loading-remove-btn",
			        value: '-'
			    });
			    selectedOption = $('.parts-list').val();
				container.find('.parts-list').attr('name', "parts[" + $('.parts-list').length + "]" + "[part_id]").val('');
				container.find('.parts-count').attr('name', "parts[" + $('.parts-count').length + "]" + "[total_parts]").val('');
				container.find('.parts-select').find('option[value="' + selectedOption + '"]').remove();
				container.insertAfter(".parts-container:last").append(removeBtn);
			});

			$(document).on('click', '.part-loading-remove-btn', function () {
				$(this).parent('.parts-container').remove();
			});
		});

		// Date range picker
	    $('#reservationdate').datetimepicker({
	        format: 'L'
	    });

	    // Timepicker
	    $('#timepicker').datetimepicker({
	    	format: 'LT'
	    });
	</script>
@endpush

@endsection