<?php
/* Template Name: Login */
/**
 * The template for displaying Pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Kofejob
 */
?>
<?php get_header(); ?>
<?php
if ( !is_user_logged_in() ) {
	$img_id = '';
  global $kofejob_theme_options;
  ?>
  <div class="main_content">
<div class="content">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12 mx-auto">
        <div class="account-content">
          <div class="align-items-center justify-content-center">
            <?php
            if ( isset( $kofejob_theme_options[ 'login_logo_show' ] ) && $kofejob_theme_options[ 'login_logo_show' ] == 1 ) {
              ?>
            <div class="login-right">
              <div class="login-header text-center">
               
            <?php
            }
            ?>
              <h2><?php echo esc_html($kofejob_theme_options['login_heading_text']); ?></h2>
              <p><?php echo esc_html($kofejob_theme_options['login_textarea']); ?></p>
            </div>
            </div>
            <form  id="signin-form">
              <div class="fr-sign-form">
                <div class="form-group">
                 <label class="focus-label"><?php echo esc_html__('Email / Username', 'kofejob');?></label>
                  <input type="text"  name="fl_email" class="form-control floating" id="user_login" required data-smk-msg="<?php echo esc_attr__('Please enter your email / username','kofejob'); ?>">
                 
                </div>
              </div>
              <div class="fr-sign-form">
                <div class="form-group">
                  <label class="focus-label"><?php echo esc_html__('Password', 'kofejob');?></label>
                  <div class="password_field">
                  <input type="password" name="fl_password" class="form-control floating" id="password-field" required data-smk-msg="<?php echo esc_attr__('Please enter your password','kofejob'); ?>">
                  <span data-toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                </div>
                </div>
              </div>
              <div class="fr-sigin-requirements">
              
         </div>
              <div class="fr-sign-submit">
                <div class="form-group m-0 d-grid">
					<?php
					$redirect_page = isset($_GET['redirect']) ? $_GET['redirect'] : '';
					if(isset($redirect_page) && $redirect_page !='')
					{
						$register_page = get_the_permalink($kofejob_theme_options['register_page']).'?redirect='.$redirect_page;
					}
					else
					{
						$register_page = get_the_permalink($kofejob_theme_options['register_page']);
					}
					?>
                  <button class="btn btn-primary btn-block btn-lg login-btn btn-loading" id="signin-btn" type="button" data-redirect-id="<?php echo esc_attr($redirect_page); ?>"> <?php echo esc_html__('Login','kofejob'); ?>
                  <span class="bubbles"> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> </span>
                  </button>
                </div>
              </div>
              <?php
			if( class_exists( 'mo_openid_login_wid' ) )
			{
                ?>
              <div class="fr-sign-top-content">
                <p> <?php echo esc_html__('OR','kofejob'); ?></p>
              </div>
              <?php
              echo do_shortcode( '[miniorange_social_login]' );
              }
              ?>
            </form>
          </div>
          <div class="row">
              <div class="col-5 text-start">
                <a href="<?php echo esc_url(home_url());?>/forgot-password"  class="forgot-link"> <?php echo esc_html__('Forgot Password?','kofejob'); ?></a> 
              </div>
              <div class="col-7 text-end have_account">
              <?php echo esc_html__("Don't have an Account?","kofejob"); ?><a href="<?php echo esc_url($register_page); ?>"> <?php echo esc_html__('Register','kofejob'); ?></a>
              </div>
          </div>
       
        </div>


        
        	<style>
	.login-or {
		color: #818181;
		margin-bottom: 30px;
		margin-top: 30px;
		padding-bottom: 10px;
		padding-top: 10px;
		position: relative;
	}
	.or-line {
		background-color: #EFEFEF;
		height: 1px;
		margin-bottom: 0;
		margin-top: 0;
		display: block;
	}
								
	.span-or {
		background-color: #fff;
		display: block;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		text-align: center;
		top: -3px;
		width: 190px;
	}
	.login-info {
	margin-top: 20px;
		background: #fff;
	
	}
	.login-wrap .info-box .badge {
		margin: 0;
	}
	.info-box {
		gap: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border: 1px solid #F7F7FF;
		margin-bottom: 10px;
	text-align: left;
	background: #F7F7FF;
	border-radius: 10px;
	}
	.info-box  p{ 
	text-align: left;
	font-weight: bold;
	margin-bottom: 0;
	}
	.info-box span {
		font-weight: normal;
		min-width: 100px;
	}
	.demobutton,.demobutton:hover, .demobutton:active{
		background:var(--dreamslms_btn_primary_back) !important;
		border-color:var(--dreamslms_btn_primary_back) !important;
	}
							</style>
							<div class="login-or">
									<span class="or-line"></span>
									<h5 class="span-or">Demo Login </h5>
								</div>
								

								<div class="login-info">
		<div class="info-box">
		<span class="btn btn-dark btn-sm">Employer</span>
		<div>
		<p>Username: <span id="provider-email">employerdemo</span></p>
		<p>Password: <span id="provider-password">123456</span></p>
		</div>
		<button class="fill-btn btn btn-primary   btn-sm" onclick="fillLogin('employerdemo', '123456')"><i class="fas fa-copy"></i></button>
	</div>

	<div class="info-box">
		<span class="btn btn-dark btn-sm ">Freelancer </span>
		<div>
		<p>Username: <span id="user-email">freelancerdemo</span></p>
		<p>Password: <span id="user-password">123456</span></p>
		</div>
		<button class="fill-btn btn btn-primary   btn-sm" onclick="fillLogin('freelancerdemo', '123456')"><i class="fas fa-copy"></i></button>
	</div>

	</div>
	<script>
	// Function to fill email and password fields
	function fillLogin(email, password) {
	document.getElementById('user_login').value = email;
	document.getElementById('password-field').value = password;
	}
	</script>
        
      </div>
    </div>
  </div>
 
  
  </div>
  </div>
</div>
<?php
} else {
  echo kofejob_redirect( get_the_permalink( $kofejob_theme_options[ 'user_dashboard_page' ] ) );
}
?>
<?php get_footer(); ?>