@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.store') }}" method="POST">
					        		@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>
														@if(!empty($warehouses))
															<option value="">ရွေးချယ်ပါ</option>
															@foreach ($warehouses as $key => $value)
																@if(old('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" autocomplete="off" class="form-control datetimepicker-input" data-target="#reservationdate" name="loaded_date" 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" autocomplete="off" class="form-control datetimepicker-input" data-target="#timepicker" name="loaded_time" 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">
												<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]" 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>

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

												<!-- 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">
												<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]" 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>

													<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]" min="0" />
													</div>
												</div>

												<!-- 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