@extends('layouts.auth')

@section('title', 'Create Account')

@section('content')
    <div class="auth-card">
        <h1>Create your account</h1>
        <p class="auth-subtitle">Start securing your transactions with Tenseal</p>

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div class="form-grid-2">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        class="form-input {{ $errors->has('name') ? 'is-invalid' : '' }}"
                        placeholder="John Doe"
                        value="{{ old('name') }}"
                        required
                        autofocus
                    >
                    @error('name')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="form-input {{ $errors->has('email') ? 'is-invalid' : '' }}"
                        placeholder="you@example.com"
                        value="{{ old('email', request('invite_email')) }}"
                        required
                    >
                    @error('email')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="form-grid-2">
                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="password-wrapper">
                        <input
                            type="password"
                            id="password"
                            name="password"
                            class="form-input {{ $errors->has('password') ? 'is-invalid' : '' }}"
                            placeholder="Min. 8 characters"
                            required
                        >
                        <button type="button" class="password-toggle" tabindex="-1" aria-label="Toggle password visibility">
                            <svg class="eye-open" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-closed" viewBox="0 0 24 24" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    @error('password')
                        <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="password_confirmation">Confirm Password</label>
                    <div class="password-wrapper">
                        <input
                            type="password"
                            id="password_confirmation"
                            name="password_confirmation"
                            class="form-input"
                            placeholder="Confirm password"
                            required
                        >
                        <button type="button" class="password-toggle" tabindex="-1" aria-label="Toggle password visibility">
                            <svg class="eye-open" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-closed" viewBox="0 0 24 24" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="form-check">
                    <input type="checkbox" id="terms" name="terms" required {{ old('terms') ? 'checked' : '' }}>
                    <label for="terms">I agree to the <a href="https://tenseal.co/terms-of-service" class="form-link" target="_blank">Terms</a> and <a href="https://tenseal.co/privacy-policy" class="form-link" target="_blank">Privacy Policy</a></label>
                </div>
                @error('terms')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            @if ($errors->has('password') && str_contains($errors->first('password'), 'already registered'))
                <div class="auth-alert" style="margin-bottom: 1rem; background: rgba(16, 191, 255, 0.1); border: 1px solid rgba(16, 191, 255, 0.3); color: #10BFFF; padding: 0.875rem 1rem; border-radius: 0.5rem; font-size: 0.85rem;">
                    <i class="fas fa-info-circle" style="margin-right: 0.5rem;"></i>
                    This email is already registered on Tenseal (e.g. Inventory). Enter your existing Tenseal password to link your escrow account. No need to confirm password.
                </div>
            @elseif ($errors->any())
                <div class="auth-alert auth-alert-danger" style="margin-bottom: 1rem;">
                    {{ $errors->first() }}
                </div>
            @endif

            <button type="submit" class="btn-auth">
                <span class="btn-spinner"></span>
                <span class="btn-text">Create Account</span>
                <span class="btn-loading-text">Creating account...</span>
            </button>
        </form>

        <div class="auth-divider">or sign up with</div>

        <a href="{{ route('auth.google') }}" class="btn-social">
            <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
            Sign up with Google
        </a>
    </div>

    <div class="auth-footer">
        Already have an account? <a href="{{ route('login') }}">Sign in</a>
    </div>
@endsection