@extends('layouts.admin', ['title' => 'بررسی محله‌ها'])

@section('css')
	
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<h3>بررسی محله‌ها ({{ $completed_count }}/{{ count($district) }})</h3>

<div class="row">
	<div class="col-md-3">

		<table class="table table-striped">
			<tr> 
				<th>عنوان</th>
				<th>وضعیت</th> 
				<th></th>  
			</tr>

		@foreach($district as $item)
			<tr id="rowid{{ $item->id }}"> 
				<td>{{ $item->title }}</td> 
				<td style="color:{{ $item->statusColor }};">{{ $item->statusTitle }}</td> 
				<td> 
					<button type="button" class="btn btn-default btnShow" 
							data-id="{{ $item->id }}" 
							data-title="{{ $item->title }}" 
							data-lat="{{ $item->lat }}" 
							data-lng="{{ $item->lng }}"
							
							data-price_motorbike="{{ $item->price_motorbike }}"
							data-price_car="{{ $item->price_car }}"
							data-price_cargo_s="{{ $item->price_cargo_s }}"
							data-price_cargo="{{ $item->price_cargo }}"

							>انتخاب</button>  
				
				</td>
			</tr>
		@endforeach
		</table>

	</div>
	<div class="col-md-9">
		<div class="row text-center" style="display: none;">
			<div class="col-md-4">
				<button type="button" class="btn btn-primary btnUpdateStatus" data-status="1" style="min-width: 150px;">تایید</button>
			</div>
			<div class="col-md-4"> 
				<button type="button" class="btn btn-info btnUpdateStatus" data-status="2" style="min-width: 150px;">بررسی مجدد</button>
			</div>
			<div class="col-md-4">
				<button type="button" class="btn btn-danger btnUpdateStatus" data-status="3" style="min-width: 150px;">رد</button> 
			</div>
		</div>

		<div class="row">
			<div class="col-md-12"> 
				<input type="hidden" id="currentID" value="0">
				<h4 id="title" style="color:blue;">محله مورد نظر را از فهرست سمت راست انتخاب نمایید.</h4>

				<div class="row">
					<div class="col-md-4">
						طول وعرض 
						<input type="text" class="form-control ltr" id="txtLatLng" placeholder="Lat,Lng" /> 
					</div>
					<div class="col-md-2">
						عرض: <input type="text" class="form-control ltr" id="txtLat" placeholder="latitude" /> 
					</div>
					<div class="col-md-2">
						طول: <input type="text" class="form-control ltr" id="txtLng" placeholder="longitude" /> 
					</div>
					<div class="col-md-4" style="padding-top: 20px;">  
						<button type="button" class="btn btn-info mt-3" id="btnGetData" >دریافت اطلاعات</button>
						<button type="button" class="btn btn-primary mt-3" id="btnSaveData" >تایید و ذخیره</button>
					</div>
				</div>
				
				<br>
				<div class="row">
					<div class="col-md-4">
						 عنوان
						<input type="text" class="form-control" id="txt-title" placeholder="" /> 
					</div> 
					<div class="col-md-2">
						پیک موتوری: <input type="text" class="form-control ltr" id="txt-price_motorbike" placeholder="" /> 
					</div>
					<div class="col-md-2">
						تاکسی بار : <input type="text" class="form-control ltr" id="txt-price_car" placeholder="" /> 
					</div>
					<div class="col-md-2">
						وانت سبک: <input type="text" class="form-control ltr" id="txt-price_cargo_s" placeholder="" /> 
					</div>
					<div class="col-md-2">
						وانت سنگین: <input type="text" class="form-control ltr" id="txt-price_cargo" placeholder="" /> 
					</div>
					<div class="col-md-4" style="padding-top: 20px;">   
						<button type="button" class="btn btn-primary mt-3" id="btnSaveInfoData" >ذخیره</button>
					</div>
				</div>

				<p>نتیجه استعلام نشان</p>
				<div id="titleNeshan">؟</div>
				<div id="map"></div> 
			</div>
		</div>

	</div>
</div>
 
@stop

@section('javascript')	
	<script src="https://www.parsimap.com/js/v3.1.0/parsimap.js?key=public"></script>
	<script src="/js/jquery.min.js?v=3.3.1"></script>
	<script>  

		$(document).ready(function(){
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			var container = document.getElementById('map'); 
			
			$("#txtLatLng").change(function(){
				var v = $("#txtLatLng").val();
				var arr = v.split(',');
  
				$("#txtLat").val(arr[0].trim());
				$("#txtLng").val(arr[1].trim());
				$("#txtLatLng").val("");
			});

			$(".btnUpdateStatus").click(function(){
				var currentID = $("#currentID").val();
				var status = $(this).data("status");

 
				$.ajax({
					url: '/admin/districts/checklist/update',
					type: 'POST',
					dataType: 'JSON',
					data: {id: currentID, status: status}
				})
				.done(function(response){ 
					if(response.status == "OK")
						$(`#rowid${currentID}`).hide();
					else
						alert(response);
				})
				.fail(function(data){
					alert('خطایی رخ داده است !');
					console.log(data.responseText );
				});
			});

			$(".btnShow").click(function(){
				var id = $(this).data("id");
				$("#txtLat").val($(this).data("lat"));
				$("#txtLng").val($(this).data("lng"));
 
				var title = $(this).data("title");

				$("#title").text(title); 
				$("#currentID").val(id);
				$("#titleNeshan").text("?");

				$("#txtLat").focus();

				$("#txt-title").val(title);
				$("#txt-price_motorbike").val($(this).data("price_motorbike"));
				$("#txt-price_car").val($(this).data("price_car"));
				$("#txt-price_cargo_s").val($(this).data("price_cargo_s"));
				$("#txt-price_cargo").val($(this).data("price_cargo"));

 
			});

			$("#btnGetData").click(function(){

				var lat = $("#txtLat").val();
				var lng = $("#txtLng").val();
				
				if(lat == "" || lng == "")
				{
					alert("لطفا طول و عرض جغرافیایی را وارد نمایید.");
					return;
				}

				neshan(lat, lng);

				var placeOptions = {
					zoom: 15,
					lngLat: [lng, lat],
					popupText: `<h1>${$("#title").text()}</h1>`,
					properties: { id: $("#currentID").val() },
					onClick: event => console.log(event.features[0]),
					iconUrl: 'https://www.parsimap.com/js/v3.1.0/examples/marker/home.png',
				};
				var place = new parsimap.Place(container, placeOptions);

			});

			$("#btnSaveInfoData").click(function(){

				var title = $("#txt-title").val();
				var price_motorbike = $("#txt-price_motorbike").val();
				var price_car = $("#txt-price_car").val();
				var price_cargo_s = $("#txt-price_cargo_s").val();
				var price_cargo = $("#txt-price_cargo").val();
   
				$("#btnSaveInfoData").text("در حال ذخیره...");

				var id = $("#currentID").val(); 
 
				$.ajax({
					url: '/admin/districts/checklist/updateinfo',
					type: 'POST',
					dataType: 'JSON',
					data: {id, title, price_motorbike, price_car, price_cargo_s, price_cargo}
				})
				.done(function(response){ 
					if(response.status == "OK")
					{ 
						alert("ذخیره شد !");
						$("#btnSaveInfoData").text("تایید و ذخیره");
					}
					else
					{ 
						$("#btnSaveInfoData").text("تایید و ذخیره");
						alert(response);
					}
				})
				.fail(function(data){
					$("#btnSaveInfoData").text("تایید و ذخیره");
					alert('خطایی رخ داده است !');
					console.log(data.responseText );
				});

			});

			$("#btnSaveData").click(function(){
				var lat = $("#txtLat").val();
				var lng = $("#txtLng").val();

				if(lat == "" || lng == "")
				{
					alert("لطفا طول و عرض جغرافیایی را وارد نمایید.");
					return;
				}

				$("#btnSaveData").text("در حال ذخیره...");

				var currentID = $("#currentID").val(); 
 
				$.ajax({
					url: '/admin/districts/checklist/update',
					type: 'POST',
					dataType: 'JSON',
					data: {id: currentID, status: 1, lat: lat, lng: lng}
				})
				.done(function(response){ 
					if(response.status == "OK")
					{
						$(`#rowid${currentID}`).hide();
						$("#txtLat").val("");
						$("#txtLng").val("");
						$("#currentID").val(0);
						$("#titleNeshan").html("?");
						$("#title").text("محله مورد نظر را از فهرست سمت راست انتخاب نمایید.");

						alert("ذخیره شد !");
						$("#btnSaveData").text("تایید و ذخیره");
					}
					else
					{ 
						$("#btnSaveData").text("تایید و ذخیره");
						alert(response);
					}
				})
				.fail(function(data){
					$("#btnSaveData").text("تایید و ذخیره");
					alert('خطایی رخ داده است !');
					console.log(data.responseText );
				});

			});

			function neshan(lat, lng)
			{
				var title = "";
				
				$("#titleNeshan").html("درحال دریافت اطلاعات...");

				$.ajax({
					url: `/admin/districts/checklist/neshan`,
					type: 'POST',
					dataType: 'JSON',
					data: { lat: lat, lng: lng}
				})
				.done(function(response){
					if(response.status == "OK")
					{
						var addresses = "";
						response.addresses.forEach(function(val, index){
							addresses += val.formatted + "<br/>";
						})

						title = `
						استان: ${response.state} <br/> 
						شهر: <b>${response.city}</b> <br/> 
						محله: <b>${response.neighbourhood}</b><br/> <br/> 
						آدرس: <br/>${addresses} <br/>
						
						` ;

						$("#titleNeshan").html(title);
					}
					else
					{
						alert("خطایی در دریافت اطلاعات از نشان رخ داده است !");
						console.log(response);
					} 
				})
				.fail(function(data){
					console.log(data);
					alert("خطایی در دریافت اطلاعات از نشان رخ داده است !");

				});
			}

		});

	</script>

@endsection