<form method="post" id="form3Aedit" class="needs-validation" novalidate>
<input type="hidden" name="id3a" id="id3a">
<div class="row mt-3">
<div class="col-lg-4">
<div class="mb-1 position-relative" id="3adateInputpickeredit">
<label class="form-label">Date</label>
<input type="text" data-date-autoclose="true" class="form-control" id="3adateedit"
name="3adateedit" data-provide="datepicker" data-date-format="MM dd, yyyy"
data-date-container="#3adateInputpickeredit" required>
</div>
</div>
<div class="col-lg-4">
<div class="mb-1">
<label for="3apagenumedit" class="form-label">Page Number</label>
<input type="number" name="3apagenumedit" id="3apagenumedit" class="form-control">
</div>
</div>
<div class="col-lg-4">
<div class="mb-1">
<label for="3abooknumedit" class="form-label">Book Number</label>
<input type="number" name="3abooknumedit" id="3abooknumedit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="3agroomnameedit" class="form-label">Groom Name</label>
<input type="text" name="3agroomnameedit" id="3agroomnameedit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="3abridenameedit" class="form-label">Bride Name</label>
<input type="text" name="3abridenameedit" id="3abridenameedit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="3agroomageedit" class="form-label">Groom Age</label>
<input type="text" name="3agroomageedit" id="3agroomageedit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="3abrideageedit" class="form-label">Bride Age</label>
<input type="text" name="3abrideageedit" id="3abrideageedit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="3agroomcitizenedit" class="form-label">Groom Citizenship</label>
<input type="text" name="3agroomcitizenedit" id="3agroomcitizenedit"
class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Bride Citizenship</label>
<input type="text" name="3abridecitizenedit" id="3abridecitizenedit"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Groom Civil Status</label>
<input type="text" name="3agroomciviledit" id="3agroomciviledit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Bride Civil Status</label>
<input type="text" name="3abrideciviledit" id="3abrideciviledit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Groom's Mother</label>
<input type="text" name="3agroommotheredit" id="3agroommotheredit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Bride's Mother</label>
<input type="text" name="3abridemotheredit" id="3abridemotheredit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Groom's Father</label>
<input type="text" name="3agroomfatheredit" id="3agroomfatheredit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Bride's Father</label>
<input type="text" name="3abridefatheredit" id="3abridefatheredit" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Registry Number</label>
<input type="text" name="3aregistrynumedit" id="3aregistrynumedit" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-1 position-relative" id="3adateInputpickerregedit">
<label class="form-label">Date of Registration</label>
<input type="text" data-date-autoclose="true" class="form-control" id="3adateregedit"
name="3adateregedit" data-provide="datepicker" data-date-format="MM dd, yyyy"
data-date-container="#3adateInputpickerregedit" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1 position-relative" id="3adateInputpickermaredit">
<label class="form-label">Date of Marriage</label>
<input type="text" data-date-autoclose="true" class="form-control"
id="3adatemarriageedit" name="3adatemarriageedit" data-provide="datepicker"
data-date-format="MM dd, yyyy" data-date-container="#3adateInputpickermaredit"
required>
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="simpleinput" class="form-label">Place of Marriage</label>
<input type="text" name="3aplacemarriageedit" id="3aplacemarriageedit"
class="form-control">
</div>
</div>
</div>
<!-- new -->
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="mb-1">
<label for="3aissued" class="form-label">Issued To</label>
<input type="text" id="3aissuededit" name="3aissuededit" onchange="handleChange()"
class="form-control capslockview" required>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<div class="mb-3">
<label for="3aremarks" class="form-label">Remarks</label>
<textarea class="form-control" id="3aremarksedit" name="3aremarksedit"
rows="3"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="mb-1">
<label for="amountPaidInput3a" class="form-label">Amount Paid</label>
<input type="text" id="amountPaidInput3aedit" name="amountPaidInput3aedit"
class="form-control" required>
</div>
</div>
<div class="col-lg-4">
<div class="mb-1">
<label for="3aorNumber" class="form-label">O.R. Number</label>
<input type="text" id="3aorNumberedit" name="3aorNumberedit" class="form-control"
required>
</div>
</div>
<div class="col-lg-4">
<div class="mb-1 position-relative" id="3adatePaidInputpickeredit">
<label class="form-label">Date Paid</label>
<input type="text" data-date-autoclose="true" class="form-control" id="3adatePaidedit"
name="3adatePaidedit" data-provide="datepicker" data-date-format="MM dd, yyyy"
data-date-container="#3adatePaidInputpickeredit" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="3averify" class="form-label">Verified By</label>
<input type="text" id="3averifyedit" name="3averifyedit"
oninput="this.value = this.value.toUpperCase()" class="form-control" required>
</div>
</div>
<div class="col-lg-6">
<div class="mb-1">
<label for="3amcr" class="form-label">Municipal Civil Registrar</label>
<input type="text" id="3amcredit" name="3amcredit"
oninput="this.value = this.value.toUpperCase()" value="ISMAEL D. MALICDEM, JR."
class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-1">
<label for="3adesignation" class="form-label">Designation</label>
<div class="dropdown">
<select id="3adesignationedit" name="3adesignationedit" class="form-select"
required>
<option value="" selected disabled></option>
<option value="Administrative Aide I">Administrative Aide I</option>
<option value="Administrative Aide II">Administrative Aide II</option>
<option value="Administrative Aide III">Administrative Aide III</option>
<option value="Administrative Assistant I">Administrative Assistant I</option>
<option value="Others">Others</option>
</select>
<div class="row justify-content-center">
<div class="col-md-10">
<input type="text" class="form-control" id="3acustomInputedit"
name="3acustomInputedit" placeholder="Position"
style="display: none; margin-top: 5px" />
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="mt-3">
<p id="filefolder3a"
style="font-family: monospace; text-align: center; font-size: 15px"></p>
</div>
</div>
</div>
<div class="row justify-content-end" style="margin: 30px;">
<button class="buttonx" type="button" data-bs-dismiss="modal">
<i class="mdi mdi-cancel"></i>
</button>
<button class="button" type="submit">
Update →
</button>
<style>
.buttonx {
--font-color: #323232;
--bg-color: #fff;
--main-color: #323232;
width: 50px;
height: 40px;
border-radius: 5px;
border: 2px solid var(--main-color);
background-color: var(--bg-color);
box-shadow: 4px 4px var(--main-color);
font-size: 17px;
margin-right: 10px;
font-weight: 600;
color: var(--font-color);
cursor: pointer;
}
.buttonx:focus {
--bg-color: #fa5c7c;
background-color: var(--bg-color);
color: white;
}
.buttonx:hover {
--bg-color: #fa5c7c;
background-color: var(--bg-color);
color: white;
}
.buttonx:active {
box-shadow: 0px 0px var(--main-color);
transform: translate(3px, 3px);
}
</style>
<style>
.button {
--font-color: #323232;
--bg-color: #fff;
--main-color: #323232;
width: 120px;
height: 40px;
border-radius: 5px;
border: 2px solid var(--main-color);
background-color: var(--bg-color);
box-shadow: 4px 4px var(--main-color);
font-size: 17px;
font-weight: 600;
color: var(--font-color);
cursor: pointer;
}
.button:focus {
--bg-color: #0acf97;
background-color: var(--bg-color);
color: white;
}
.button:active {
box-shadow: 0px 0px var(--main-color);
transform: translate(3px, 3px);
}
</style>
</div>
</form>