@extends('layouts.inventory-auth')

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

@section('content')
    <div class="auth-card">
        <h1>Create your account</h1>
        <p class="auth-subtitle">Set up your business inventory in minutes</p>

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

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

            <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
                    >
                    @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') }}"
                        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'), 'Tenseal account'))
                <div class="auth-alert auth-alert-info" style="margin-bottom: 1rem; background: rgba(16, 191, 255, 0.1); border: 1px solid rgba(16, 191, 255, 0.3); color: #10BFFF;">
                    <i class="fas fa-info-circle"></i> {{ $errors->first('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>

        @include('partials.google-signin', ['label' => 'or sign up with'])
    </div>

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