<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php print $SITE_TITLE; ?> | OTP Verification</title>
  <link rel='shortcut icon' href='<?php echo $theme_link; ?>images/favicon.ico' />
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="<?php echo $theme_link; ?>bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="<?php echo $theme_link; ?>css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f5f5f5;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-container {
      width: 100%;
      max-width: 450px;
      animation: fadeInUp 0.6s ease;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .login-header {
      background: #1e3a8a;
      padding: 30px 25px;
      text-align: center;
      color: #ffffff;
    }

    .login-header-text h2 {
      font-size: 22px;
      font-weight: 600;
      margin: 0 0 5px 0;
      color: #ffffff;
      line-height: 1.2;
    }

    .login-header-text h2 span {
      color: #a78bfa;
    }

    .login-header-text p {
      font-size: 13px;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
    }

    .login-body {
      padding: 30px 25px;
    }

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

    .form-group label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 8px;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-wrapper i {
      position: absolute;
      left: 15px;
      color: #6b7280;
      font-size: 16px;
      z-index: 1;
    }

    .form-control {
      width: 100%;
      padding: 12px 15px 12px 45px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      color: #111827;
      background: #f0f9ff;
      transition: all 0.3s ease;
      outline: none;
    }

    .form-control.otp-input {
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
    }

    .form-control:focus {
      border-color: #3b82f6;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-control::placeholder {
      color: #9ca3af;
    }

    .button-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    .btn-signin {
      width: 100%;
      padding: 14px 20px;
      background: #1e3a8a;
      border: none;
      border-radius: 8px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: block;
      text-align: center;
    }

    .btn-signin:hover {
      background: #1e40af;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
    }
    .btn-signin:disabled {
      opacity: 0.85;
      cursor: wait;
      transform: none;
    }

    .btn-forgot {
      width: 100%;
      padding: 12px 20px;
      background: #f3f4f6;
      border: none;
      border-radius: 8px;
      color: #374151;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
      text-align: center;
    }

    .btn-forgot:hover {
      background: #e5e7eb;
      color: #1f2937;
    }

    .alert-message {
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 500;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .alert-danger {
      background: #fee2e2;
      color: #991b1b;
      border-left: 4px solid #ef4444;
    }

    .alert-success {
      background: #d1fae5;
      color: #065f46;
      border-left: 4px solid #10b981;
    }

    .alert-warning {
      background: #fef3c7;
      color: #92400e;
      border-left: 4px solid #f59e0b;
    }

    .demo-mode-badge {
      display: inline-block;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 10px;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.85; }
    }

    .demo-mode-badge i {
      margin-right: 5px;
      font-size: 12px;
    }

    @media (max-width: 768px) {
      .login-container {
        max-width: 100%;
        padding: 10px;
      }
      .login-body { padding: 25px 20px; }
      .login-header { padding: 25px 20px; }
      .login-header-text h2 { font-size: 20px; }
      .form-control { font-size: 16px; }
      .btn-signin, .btn-forgot {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
      }
    }

    @media (max-width: 480px) {
      body { padding: 10px; }
      .login-container { max-width: 100%; }
      .login-body { padding: 20px 15px; }
      .login-header { padding: 20px 15px; }
      .login-header-text h2 { font-size: 18px; }
      .login-header-text p { font-size: 12px; }
      .form-group { margin-bottom: 18px; }
      .form-group label { font-size: 13px; }
      .btn-signin, .btn-forgot {
        padding: 12px 18px;
        font-size: 14px;
      }
      .form-control.otp-input { letter-spacing: 4px; font-size: 16px; }
    }
  </style>
  
  <?php 
  $lang = trim(strtoupper($this->session->userdata('language')));
  if($lang==strtoupper('arabic') || $lang==strtoupper('urdu')) { ?>
  <link rel="stylesheet" href="<?php echo $theme_link; ?>bootstrap/css/bootstrap.rtl.min.css">
  <?php } ?>
</head>
<body>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <div class="login-header-text">
          <h2><?php echo isset($login_store_name) ? htmlspecialchars($login_store_name) : (isset($SITE_TITLE) ? $SITE_TITLE : 'Management System'); ?></h2>
          <p>Enter the verification code sent to your email</p>
          <?php if(demo_app()): ?>
          <div class="demo-mode-badge">
            <i class="fa fa-info-circle"></i> Demo Mode - Read Only
          </div>
          <?php endif; ?>
        </div>
      </div>
      
      <div class="login-body">
        <?php if($this->session->flashdata('failed')): ?>
          <div class="alert-message alert-danger">
            <i class="fa fa-exclamation-circle"></i> <?php echo $this->session->flashdata('failed'); ?>
          </div>
        <?php endif; ?>

        <?php if($this->session->flashdata('success')): ?>
          <div class="alert-message alert-success">
            <i class="fa fa-check-circle"></i> <?php echo $this->session->flashdata('success'); ?>
          </div>
        <?php endif; ?>

        <?php if($this->session->flashdata('error')): ?>
          <div class="alert-message alert-warning">
            <i class="fa fa-exclamation-triangle"></i> <?php echo $this->session->flashdata('error'); ?>
          </div>
        <?php endif; ?>

        <form method="POST" action="<?php echo $base_url; ?>login/verify_otp" id="otp-form">
          <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
          <input type="hidden" name="email" value="<?php echo htmlspecialchars($this->session->userdata('email')); ?>">
          
          <div class="form-group">
            <label>Verification code</label>
            <div class="input-wrapper">
              <i class="fa fa-key"></i>
              <input type="text" class="form-control otp-input" name="otp" id="otp" placeholder="0000" required maxlength="4" pattern="[0-9]{4}" autofocus>
            </div>
          </div>
          
          <div class="button-group">
            <button class="btn-signin" type="submit" id="btnSubmit"><?= $this->lang->line('submit'); ?></button>
            <a href="<?= base_url('login/forgot_password') ?>" class="btn-forgot">Back to Forgot Password</a>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="<?php echo $theme_link; ?>plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script src="<?php echo $theme_link; ?>bootstrap/js/bootstrap.min.js"></script>
  <script src="<?php echo $theme_link; ?>js/language.js"></script>
  <script>
    $(document).ready(function() {
      $.ajaxSetup({
        data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' }
      });

      $('form').on('submit', function() {
        var $btn = $('#btnSubmit');
        if ($btn.prop('disabled')) return false;
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Verifying...');
        $('.btn-forgot').css('pointer-events', 'none').css('opacity', '0.6');
      });

      $('#otp').on('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        if (this.value.length > 4) this.value = this.value.slice(0, 4);
      });

      setTimeout(function() { $('.alert-message').fadeOut('slow'); }, 5000);
    });
  </script>
</body>
</html>
