@extends('layouts.admin')

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

@section('content')

@push('styles')
	<link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
@endpush

@push('scripts')
	<script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
@endpush

<div class="container-fluid">
	<div class="row mb-2">
		<div class="col-sm-6">
			<h4 class="m-0 text-dark">ကုန်သည်ဂိုဒေါင်ကုန်ချစာရင်းထည့်သွင်းရန်ပုံစံ</h4>

			<!-- Messages -->
			@if ($message = Session::get('success'))
				@push('scripts')
					<script type="text/javascript">
						toastr.success("{{ $message }}");
					</script>
				@endpush
            @endif

            @if ($message = Session::get('error'))
            	@push('scripts')
					<script type="text/javascript">
						toastr.error("{{ $message }}");
					</script>
				@endpush
            @endif
		</div><!-- /.col -->
		
	</div><!-- /.row -->

	@include('admins.partials.breadcrumbs')
</div><!-- /.container-fluid -->

<!-- Main content -->
<section class="content">
	<div class="container-fluid">
		@if(!empty($productStock) or !empty($partStock))
			<form role="form" onsubmit="disableEmptyInputs(this);" id="inventory-form" action="{{ route('admin.inventory_loadings.store') }}" method="POST">
				@csrf

				<div class="card mt-4">
					<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="inventory_id" required>
									@if(!empty($inventories))
										<option value="">ရွေးချယ်ပါ</option>
										@foreach ($inventories as $key => $value)
											@if(old('inventory_id') == $key)
												<option value="{{ $key }}" selected="selected">{{ $value }}</option>
											@else
												<option value="{{ $key }}">{{ $value }}</option>
											@endif
										@endforeach
									@endif
								</select>

								@if ($errors->has('inventory_id'))
								    <span class="text text-danger" role="alert">
										<strong>{{ $errors->first('inventory_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" 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" 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>
				</div>

				<!-- Product Search -->
				<div class="row justify-content-center mt-4">
					<div class="col-3">
						<label for="products_search">ကုန်ချလိုသောထုတ်ကုန်အား အောက်တွင်ရှာပါ။</label>
						<input class="form-control products-list" id="product-search-textbox" autocomplete="off" type="text" value="" list="products" />

					    <datalist id="products">
					        <select class="products-select">
							    @foreach ($productStock as $productId => $product)
									@if(!empty($product['warehouses']))
						            	<option value="{{ $product['product_number'] }}">
							    	@endif
							    @endforeach
					        </select>
					    </datalist>

					</div>

				    <button type="button" class="btn btn-info" id="product-search-btn"><i class="fas fa-search"></i></button>
				</div>

				@foreach ($productStock as $productId => $product)
					@if(!empty($product['warehouses']))
						<div class="row justify-content-center mt-4 product-div" data-product="{{ $product['product_number'] }}">
							<div class="col-8">
								<div class="card">

									<!-- Product Info -->
									<div class="card-header">
										<div class="row">
											<div class="col-12 d-flex mb-2">
			                                    <p class="col-3">{{ $product['product_number'] }}</p>
			                                    <p class="col-3"></p>
			                                    <p class="col-3"></p>
			                                    <p class="col-3">လက်ရှိ {{ number_format($product['stock']) }} ခု</p>
											</div>
										</div>
									</div>

									<!-- Warehouses -->
									<div class="card-body">
										@foreach ($product['warehouses'] as $warehouseId => $warehouse)
											<div class="row">
												<div class="col-12 d-flex mb-2">
													<p class="col-3">{{ $warehouse['name'] }}</p>
													<p class="col-3">{{$warehouse['region']}}၊ {{$warehouse['township']}}</p>
													<p class="col-3">လက်ရှိ {{ number_format($warehouse['quantity']) }} ခု</p>
													<input class="col-3 form-control inventory-stock" type="number" name="products[{{ $productId }}][{{ $warehouseId }}]" min="0" max="{{ $warehouse['quantity'] }}">
												</div>
											</div>
										@endforeach

										<button type="button" class="btn btn-danger product-remove-btn"><i class="fas fa-trash"></i></button>
									</div>
								</div>
							</div>
						</div>
					@endif
				@endforeach

				@foreach ($partStock as $partId => $part)
					@if(!empty($part['warehouses']))
						<div class="row justify-content-center mt-4">
							<div class="col-8">
								<div class="card">

									<!-- Part Info -->
									<div class="card-header">
										<div class="row">
											<div class="col-12 d-flex mb-2">
												<a target="_blank" href="{{ $part['thumbnail'] }}" class="col-3">
			                                        <img src="{{ $part['thumbnail'] }}" class="small-img-thumbnail" alt="">
			                                    </a>
			                                    <p class="col-3">{{ $part['name'] }}</p>
			                                    <p class="col-3">{{ $part['engine_model'] }}</p>
			                                    <p class="col-3">လက်ရှိ {{ number_format($part['stock']) }} ခု</p>
											</div>
										</div>
									</div>

									<!-- Warehouses -->
									<div class="card-body">
										@foreach ($part['warehouses'] as $warehouseId => $warehouse)
											<div class="row">
												<div class="col-12 d-flex mb-2">
													<p class="col-3">{{ $warehouse['name'] }}</p>
													<p class="col-3">{{$warehouse['region']}}၊ {{$warehouse['township']}}</p>
													<p class="col-3">လက်ရှိ {{ number_format($warehouse['quantity']) }} ခု</p>
													<input class="col-3 form-control" type="number" name="parts[{{ $partId }}][{{ $warehouseId }}]" min="0" max="{{ $warehouse['quantity'] }}">
												</div>
											</div>
										@endforeach
									</div>
								</div>
							</div>
						</div>
					@endif
				@endforeach
			</form>

			<div class="row mt-2 float-right" form="my-form">
				<div class="col-md-12 d-flex">
		        	<button form="inventory-form" type="reset" onclick="window.location.replace('{{ url()->previous() }}')">ပယ်ဖျက်မည်</button>
		        	<button form="inventory-form" type="submit" class="btn btnBtn btn-sm px-4 mx-3">ထည့်သွင်းမည်</button>
				</div>
			</div>
		@else
			<p class="text-danger text-center text-bold">ဂိုဒေါင်အားလုံးထဲမှာဘာမှမရှိပါ။</p>
		@endif
	</div><!-- /.container-fluid -->
</section>
<!-- /.content -->

@push('scripts')
<script type="text/javascript">
	function disableEmptyInputs(form) {
		var controls = form.elements;
		for (var i=0, iLen=controls.length; i<iLen; i++) {
			controls[i].disabled = controls[i].value == '';
		}
	}

	function disableAllEmptyInputsSubmission() {
		alert($('.inventory-stock').val());
		var nonEmpltyLength = $('.inventory-stock[value!=""]').length;
		if (nonEmpltyLength == 0) {
			alert("Enter a field!");
        	return false;
		}

		return true;
	}

	$(document).ready(function() {

		$('.product-div').hide();

		$('#product-search-btn').click(function () {
			productNumber = $('#product-search-textbox').val();
			$(document).find("[data-product='" + productNumber + "']").show();
			$('#product-search-textbox').val('');
		});

		$('.product-remove-btn').click(function () {
			$(this).parents('.product-div').hide();
		});
    });

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

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

@endsection