<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/*employee*/
.sign-in-form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;

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

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

h4 {
font-size: 24px;
}

.modal-title{
font: 100px;
}

.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;

color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}

.modal-footer .btn:hover {
background-color: #0056b3;
}

@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;
}
}

@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;
padding: 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-field">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email address" name="email"
required />
</div>
<div class="input-field" 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 APPLICANT</h4>
<div class="upload">
<img src="./images/default.jpg" 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 class="form-container">
<div class="form-column">
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Enter your first name"
name="fname" required />
</div>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Enter your last name"
name="lname" required />
</div>

<div class="input-field" style="position: relative;">

<i class="fas fa-lock"></i>
<input type="password" placeholder="Min 8 and Max 20
characters" name="password" required id="signup-password" />
<span class="fas fa-eye toggle-password" id="signup-toggle-
password" 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" placeholder="Re-type password again"
name="confirmpassword" required />
</div>
</div>

<div class="form-column">

<div class="input-field">
<i class="fas fa-envelope"></i>
 <input type="email" placeholder="Enter your email address"
name="email" required />
</div>
<div class="form-group">
<label for="gender"><i class="fas fa-genderless"></i>
Gender</label>
<select name="gender" id="gender" required>
<option value="" disabled selected>Select your
gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>

<div class="form-group">
<label for="valid_id"><i class="fas fa-id-card"></i>
Upload/Enter your valid ID</label>
<input type="file" id="valid_id" name="valid_id"
required />
<small class="form-text text-muted" style="font-size:
12.5px;">
Please upload a valid government-issued ID (e.g.,
passport, driver's license, or national ID).
</small>

</div>

<input type="hidden" name="acctype" value="101">

</div>
</div>
</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>

</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>