@extends('layouts.app')
@section('content')
@php($activeMode = old('auth_mode', $mode ?? 'login'))
<section class="max-w-[520px] mx-auto">
  <div class="bg-white border border-[#aeb6bf] rounded-lg p-8">
    <div class="text-center mb-6">
      <h1 class="text-3xl font-bold text-[#041627]">Author Portal</h1>
      <p class="text-sm text-[#44474c] mt-2">Submit and manage your academic manuscripts.</p>
    </div>

    <div class="flex border-b border-[#d7dadc] mb-6">
      <button type="button" id="tab-login" class="flex-1 py-3 text-sm font-semibold border-b-2 {{ $activeMode === 'login' ? 'border-[#041627] text-[#041627]' : 'border-transparent text-[#74777d]' }}">Login</button>
      <button type="button" id="tab-register" class="flex-1 py-3 text-sm font-semibold border-b-2 {{ $activeMode === 'register' ? 'border-[#041627] text-[#041627]' : 'border-transparent text-[#74777d]' }}">Register</button>
    </div>

    <div id="pane-login" class="{{ $activeMode === 'login' ? '' : 'hidden' }}">
      <form method="POST" action="{{ route('login') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="auth_mode" value="login">
        <div>
          <label for="login_email" class="text-sm font-semibold">Email</label>
          <input id="login_email" name="email" type="email" value="{{ old('email') }}" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('email')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <div>
          <label for="login_password" class="text-sm font-semibold">Password</label>
          <input id="login_password" name="password" type="password" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('password')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <div class="flex items-center justify-between text-sm">
          <label class="inline-flex items-center gap-2"><input type="checkbox" name="remember" class="rounded border-[#aeb6bf]"> Remember me</label>
          @if (Route::has('password.request'))
          <a href="{{ route('password.request') }}" class="text-[#3b6090] hover:underline">Forgot password?</a>
          @endif
        </div>
        <button class="w-full bg-[#041627] text-white py-2 rounded font-semibold">Sign In</button>
      </form>
      <a href="{{ route('auth.google.redirect') }}" class="mt-4 inline-flex w-full justify-center rounded border border-[#aeb6bf] px-4 py-2 text-sm font-semibold text-[#041627] hover:bg-[#f1f4f6]">Continue with Google</a>
    </div>

    <div id="pane-register" class="{{ $activeMode === 'register' ? '' : 'hidden' }}">
      <form method="POST" action="{{ route('register') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="auth_mode" value="register">
        <div>
          <label for="reg_name" class="text-sm font-semibold">Name</label>
          <input id="reg_name" name="name" type="text" value="{{ old('name') }}" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('name')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <div>
          <label for="reg_email" class="text-sm font-semibold">Email</label>
          <input id="reg_email" name="email" type="email" value="{{ old('email') }}" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('email')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <div>
          <label for="reg_password" class="text-sm font-semibold">Password</label>
          <input id="reg_password" name="password" type="password" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('password')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <div>
          <label for="reg_password_confirmation" class="text-sm font-semibold">Confirm Password</label>
          <input id="reg_password_confirmation" name="password_confirmation" type="password" required class="mt-1 w-full border border-[#aeb6bf] p-2 bg-[#f7fafc]">
          @error('password_confirmation')<p class="text-xs text-[#ba1a1a] mt-1">{{ $message }}</p>@enderror
        </div>
        <button class="w-full bg-[#041627] text-white py-2 rounded font-semibold">Create Account</button>
      </form>
      <a href="{{ route('auth.google.redirect') }}" class="mt-4 inline-flex w-full justify-center rounded border border-[#aeb6bf] px-4 py-2 text-sm font-semibold text-[#041627] hover:bg-[#f1f4f6]">Sign up with Google</a>
    </div>
  </div>
</section>

<script>
(() => {
  const loginTab = document.getElementById('tab-login');
  const registerTab = document.getElementById('tab-register');
  const loginPane = document.getElementById('pane-login');
  const registerPane = document.getElementById('pane-register');
  if (!loginTab || !registerTab || !loginPane || !registerPane) return;

  const setMode = (mode) => {
    const isLogin = mode === 'login';
    loginPane.classList.toggle('hidden', !isLogin);
    registerPane.classList.toggle('hidden', isLogin);
    loginTab.className = `flex-1 py-3 text-sm font-semibold border-b-2 ${isLogin ? 'border-[#041627] text-[#041627]' : 'border-transparent text-[#74777d]'}`;
    registerTab.className = `flex-1 py-3 text-sm font-semibold border-b-2 ${isLogin ? 'border-transparent text-[#74777d]' : 'border-[#041627] text-[#041627]'}`;
  };

  loginTab.addEventListener('click', () => setMode('login'));
  registerTab.addEventListener('click', () => setMode('register'));
})();
</script>
@endsection