<?php
/**
 * Template Name: Luminous Learning Portal Auth
 * File Location: page-auth.php
 */

// If user is already logged in, seamlessly redirect them away from the auth view
if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    if ( in_array('tutor_instructor', (array) $current_user->roles) ) {
        wp_redirect( home_url('/teachers-portal/') );
    } else {
        wp_redirect( home_url('/manage-lesson/') );
    }
    exit;
}

$error_messages = [];
$success_message = '';

// Handle Form Processing
if ( $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['auth_action']) ) {
    $action = sanitize_text_field($_POST['auth_action']);
    
    if ( $action === 'login' ) {
        // --- LOGIN LOGIC ---
        $creds = array(
            'user_login'    => sanitize_text_field($_POST['log_email_username']),
            'user_password' => $_POST['log_password'],
            'remember'      => true
        );
        
        $user = wp_signon( $creds, is_ssl() );
        
        if ( is_wp_error($user) ) {
            $error_messages[] = $user->get_error_message();
        } else {
            // Check roles and route accordingly
            if ( in_array('tutor_instructor', (array) $user->roles) ) {
                wp_redirect( home_url('/teachers-portal/') );
            } else {
                wp_redirect( home_url('/manage-lesson/') );
            }
            exit;
        }
    } elseif ( $action === 'register' ) {
        // --- REGISTRATION LOGIC ---
        $username   = sanitize_user($_POST['reg_username']);
        $email      = sanitize_email($_POST['reg_email']);
        $password   = $_POST['reg_password'];
        $first_name = sanitize_text_field($_POST['reg_firstname']);
        $last_name  = sanitize_text_field($_POST['reg_lastname']);
        $phone_num  = isset($_POST['reg_phone']) ? sanitize_text_field($_POST['reg_phone']) : ''; // Catch the phone number
        $target_role = sanitize_text_field($_POST['reg_role']); // 'student' or 'teacher'
        
        // Basic validation
        if ( empty($username) || empty($email) || empty($password) || empty($phone_num) ) {
            $error_messages[] = "Please fill all required registration details, including your phone number.";
        } elseif ( username_exists($username) ) {
            $error_messages[] = "This username is already taken.";
        } elseif ( email_exists($email) ) {
            $error_messages[] = "This email address is already registered.";
        } else {
            // Register User
            $userdata = array(
                'user_login' => $username,
                'user_email' => $email,
                'user_pass'  => $password,
                'first_name' => $first_name,
                'last_name'  => $last_name,
            );
            
            $user_id = wp_insert_user( $userdata );
            
            if ( is_wp_error($user_id) ) {
                $error_messages[] = $user_id->get_error_message();
            } else {
                // Save the phone number to standard user meta structures
                update_user_meta($user_id, 'billing_phone', $phone_num);
                update_user_meta($user_id, 'phone_number', $phone_num);

                // Apply Tutor LMS structural definitions based on chosen role
                if ( $target_role === 'teacher' ) {
                    $u = new WP_User($user_id);
                    $u->set_role('tutor_instructor');
                    
                    // Add Tutor LMS structural meta approvals for teachers
                    update_user_meta($user_id, '_tutor_instructor_status', 'approved');
                    update_user_meta($user_id, '_tutor_instructor_approved_by', 1);
                } else {
                    // Default standard Subscriber / Student target mapping
                    $u = new WP_User($user_id);
                    $u->set_role('subscriber');
                }
                
                // Automatically log user in after successful registration
                wp_set_current_user($user_id);
                wp_set_auth_cookie($user_id);
                
                if ( $target_role === 'teacher' ) {
                    wp_redirect( home_url('/teachers-portal/') );
                } else {
                    wp_redirect( home_url('/manage-lesson/') );
                }
                exit;
            }
        }
    }
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="light">
<head>
    <meta charset="<?php bloginfo('charset'); ?>"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Authentication Portal | <?php bloginfo('name'); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#ff6b00',
            'on-surface-variant': '#5a4136',
            'surface-container-low': '#f3f4f5',
            surface: {
              DEFAULT: '#f8f9fa',
              dim: '#d9dadb',
              bright: '#f8f9fa',
              lowest: '#ffffff',
              low: '#f3f4f5',
            }
          },
          fontFamily: {
            sans: ['Montserrat', 'sans-serif'],
          },
          borderRadius: {
            'custom': '32px',
          }
        }
      }
    }
  </script>
<style data-purpose="custom-layout">
    body {
      background-color: #f3f4f5; /* surface-container-low */
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      overflow-x: hidden;
      position: relative;
    }
    
    /* Background Floating Icons Layer */
    .bg-animation-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .floating-item {
      position: absolute;
      opacity: 0.15;
      font-weight: 600;
      user-select: none;
      white-space: nowrap;
    }
    
    .opacity-80 {
      opacity: 0.5 !important;
    }

    @keyframes float-up-down {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(5deg); }
    }

    @keyframes float-left-right {
      0%, 100% { transform: translateX(0px) rotate(0deg); }
      50% { transform: translateX(20px) rotate(-5deg); }
    }

    @keyframes float-diagonal {
      0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
      50% { transform: translate(15px, -15px) rotate(3deg); }
    }

    .main-card {
      max-width: 1000px;
      width: 100%;
      min-height: 700px;
      background: white;
      border-radius: 40px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 10;
    }
    
    /* Sliding Mechanism */
    .sliding-container {
      display: flex;
      width: 100%;
      height: 100%;
      position: relative;
      transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .left-panel {
      position: absolute;
      top: 16px;
      bottom: 16px;
      width: calc(50% - 16px);
      z-index: 20;
      border-radius: 32px;
      overflow: hidden;
      transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      left: 16px;
    }

    .form-side {
      width: 50%;
      height: 100%;
      transition: all 0.6s ease;
      display: flex;
      flex-direction: column;
      padding: 2rem 3rem;
    }

    /* States */
    .state-signup .left-panel {
      left: calc(50% + 0px);
    }

    .state-signup .login-form {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-20px);
    }
    
    .state-login .signup-form {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(20px);
    }

    .login-form, .signup-form {
      transition: all 0.5s ease;
      position: absolute;
      width: calc(50% - 6rem);
      top: 50%;
      transform: translateY(-50%);
    }

    .login-form {
      right: 3rem;
    }

    .signup-form {
      left: 3rem;
    }

    .diagonal-overlay {
      position: absolute;
      top: 0;
      right: 0;
      width: 20%;
      height: 100%;
      background: linear-gradient(to left, rgba(255,255,255,0.05), transparent);
      z-index: 15;
    }

    @media (max-width: 868px) {
      .main-card {
        max-width: 450px;
        min-height: auto;
      }
      .left-panel {
        display: none;
      }
      .form-side {
        width: 100%;
      }
      .login-form, .signup-form {
        position: relative;
        width: 100%;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
      }
      .state-signup .login-form, .state-login .signup-form {
        display: none;
      }
    }

    /* New Animated Gradient Overlay */
    .state-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      mix-blend-mode: multiply;
    }

    .state-login .state-overlay {
      background: linear-gradient(135deg, rgba(255, 107, 0, 0.4) 0%, rgba(255, 215, 0, 0.2) 100%);
    }

    .state-signup .state-overlay {
      background: linear-gradient(135deg, rgba(70, 0, 150, 0.5) 0%, rgba(0, 120, 255, 0.3) 100%);
    }
  </style>
<style>
    .left-panel {
      width: calc(55% - 16px) !important;
      clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
    }
    .state-signup .left-panel {
      left: calc(45% + 0px) !important;
      clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    }
    @media (max-width: 868px) {
      .left-panel {
        clip-path: none !important;
      }
    }
  </style>
</head>
<body class="font-sans state-login" id="body-container">
<div class="bg-animation-container">
<span class="material-symbols-outlined floating-item text-orange-500 opacity-80" style="top: 10%; left: 5%; font-size: 32px; animation: float-up-down 8s infinite ease-in-out;">edit</span>
<span class="material-symbols-outlined floating-item text-blue-500 opacity-80" style="top: 85%; left: 12%; font-size: 40px; animation: float-diagonal 10s infinite ease-in-out;">menu_book</span>
<span class="material-symbols-outlined floating-item text-purple-500 opacity-80" style="top: 40%; left: 3%; font-size: 28px; animation: float-left-right 7s infinite ease-in-out;">architecture</span>
<span class="material-symbols-outlined floating-item text-teal-500 opacity-80" style="top: 15%; left: 90%; font-size: 36px; animation: float-up-down 9s infinite ease-in-out;">history_edu</span>
<span class="material-symbols-outlined floating-item text-orange-400 opacity-80" style="top: 70%; left: 85%; font-size: 44px; animation: float-diagonal 12s infinite ease-in-out;">school</span>
<span class="material-symbols-outlined floating-item text-blue-600 opacity-80" style="top: 25%; left: 15%; font-size: 30px; animation: float-diagonal 11s infinite ease-in-out;">science</span>
<span class="material-symbols-outlined floating-item text-purple-600 opacity-80" style="top: 60%; left: 92%; font-size: 38px; animation: float-up-down 7.5s infinite ease-in-out;">biotech</span>
<span class="material-symbols-outlined floating-item text-teal-600 opacity-80" style="top: 80%; left: 5%; font-size: 32px; animation: float-left-right 9.5s infinite ease-in-out;">experiment</span>
<span class="material-symbols-outlined floating-item text-orange-600 opacity-80" style="top: 5%; left: 80%; font-size: 34px; animation: float-diagonal 8.5s infinite ease-in-out;">vial</span>
<div class="floating-item text-teal-500 text-xl font-bold opacity-80" style="top: 50%; left: 88%; animation: float-up-down 13s infinite ease-in-out;">E=mc²</div>
<div class="floating-item text-orange-500 text-2xl font-bold opacity-80" style="top: 12%; left: 75%; animation: float-diagonal 10s infinite ease-in-out;">π</div>
<div class="floating-item text-blue-500 text-xl font-bold opacity-80" style="top: 92%; left: 78%; animation: float-left-right 11s infinite ease-in-out;">H₂O</div>
<div class="floating-item text-purple-500 text-2xl font-bold opacity-80" style="top: 35%; left: 10%; animation: float-up-down 9s infinite ease-in-out;">Σ</div>
<div class="floating-item text-teal-400 text-lg font-bold opacity-80" style="top: 22%; left: 45%; animation: float-diagonal 14s infinite ease-in-out;">∫ dx</div>
<div class="floating-item text-orange-400 text-lg font-bold opacity-80" style="top: 78%; left: 35%; animation: float-up-down 12s infinite ease-in-out;">m/s²</div>
<div class="floating-item text-blue-400 text-xl font-bold opacity-80" style="top: 5%; left: 25%; animation: float-left-right 10s infinite ease-in-out;">√x</div>
<div class="floating-item text-purple-400 text-lg font-bold opacity-80" style="top: 90%; left: 50%; animation: float-diagonal 15s infinite ease-in-out;">kg</div>
<span class="material-symbols-outlined floating-item text-teal-500 opacity-80" style="top: 30%; left: 82%; font-size: 24px; animation: float-up-down 8s infinite ease-in-out;">calculate</span>
<span class="material-symbols-outlined floating-item text-orange-500 opacity-80" style="top: 65%; left: 10%; font-size: 26px; animation: float-left-right 7s infinite ease-in-out;">straighten</span>
<div class="floating-item text-blue-500 text-2xl opacity-80" style="top: 45%; left: 95%; animation: float-diagonal 9s infinite ease-in-out;">±</div>
<div class="floating-item text-purple-500 text-lg opacity-80" style="top: 18%; left: 2%; animation: float-up-down 11s infinite ease-in-out;">Δ</div>
<div class="floating-item text-orange-600 text-2xl font-bold opacity-80" style="top: 45%; left: 25%; animation: float-diagonal 11s infinite ease-in-out;">∞</div>
<div class="floating-item text-teal-600 text-xl font-bold opacity-80" style="top: 15%; left: 60%; animation: float-up-down 10s infinite ease-in-out;">Ω</div>
<div class="floating-item text-blue-400 text-2xl font-bold opacity-80" style="top: 85%; left: 40%; animation: float-left-right 12s infinite ease-in-out;">∆</div>
<div class="floating-item text-purple-600 text-lg font-bold opacity-80" style="top: 55%; left: 70%; animation: float-diagonal 9s infinite ease-in-out;">θ</div>
<div class="floating-item text-orange-500 text-lg font-bold opacity-80" style="top: 35%; left: 35%; animation: float-up-down 15s infinite ease-in-out;">F=ma</div>
<div class="floating-item text-teal-500 text-lg font-bold opacity-80" style="top: 65%; left: 65%; animation: float-left-right 14s infinite ease-in-out;">a²+b²=c²</div>
<div class="floating-item text-blue-600 text-xl font-bold opacity-80" style="top: 25%; left: 50%; animation: float-diagonal 13s infinite ease-in-out;">CO₂</div>
<div class="floating-item text-purple-500 text-lg font-bold opacity-80" style="top: 75%; left: 20%; animation: float-up-down 11s infinite ease-in-out;">9.8 m/s²</div>
<div class="floating-item text-orange-400 text-xl font-bold opacity-80" style="top: 10%; left: 15%; animation: float-left-right 10s infinite ease-in-out;">1.21 GW</div>
<div class="floating-item text-teal-400 text-lg font-bold opacity-80" style="top: 90%; left: 90%; animation: float-diagonal 16s infinite ease-in-out;">Newton (N)</div>
<span class="material-symbols-outlined floating-item text-blue-500 opacity-80" style="top: 50%; left: 50%; font-size: 28px; animation: float-up-down 12s infinite ease-in-out;">menu_book</span>
<span class="material-symbols-outlined floating-item text-purple-400 opacity-80" style="top: 20%; left: 30%; font-size: 32px; animation: float-diagonal 10.5s infinite ease-in-out;">draw</span>
<span class="material-symbols-outlined floating-item text-orange-600 opacity-80" style="top: 80%; left: 60%; font-size: 36px; animation: float-left-right 9s infinite ease-in-out;">functions</span>
<span class="material-symbols-outlined floating-item text-teal-600 opacity-80" style="top: 40%; left: 15%; font-size: 30px; animation: float-up-down 11.5s infinite ease-in-out;">biotech</span>
<span class="material-symbols-outlined floating-item text-blue-400 opacity-80" style="top: 60%; left: 80%; font-size: 24px; animation: float-diagonal 13.5s infinite ease-in-out;">psychology</span>
<span class="material-symbols-outlined floating-item text-purple-600 opacity-80" style="top: 5%; left: 55%; font-size: 34px; animation: 8s ease-in-out 0s infinite normal none running float-left-right;">auto_stories</span>
</div>

<main class="main-card">
   <section class="left-panel bg-neutral-900 flex flex-col justify-between p-10" data-purpose="brand-visual">
<img alt="Abstract Artistic Visual" class="absolute inset-0 w-full h-full object-cover opacity-90" src="<?php echo get_stylesheet_directory_uri(); ?>/images/1023513452829565373.jpg"/>
<div class="state-overlay"></div>
<div class="relative z-20 flex justify-end items-center gap-4">
<span class="text-white font-semibold text-xs tracking-wide mr-auto md:mr-0">Luminous Gallery</span>
        
            <div class="flex gap-4 items-center">
                <button class="text-white/80 hover:text-white text-xs font-semibold uppercase tracking-wider transition-colors" id="panel-toggle-text" onclick="toggleState()">Sign Up</button>
                <button class="px-6 py-2 bg-white/10 backdrop-blur-md border border-white/20 text-white rounded-full text-xs font-bold hover:bg-white/20 transition-all active:scale-95" id="panel-toggle-btn" onclick="toggleState()">Join Us</button>
            </div>
        </div>
        
        <div class="relative z-20 flex items-center gap-4 bg-black/30 backdrop-blur-lg p-3 rounded-2xl border border-white/10 w-fit">
            <span class="material-symbols-outlined text-primary text-3xl">account_circle</span>
            <div class="flex flex-col">
                <span class="text-white font-bold text-sm">Portal Core</span>
                <span class="text-white/60 text-[10px]">LMS Active Guard</span>
            </div>
        </div>
        <div class="diagonal-overlay"></div>
    </section>

    <div class="flex h-full min-h-[720px] relative">
        <section class="signup-form p-6 md:p-8 flex flex-col justify-center h-full">
            
            <div class="flex justify-between items-center mb-8">

<svg width="148" height="25" viewBox="0 0 148 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M133.744 20.4779V4.66298H137.583V6.34345C138.737 5.50321 140.671 4.25808 142.864 4.25808C147.683 4.25808 148.001 7.18368 148.001 10.456V20.4779H144.191V10.89C144.191 8.48572 143.729 7.6177 141.623 7.6177C140.035 7.6177 138.535 8.34149 137.582 8.86283V20.4779H133.744ZM122.491 17.7257C125.55 17.7257 126.3 15.4378 126.3 12.5705C126.3 9.87641 125.55 7.32791 122.434 7.32791C119.374 7.32791 118.538 9.87641 118.538 12.5996C118.537 15.5252 119.488 17.7257 122.491 17.7257ZM122.288 20.8246C117.411 20.8246 114.669 17.7548 114.669 12.7147C114.669 7.38481 117.844 4.25675 122.518 4.25675C127.77 4.25675 130.194 7.3557 130.194 12.5691C130.196 18.0154 126.848 20.8246 122.288 20.8246ZM105.637 20.8246C103.415 20.8246 101.654 20.5348 100.327 20.159L100.789 17.1752C102.433 17.4359 104.05 17.6966 105.262 17.6966C107.716 17.6966 108.437 16.9436 108.437 16.0743C108.437 13.6409 100.5 14.5976 100.5 9.00706C100.5 5.82078 103.386 4.25675 106.676 4.25675C108.523 4.25675 110.197 4.63387 111.409 5.06788L110.774 7.93526C109.532 7.64548 108.35 7.3557 106.676 7.3557C104.916 7.3557 104.339 8.13771 104.339 8.80329C104.339 11.3227 112.217 10.628 112.217 15.8705C112.216 19.8401 108.262 20.8246 105.637 20.8246ZM91.3807 20.8246C89.1591 20.8246 87.3979 20.5348 86.0707 20.159L86.5325 17.1752C88.1773 17.4359 89.7929 17.6966 91.0063 17.6966C93.4595 17.6966 94.1806 16.9436 94.1806 16.0743C94.1806 13.6409 86.2441 14.5976 86.2441 9.00706C86.2441 5.82078 89.13 4.25675 92.4195 4.25675C94.2667 4.25675 95.9405 4.63387 97.1526 5.06788L96.5174 7.93526C95.2763 7.64548 94.0933 7.3557 92.4195 7.3557C90.6596 7.3557 90.0814 8.13771 90.0814 8.80329C90.0814 11.3227 97.9597 10.628 97.9597 15.8705C97.9597 19.8401 94.006 20.8246 91.3807 20.8246ZM73.4592 11.0646H79.6929C79.722 8.68949 78.7693 7.03813 76.8652 7.03813C74.9307 7.03813 73.6326 8.45793 73.4592 11.0646ZM77.6446 20.8246C72.6812 20.8246 69.5359 19.029 69.5359 12.8311C69.5359 6.37256 72.7976 4.28719 77.241 4.28719C81.8007 4.28719 83.6479 7.2988 83.6479 12.2516V13.6422H73.3746C73.3746 17.1183 75.5393 17.6966 78.3379 17.6966C79.4349 17.6966 81.3098 17.3194 82.6092 17.0588L83.2152 20.0426C81.9145 20.4488 79.808 20.8246 77.6446 20.8246ZM55.076 20.4779V1.90735e-06H59.0006V17.2916H67.8595V20.4779H55.076ZM41.0804 20.8246C36.3473 20.8246 36.002 17.8408 36.002 14.5976V4.66298H39.8406V14.1636C39.8406 16.4514 40.2164 17.4359 42.2938 17.4359C43.9385 17.4359 45.6415 16.5956 46.3918 16.1907V4.66298H50.2304V20.4766H46.3918V18.7683C45.3517 19.5212 43.3312 20.8246 41.0804 20.8246Z" fill="#1A3B5F"></path><mask id="mask0_2185_4167" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="25" style="mask-type: alpha;"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.2466 0.794054H18.2078C16.2442 0.794054 14.5359 1.91746 13.6917 3.56088C12.8435 1.91746 11.1353 0.794054 9.17163 0.794054H0.132812V19.5148L0.172509 20.0798H9.20868C13.0592 20.0798 13.1254 23.8906 13.1254 24.0534H13.5792H14.2541C14.258 23.8906 14.3202 20.0798 18.2078 20.0798H27.2466V0.794054Z" fill="#213D5B"></path></mask><g mask="url(#mask0_2185_4167)"><path d="M27.1138 0.775349H0V24.036H27.1138V0.775349Z" fill="url(#paint0_linear_2185_4167)"></path></g><path d="M4.55327 8.97672C4.98331 9.54834 5.50333 10.0565 6.11333 10.4984C6.72333 10.9417 7.38625 11.3056 8.10475 11.5927C8.82193 11.8785 9.57881 12.0968 10.3754 12.2464C11.1719 12.3959 11.9712 12.4713 12.7757 12.4713H14.3688C15.172 12.4713 15.9725 12.3959 16.7691 12.2464C17.5657 12.0968 18.3225 11.8785 19.0397 11.5927C19.7569 11.3069 20.4212 10.9417 21.0298 10.4984C21.6398 10.0551 22.1598 9.54834 22.5899 8.97672L23.6445 9.74815C23.3004 10.4481 22.8162 11.1521 22.1916 11.86C21.567 12.5679 20.8247 13.203 19.9646 13.768C19.1032 14.3331 18.1347 14.7896 17.0589 15.1402C15.9831 15.4909 14.82 15.6655 13.5722 15.6655C12.3245 15.6655 11.1614 15.4909 10.0856 15.1402C9.00983 14.7896 8.04124 14.3331 7.17983 13.768C6.31843 13.203 5.57611 12.5679 4.95288 11.86C4.32833 11.1521 3.84403 10.4481 3.5 9.74815L4.55327 8.97672Z" fill="white"></path><defs><linearGradient id="paint0_linear_2185_4167" x1="13.557" y1="0.775375" x2="13.557" y2="24.0356" gradientUnits="userSpaceOnUse"><stop stop-color="#2CA1DA"></stop><stop offset="1" stop-color="#2B5CA9"></stop></linearGradient></defs></svg>

<button class="flex items-center gap-2 text-xs font-semibold text-neutral-500 border border-neutral-200 px-3 py-1.5 rounded-lg hover:bg-neutral-50 transition-colors">
<span class="">🇬🇧 EN</span>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
</button>
</div>
            
            <div class="mb-4">
                <h2 class="text-2xl font-bold text-neutral-800">Create Account</h2>
                <p class="text-xs text-neutral-500">Join our dynamic Tutor LMS driven curriculum ecosystem.</p>
            </div>

            <?php if(!empty($error_messages)): ?>
                <div class="mb-4 p-3 bg-red-50 text-red-600 text-xs rounded-xl border border-red-200">
                    <?php foreach($error_messages as $msg) echo "<p>$msg</p>"; ?>
                </div>
            <?php endif; ?>

            <form method="POST" action="" id="registration-form" class="space-y-3">
                <input type="hidden" name="auth_action" value="register">
                
                <div id="signup-fields-step-1" class="space-y-3">
                    <div>
                        <label class="block text-[11px] font-bold text-neutral-600 uppercase tracking-wider mb-1.5">Select Account Destination</label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="relative flex items-center justify-between p-3 border rounded-2xl cursor-pointer hover:bg-neutral-50 transition-all group border-primary/40 bg-orange-50/20" id="label-role-student">
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-primary text-xl">school</span>
                                    <span class="text-xs font-semibold text-neutral-700">Student</span>
                                </div>
                                <input type="radio" name="reg_role" value="student" checked class="text-primary focus:ring-primary w-4 h-4 rounded-full border-neutral-300" onclick="updateRoleUI('student')">
                            </label>
                            <label class="relative flex items-center justify-between p-3 border rounded-2xl cursor-pointer hover:bg-neutral-50 transition-all group border-neutral-200" id="label-role-teacher">
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-neutral-400 group-hover:text-primary transition-colors text-xl">workspace_premium</span>
                                    <span class="text-xs font-semibold text-neutral-700">Teacher</span>
                                </div>
                                <input type="radio" name="reg_role" value="teacher" class="text-primary focus:ring-primary w-4 h-4 rounded-full border-neutral-300" onclick="updateRoleUI('teacher')">
                            </label>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <input type="text" name="reg_firstname" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="First Name">
                        </div>
                        <div>
                            <input type="text" name="reg_lastname" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="Last Name">
                        </div>
                    </div>

                    <div>
                        <input type="text" name="reg_username" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="Username">
                    </div>

                    <div>
                        <input type="email" name="reg_email" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="Email">
                    </div>

                    <div>
                        <input type="password" name="reg_password" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="Password">
                    </div>
                </div>

                <div id="signup-fields-step-2" class="hidden opacity-0 transform translate-y-2 transition-all duration-300 mt-2">
                    <div class="relative flex items-center">
                        <span class="material-symbols-outlined absolute left-4 text-neutral-400 text-sm">call</span>
                        <input type="tel" id="reg_phone" name="reg_phone" class="w-full pl-11 pr-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="Phone Number">
                    </div>
                </div>

                <button type="button" id="reg-submit-btn" onclick="handleRegistrationFlow()" class="w-full py-3 bg-neutral-900 text-white rounded-xl text-xs font-bold tracking-wider hover:bg-neutral-800 transition-all active:scale-[0.99] shadow-md shadow-neutral-900/10">
                    REGISTER NOW
                </button>
            </form>
            
            <p class="text-center text-xs font-semibold text-neutral-500 mt-6">
                Already have an account? <a class="text-primary hover:underline" href="javascript:void(0)" onclick="toggleState()">Login</a>
            </p>
            
        </section>

        <section class="login-form p-6 md:p-8 flex flex-col justify-center h-full">
            <div class="mb-6">
                <div class="flex justify-between items-center mb-8">

<svg width="148" height="25" viewBox="0 0 148 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M133.744 20.4779V4.66298H137.583V6.34345C138.737 5.50321 140.671 4.25808 142.864 4.25808C147.683 4.25808 148.001 7.18368 148.001 10.456V20.4779H144.191V10.89C144.191 8.48572 143.729 7.6177 141.623 7.6177C140.035 7.6177 138.535 8.34149 137.582 8.86283V20.4779H133.744ZM122.491 17.7257C125.55 17.7257 126.3 15.4378 126.3 12.5705C126.3 9.87641 125.55 7.32791 122.434 7.32791C119.374 7.32791 118.538 9.87641 118.538 12.5996C118.537 15.5252 119.488 17.7257 122.491 17.7257ZM122.288 20.8246C117.411 20.8246 114.669 17.7548 114.669 12.7147C114.669 7.38481 117.844 4.25675 122.518 4.25675C127.77 4.25675 130.194 7.3557 130.194 12.5691C130.196 18.0154 126.848 20.8246 122.288 20.8246ZM105.637 20.8246C103.415 20.8246 101.654 20.5348 100.327 20.159L100.789 17.1752C102.433 17.4359 104.05 17.6966 105.262 17.6966C107.716 17.6966 108.437 16.9436 108.437 16.0743C108.437 13.6409 100.5 14.5976 100.5 9.00706C100.5 5.82078 103.386 4.25675 106.676 4.25675C108.523 4.25675 110.197 4.63387 111.409 5.06788L110.774 7.93526C109.532 7.64548 108.35 7.3557 106.676 7.3557C104.916 7.3557 104.339 8.13771 104.339 8.80329C104.339 11.3227 112.217 10.628 112.217 15.8705C112.216 19.8401 108.262 20.8246 105.637 20.8246ZM91.3807 20.8246C89.1591 20.8246 87.3979 20.5348 86.0707 20.159L86.5325 17.1752C88.1773 17.4359 89.7929 17.6966 91.0063 17.6966C93.4595 17.6966 94.1806 16.9436 94.1806 16.0743C94.1806 13.6409 86.2441 14.5976 86.2441 9.00706C86.2441 5.82078 89.13 4.25675 92.4195 4.25675C94.2667 4.25675 95.9405 4.63387 97.1526 5.06788L96.5174 7.93526C95.2763 7.64548 94.0933 7.3557 92.4195 7.3557C90.6596 7.3557 90.0814 8.13771 90.0814 8.80329C90.0814 11.3227 97.9597 10.628 97.9597 15.8705C97.9597 19.8401 94.006 20.8246 91.3807 20.8246ZM73.4592 11.0646H79.6929C79.722 8.68949 78.7693 7.03813 76.8652 7.03813C74.9307 7.03813 73.6326 8.45793 73.4592 11.0646ZM77.6446 20.8246C72.6812 20.8246 69.5359 19.029 69.5359 12.8311C69.5359 6.37256 72.7976 4.28719 77.241 4.28719C81.8007 4.28719 83.6479 7.2988 83.6479 12.2516V13.6422H73.3746C73.3746 17.1183 75.5393 17.6966 78.3379 17.6966C79.4349 17.6966 81.3098 17.3194 82.6092 17.0588L83.2152 20.0426C81.9145 20.4488 79.808 20.8246 77.6446 20.8246ZM55.076 20.4779V1.90735e-06H59.0006V17.2916H67.8595V20.4779H55.076ZM41.0804 20.8246C36.3473 20.8246 36.002 17.8408 36.002 14.5976V4.66298H39.8406V14.1636C39.8406 16.4514 40.2164 17.4359 42.2938 17.4359C43.9385 17.4359 45.6415 16.5956 46.3918 16.1907V4.66298H50.2304V20.4766H46.3918V18.7683C45.3517 19.5212 43.3312 20.8246 41.0804 20.8246Z" fill="#1A3B5F"></path><mask id="mask0_2185_4167" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="25" style="mask-type: alpha;"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.2466 0.794054H18.2078C16.2442 0.794054 14.5359 1.91746 13.6917 3.56088C12.8435 1.91746 11.1353 0.794054 9.17163 0.794054H0.132812V19.5148L0.172509 20.0798H9.20868C13.0592 20.0798 13.1254 23.8906 13.1254 24.0534H13.5792H14.2541C14.258 23.8906 14.3202 20.0798 18.2078 20.0798H27.2466V0.794054Z" fill="#213D5B"></path></mask><g ><path d="M27.1138 0.775349H0V24.036H27.1138V0.775349Z" fill="url(#paint0_linear_2185_4167)"></path></g><path d="M4.55327 8.97672C4.98331 9.54834 5.50333 10.0565 6.11333 10.4984C6.72333 10.9417 7.38625 11.3056 8.10475 11.5927C8.82193 11.8785 9.57881 12.0968 10.3754 12.2464C11.1719 12.3959 11.9712 12.4713 12.7757 12.4713H14.3688C15.172 12.4713 15.9725 12.3959 16.7691 12.2464C17.5657 12.0968 18.3225 11.8785 19.0397 11.5927C19.7569 11.3069 20.4212 10.9417 21.0298 10.4984C21.6398 10.0551 22.1598 9.54834 22.5899 8.97672L23.6445 9.74815C23.3004 10.4481 22.8162 11.1521 22.1916 11.86C21.567 12.5679 20.8247 13.203 19.9646 13.768C19.1032 14.3331 18.1347 14.7896 17.0589 15.1402C15.9831 15.4909 14.82 15.6655 13.5722 15.6655C12.3245 15.6655 11.1614 15.4909 10.0856 15.1402C9.00983 14.7896 8.04124 14.3331 7.17983 13.768C6.31843 13.203 5.57611 12.5679 4.95288 11.86C4.32833 11.1521 3.84403 10.4481 3.5 9.74815L4.55327 8.97672Z" fill="white"></path><defs><linearGradient id="paint0_linear_2185_4167" x1="13.557" y1="0.775375" x2="13.557" y2="24.0356" gradientUnits="userSpaceOnUse"><stop stop-color="#2CA1DA"></stop><stop offset="1" stop-color="#2B5CA9"></stop></linearGradient></defs></svg>

<button class="flex items-center gap-2 text-xs font-semibold text-neutral-500 border border-neutral-200 px-3 py-1.5 rounded-lg hover:bg-neutral-50 transition-colors">
<span class="">🇬🇧 EN</span>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
</button>
</div>
                
                <h2 class="text-2xl font-bold text-neutral-800">Welcome Back</h2>
                <p class="text-xs text-neutral-500">Sign in to initialize your structured portal workbench.</p>
            </div>

            <form method="POST" action="" class="space-y-4">
                <input type="hidden" name="auth_action" value="login">

                <div>
                    <label class="block text-[10px] font-semibold text-neutral-500 uppercase tracking-wider mb-1">Username or Email Address</label>
                    <input type="text" name="log_email_username" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                </div>

                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label class="block text-[10px] font-semibold text-neutral-500 uppercase tracking-wider">Password</label>
                        <a href="<?php echo wp_lostpassword_url(); ?>" class="text-[10px] font-bold text-primary hover:underline">Forgot?</a>
                    </div>
                    <input type="password" name="log_password" required class="w-full px-5 py-4 bg-neutral-50 border border-neutral-200 rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                </div>

                <button type="submit" class="w-full py-3.5 bg-primary text-white rounded-xl text-xs font-bold tracking-wider hover:bg-orange-600 transition-all active:scale-[0.99] shadow-lg shadow-primary/20">
                    SIGN IN SECURELY
                </button>
            </form>
            
            <p class="text-center text-xs font-semibold text-neutral-500 mt-6">
                Don't have an account? <a class="text-primary hover:underline" href="javascript:void(0)" onclick="toggleState()">Sign up</a>
            </p>
            
        </section>
    </div>
</main>

<script>
    let currentSignupStep = 1;

    function handleRegistrationFlow() {
        const form = document.getElementById('registration-form');
        const step1Fields = document.getElementById('signup-fields-step-1');
        const step2Container = document.getElementById('signup-fields-step-2');
        const submitBtn = document.getElementById('reg-submit-btn');
        const phoneInput = document.getElementById('reg_phone');

        if (currentSignupStep === 1) {
            // Check native HTML validation rules on current step fields before progressing
            const inputs = step1Fields.querySelectorAll('input[required]');
            let step1Valid = true;
            inputs.forEach(input => {
                if(!input.value.trim()) {
                    input.reportValidity();
                    step1Valid = false;
                }
            });

            if (!step1Valid) return;

            // Animate revealing the hidden phone step container
            step2Container.classList.remove('hidden');
            setTimeout(() => {
                step2Container.classList.remove('opacity-0', 'translate-y-2');
                phoneInput.setAttribute('required', 'required');
                phoneInput.focus();
            }, 50);

            // Dynamically alter layout CTA appearance values
            submitBtn.innerText = "CONFIRM & COMPLETE";
            submitBtn.classList.remove('bg-neutral-900', 'hover:bg-neutral-800');
            submitBtn.classList.add('bg-primary', 'hover:bg-orange-600', 'shadow-lg', 'shadow-primary/20');
            
            currentSignupStep = 2;
        } else if (currentSignupStep === 2) {
            // Verify step 2 contact details are complete before direct form submission
            if (!phoneInput.value.trim()) {
                phoneInput.reportValidity();
                return;
            }
            form.submit();
        }
    }

    function toggleState() {
        const body = document.getElementById('body-container');
        const toggleText = document.getElementById('panel-toggle-text');
        const toggleBtn = document.getElementById('panel-toggle-btn');
        
        if (body.classList.contains('state-login')) {
            body.classList.remove('state-login');
            body.classList.add('state-signup');
            toggleText.innerText = "Login";
            toggleBtn.innerText = "Sign In";
        } else {
            body.classList.remove('state-signup');
            body.classList.add('state-login');
            toggleText.innerText = "Sign Up";
            toggleBtn.innerText = "Join Us";
        }
    }

    function updateRoleUI(role) {
        const studentLabel = document.getElementById('label-role-student');
        const teacherLabel = document.getElementById('label-role-teacher');
        
        if(role === 'student') {
            studentLabel.classList.add('border-primary/40', 'bg-orange-50/20');
            studentLabel.classList.remove('border-neutral-200');
            teacherLabel.classList.remove('border-primary/40', 'bg-orange-50/20');
            teacherLabel.classList.add('border-neutral-200');
        } else {
            teacherLabel.classList.add('border-primary/40', 'bg-orange-50/20');
            teacherLabel.classList.remove('border-neutral-200');
            studentLabel.classList.remove('border-primary/40', 'bg-orange-50/20');
            studentLabel.classList.add('border-neutral-200');
        }
    }
</script>
</body>
</html>