@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="warehouse-form" action="{{ route('admin.warehouses.update', $warehouse->id) }}" method="POST">
					        		@method('PUT')
					        		@csrf
						        	<div class="card-body">
										<div class="form-group">
											<label for="name">အမည်</label>
											<input type="text" name="name" class="form-control" id="name" placeholder="အမှတ် (၁)" required autocomplete="name" autofocus value="{{ old('name')? old('name') : $warehouse->name }}">

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

										<div class="form-group">
											<label for="longitude">တည်နေရာ</label>
											<select class="form-control d-inline select2" name="township_id">
												@if(!empty($regions))
													<option value="">ရွေးချယ်ပါ</option>
													@foreach ($regions as $key => $value)
														@if($value->townships->count() > 0)
															<optgroup label="{{ $value->name }}">
																@foreach ($value->townships as $tKey => $tValue)
																	@if(old('township_id') == $key)
																		<option value="{{ $tValue->id }}" selected="selected">{{ $tValue->name }}</option>
																	@elseif($tValue->id == $warehouse->township_id)
																		<option value="{{ $tValue->id }}" selected="selected">{{ $tValue->name }}</option>
																	@else
																		<option value="{{ $tValue->id }}">{{ $tValue->name }}</option>
																	@endif
																@endforeach
															</optgroup>
														@endif
													@endforeach
												@endif
											</select>

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

										<div class="form-group">
											<label for="deliverable_townships[]">ပေးပို့မြို့နယ်</label>
											@if($deliverableTownships->count() > 0)
												@foreach ($deliverableTownships as $deliKey => $deliValue)
													<input type="hidden" name="deliverable_townships[{{ $deliValue->id }}]" value="{{ $deliValue->id }}">
													<div class="row col-12 township-container mb-2">
														<div class="col-9">
															<select class="form-control select2 townships-selector" name="deliverable_townships[{{ $deliValue->id }}]">
																@if(!empty($regions))
																	@foreach ($regions as $key => $value)
																		@if($value->townships->count() > 0)
																			<optgroup label="{{ $value->name }}">
																				@foreach ($value->townships as $tKey => $tValue)
																					@if($deliValue->township->id == $tValue->id)
																						<option value="{{ $tValue->id }}" selected="selected">{{ $tValue->name }}</option>
																					@elseif(old('township_id') == $tValue->id)
																						<option value="{{ $tValue->id }}" selected="selected">{{ $tValue->name }}</option>
																					@else
																						<option value="{{ $tValue->id }}">{{ $tValue->name }}</option>
																					@endif
																				@endforeach
																			</optgroup>
																		@endif
																	@endforeach
																@endif
															</select>

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

														<!-- Delete Button -->
														<input type="button" class="form-control col-3 btn-sm btn-danger deli-tsp-remove-btn" value="-">
													</div>
													<!-- /.township-container -->
												@endforeach
											@else

												<div class="row col-12 township-container mb-2">
													<div class="col-9">
														<select class="form-control select2 townships-selector" name="deliverable_townships[]">
															@if(!empty($regions))
																@foreach ($regions as $key => $value)
																	@if($value->townships->count() > 0)
																		<optgroup label="{{ $value->name }}">
																			@foreach ($value->townships as $tKey => $tValue)
																				@if(old('township_id') == $key)
																					<option value="{{ $tValue->id }}" selected="selected">{{ $tValue->name }}</option>
																				@else
																					<option value="{{ $tValue->id }}">{{ $tValue->name }}</option>
																				@endif
																			@endforeach
																		</optgroup>
																	@endif
																@endforeach
															@endif
														</select>

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

											<!-- Add Button -->
											<div class="row col-12" id="deli-tsp-add-btn-div">
												<div class="col-3">
													<button class="form-control mt-2 btn-sm btn-success deli-tsp-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="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 () {

			$(document).on('click', '.deli-tsp-add-btn', function () {
				
				container = $('.township-container').first().clone();
				container.find('label').remove();
				container.find('.deli-tsp-remove-btn').remove();
				container.find('.townships-selector').attr('name', "deliverable_townships[" + $('.townships-selector').length + "]").val('');

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

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

@endsection