From 6201492879266d2fd3292913498625e29cd7dae1 Mon Sep 17 00:00:00 2001
From: MahanCh <www.mahan.13831012c@gmail.com>
Date: Sun, 18 May 2025 17:52:33 +0330
Subject: [PATCH] change step4

---
 .../Pages/Register/_Partials/_Step4.cshtml    |  68 +++---
 .../wwwroot/AssetsClient/css/style.css        |  44 +++-
 .../pages/Register/css/_Partials/_Step4.css   | 219 +++++++++++++++---
 .../pages/Register/js/_Partials/_Step4.js     |  33 ++-
 4 files changed, 292 insertions(+), 72 deletions(-)

diff --git a/ServiceHost/Pages/Register/_Partials/_Step4.cshtml b/ServiceHost/Pages/Register/_Partials/_Step4.cshtml
index b900ff82..8ba18d9f 100644
--- a/ServiceHost/Pages/Register/_Partials/_Step4.cshtml
+++ b/ServiceHost/Pages/Register/_Partials/_Step4.cshtml
@@ -6,12 +6,41 @@
 
 <div class="row p-0 step4Container">
 	<div class="cardHeight p-0">
-		<div class="cardContainer p-2" id="cardSelected">
+		<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;">
+		<div style="display: flex; margin: auto 20px 0 0;" class="disable" id="btnDisableDisable">
 			<button type="button" class="btnStep4Tab active" id="priceStatic">
 				پرداخت یکجا
 			</button>
@@ -21,17 +50,9 @@
 		</div>
 
 		<div class="footerStep4Container">
-			<div>
-				<div class="titleFooter">مدت قرارداد</div>
-				<div class="d-flex align-items-center gap-3 justify-content-between">
-					<div class="radioBtnFooterContainer">
-						<input type="radio" id="contractStartCurrentMonthFa" value="contractStartCurrentMonthFa" name="radFinanceContract" class="radioOption" checked="checked" />
-						<label for="contractStartCurrentMonthFa" class="radioLabelListOption">ابتدای ماه جاری</label>
-
-						<input type="radio" id="contractStartNextMonthFa" value="contractStartNextMonthFa" name="radFinanceContract" class="radioOption" />
-						<label for="contractStartNextMonthFa" class="radioLabelListOption">ابتدای ماه بعد</label>
-					</div>
-
+			<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>
@@ -47,36 +68,36 @@
 					</div>
 				</div>
 				
-				<div class="infoPricesContainerDiv mt-3" id="priceStepContainer" style="display: none">
+				<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 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 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 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 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 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 text-start">-</div>
+							<div class="col-4 textRightCenter">-</div>
 							<div class="col-4 text-end">- ریال</div>
 						</div>
 					</div>
@@ -86,12 +107,7 @@
 
 			<div class="">
 				<div class="lineRegisterStep4 px-2 my-2"></div>
-				<div class="d-block text-center d-md-flex justify-content-between align-items-center gap-5">
-					<div class="d-block text-start gap-2">
-						<div class="d-flex align-items-center" style="margin: 3px auto; font-size: 12px; color: #0B5959;"><div style="width:100px;">شروع قرارداد: </div> <span id="ContractStartMonthView"></span></div>
-						<div class="d-flex align-items-center" style="margin: 3px auto; font-size: 12px; color: #0B5959;"><div style="width:100px;">پایان قرارداد: </div> <span id="contractEndFa"></span></div>
-						<input type="hidden" id="ContractStartMonthGr" value="" />
-					</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>
diff --git a/ServiceHost/wwwroot/AssetsClient/css/style.css b/ServiceHost/wwwroot/AssetsClient/css/style.css
index c034777b..3f97a100 100644
--- a/ServiceHost/wwwroot/AssetsClient/css/style.css
+++ b/ServiceHost/wwwroot/AssetsClient/css/style.css
@@ -96,6 +96,12 @@
     outline: none;
 }
 
+.ss03 {
+    -moz-font-feature-settings: "ss03";
+    -webkit-font-feature-settings: "ss03";
+    font-feature-settings: "ss03";
+}
+
 /* Scrollbar Styling */
 ::-webkit-scrollbar {
     width: 10px;
@@ -1058,6 +1064,24 @@ ul {
 /* Buttons */
 
 
+button.btn-pdf {
+    border: 1px solid transparent;
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    padding: 3px 1px;
+    color: #E83838;
+    margin: auto 0 auto 1px;
+    background-color: rgba(211, 8, 37, 0.2);
+    box-shadow: 0;
+    transition: ease .2s;
+}
+
+button.btn-pdf svg {
+    color: rgb(174, 0, 0);
+    fill: rgb(174, 0, 0);
+}
+
 button.btn-print {
     border: 1px solid transparent;
     width: 30px;
@@ -1071,18 +1095,18 @@ button.btn-print {
     transition: ease .2s;
 }
 
-    button.btn-print svg {
-        color: #1E293B;
-    }
+button.btn-print svg {
+    color: #1E293B;
+}
 
-    button.btn-print:hover {
-        color: #ffffff;
-        background-color: rgba(52, 209, 209, 0.50);
-    }
+button.btn-print:hover {
+    color: #ffffff;
+    background-color: rgba(52, 209, 209, 0.50);
+}
 
-        button.btn-print:hover svg {
-            color: #1E293B;
-        }
+button.btn-print:hover svg {
+    color: #1E293B;
+}
 
 button.btn-edit,
 a .btn-edit {
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/Register/css/_Partials/_Step4.css b/ServiceHost/wwwroot/AssetsClient/pages/Register/css/_Partials/_Step4.css
index 08f40f3c..57d3d684 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/Register/css/_Partials/_Step4.css
+++ b/ServiceHost/wwwroot/AssetsClient/pages/Register/css/_Partials/_Step4.css
@@ -11,10 +11,10 @@
     color: #2B2F32;
     font-size: 12px;
     font-weight: 500;
-    background-color:#ffffff;
-    padding: 9px;
+    background-color: #ffffff;
+    padding: 5px 9px;
     margin: auto 9px auto 6px;
-    border-radius:9px 9px 0 0;
+    border-radius: 9px 9px 0 0;
 }
 
     .btnStep4Tab:hover {
@@ -29,25 +29,41 @@
 
 
 .cardHeight {
-    height: 30vh;
-    overflow: auto;
+    /*height: 30vh;
+    overflow: auto;*/
 }
 
 .cardContainer {
+    height: 18vh;
+    overflow: auto;
     background-color: #ffffff;
-    border-radius: 20px;
+    border-radius: 15px;
     padding: 10px;
     display: grid;
-    gap: 9px;
-    overflow: auto;
+    gap: 19px;
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+
+.cardBox {
+    background-color: #ffffff;
+    border-radius: 15px;
+    padding: 10px;
+    /*display: flex;
+    justify-content: space-between;
+    align-items: center;*/
+    gap: 9px;
+    padding: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
 .cardGrid {
     border: 1px solid #CACACA;
     border-radius: 10px;
     padding: 9px;
     background-color: #ffffff;
+    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.1);
 }
     .cardGrid .titleWpName {
         font-size: 13px;
@@ -112,6 +128,20 @@
     }
 
 
+.titleStep4Contract {
+    color: #5C5C5C;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: start;
+}
+
+.radioBtnStartEndContainer {
+    display: flex;
+    /*grid-template-columns: repeat(4, minmax(0, 1fr));*/
+    gap: 9px;
+    justify-content: center;
+    align-items: center;
+}
 
 .footerStep4Container {
     background-color: #ffffff;
@@ -121,26 +151,77 @@
     display: flex;
     flex-direction: column;
     gap: 9px;
-    height: 260px;
+    /* height: 260px; */
     justify-content: space-between;
     padding: 12px 9px;
 }
 
-    .footerStep4Container .titleFooter {
-        color: #5C5C5C;
-        font-size:12px;
-        font-weight:500;
-        text-align:center;
-    }
+.start-end-contract-section {
+    border: 1px solid #eee;
+    padding: 5px;
+    border-radius: 8px;
+}
+
+.contractSection {
+    background-color: #ECFFFF;
+    padding: 6px;
+    border-radius: 8px;
+    text-align: center;
+    margin: 0 75px 0 0;
+}
+
+.contractSection .startEndCon {
+    position: absolute;
+    right: -70px;
+    margin: auto 5px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #5C5C5C;
+    white-space: nowrap;
+}
+
+.contractSection .startEndConSpan {
+    font-size: 16px;
+    font-weight: 600;
+    color: #0B5959;
+}
 
 
-    .footerStep4Container .radioBtnFooterContainer {
-        display: flex;
-        /*grid-template-columns: repeat(4, minmax(0, 1fr));*/
-        gap: 9px;
-        justify-content: center;
-        align-items: center;
-    }
+
+
+.radioLabelStartEndOption {
+    font-size: 12px;
+    font-weight: 500;
+    color: #0F8080;
+    background-color: #ffffff;
+    border: 1px solid #1D9D9D;
+    text-align: center;
+    padding: 6px 9px;
+    border-radius: 9px;
+    width: 130px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.radioOption:checked + .radioLabelStartEndOption {
+    color: #ffffff;
+    background-color: #1D9D9D;
+}
+
+
+
+
+
+.footerStep4Container .titleFooter {
+    color: #5C5C5C;
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+}
+    
 
     .footerStep4Container .radioOption {
         display: none;
@@ -176,7 +257,7 @@
 
 
 .infoPricesContainerDiv {
-    height: 70px;
+    height: 192px;
     overflow: auto;
     padding: 6px;
     border: 1px solid #E7E7E7;
@@ -186,7 +267,8 @@
 
 .infoPricesContainer {
     display: grid;
-    gap: 6px;
+    gap: 3px;
+    column-gap: 12px;
     grid-auto-flow: column;
     grid-template-rows: repeat(6, minmax(0, 1fr));
     align-content: start;
@@ -222,13 +304,22 @@
     color: #1ABA3D;
     font-size: 13px;
     font-weight: 600;
+    width: 160px;
+    text-align: left;
 }
 
-
+.textRightCenter {
+    text-align: start;
+}
 
 @media (max-width:1366px) {
+    .step4Container {
+        height: 80vh;
+    }
+
     .cardContainer {
         grid-template-columns: repeat(2, minmax(0, 1fr));
+        display: none;
     }
 
     .footerStep4Container .radioLabelListOption {
@@ -239,29 +330,87 @@
         font-size: 11px;
     }
 
+    .startEndConSpan {
+
+        width: auto;
+    }
     /*.cardHeight {
         height: 260px;
     }*/
 }
 
 @media (max-width:992px) {
+    .step4Container {
+        height: auto;
+    }
+
+    .cardBox {
+        padding: 0.5rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .step4Container {
+        height: 74vh;
+    }
+
+    .infoPricesContainerDiv {
+        height: 110px;
+    }
+
     .footerStep4Container .radioLabelListOption {
         width: 100px;
     }
 
+    .contractSection {
+        width: 100%;
+        margin: 0 0 0 0;
+        justify-content: center;
+    }
+
+    .contractSection .startEndCon {
+        position: relative;
+        right: auto;
+        font-weight: 800;
+        font-size: 10px;
+    }
+
+    .contractSection .startEndConSpan {
+        font-size: 12px;
+        font-weight: 800;
+    }
+
     .infoPricesContainer {
-        grid-template-rows: repeat(1, minmax(0, 1fr));
-        height: 130px;
+        grid-template-rows: repeat(12, minmax(0, 1fr));
         overflow: auto;
     }
+        .infoPricesContainer .item {
+            font-size: 10px;
+            font-weight: 600;
+        }
 
     /*.cardHeight {
         height: 48vh;
     }*/
+        .titleStep4Contract {
+            text-align: center;
+        }
+
+    .radioLabelStartEndOption {
+        width: 100%;
+    }
+    
+    .radioBtnStartEndContainer {
+        margin: auto auto 10px;
+    }
 
     .checkLabelListOption {
         font-size: 10px;
     }
+
+    .textRightCenter {
+        text-align: center;
+    }
 }
 
 @media (max-width:768px) {
@@ -269,10 +418,24 @@
         grid-template-columns: repeat(1, minmax(0, 1fr));
     }
 
+    .btnStep4Tab {
+        width: 43%;
+    }
+}
+
+@media (max-height:768px) {
+    .infoPricesContainerDiv {
+        height: 100px;
+    }
 }
 
 @media (max-width:540px) {
-    .footerStep4Container .radioLabelListOption {
+    .footerStep4Container .radioBtnFooterContainer {
+        display: flex;
+        gap: 5px;
+    }
+
+    .footerStep4Container .radioBtnFooterContainer .radioLabelListOption {
         width: 100%;
     }
 }
\ No newline at end of file
diff --git a/ServiceHost/wwwroot/AssetsClient/pages/Register/js/_Partials/_Step4.js b/ServiceHost/wwwroot/AssetsClient/pages/Register/js/_Partials/_Step4.js
index f5757b07..35dd7b3e 100644
--- a/ServiceHost/wwwroot/AssetsClient/pages/Register/js/_Partials/_Step4.js
+++ b/ServiceHost/wwwroot/AssetsClient/pages/Register/js/_Partials/_Step4.js
@@ -8,9 +8,11 @@
 
 	$('input[name="radFinanceContract"]').on('change', function () {
         totalPaymentAndWorkshopList();
+        $("#btnDisableDisable").removeClass("disable");
+        $("#footerDisableDisable").removeClass("disable");
     });
 
-	$('input[name="radFinanceContract"]:checked').trigger('change');
+	//$('input[name="radFinanceContract"]:checked').trigger('change');
 });
 
 function autoScrollStep4() {
@@ -131,7 +133,7 @@ async function totalPaymentAndWorkshopList() {
             //console.log(response.data);
 
 			if (hasPriceStatic) {
-                $(`#sumOfWorkshopsPaymentPayment`).text(response.data.oneTimeWithoutTaxPaymentStr + " ریال");
+                $(`#sumOfWorkshopsPaymentPayment`).html(response.data.oneTimeWithoutTaxPaymentStr + " ریال");
                 $(`#totalPaymentStr`).text(response.data.oneTimeTotalPaymentStr + " ریال");
 
             } else {
@@ -155,12 +157,13 @@ async function totalPaymentAndWorkshopList() {
 
 			$('#priceStepContainerHtml').html('');
 			if (response.data.monthlyInstallments) {
-                response.data.monthlyInstallments?.forEach(function (item) {
+                response.data.monthlyInstallments?.forEach(function (item, index) {
                     var html = `
                   <div class="item">
-                    <div class="col-4 text-start">${item.installmentCounter}</div>
-                    <div class="col-4 text-start">${item.instalmentDate}</div>
-                    <div class="col-4 text-end">${item.installmentAmountStr} ریال</div>
+                    <div class="col-1 text-start ss03">${++index}</div>
+                    <div class="col-5 text-start">${item.installmentCounter}</div>
+                    <div class="col-3 textRightCenter ss03">${item.instalmentDate}</div>
+                    <div class="col-3 text-end">${item.installmentAmountStr} ریال</div>
                   </div>
                 `;
 					$('#priceStepContainerHtml').append(html);
@@ -194,6 +197,18 @@ async function totalPaymentAndWorkshopList() {
 //$(document).on('change', '.btnCheckContainer .checkOption', createOrUpdateCommand);
 
 async function checkInputsStep4() {
+
+    //checkRequirementData();
+    if (!$('input[name="radFinanceContract"]:checked').length) {
+        validateField('.radioLabelStartEndOption', 'لطفاً شروع قرارداد را مشخص نمایید', 3500);
+        return false;
+    }
+
+    //if (!$("#priceStatic").hasClass("active") || !$("#priceStep").hasClass("active")) {
+    //    validateField('#btnDisableDisable', 'لطفاً روش پرداخت را مشخص نمایید', 3500);
+    //    return false;
+    //}
+
     let btnDisable = $('.stepNext').addClass('disable');
 	let loading = $('.stepNext .loading').show();
 
@@ -274,7 +289,8 @@ async function step4Action() {
 }
 
 $('#priceStatic').on('click', function () {
-	$('#priceStepContainer').hide();
+	//$('#priceStepContainer').hide();
+	$('#priceStepContainer').css('visibility', 'hidden');
 	$('#priceStep').removeClass('active');
 	$(this).addClass('active');
 	
@@ -282,7 +298,8 @@ $('#priceStatic').on('click', function () {
 });
 
 $('#priceStep').on('click', function () {
-	$('#priceStepContainer').fadeIn();
+	//$('#priceStepContainer').fadeIn();
+	$('#priceStepContainer').css('visibility', 'visible');
 	$('#priceStatic').removeClass('active');
 	$(this).addClass('active');