<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* employer
*/
.sign-in-form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
border-radius: 8px;
background-color: #ffffff; /* Optional: Add background color */
}

.modal-header, .modal-footer {
padding: 20px;
}

h4 {
font-size: 24px;
}

.modal-body {
padding: 0 20px;
}

.center-text {
text-align: center;
}

.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
}

.form-column {
display: flex;
flex-direction: column;
}

.input-field {
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}

.input-field i {
text-align: center;
line-height: 55px;
 color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}

.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 15px;
color: #333;
}

.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}

.form-group select, .form-group input[type="file"] {

width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f0f0f0;
}

.form-group select:focus {
outline: none;
border-color: #007bff;
}

.form-group small {
color: #666;
font-size: 12.5px;
}

.upload {
text-align: center;
align-items: center;
justify-content: center;
margin-bottom: 15px;
position: relative;
display: flex;

.upload img {
 width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #ccc;
object-fit: cover;
}

.upload .rightRound, .upload .leftRound {

position: absolute;
bottom: 0;
right: 0;
background: #00B4FF;
width: 32px;
height: 32px;
line-height: 33px;
text-align: center;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}

.upload .leftRound {
right: auto;
left: 0;
}

.upload .fa {
color: white;
}

.upload input {
position: absolute;
transform: scale(2);
opacity: 0;
}

.modal-footer .btn {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}

.modal-footer .btn:hover {
background-color: green;
}

@media (max-width: 768px) {

.form-container {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}

.form-column {
width: 100%;
 }

.input-field {
max-width: 100%;
height: 50px;
border-radius: 25px;
margin: 8px 0;
}

.input-field i {
font-size: 1rem;
line-height: 50px;
}

.input-field input {
font-size: 14px;
}

.modal-title {
font-size: 20px;
margin-bottom: 15px;
}

.upload img {
width: 80px;
height: 80px;
}

.form-group label {
font-size: 14px;
}

.form-group select,
.form-group input[type="file"] {
padding: 8px;
font-size: 14px;
}

.modal-footer .btn {
font-size: 16px;
padding: 12px;
border-radius: 25px;
}

.form-group small {
display: block; /* Stack the element vertically */
text-align: center; /* Align text to the left for mobile */
margin-top: 0.25rem; /* Adjust margin for mobile */
font-size: 10px; /* Slightly reduce font size for mobile */
}
}

@media (max-width: 480px) {

.input-field {
height: 45px;
border-radius: 22px;
}

.input-field i {
 font-size: 0.9rem;
line-height: 45px;
}

.input-field input {
font-size: 13px;
}

.modal-title {
font-size: 18px;
}

.upload img {
width: 70px;
height: 70px;
}

.form-group label {
font-size: 13px;
}

.form-group select,
.form-group input[type="file"] {
padding: 7px;
font-size: 13px;
}

.form-group small {
font-size: 11px;
}

.modal-footer .btn {
font-size: 14px;
margin-bottom: 10px;
}
}
</style>

<!-- login Form -->

<form name="frm" action="app/auth.php" method="POST" autocomplete="off"

class="sign-up-form">
<div class="col-sm-6 col-sm-offset-3">
<?php include 'constants/check_reply.php'; ?>
<h2 class="title" style="text-align: center;">LOGIN</h2>
<div class="input-fields">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email address" name="email"
required />
</div>
<div class="input-fields" style="position: relative;">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password"
name="password" required id="signin-password" />
<span class="fas fa-eye toggle-password" id="signin-toggle-password"
style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
cursor: pointer;"></span>
</div>
<input type="submit" class="btn btn-primary btn-center" value="Login" />
 </div>
</form>

<!-- Register form -->

<form name="frm" action="app/create-account.php" method="POST" autocomplete="off"
enctype="multipart/form-data" class="sign-in-form">
<div class="login-box-wrapper">
<div class="modal-header"></div>
<div class="modal-body">
<?php include 'constants/check_reply.php'; ?>
<h4 class="modal-title center-text">REGISTER AS EMPLOYER</h4>
<div class="col-sm-12 col-md-12">
<div class="upload">
<img src="./images/blank.png" id="image">
<div class="rightRound" id="upload">
<input type="file" name="avatar" id="fileImg"
accept=".jpg, .jpeg, .png" required>
<i class="fa fa-camera"></i>
</div>
<div class="leftRound" id="cancel" style="display:
none;">
<i class="fa fa-times"></i>
</div>
<div class="rightRound" id="confirm" style="display:
none;">
<input type="submit">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="form-container">
<div class="form-column">
<div class="input-field">
<i class="fas fa-building"></i>
<input type="text" class="form-control" placeholder="Enter
your company name" name="company" required />
</div>

<div class="input-field">
<i class="fas fa-industry"></i>
<input type="text" class="form-control" placeholder="Eg:
Booking/Travel, etc." name="type" required />
</div>

<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" placeholder="Enter
your email address" name="email" required />
</div>
</div>

<div class="form-column">
<div class="input-field" style="position: relative;">
<i class="fas fa-lock"></i>
<input type="password" class="form-control"
placeholder="Min 8 and Max 20 characters" name="password" required id="password" />
<span class="fas fa-eye toggle-password"
id="togglePassword" onclick="togglePasswordVisibility()" style="position: absolute;
right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"></span>
</div>

<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" class="form-control"
placeholder="Re-type password again" name="confirmpassword" required />
</div>

<div class="form-group">
<label for="business_permit">
<i class="fas fa-id-card"></i> Upload Your Business
Permit
</label>
<input type="file" class="form-control" placeholder="Upload
your business permit" name="valid_id" id="business_permit" required />
<small class="form-text text-muted hide-on-mobile"
style="font-size: 12.5px;">
Please upload a valid business permit document.
Accepted formats: PDF, JPG, PNG.
</small>
</div>
</div>
<input type="hidden" name="acctype" value="102">
</div>
<div class="modal-footer text-center">
<button onclick="return val();" type="submit" name="reg_mode"
class="btn btn-primary btn-center">Register</button>
</div>
</div>
</div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
const togglePasswordVisibility = (toggleId, passwordId) => {
const togglePassword = document.querySelector(toggleId);
const passwordField = document.querySelector(passwordId);

togglePassword.addEventListener('click', function () {
const type = passwordField.getAttribute('type') === 'password' ? 'text' :
'password';
passwordField.setAttribute('type', type);

// Toggle the icon between eye and eye-slash

this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
};

// Set up toggle for Sign-In form

togglePasswordVisibility('#signin-toggle-password', '#signin-password');

// Set up toggle for Sign-Up form

togglePasswordVisibility('#signup-toggle-password', '#signup-password');
});
</script>