@extends('layouts.auth')

@section('content')
<div class="auth-page">
  <div class="wave-decoration"></div>
  <div class="auth-card" style="max-width:460px;">
    <h1 class="auth-title">Sign up</h1>
    <div class="auth-title-underline"></div>

    @if($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">@foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
      </div>
    @endif

    <form method="POST" action="{{ route('signup') }}" id="signupForm">
      @csrf
      <input type="hidden" name="avatar" id="avatarData">
      
      <div class="avatar-upload-wrapper">
        <div class="avatar-preview" id="avatarPreview" onclick="document.getElementById('avatarInput').click()">
          <i class="bi bi-person-plus"></i>
        </div>
        <div class="avatar-upload-hint">Tap to upload profile photo (optional)</div>
        <input type="file" id="avatarInput" accept="image/*" style="display:none;" onchange="handleAvatar(event)">
      </div>

      <div class="form-group">
        <label class="form-label">Full Name</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-person input-icon"></i>
          <input type="text" name="name" class="form-control" placeholder="Create an ID" required>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">User ID</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-person-badge input-icon"></i>
          <input type="text" name="user_id" class="form-control" placeholder="Create an ID" required>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Password</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-lock input-icon"></i>
          <input type="password" name="password" id="password" class="form-control" required>
          <span class="password-toggle" onclick="togglePassword('password', this)"><i class="bi bi-eye"></i></span>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Confirm Password</label>
        <div class="input-icon-wrapper">
          <i class="bi bi-lock-fill input-icon"></i>
          <input type="password" name="password_confirmation" id="confirmPassword" class="form-control" required>
        </div>
      </div>

      <button type="submit" class="btn-primary-custom">Create Account</button>
    </form>
    <div class="auth-footer">Already have an account? <a href="{{ route('login') }}">Sign in</a></div>
  </div>
</div>
@endsection

@section('scripts')
<script>
function handleAvatar(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = ev => {
    document.getElementById('avatarData').value = ev.target.result;
    document.getElementById('avatarPreview').style.backgroundImage = `url(${ev.target.result})`;
    document.getElementById('avatarPreview').innerHTML = '';
  };
  reader.readAsDataURL(file);
}
</script>
@endsection