@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.store') }}" method="POST">
					        		@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') }}">

											@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') == $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('region_id'))
											    <span class="text text-danger" role="alert">
													<strong>{{ $errors->first('region_id') }}</strong>
												</span>
											@endif
										</div>

										<div class="form-group">
											<div class="row col-12 township-container mb-2">
												<div class="col-9">
													<label for="deliverable_townships[]">ပေးပို့မြို့နယ်</label>
													<select class="form-control select2" 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') == $tKey)
																				<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 mt-5 col-3 btn-sm btn-danger deli-tsp-remove-btn" value="-"> -->
											</div>
											<!-- /.township-container -->

											<!-- 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();
				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