Notes

////////////Ded CSS

body {
font-family: 'Titillium Web',Helvetica,Arial,Lucida,sans-serif;
list-style: none;
}

.add-deducation-outer, .edit-deducation-outer {
background-color: #EAEAEA;
padding: 15px;
}

.heading-section {
display: flex;
align-items: center;
}

.heading-section h3 {
margin: 0px;
margin-right: 10px;
}

.heading-section span i {
color: #1F49A2;
}

.padilla-outer {
background-color: #F7F5F3;
padding: 10px;
display: flex;
align-items: center;
justify-content:space-between;
border-radius: 10px;
margin-top: 15px;
}

.padilla-outer h3 {
margin: 0px;
}

.padilla-outer label {
color: #BEBABE;
font-weight: 500;
}

.job-title {
margin-left: 50px;
}

.deducation-code {
margin-top: 15px;
}

.deducation-code select {
padding: 14px 10px;
width: 100%;
/*max-width: 250px;*/
border-radius: 6px;
border: 1.5px solid #8F8B8D;
margin-top: 5px;
}

.deducation-code input {
padding: 12px 20px;
width: 100%;
/*max-width: 180px;*/
border-radius: 6px;
border: 1.5px solid #8F8B8D;
margin-top: 5px;
}

/*.goal-deducation select {
max-width: 180px;
}*/

.deducation-code label {
color: #B2AEA8;
}

.deducation-code span i {
color: #1F49A2;
}

.deducation-goal {
background-color: #DEDEDE;
padding: 10px;
margin-top: 15px;
}

.deducation-goal h4 {
margin: 0px;
}

.result-after {
background-color: #fff;
margin-top: 15px;
padding: 8px;
}

.result-after label {
color: #B2AEA8;
}

.add-deducation-outer span {
color: red;
}

.edit-deducation-outer span {
color: red;
}

.deducation-goal span i {
color: #504F4E;
}

.deducation-goal span:nth-child(2) {
margin-left: 15px;
}

.add-deducation {
display: flex;
}

.add-deducation p:nth-child(1) span i {
color: #004B68;
}

.add-deducation p:nth-child(2) {
color: #1A3388;
}

.add-deducation p:nth-child(2) span i {
color: #1A3388;
}
.currency-wrap {
position: relative;
}

.currency-code {
position: absolute;
left: 8px;
top: 18px;
}
.text-currency {
padding: 10px 20px;
border: solid 1px #ccc;
border-radius: 5px;
}

.check-sec {
width: 0px !important;
padding: 7px !important;
}
.text-currency-accured {
padding: 16px 20px;
border: solid 1px #ccc;
border-radius: 5px;
}
//////////////
///Add Ded
@model SMXServicesConsulting.DataModel.ViewModel.DeductionsViewModel;

@{
ViewData["Title"] = "SMX Services Consulting - Add Deduction";
}
@*<link rel="stylesheet" href="/code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">*@
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Deduction</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "formAddDeduction" }))
{
<div class="modal-body">
<div class="add-deducation-outer">

<div class="heading-section">
<h3>
Add Deduction
</h3>
<span>
<i class="fa-solid fa-circle-question"></i>
</span>
</div>
<div class="padilla-outer">
<div>
@Html.HiddenFor(model => model.DeductionsId)
<span id="spnheadingId" hidden></span>
@Html.HiddenFor(model => model.EmpStartId)
<span id="spnheadingEmpStartId" hidden></span>
@Html.HiddenFor(model => model.EmpEndDate)
<span id="spnheadingEmpEndDate" hidden></span>
@Html.HiddenFor(model => model.EmpRecId)
<span id="spnheadingEmpRecId" hidden></span>
<h4><span id="spnheadingName" style="color:black;"></span></h4>
</div>
<div class="job-title">
<label for="">Job Title</label>
<h6 id="spnheadingjobTitle"></h6>
</div>
<div class="job-title">
<span>*</span>
<label for="">Deduction Start Date</label><br>
@Html.HiddenFor(model => model.DeductionStartDate)
@*<input type="text" asp-for="DeductionStartDate" id="deductionStartDate" value="@Model.DeductionStartDate" class="form-control twice-week date" />*@
<input type="date" class="form-control" id="deductionStartDate" placeholder="mm-dd-yyyy">
@*@Html.TextBoxFor(model => model.DeductionStartDate, new { @class="form-control twice-week date", @id="deductionStartDate", @type="text", placeholder="mm-dd-yyyy" })*@
<span id="deductionStartDateError"></span>
</div>
<div class="job-title">
@*<label for="status">Status</label>
<h6 id="deductionStatus">Active</h6>*@
@Html.HiddenFor(model => model.IsActive)
<div for="status" style="color: #BEBABE;font-weight: 500;">Status</div>
<label class="switch">
<input type="checkbox" value="" id="deductionStatus">
<span class="slider round" style="height: 24px;width: 48px"></span>
</label>
</div>
</div>
<div class="deducation-code">
<div class="row">
<div class="col-lg-4">
<div>
<div>
<label for="">Deduction Code</label>
<span>*</span>
</div>
@Html.DropDownListFor(model => model.DeductionCode, new SelectList(Model.DeductionCodeList?.Items, "Value", "Text"), new { @class = "form-select", @required = "true" })
</div>
</div>
<div class="col-lg-4 ">
<div>
<div>
<label for="">Deduction Amount</label>
<span>*</span>
</div>
<div class="currency-wrap">
<span class="currency-code" style="color :black;">$</span>
<input class="text-currency clsDeduction" type="text" id="deductionAmount" maxlength="5" name="deductionAmount" value="@Model.DeductionAmount" placeholder="0.00" disabled/>
@*@Html.TextBoxFor(model => model.DeductionAmount, new { @class="text-currency clsDeduction", @id="deductionAmount", @type="number", placeholder="0.00" })*@
<span id="deductionAmountError"></span>
</div>
</div>
</div>
<div class="col-lg-2 ">
<div>
<div>
<label for="deductionNoOfInstallment">No. of Installments?</label>
<span>*</span>
</div>
<select name="" id="deductionNoOfInstallment" style="opacity: 0.35" disabled>
<option value="0" hidden>-Please choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
@Html.HiddenFor(model => model.DeductionNoOfInstallments)
</div>
</div>
<div class="col-lg-2 ">
<div>
<div>
<label for="deductionInstallment">Installments</label>
<span>*</span>
</div>
<select name="" id="deductionInstallment" style="opacity: 0.35" disabled>
<option value="0" hidden>-Please choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
@Html.HiddenFor(model => model.DeductionInstallments)
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mt-3">
<label for="comments">Comments</label>
<div class="form-floating">
@Html.HiddenFor(model => model.Comments)
<textarea class="form-control" placeholder="Leave a comment here" id="deductionComments"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
</div>
<div class="col-lg-4 mt-3">
<div>
<label for="category" id="category">Category</label>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input check-sec" type="checkbox" value="Bill-Client" id="deductionBillClient">
@Html.HiddenFor(model => model.FactorClient)
<label class="form-check-label" for="deductionBillClient">
Bill Client
</label>
</div>
</div>
<div class="col-md-8">
<div class="form-check">
<input class="form-check-input check-sec" type="checkbox" value="Fix-Deductions" id="deductionFix">
@Html.HiddenFor(model => model.FixDeductions)
<label class="form-check-label" for="deductionFix">
Fix
</label>
</div>
</div>
</div>
</div>


<div class="form-radio">
@Html.HiddenFor(model => model.Category)
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<input class="form-check-input check-sec" type="radio" name="deductionCategory" id="deductionCategory1" value="1st-Payroll">
<label for="category">1st Payroll</label>
</div>
<div class="col-md-5">
<input class="form-check-input check-sec" type="radio" name="deductionCategory" id="deductionCategory2" value="2nd-Payroll">
<label for="category">2nd Payroll</label>
</div>
<div class="col-md-3" style="margin-left: -30px">
<input class="form-check-input check-sec" type="radio" name="deductionCategory" id="deductionCategory3" value="Both">
<label for="category">Both</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="deducation-goal">
<h4>Deduction Goal</h4>
</div>
<div class="deducation-code goal-deducation">
<div class="row">
<div class="col-lg-4">
<div>
<div>
<label for="deductionGoal">Deduction Goal #</label>
<span>*</span>
</div>
@*@Html.DropDownListFor(model => model.DeductionGoalNuber, new SelectList(Model.DeductionCodeIdList?.Items, "Value", "Text"), new { @class = "form-select", @required = "true", @disabled = true })*@
@*@Html.HiddenFor(model => model.DeductionGoalNuber)*@
@*<select name="" id="DeductionGoalNuber" disabled>
<option value="0" hidden>-Please choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>*@
<div class="currency-wrap">
<input class="text-currency" type="text" id="DeductionGoalNuber" maxlength="5" name="DeductionGoalNuber" value="@Model.DeductionGoalNuber" placeholder="0" disabled />
</div>
</div>
</div>
<div class="col-lg-4">

<div>
<label for="accured">Accrued</label>
<div class="currency-wrap">
<span class="currency-code" style="color :black;">$</span>
@Html.TextBoxFor(model => model.Accrued, new { @class="text-currency", @id="deductionAccured", @type="number", placeholder="0.00", @disabled = true })
</div>
</div>


</div>
<div class="col-lg-4 ">
<div>
<label for="balance">Balance</label>
<div class="currency-wrap">
<span class="currency-code" style="color :black;">$</span>
@Html.TextBoxFor(model => model.Balance, new { @class="text-currency", @id="deductionBalance", @type="number", placeholder="0.00", @disabled = true})
</div>
@*<input type="text" placeholder="0.00" id="">*@
</div>
</div>
<div class="col-lg-4 mt-3">
<div>
<div>
<label for="deductionGoalLimits">Deduction Goal Limits</label>
<span>*</span>
<span>
<i class="fa-solid fa-circle-question"></i>
</span>
<div class="currency-wrap">
<span class="currency-code" style="color :black;">$</span>
<input class="text-currency clsDeduction" type="text" id="deductionGoalLimits" maxlength="5" name="deductionGoalLimits" value="@Model.DeductionGoalLimit" placeholder="0.00" />
@*@Html.TextBoxFor(model => model.DeductionGoalLimit, new { @class="text-currency clsDeduction", @id="deductionGoalLimits", @maxlength="4", @type="number", placeholder="0.00" })*@
<span id="deductionGoalLimitError"></span>
@*@Html.ValidationMessageFor(model => model.DeductionGoalLimit, "", new { @class = "text-danger" })*@
</div>
</div>
@*<input type="number" placeholder="0.00" id="deductionGoalLimits">*@
</div>
</div>
<div class="col-lg-4 mt-3 ">
<div>
<div>
<label for="">Additional Amount Already Taken</label>
<span>
<i class="fa-solid fa-circle-question"></i>
</span>
</div>
<div class="currency-wrap">
<span class="currency-code" style="color :black;">$</span>
<input class="text-currency" type="text" id="deductionAdditionalAmountAlreadyTaken" maxlength="5" name="deductionAdditionalAmountAlreadyTaken" value="@Model.AdditionalAmountAlreadyTaken" placeholder="0.00" />
<span id="deductionAdditionalAmountAlreadyTakenError"></span>
@*@Html.TextBoxFor(model => model.AdditionalAmountAlreadyTaken, new { @class="text-currency", @id="deductionAdditionalAmountAlreadyTaken", @type="number", placeholder="0.00" })*@
</div>
@*<input type="number" placeholder="0.00" id="additionalAmountAlreadyTaken">*@
</div>
</div>
</div>
</div>
<div class="result-after">
<h4>Result after these changes are applied: </h4>
<div class="row">
<div class="col-lg-4 ">
<div>
@Html.HiddenFor(model => model.NewGoalLimit)
<label for="">New Goal Limit</label>
<h6>$ <span id="newDeductionGoalLimit" style="color:black;"></span></h6>
</div>
</div>
<div class="col-lg-4 d-flex ">
<div>
<label for="" id="">New Accrued</label>
@Html.HiddenFor(model => model.NewAccruedAmount)
<h6>$ <span id="newDeductionAccrued" style="color:black;"></span></h6>
</div>
</div>
<div class="col-lg-4 d-flex ">
<div>
@Html.HiddenFor(model => model.NewBalance)
<label for="" id="">New Balance</label>
<h6>$ <span id="newDeductionBalance" style="color:black;"></span></h6>
<span id="deductionNewBalanceError"></span>
</div>
</div>
</div>
</div>
</div>
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="IdBtnAddDeduction">Save Changes</button>
</div>
</div>
</div>