<?php
// views/partials/auth-modals.php

require_once __DIR__ . '/../../src/Helpers/Language.php';
?>

<!-- Login Modal -->
<div id="loginModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in">
  <div class="bg-white rounded-3xl max-w-md w-full p-6 shadow-2xl relative border border-gray-100" dir="<?= Language::dir() ?>">
    <button onclick="closeModal('loginModal')" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 font-bold text-xl">
      &times;
    </button>
    <div class="text-center mb-6">
      <div class="w-12 h-12 rounded-2xl bg-teal-900 text-amber-400 font-black text-2xl flex items-center justify-center mx-auto mb-2">
        ف
      </div>
      <h2 class="text-xl font-extrabold text-gray-900"><?= Language::t('login') ?></h2>
      <p class="text-xs text-gray-500 mt-1">Access your academy courses and portal</p>
    </div>

    <form onsubmit="handleLoginSubmit(event)" class="space-y-4">
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('email') ?></label>
        <input type="email" id="loginEmail" required class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700 focus:border-transparent" placeholder="student@alfaruq.edu">
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('password') ?></label>
        <input type="password" id="loginPassword" required class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700 focus:border-transparent" placeholder="••••••••">
      </div>
      <div id="loginAlert" class="hidden p-3 rounded-xl text-xs font-bold bg-red-50 text-red-700 border border-red-200"></div>
      <button type="submit" class="w-full bg-teal-800 hover:bg-teal-900 text-white font-extrabold py-3 rounded-xl text-sm shadow-md transition-all">
        <?= Language::t('login') ?>
      </button>
    </form>
    <p class="text-center text-xs text-gray-500 mt-4">
      Don't have an account? <button onclick="closeModal('loginModal'); openModal('register')" class="text-teal-700 font-bold underline">Register</button>
    </p>
  </div>
</div>

<!-- Register Modal -->
<div id="registerModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in">
  <div class="bg-white rounded-3xl max-w-md w-full p-6 shadow-2xl relative border border-gray-100" dir="<?= Language::dir() ?>">
    <button onclick="closeModal('registerModal')" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 font-bold text-xl">
      &times;
    </button>
    <div class="text-center mb-6">
      <div class="w-12 h-12 rounded-2xl bg-amber-500 text-teal-950 font-black text-2xl flex items-center justify-center mx-auto mb-2">
        ف
      </div>
      <h2 class="text-xl font-extrabold text-gray-900"><?= Language::t('register') ?></h2>
      <p class="text-xs text-gray-500 mt-1">Create your online student account</p>
    </div>

    <form onsubmit="handleRegisterSubmit(event)" class="space-y-3">
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('fullName') ?></label>
        <input type="text" id="regName" required class="w-full px-4 py-2 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700" placeholder="e.g. Ibrahim Abubakar">
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('email') ?></label>
        <input type="email" id="regEmail" required class="w-full px-4 py-2 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700" placeholder="ibrahim@example.com">
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('phoneNumber') ?></label>
        <input type="text" id="regPhone" required class="w-full px-4 py-2 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700" placeholder="+234 800 000 0000">
      </div>
      <div>
        <label class="block text-xs font-bold text-gray-700 mb-1"><?= Language::t('password') ?></label>
        <input type="password" id="regPassword" required class="w-full px-4 py-2 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-teal-700" placeholder="••••••••">
      </div>
      <div id="registerAlert" class="hidden p-3 rounded-xl text-xs font-bold bg-red-50 text-red-700 border border-red-200"></div>
      <button type="submit" class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-teal-950 font-extrabold py-3 rounded-xl text-sm shadow-md transition-all">
        <?= Language::t('register') ?>
      </button>
    </form>
    <p class="text-center text-xs text-gray-500 mt-3">
      Already registered? <button onclick="closeModal('registerModal'); openModal('login')" class="text-teal-700 font-bold underline">Login</button>
    </p>
  </div>
</div>
