@extends('layouts.inventory-auth')

@section('title', 'Set up your business')

@section('content')
    <div class="auth-card">
        <div style="display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background: var(--accent-light); color: var(--accent); margin-bottom: 1rem;">
            <i class="fas fa-store" style="font-size: 1.5rem;"></i>
        </div>

        <h1>Welcome to Tenseal Inventory, {{ explode(' ', $name)[0] }} 👋</h1>
        <p class="auth-subtitle">
            You're signed in with <strong>{{ $email }}</strong>. Just one more step —
            tell us about your business and we'll spin up your inventory dashboard.
        </p>

        @if (session('error'))
            <div class="auth-alert auth-alert-danger">
                {{ session('error') }}
            </div>
        @endif

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

            <div class="form-group">
                <label for="business_name">Business Name <span style="color: var(--danger);">*</span></label>
                <input
                    type="text"
                    id="business_name"
                    name="business_name"
                    class="form-input {{ $errors->has('business_name') ? 'is-invalid' : '' }}"
                    placeholder="e.g. Bright Stores Ltd"
                    value="{{ old('business_name') }}"
                    required
                    autofocus
                    maxlength="255"
                >
                @error('business_name')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="business_phone">Business Phone <span style="color: var(--text-muted); font-weight: 400;">(optional)</span></label>
                <input
                    type="tel"
                    id="business_phone"
                    name="business_phone"
                    class="form-input {{ $errors->has('business_phone') ? 'is-invalid' : '' }}"
                    placeholder="e.g. +234 800 000 0000"
                    value="{{ old('business_phone') }}"
                    maxlength="30"
                >
                @error('business_phone')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn-auth" style="margin-top: 0.5rem;">
                <span class="btn-spinner"></span>
                <span class="btn-text">Create my inventory <i class="fas fa-arrow-right" style="margin-left: 0.25rem;"></i></span>
                <span class="btn-loading-text">Setting up...</span>
            </button>
        </form>

        <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 1rem; text-align: center;">
            You can update these details later from your business settings.
        </p>
    </div>

    <div class="auth-footer">
        Wrong account?
        <form method="POST" action="{{ route('inventory.logout') }}" style="display:inline;">
            @csrf
            <button type="submit" style="background:none; border:none; padding:0; color: var(--accent); font-weight: 600; cursor: pointer; font-family: inherit; font-size: inherit;">Sign out</button>
        </form>
    </div>
@endsection