@extends('layouts.default1400-profile', ['title' => 'درخواست‌ خرید اقساطی و اعتباری'])

@section('custom-css')
<style type="text/css" >
  .installment-content a{ 
	  color: blue;
  }

  .submit-btn{
	background-color: #3b82f6;
  }

  .submit-btn:disabled,
  .submit-btn[disabled]{
	background-color: gray !important;
  }
 
</style>
@stop

@section('content')

<div class="md:flex border-gray-100 border-b-2 text-sm items-center truncate overflow-hidden">
	<a class="flex px-4 py-2 mx-1 justify-start hover:bg-blue-100 border-b-4 {{ $step === 1 ? 'border-blue-500' : 'border-gray-100' }}"
		href="#">
		درخواست اعتبار جدید
	</a>
	<a class=" flex px-4 py-2 mx-1 justify-start hover:bg-blue-100  border-b-4 {{ $step === 2 ? 'border-blue-500' : 'border-gray-100' }}"
		href="#">
		امضای الکترونیکی قرارداد
	</a>

	<a class=" flex px-4 py-2 mx-1 justify-start hover:bg-blue-100  border-b-4 {{ $step === 3 ? 'border-blue-500' : 'border-gray-100' }}"
		href="#">
		پیگیری و سوابق درخواست اعتبار
	</a>

</div>


@if( $step === 3)

<div class="m-4">

	<div class="alert alert-info">
		@if($data->status == 'initial-request' || $data->status == 're-request' )
		درخواست شما با موفقیت ثبت شد. کارشناسان دنت آنلاین در اولین فرصت جهت تکمیل فرآیند با شما تماس
		خواهند گرفت.
		@elseif($data->status == 'pending')
		درخواست شما هم اکنون در حال بررسی است. لطفا منتظر تماس کارشناسان دنت آنلاین جهت تکمیل فرآیند
		بمانید.
		@elseif($data->status == 'waiting-documents')
		درخواست شما تایید شد و منتظر ارسال مدارک از طرف شما هستیم.
		@elseif($data->status == 'disapproval')
		متاسفانه درخواست شما رد شد. در صورت تمایل جهت پیگیری می‌توانید با دنت آنلاین تماس حاصل فرمائید.
		@elseif($data->status == 'temporary-approval')
		درخواست شما در حالت تایید موقت قرار گرفت. هم اکنون میتوانید جهت خرید به صورت اعتباری و اقساطی
		اقدام فرمایید.
		@elseif($data->status == 'approval')
		درخواست شما در حالت تایید نهایی قرار گرفت. هم اکنون میتوانید جهت خرید به صورت اعتباری و اقساطی
		اقدام فرمایید.
		@endif
	</div>
</div>

@elseif( $step === 2)

<div class="m-4"> 
	@if(session()->has('error'))
	<div class="alert alert-warning mb-3 max-w-sm">
		{{ session()->get('error') }}
	</div>
	@endif

	<div style="text-align: center; font-weight: 800; font-size: 14px">
		لطفا پس از مطالعه شرایط و قوانین استفاده از سرویس دنت پی کد امضای الکترونیکی پیامک شده را در کادر پایین صفحه وارد نمایید.
	<br><br>
	</div>
	<div>
		{!! $pageData->content !!}
	</div>

	<div style="text-align: center; padding-top: 36px">
		<form method="POST" action="{{ route('user.profile.installment.requests.confirm') }}" >
			@csrf
			<label class="block mb-2">لطفا رمز تایید که برایتان پیامک شده را وارد نمایید:</label>
			<input type="text" class="input input-bordered w-1/3 block text-center " style="margin: 0 auto;" id="pincode" name="pincode"
				autocomplete="off" placeholder="_ _ _ _ _ _">
	

			<button type="submit" class="btn btn-primary mx-auto my-4">تایید قرارداد</button>
			<a href="{{ route('user.profile.installment.requests.back') }}" class="btn btn-link">بازگشت</a>


		</form> 
	</div>
</div>

@else

<div class="m-4">

	<div class="text-sm mr-8 installment-content">
		{!! $setting->request_installment_content !!}		 
	</div>

</div>

<form action="{{ route('user.profile.installment.requests') }}" method="POST" autoComplete="off" class="m-4"
	enctype="multipart/form-data" id="form-installment-request">
	@csrf
	<input type="hidden" name="address_details" value="">

	<!-- row 1 -->
	<div class="md:flex">
		<div class="lg:flex">
{{-- 
			<div class="w-60  m-2 justify-between items-center rounded-md bg-blue-100 border border-gray-300">
				<label class="text-sm font-bold mx-2"> تامین کننده اعتبار </label>
				<select
					class="bg-white w-full rounded-b-md text-gray-500 placeholder-gray-300 focus:outline-none text-center"> 
					<option selected value="1">کاسپین طب تریتا</option> 
				</select>


				{!! $errors->first('amount', '<span class="error">:message</span>') !!}
			</div> --}}

			<div class="w-60  m-2 justify-between items-center rounded-md bg-blue-100 border border-gray-300">
				<label class="text-sm font-bold mx-2"> اعتبار درخواستی </label>
				<select
					class="bg-white w-full rounded-b-md text-gray-500 placeholder-gray-300 focus:outline-none text-center"
					name="amount" id="amount">
					<option value="0">انتخاب کنید...</option>
					@foreach ($amounts as $amount_key => $amount_item)
					<option value="{{ $amount_key }}">{{ $amount_item }}</option>
					@endforeach

				</select>


				{!! $errors->first('amount', '<span class="error">:message</span>') !!}
			</div>

			{{-- Hidden guarantee check amount field --}}
			<div class="w-60  m-2 justify-between items-center rounded-md bg-blue-100 border border-gray-300" style="display: none;">
				<label class="text-sm font-bold mx-2"> مبلغ چک ضمانت </label>

				<input type="text" value="" id="priceCheque" readonly
					class="bg-white w-full rounded-b-md text-gray-500 text-center">

			</div>

			<div class="w-60  m-2 justify-between items-center rounded-md bg-blue-100 border border-gray-300">
				<label class="text-sm font-bold mx-2"> حداقل رتبه اعتبار بانکی </label>

				<input type="text" value="" id="creditRating" readonly
					class="bg-white w-full rounded-b-md text-gray-500 text-center">

			</div>

			<div class="w-60  m-2 justify-between items-center rounded-md bg-blue-100 border border-gray-300">
				<label class="text-sm font-bold mx-2"> ضامن </label>

				<input type="text" value="" id="guarantor" readonly
					class="bg-white w-full rounded-b-md text-gray-500 text-center">

			</div>


		</div>


	</div>

	<!-- row 2 - Hidden address fields -->

	{{-- <p class="font-bold ml-4 mt-8 text-black text-sm"> آدرس :</p> --}}

	<div class="text-sm mr-4" style="display: none;">

		<div class="flex my-4 items-center">
			<input type="text" placeholder="آدرس پستی" name="address" id="address"
			class="input input-bordered my-3 mx-2 w-1/2">

			<input type="text" placeholder="کدپستی 10 رقمی" name="zipcode" id="zipcode"
				class="input input-bordered text-center my-3 mx-2">
			{{-- <button type="button" id="btn-get-address-manual" data-zipcode-target="zipcode"
				class="btn btn-primary py-2 px-5">
				<img class="h-4 pl-2" src="/svgs-new1400/location-dot-white.svg"> دریافت آدرس
			</button> --}}

		</div>
	</div>

	{{-- <div class="md:flex my-4 mx-2 items-center">
		<p>
			<span class="inline-flex">
				<img class="h-4" src="/svgs-new1400/location-dot.svg">
			</span>
			<span>
				<span id="profile-address" class="text-blue-600 text-sm">کدپستی را وارد و بر روی دریافت آدرس کلیک
					نمایید!</span>
			</span>
		</p>
	</div> --}}



	<!-- row 3 -->

	{{-- <p class="font-bold ml-4 mt-8 text-black text-sm"> بارگذاری مدارک :</p> --}}

	{{-- @if($user->image_pcode == '')
	<div class="text-sm mr-4">
		<label>تصویر کارت ملی نماینده (اجباری) | فرمت های مورد قبول jpg/png </label>
		<a class="text-blue-500 mr-4 whitespace-nowrap" href="#">
			<span class="inline-flex"> <img class="h-3" src="/svgs-new1400/circle-info-blue.svg"></span>
			نیاز به راهنما دارید ؟
		</a>

		<div class="flex my-4 items-center">

			<label class="flex bg-blue-500 mx-5 py-2 px-5 rounded-lg text-white text-sm">
				<span class="text-white" href="#">
					<span class="inline-flex"> <img class="h-4" src="/svgs-new1400/file-plus-white.svg"></span>
					انتخاب فایل</span>
				<input type='file' id="image_national_card" name="image_national_card" accept="image/*"
					class="hidden" />

				<input type="hidden" name="hvimage_national_card" id="hvimage_national_card"
					value="{{ $data->image_national_card ?? '' }}">
			</label>

			<img src="" style="height: 80px;display:none; float: left;" id="pvimage_national_card">
 
			<span class="mx-4 error">{{ $errors->first('image_national_card') }}</span>
		</div>
	</div>
	@endif --}}

{{-- 
	@if($user->image_business_license == '')
	<div class="text-sm mr-4 mt-12">
		<label>تصویر پروانه کلینیک (اجباری) | فرمت های مورد قبول jpg/png </label>
		<a class="text-blue-500 mr-4 whitespace-nowrap" href="#">
			<span class="inline-flex"> <img class="h-3" src="/svgs-new1400/circle-info-blue.svg"></span>
			نیاز به راهنما دارید ؟
		</a>

		<div class="flex my-4 items-center">

			<label class="flex bg-blue-500 mx-5 py-2 px-5 rounded-lg text-white text-sm">
				<span class="text-white" href="#">
					<span class="inline-flex"> <img class="h-4" src="/svgs-new1400/file-plus-white.svg"></span>
					انتخاب فایل</span>
				<input type='file' id="image_business_license" name="image_business_license" accept="image/*"
					class="hidden" />

				<input type="hidden" name="hvimage_business_license" id="hvimage_business_license"
					value="{{ $data->image_business_license ?? '' }}">
			</label>

			<img src="" style="height: 80px;display:none; float: left;" id="pvimage_business_license">
 
			<span class="mx-4 error">{{ $errors->first('image_business_license') }}</span>
		</div>
	</div>
	@endif --}}

{{-- 
	<div class="text-sm mr-4 mt-12">
		<label>تصویر برگه خام چک صیادی | فرمت های مورد قبول jpg/png </label>
		<a class="text-blue-500 mr-4 whitespace-nowrap" href="#">
			<span class="inline-flex"> <img class="h-3" src="/svgs-new1400/circle-info-blue.svg"></span>
			نیاز به راهنما دارید ؟
		</a>

		<div class="flex my-4 items-center">

			<label class="flex bg-blue-500 mx-5 py-2 px-5 rounded-lg text-white text-sm">
				<span class="text-white" href="#">
					<span class="inline-flex"> <img class="h-4" src="/svgs-new1400/file-plus-white.svg"></span>
					انتخاب فایل</span>

				<input type="hidden" name="hvimage_cheque" id="hvimage_cheque" value="{{ $data->image_cheque ?? '' }}">
				<input type='file' id="image_cheque" name="image_cheque" accept="image/*" class="hidden" />
			</label> 
			<img src="" style="height: 80px;display:none; float: left;" id="pvimage_cheque">

			<span class="mx-4 error">{{ $errors->first('image_cheque') }}</span>
		</div>
	</div> --}}


	{{-- <div class="text-sm mr-4 mt-12">
		<label>تصویر کارت ملی | فرمت های مورد قبول
			jpg/png </label>
		<a class="text-blue-500 mr-4 whitespace-nowrap" href="#">
			<span class="inline-flex"> <img class="h-3" src="/svgs-new1400/circle-info-blue.svg"></span>
			نیاز به راهنما دارید ؟
		</a>

		<div class="flex my-4 items-center">

			<label class="flex bg-blue-500 mx-5 py-2 px-5 rounded-lg text-white text-sm">
				<span class="text-white" href="#">
					<span class="inline-flex"> <img class="h-4" src="/svgs-new1400/file-plus-white.svg"></span>
					انتخاب فایل</span>
				<input type='file' id="image_account3months" name="image_account3months"
					accept="image/jpeg,image/png,application/pdf" class="hidden" />
			</label> 
			<img src="/img/users/docs/{{ $data->image_account3months ?? '' }}"
				onerror="this.onerror=null;this.src='/img/pdf-big.png';"
				style="height: 80px; display: none; float: left;" id="pvimage_account3months">

			<span class="mx-4 error">{{ $errors->first('image_account3months') }}</span>
		</div>
	</div> --}}

	<div>
		<input type="checkbox" name="terms" id="terms">
		<label for="terms" class="text-blue-500">
			<a href="https://www.dentonline.ir/pages/41/%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AE%D8%AF%D9%85%D8%A7%D8%AA-%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA-%D8%A7%D8%B9%D8%AA%D8%A8%D8%A7%D8%B1%DB%8C-%D9%88-%D8%A7%D9%82%D8%B3%D8%A7%D8%B7%DB%8C" target="_blank">قوانین و مقررات استفاده از سرویس دنت پی</a>
			<span class="text-black"> را خوانده ام و با آنها موافق هستم. </span>	
		</label>
	</div>

	<span class="grid justify-items-end">
		<button type="submit" id="submit-btn" disabled class="submit-btn mx-5 py-2 px-5 rounded-lg text-white text-sm">
			تایید و ارسال</button>
	</span>
</form>


@endif

@stop

@section('scripts')

<script type="text/javascript" src="/js/installment-request.js?v=0.9"></script>
<script type="text/javascript" src="/js/profile.js?v=0.7"></script>

<script type="text/javascript">
	var alertGPS = true;
	var defaultAddressSel = 0;
	var userAddressInit = `{!! json_encode($userAddressInit) !!}` ;

	$(document).ready(function() {
		
		$('#terms, #amount').on('change', function() {
			if (
				$('#amount').val() == 0 
				||!$('#terms').is(':checked')
			) {
				$('#submit-btn').prop('disabled', true);
			} else {
				$('#submit-btn').prop('disabled', false);
			}
		});
	
		$('#amount').change(function()
		{
			var valTemp = $(this).val() * 1.5;
			var selectedAmount = $(this).val();

			if(valTemp == 0) 
			{
				$('#priceCheque').val("");
				$('#guarantor').val("");
				$('#creditRating').val("");
			}
			else
			{
				var temp = valTemp.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
				temp = englishNumber2Perian( temp );
				$('#priceCheque').val( temp + ' تومان');

				// Set credit rating and guarantor text based on selected amount
				if(selectedAmount == '200000000') {
					$('#creditRating').val("A3 (نمره 640)");
					$('#guarantor').val("نیاز نیست");
				} else if(selectedAmount == '100000000') {
					$('#creditRating').val("B3 (نمره 580)");
					$('#guarantor').val("نیاز است");
				} else {
					// For other amounts, use the original logic based on calculated amount
					$('#creditRating').val("");
					if(valTemp >= 750000000)
						$('#guarantor').val("دو نفر");
					else if(valTemp >= 300000000)
						$('#guarantor').val("یک نفر");
					else
						$('#guarantor').val("نیاز است");
				}
				 
			}
		});
		
		

		var map = null;

		$("#districts").change(function(){
			var lat = $("#districts option:selected").data('lat');
			var lng = $("#districts option:selected").data('lng');

			map.setCenter( [lng, lat]); 
		});

		$('#newAddressModal').on('show.bs.modal', function (event) {
			setTimeout(function(){
				var lng = $('#lng').val();
				var lat =  $('#lat').val();
				
				$("#map").html("");

				var container = document.getElementById('map');
				var mapOptions = { center: [ lng ,  lat ], zoom: 15 };
				map = new parsimap.Map(container, mapOptions);
			
				map.on('load', function() { 
					var symbolLayerOptions = map.getDefaultSymbol();
				
					var pointer = new parsimap.Pointer(map, {
						type: 'center',
						layerOptions: symbolLayerOptions,
					});
					pointer.enable();
					
					pointer.on('select', function(event) { 
						$("#lng").val(event.lngLat.lng);
						$("#lat").val(event.lngLat.lat);
					});

					var targetData = {
						type: 'Feature',
						geometry: { type: 'Point', coordinates: [0, 0] },
					};

					navigator.geolocation.watchPosition(onWatchPosition, onPositionError);
			
					function onWatchPosition(position) {
						var coords = position.coords;
						var coordinates = [coords.longitude, coords.latitude];
						targetData.geometry.coordinates = coordinates;
						var source = map.getSource('target-source');
						if (source) source.setData(targetData);
					}
			
					function onPositionError() 
					{ 
						if(alertGPS)
							alertify.error('لطفا اجازه دسترسی به موقعیت مکانی را به مرورگر دهید !');

						alertGPS = false;
					}
			
					document.getElementById('locate-position').onclick = function() {
						map.flyTo(targetData.geometry.coordinates, 18, 4);
					}; 


				});

			}, 1000);
			
		});

		
	});

	function englishNumber2Perian(num)
	{
		num = num.replaceAll("0", "۰")
			.replaceAll("1", "۱")
			.replaceAll("2", "۲")
			.replaceAll("3", "۳")
			.replaceAll("4", "۴")
			.replaceAll("5", "۵")
			.replaceAll("6", "۶")
			.replaceAll("7", "۷")
			.replaceAll("8", "۸")
			.replaceAll("9", "۹");
		return num;
	}
</script>
@stop