<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AYUSH Counselling 2026 | Student Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  * { font-family: 'Inter', sans-serif; }
  .brand { font-family: 'Poppins', sans-serif; }
  .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .accordion-open .accordion-content { max-height: 1200px; }
  .card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(15,23,42,.15); }
  .fade-in { animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }
  ::-webkit-scrollbar { width: 8px; height:8px; }
  ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius: 8px; }
</style>
</head>
<body class="bg-slate-50 min-h-screen">

<!-- ===================== HEADER ===================== -->
<header class="sticky top-0 z-40 bg-white border-b border-slate-100">
  <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
    <!-- Image Logo -->
    <div class="flex items-center gap-2">
      <a href="/" class="block">
        <img src="examoresizer.jpeg" alt="ExamO Resizer Logo" class="w-11 h-11 object-contain rounded-full shadow-sm">
      </a>
    </div>

    <h1 class="brand text-red-600 font-extrabold tracking-tight text-sm sm:text-lg md:text-2xl uppercase text-center leading-tight">
      EXAMORESIZER.COM(Ayush Counselling 2026 TOOL KIT FOR STUDENTS)
    </h1>

    <div class="relative">
      <button id="menuBtn" class="flex items-center gap-2 pl-2 pr-3 h-11 rounded-full bg-slate-100 hover:bg-slate-200 transition">
        <span class="w-7 h-7 rounded-full bg-teal-600 text-white flex items-center justify-center text-xs font-bold" id="avatarInitial">?</span>
        <span id="headerName" class="text-sm font-bold text-slate-700 max-w-[90px] truncate">Guest</span>
        <i class="fa-solid fa-chevron-down text-[10px] text-slate-500"></i>
      </button>
      <div id="menuDropdown" class="hidden fade-in absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-slate-100 overflow-hidden">
        <div class="px-4 py-3 border-b border-slate-100">
          <p class="text-sm font-bold text-slate-800" id="menuName">Guest</p>
          <p class="text-xs text-slate-400 truncate" id="menuEmail">Not logged in</p>
        </div>
        <a href="javascript:void(0);" class="flex items-center gap-2 px-4 py-2.5 text-sm text-slate-600 hover:bg-slate-50"><i class="fa-solid fa-user w-4"></i> My Profile</a>
        <a href="javascript:void(0);" class="flex items-center gap-2 px-4 py-2.5 text-sm text-slate-600 hover:bg-slate-50"><i class="fa-solid fa-gear w-4"></i> Settings</a>
        <button id="logoutBtn" class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 border-t border-slate-100 text-left"><i class="fa-solid fa-right-from-bracket w-4"></i> Logout</button>
      </div>
    </div>
  </div>
</header>

<!-- ===================== NOTIFICATIONS TICKER ===================== -->
<div class="bg-white border-b border-slate-100">
  <div class="max-w-6xl mx-auto px-4 py-3">
    <div id="notifTicker" class="space-y-2 max-h-40 overflow-y-auto pr-1"></div>
  </div>
</div>

<!-- ===================== AUTH VIEW ===================== -->
<section id="authView" class=" max-w-md mx-auto px-4 py-14">
  <div class="bg-white rounded-2xl shadow-md border border-slate-100 p-7">

    <!-- Step 1: Input Email Box -->
    <div id="authStepEmail" class="">
      <div class="text-center mb-6">
        <div class="w-14 h-14 mx-auto rounded-full bg-teal-50 text-teal-600 flex items-center justify-center text-xl mb-3">
          <i class="fa-solid fa-envelope-open-text"></i>
        </div>
        <h2 class="text-lg font-extrabold text-slate-800">Login / Register karein</h2>
        <p class="text-xs text-slate-500 mt-1">ENTER YOUR VALID EMAIL ADDRESS FOR OTP</p>
      </div>
      <label class="block text-xs font-bold text-slate-600 uppercase mb-1">Email Address *</label>
      <input id="authEmailInput" type="email" required placeholder="you@example.com"
        class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none mb-4">
      
      <button id="sendOtpBtn" class="w-full bg-gradient-to-r from-teal-600 to-blue-600 text-white py-3 rounded-lg font-bold hover:opacity-90 transition">
        <i class="fa-solid fa-paper-plane mr-2"></i> CLICK HERE FOR OTP 
      </button>
      <p id="authMsg" class="text-xs text-center mt-4 text-slate-500"></p>
    </div>

    <!-- Step 2: Input OTP Box -->
    <div id="authStepOtp" class="hidden">
      <div class="text-center mb-6">
        <div class="w-14 h-14 mx-auto rounded-full bg-green-50 text-green-600 flex items-center justify-center text-xl mb-3">
          <i class="fa-solid fa-shield-halved"></i>
        </div>
        <h2 class="text-lg font-extrabold text-slate-800">WRITE YOUR OTP </h2>
        <p class="text-sm text-slate-500 mt-2"><span id="sentToEmail" class="font-bold text-slate-700"></span> par sent OTP enter karein.</p>
      </div>
      <input id="authOtpInput" type="text" inputmode="numeric" maxlength="6" placeholder="123456"
        class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none mb-4 text-center text-xl tracking-[0.4em] font-bold">
      <button id="verifyOtpBtn" class="w-full bg-gradient-to-r from-teal-600 to-blue-600 text-white py-3 rounded-lg font-bold hover:opacity-90 transition">
        Verify OTP
      </button>
      <button type="button" id="resendOtpBtn" class="w-full text-xs text-center mt-3 text-teal-600 font-semibold hover:underline">RESEND OTP</button>
      <p id="otpMsg" class="text-xs text-center mt-3 text-slate-500"></p>
    </div>

    <!-- Step 3: Profile Name Registration -->
    <div id="authStepName" class="hidden">
      <div class="text-center mb-6">
        <div class="w-14 h-14 mx-auto rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-3">
          <i class="fa-solid fa-id-card"></i>
        </div>
        <h2 class="text-lg font-extrabold text-slate-800">Profile complete karein</h2>
        <p class="text-xs text-slate-500 mt-1">Bas aapka naam chahiye, phir dashboard khul jaayega.</p>
      </div>
      <label class="block text-xs font-bold text-slate-600 uppercase mb-1">Poora Naam *</label>
      <input id="authNameInput" type="text" required placeholder="e.g. Ravi Kumar"
        class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none mb-4">
      <button id="saveNameBtn" class="w-full bg-gradient-to-r from-teal-600 to-blue-600 text-white py-3 rounded-lg font-bold hover:opacity-90 transition">
        Continue to Dashboard <i class="fa-solid fa-arrow-right ml-1"></i>
      </button>
    </div>

  </div>
</section>

<!-- ===================== DASHBOARD VIEW ===================== -->
<main id="dashboardView" class="hidden max-w-6xl mx-auto px-4 py-6 pb-24">
  <div class="mb-6">
    <h2 class="text-2xl font-extrabold text-slate-800">Namaste, <span id="dashName">Student</span>! 👋</h2>
    <p class="text-slate-500 text-sm mt-1">BAMS, BHMS, BUMS &amp; BSMS counselling ke liye apna poora dashboard, ek hi jagah.</p>
  </div>

  <div class="mb-8">
    <div class="relative">
      <div class="absolute left-4 top-1/2 -translate-y-1/2 flex items-center gap-2 text-teal-600">
        <i class="fa-solid fa-wand-magic-sparkles"></i>
      </div>
      <input id="aiSearchInput" type="text" placeholder="AI se poochein..." class="w-full pl-11 pr-28 py-3.5 rounded-2xl border border-slate-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm">
      <button id="aiSearchBtn" class="absolute right-1.5 top-1.5 bottom-1.5 px-4 rounded-xl bg-gradient-to-r from-teal-600 to-blue-600 text-white text-sm font-bold hover:opacity-90 transition">Ask AI</button>
    </div>
    <div id="aiAnswerBox" class="hidden mt-3 fade-in bg-teal-50 border border-teal-100 rounded-xl p-4 text-sm text-teal-900"></div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
    <button data-target="comingSoon" class="nav-card card-hover text-left bg-white rounded-2xl border border-slate-100 p-5 shadow-sm">
      <div class="w-11 h-11 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-lg mb-3"><i class="fa-solid fa-earth-asia"></i></div>
      <h3 class="font-bold text-slate-800">All India Counselling</h3>
      <span class="inline-block mt-3 text-[11px] font-bold text-blue-600">Explore <i class="fa-solid fa-arrow-right ml-1"></i></span>
    </button>
    <button data-target="comingSoon" class="nav-card card-hover text-left bg-white rounded-2xl border border-slate-100 p-5 shadow-sm">
      <div class="w-11 h-11 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center text-lg mb-3"><i class="fa-solid fa-location-dot"></i></div>
      <h3 class="font-bold text-slate-800">State Counselling</h3>
      <span class="inline-block mt-3 text-[11px] font-bold text-purple-600">Explore <i class="fa-solid fa-arrow-right ml-1"></i></span>
    </button>
    <button data-target="predictorView" class="nav-card card-hover text-left bg-white rounded-2xl border border-2 border-teal-200 p-5 shadow-sm relative">
      <div class="w-11 h-11 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-lg mb-3"><i class="fa-solid fa-crosshairs"></i></div>
      <h3 class="font-bold text-slate-800">College Predictor</h3>
      <span class="inline-block mt-3 text-[11px] font-bold text-teal-600">Predict Now <i class="fa-solid fa-arrow-right ml-1"></i></span>
    </button>
  </div>
</main>

<!-- ===================== COLLEGE PREDICTOR VIEW ===================== -->
<section id="predictorView" class="hidden max-w-4xl mx-auto px-4 py-6 pb-24">
  <button id="backToDashboard" class="mb-5 flex items-center gap-2 text-sm font-bold text-slate-600 hover:text-teal-600 transition"><i class="fa-solid fa-arrow-left"></i> Dashboard par wapas jaayein</button>
  <div class="bg-white rounded-2xl shadow-md border border-slate-100 p-6">
    <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-center bg-gradient-to-r from-teal-600 to-blue-600 bg-clip-text text-transparent">AYUSH Smart Counseling Predictor</h2>
    <form id="predictorForm" class="space-y-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-xs font-bold text-slate-600 uppercase mb-1">Apni Rank Daalein *</label>
          <input type="number" id="userRank" required class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none" placeholder="e.g. 2500">
        </div>
        <div>
          <label class="block text-xs font-bold text-slate-600 uppercase mb-1">Category *</label>
          <select id="userCategory" required class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
            <option value="Open">Open / UR</option>
            <option value="OBC">OBC</option>
            <option value="EWS">EWS</option>
            <option value="SC">SC</option>
            <option value="ST">ST</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-bold text-slate-600 uppercase mb-1">Course (Optional)</label>
          <select id="filterCourse" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none">
            <option value="">All Courses</option>
            <option value="BAMS">BAMS</option>
            <option value="BHMS">BHMS</option>
          </select>
        </div>
      </div>
      <button type="submit" class="w-full bg-gradient-to-r from-teal-600 to-blue-600 text-white py-3 rounded-lg font-bold transition shadow-md text-lg">Predict Best Colleges</button>
    </form>
  </div>
  <div id="resultContainer" class="mt-8 hidden fade-in">
    <div id="collegeList" class="space-y-4"></div>
  </div>
</section>

<div id="toast" class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-5 py-3 rounded-full shadow-lg text-sm font-semibold z-50"></div>

<script>
const API_BASE = "/ayush-backend";

async function apiCall(endpoint, body){
  const res = await fetch(API_BASE + endpoint, {
    method: 'POST',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body || {})
  });

  const contentType = res.headers.get("content-type");
  if (!contentType || !contentType.includes("application/json")) {
    const rawText = await res.text();
    console.error("Backend plain text output error:", rawText);
    throw new Error("Backend system error! send_otp.php me koi syntax glitch hai.");
  }

  const data = await res.json();
  if(!res.ok){ throw new Error(data.error || 'Error occured'); }
  return data;
}

const authView = document.getElementById('authView');
const authStepEmail = document.getElementById('authStepEmail');
const authStepOtp = document.getElementById('authStepOtp');
const authStepName = document.getElementById('authStepName');
const dashboardView = document.getElementById('dashboardView');
const headerName = document.getElementById('headerName');
const avatarInitial = document.getElementById('avatarInitial');
const menuName = document.getElementById('menuName');
const menuEmail = document.getElementById('menuEmail');
const dashName = document.getElementById('dashName');
const toast = document.getElementById('toast');
let currentEmail = null;

function showToast(msg){
  toast.textContent = msg;
  toast.classList.remove('hidden');
  setTimeout(()=> toast.classList.add('hidden'), 2400);
}

function showOnly(el){
  [authStepEmail, authStepOtp, authStepName].forEach(x=>x.classList.add('hidden'));
  el.classList.remove('hidden');
}

// 1. Send OTP logic
async function sendOtp(){
  const emailInput = document.getElementById('authEmailInput');
  const email = emailInput.value.trim().toLowerCase(); 
  const msg = document.getElementById('authMsg');
  
  if(!email){ 
    msg.textContent = "Pehle apna email daalein."; 
    msg.className = "text-xs text-center mt-4 text-red-500";
    return; 
  }
  
  msg.textContent = "OTP bhej rahe hain...";
  msg.className = "text-xs text-center mt-4 text-slate-500";
  try {
    await apiCall('/send_otp.php', { email });
    currentEmail = email;
    document.getElementById('sentToEmail').textContent = email;
    showOnly(authStepOtp);
  } catch (err) { 
    msg.textContent = err.message; 
    msg.className = "text-xs text-center mt-4 text-red-500";
  }
}
document.getElementById('sendOtpBtn').addEventListener('click', sendOtp);
document.getElementById('resendOtpBtn').addEventListener('click', sendOtp);

// 2. Verify OTP logic
document.getElementById('verifyOtpBtn').addEventListener('click', async ()=>{
  const otp = document.getElementById('authOtpInput').value.trim();
  const msg = document.getElementById('otpMsg');
  if(!otp){ msg.textContent = "OTP daalein."; msg.className = "text-xs text-center mt-3 text-red-500"; return; }
  try {
    const data = await apiCall('/verify_otp.php', { otp });
    if(data.registered){ enterDashboard(data.name, data.email); } 
    else { showOnly(authStepName); }
  } catch (err) { msg.textContent = err.message; msg.className = "text-xs text-center mt-3 text-red-500"; }
});

// 3. Complete Name Registration
document.getElementById('saveNameBtn').addEventListener('click', async ()=>{
  const name = document.getElementById('authNameInput').value.trim();
  if(!name){ return; }
  try {
    const data = await apiCall('/complete_registration.php', { name });
    enterDashboard(data.name, data.email);
  } catch (err) { showToast(err.message); }
});

function enterDashboard(name, email){
  authView.classList.add('hidden');
  dashboardView.classList.remove('hidden');
  headerName.textContent = name.split(' ')[0];
  avatarInitial.textContent = name.charAt(0).toUpperCase();
  menuName.textContent = name;
  menuEmail.textContent = email;
  dashName.textContent = name.split(' ')[0];
}

// 4. Logout Action
document.getElementById('logoutBtn').addEventListener('click', async ()=>{
  try { await apiCall('/logout.php', {}); } catch(e){}
  location.reload();
});

// Auto Check Session Client Side (Bypassed if server sets view)
(async function checkExistingSession(){
  if(false) return;
  try {
    const res = await fetch(API_BASE + '/check_session.php', { credentials: 'same-origin' });
    const data = await res.json();
    if(data.registered){ enterDashboard(data.name, data.email); } 
    else if(data.otpVerified){ showOnly(authStepName); }
  } catch (err) { console.warn('Session dynamic fetch skip.'); }
})();

// Original dropdown UI logic
const menuBtn = document.getElementById('menuBtn');
const menuDropdown = document.getElementById('menuDropdown');
menuBtn.addEventListener('click', (e)=>{ e.stopPropagation(); menuDropdown.classList.toggle('hidden'); });
document.addEventListener('click', ()=> menuDropdown.classList.add('hidden'));

document.querySelectorAll('.nav-card').forEach(btn=>{
  btn.addEventListener('click', ()=>{
    if(btn.dataset.target === 'predictorView'){
      dashboardView.classList.add('hidden');
      document.getElementById('predictorView').classList.remove('hidden');
    } else { showToast('🚧 Coming Soon!'); }
  });
});
document.getElementById('backToDashboard').addEventListener('click', ()=>{
  document.getElementById('predictorView').classList.add('hidden');
  dashboardView.classList.remove('hidden');
});
</script>
</body>
</html>