@{
	string clientVersion = _0_Framework.Application.Version.StyleVersion;
}

<link href="~/assetsclient/pages/register/css/_partials/_step4.css?ver=@clientVersion" rel="stylesheet" />

<div class="row p-0 step4Container">
	<div class="cardHeight p-0">
		<div class="cardContainer p-3" id="cardSelected">
		</div>
		
		<div class="cardBox">
			<div class="d-block d-lg-flex align-items-center justify-content-between">
				<div class="d-block d-lg-flex align-items-center justify-content-start gap-1">
					<div class="titleStep4Contract">شروع قرارداد:</div>

					<div class="radioBtnStartEndContainer">
						<input type="radio" id="contractStartCurrentMonthFa" value="contractStartCurrentMonthFa" name="radFinanceContract" class="radioOption"/>
						<label for="contractStartCurrentMonthFa" class="radioLabelStartEndOption">ابتدای ماه جاری</label>

						<input type="radio" id="contractStartNextMonthFa" value="contractStartNextMonthFa" name="radFinanceContract" class="radioOption"/>
						<label for="contractStartNextMonthFa" class="radioLabelStartEndOption">ابتدای ماه بعد</label>
					</div>
				</div>

				<div class="d-flex align-items-center justify-content-end gap-3 start-end-contract-section">
					<div class="d-flex align-items-center position-relative contractSection">
						<div class="startEndCon">شروع قرارداد </div>
						<span class="startEndConSpan ss03" id="ContractStartMonthView"></span>
					</div>
					<div class="d-flex align-items-center position-relative contractSection">
						<div class="startEndCon">پایان قرارداد </div>
						<span class="startEndConSpan ss03" id="contractEndFa"></span>
					</div>
					<input type="hidden" id="ContractStartMonthGr" value=""/>
				</div>
			</div>
		</div>

	</div>

	<div class="w-100 p-0" id="footerTap">
		<div style="display: flex; margin: auto 20px 0 0;" class="disable" id="btnDisableDisable">
			<button type="button" class="btnStep4Tab active" id="priceStatic">
				پرداخت یکجا
			</button>
			<button type="button" class="btnStep4Tab" id="priceStep">
				پرداخت ماهانه
			</button>
		</div>

		<div class="footerStep4Container">
			<div class="disable" id="footerDisableDisable">
				<div class="titleFooter mb-1">مدت قرارداد</div>
				<div class="d-block text-center d-md-flex align-items-center gap-3 justify-content-center">
					<div class="radioBtnFooterContainer">
						<input type="radio" id="oneMonth" value="oneMonth" name="radMonth" class="radioOption" disabled="disabled"/>
						<label for="oneMonth" class="radioLabelListOption disable">1 ماهه</label>

						<input type="radio" id="threeMonth" value="threeMonth" name="radMonth" class="radioOption" disabled="disabled" />
						<label for="threeMonth" class="radioLabelListOption disable">3 ماهه</label>

						<input type="radio" id="sixMonth" value="sixMonth" name="radMonth" class="radioOption" disabled="disabled" />
						<label for="sixMonth" class="radioLabelListOption disable">6 ماهه</label>

						<input type="radio" id="twelveMonth" value="twelveMonth" name="radMonth" class="radioOption" checked="checked"/>
						<label for="twelveMonth" class="radioLabelListOption">12 ماهه</label>
					</div>
				</div>
				
				<div class="infoPricesContainerDiv mt-1" id="priceStepContainer" style="visibility: hidden;">
					<div class="infoPricesContainer" id="priceStepContainerHtml">
						<div class="item">
							<div class="col-4 text-start">سررسید : اول</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
						<div class="item">
							<div class="col-4 text-start">سررسید : دوم</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
						<div class="item">
							<div class="col-4 text-start">سررسید : سوم</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
						<div class="item">
							<div class="col-4 text-start">سررسید : چهارم</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
						<div class="item">
							<div class="col-4 text-start">سررسید : پنجم</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
						<div class="item">
							<div class="col-4 text-start">سررسید : ششم</div>
							<div class="col-4 textRightCenter">-</div>
							<div class="col-4 text-end">- ریال</div>
						</div>
					</div>
				</div>
			</div>


			<div class="">
				<div class="lineRegisterStep4 px-2 my-2"></div>
				<div class="d-block text-center d-md-flex justify-content-end align-items-center gap-5">
					<div>
						<div class="d-flex align-items-center justify-content-between px-1 px-lg-4 gap-5">
							<div class="titlePriceStep4">مجموع مبالغ:</div>
							<div class="totalPriceStep4" style="color: #6b6b6b" id="sumOfWorkshopsPaymentPayment">-</div>
						</div>
						<div class="d-flex align-items-center justify-content-between px-1 px-lg-4 gap-5">
							<div class="titlePriceStep4">ارزش افزوده:</div>
							<div class="totalPriceStep4" style="color: #6b6b6b" id="valueAddedTaxSt">-</div>
							<input type="hidden" id="valueAddedTaxDoubleInput"/>
						</div>
						<div class="d-flex align-items-center justify-content-between mt-1 px-1 px-lg-4 gap-5">
							<div class="titlePriceStep4">مبلغ قابل پرداخت:</div>
							<div class="totalPriceStep4" id="totalPaymentStr">-</div>
							<input type="hidden" id="totalPaymentDoubleInput"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script>
	var receivedCodeFromServerUrl = `@Url.Page("./Index", "ReceivedCodeFromServer")`;
	var totalPaymentAndWorkshopListUrl = `@Url.Page("./Index", "TotalPaymentAndWorkshopList")`;
	var createOrUpdateInstitutionContractTemp = `@Url.Page("./Index", "CreateOrUpdateInstitutionContractTemp")`;
	var CreateOrUpdatePeriodTemp = `@Url.Page("./Index", "CreateOrUpdatePeriodTemp")`;
</script>

<script src="~/assetsclient/pages/Register/js/_Partials/_Step4.js?ver=@clientVersion"></script>