<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/js/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
.error {
  color: red;
  font-weight: bold;
  text-decoration: none;
}
select.form-control, select.typeahead, select.tt-query, select.tt-hint, .select2-container--default .select2-selection--single select.select2-search__field, .select2-container--default select.select2-selection--single {
  padding: 1rem 0.75rem;
  border: 0;
  outline: 1px solid #f3f3f3;
  color: #312828;
  appearance: none;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
  background-repeat: no-repeat;
  background-position: 99% center;
}
<style>
/* Custom floating label for select */
.form-floating > select.form-control:focus ~ label,
.form-floating > select.form-control:not(:placeholder-shown) ~ label {
  opacity: 1;
  transform: scale(.85) translateY(-1.5rem) translateX(.15rem);
}
</style>
</style>
<div class="content">
	<div class="formcard">
			<form class="company_form" id="company_form" method="post" action="<?php echo base_url();?>company/updateCompany">
			<input type="hidden" name="id" value="<?php echo $company_data[0]['id'];?>">
			
		<div class="form-group">
			<label class="form-label" for="company_name">Company Name <span class="text-danger">*</span></label>
			<input type="text" class="form-control" name="company_name" id="company_name" value="<?php echo $company_data[0]['company_name'];?>" placeholder="Enter company name" required>
		</div>

		<div class="form-group">
			<label class="form-label" for="short_name">Company Short Name</label>
			<input type="text" class="form-control" name="short_name" id="short_name" value="<?php echo $company_data[0]['short_name'];?>" placeholder="Enter short name">
		</div>
			<?php $fiscal_year = FINANCIAL_YEAR;?>
			<div class="form-floating mb-3">
			  <select name="financial_year" class="form-control" id="financialYear" required>
				<?php foreach($fiscal_year as $year) { ?>
				<?php if($company_data[0]['fiscal_year']==$year) { $selected = 'selected'; } else { $selected='';}?>
				<option value="<?php echo $year;?>" <?php echo $selected;?>><?php echo $year;?></option>
				<?php } ?>
				</select>
			  </select>
			  <label for="financialYear">Financial Year</label>
			</div>
		<div class="form-group">
			<label class="form-label" for="company_person">Contact Person</label>
			<input type="text" class="form-control" name="company_person" id="company_person" value="<?php echo $company_data[0]['contact_person'];?>" placeholder="Enter contact person name">
		</div>
		<div class="form-group">
			<label class="form-label" for="company_email">Contact Email</label>
			<input type="email" class="form-control" name="company_email" id="company_email" value="<?php echo $company_data[0]['contact_email'];?>" placeholder="Enter contact email">
		</div>
		<div class="form-group">
			<label class="form-label" for="company_start_date">Co. Start Date</label>
			<input type="text" class="form-control" name="company_start_date" id="company_start_date" value="<?php echo $company_data[0]['co_start_date'];?>" placeholder="Select start date">
		</div>
		<div class="form-group">
			<label class="form-label" for="phoneNumber">Phone Number</label>
			<input type="text" class="form-control" id="phoneNumber" name="phone_number" value="<?php echo $company_data[0]['phone'];?>" placeholder="Enter phone number">
		</div>
		<div class="form-group">
			<label class="form-label" for="address">Address</label>
			<textarea class="form-control" name="address" id="address" rows="2" style="min-height: 80px;" placeholder="Enter company address"><?php echo isset($company_data[0]['address']) ? $company_data[0]['address'] : ''; ?></textarea>
		</div>
			<?php $current_country = isset($company_data[0]['country']) ? $company_data[0]['country'] : ''; ?>
			<div class="form-floating mb-3">
			  <select name="country" class="form-control" id="country">
				<option value="" <?php echo empty($current_country) ? 'selected' : ''; ?>>-- Select Country --</option>
				<option value="India" <?php echo $current_country == 'India' ? 'selected' : ''; ?>>India</option>
				<option value="USA" <?php echo $current_country == 'USA' ? 'selected' : ''; ?>>USA</option>
				<option value="UK" <?php echo $current_country == 'UK' ? 'selected' : ''; ?>>UK</option>
				<option value="UAE" <?php echo $current_country == 'UAE' ? 'selected' : ''; ?>>UAE</option>
				<option value="Singapore" <?php echo $current_country == 'Singapore' ? 'selected' : ''; ?>>Singapore</option>
				<option value="Australia" <?php echo $current_country == 'Australia' ? 'selected' : ''; ?>>Australia</option>
				<option value="Canada" <?php echo $current_country == 'Canada' ? 'selected' : ''; ?>>Canada</option>
				<option value="Germany" <?php echo $current_country == 'Germany' ? 'selected' : ''; ?>>Germany</option>
				<option value="France" <?php echo $current_country == 'France' ? 'selected' : ''; ?>>France</option>
				<option value="Other" <?php echo $current_country == 'Other' ? 'selected' : ''; ?>>Other</option>
			  </select>
			  <label for="country">Country</label>
			</div>
			<div class="form-floating mb-3">
				<select name="country" id="country" class="form-control select2" required>
					<option value=""></option>

					<optgroup label="Africa">
					<option value="DZ">Algeria</option>
					<option value="AO">Angola</option>
					<option value="BJ">Benin</option>
					<option value="BW">Botswana</option>
					<option value="BF">Burkina Faso</option>
					<option value="BI">Burundi</option>
					<option value="CM">Cameroon</option>
					<option value="CV">Cape Verde</option>
					<option value="CF">Central African Republic</option>
					<option value="TD">Chad</option>
					<option value="KM">Comoros</option>
					<option value="CG">Congo</option>
					<option value="CD">DR Congo</option>
					<option value="DJ">Djibouti</option>
					<option value="EG">Egypt</option>
					<option value="ET">Ethiopia</option>
					<option value="GA">Gabon</option>
					<option value="GM">Gambia</option>
					<option value="GH">Ghana</option>
					<option value="KE">Kenya</option>
					<option value="LS">Lesotho</option>
					<option value="LR">Liberia</option>
					<option value="LY">Libya</option>
					<option value="MW">Malawi</option>
					<option value="ML">Mali</option>
					<option value="MU">Mauritius</option>
					<option value="MA">Morocco</option>
					<option value="MZ">Mozambique</option>
					<option value="NA">Namibia</option>
					<option value="NE">Niger</option>
					<option value="NG">Nigeria</option>
					<option value="RW">Rwanda</option>
					<option value="SN">Senegal</option>
					<option value="SC">Seychelles</option>
					<option value="SL">Sierra Leone</option>
					<option value="SO">Somalia</option>
					<option value="ZA">South Africa</option>
					<option value="SS">South Sudan</option>
					<option value="SD">Sudan</option>
					<option value="TZ">Tanzania</option>
					<option value="TG">Togo</option>
					<option value="TN">Tunisia</option>
					<option value="UG">Uganda</option>
					<option value="ZM">Zambia</option>
					<option value="ZW">Zimbabwe</option>
					</optgroup>

					<optgroup label="Asia">
					<option value="IN">India</option>
					<option value="AE">United Arab Emirates</option>
					<option value="SA">Saudi Arabia</option>
					<option value="SG">Singapore</option>
					<option value="CN">China</option>
					<option value="JP">Japan</option>
					</optgroup>

					<optgroup label="Europe">
					<option value="GB">United Kingdom</option>
					<option value="DE">Germany</option>
					<option value="FR">France</option>
					<option value="IT">Italy</option>
					</optgroup>

					<optgroup label="Americas">
					<option value="US">United States</option>
					<option value="CA">Canada</option>
					<option value="BR">Brazil</option>
					</optgroup>

					<optgroup label="Oceania">
					<option value="AU">Australia</option>
					<option value="NZ">New Zealand</option>
					</optgroup>
				</select>
				<label for="country">Country</label>
			</div>

			<div class="col-md-12">
				<button class="btn btn-primary">Edit</button>
				<a class="btn btn-danger" href="<?php echo site_url();?>company">Cancel</a>
			</div>
		</form>
	</div>
</div>	
<script>
$(document).ready(function () {
	// Initialize the validation
	var base_url = "<?php echo base_url(); ?>";
	$('#company_form').validate({
		errorClass: 'is-invalid',
		validClass: 'is-valid',
		errorElement: 'div',
		errorPlacement: function(error, element) {
			error.addClass('invalid-feedback');
			if (element.hasClass('select2-hidden-accessible')) {
				error.insertAfter(element.next('.select2-container'));
			} else if (element.closest('.form-group').length) {
				error.insertAfter(element);
			} else {
				error.insertAfter(element);
			}
		},
		highlight: function(element) {
			$(element).addClass('is-invalid').removeClass('is-valid');
		},
		unhighlight: function(element) {
			$(element).removeClass('is-invalid').addClass('is-valid');
		},
		rules: {
			company_name: {
				required: true,
				remote: {
                    url: base_url + "company/checkCompanyName",
                    type: "post",
                    data: {
                        company_name: function () {
                            return $("#company_name").val();
                        },
                        id: function () {
                            return $("#company_id").val();
                        }
                    }
                }
			},
			short_name: {
				required: true,
			},
			company_email: {
				email: true
			}
		},
		messages: {
			company_name: {
				required: "Please enter Company Name",
				remote: "This company name already exists"
			},
			short_name: {
				required: "Please enter Short Name",
			},
			company_email: {
				email: "Please enter a valid email address"
			}
		},
		submitHandler: function (form) {
			form.submit();
		},
	});
});
</script>