@extends('layouts.setup')
@section('title','First Run Setup')
@section('content')
@php
    $errorKeys = $errors->keys();
    $startStep = collect($errorKeys)->contains(fn($key) => str_contains($key, 'categor')) ? 2 : 1;
@endphp
<div class="setup-shell setup-wizard-shell" data-setup-wizard data-start-step="{{ $startStep }}">
    <div class="setup-intro"><div><span class="step-kicker">Owner setup</span><h1>Welcome to MauzoTrack</h1><p>Complete these three short steps before opening the live shop dashboard.</p></div></div>
    <nav class="setup-progress" aria-label="Setup progress">
        @foreach(['Shop & Owner','Categories','Final Check'] as $label)<button type="button" data-setup-step-target="{{ $loop->iteration }}" @class(['active'=>$loop->first])><b>{{ $loop->iteration }}</b><span>{{ $label }}</span></button>@if(!$loop->last)<i></i>@endif @endforeach
    </nav>
    @if($errors->any())<div class="error-box"><strong>Please review the highlighted information.</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
    <form method="POST" action="{{ route('setup.store') }}" data-unsaved-warning data-submit-once>@csrf
        <section class="card settings-section setup-step setup-wizard-panel" data-setup-step="1">
            <div class="setup-step-heading"><span>1</span><div><h2>Shop & Owner</h2><p>Set the shop identity and secure the Owner account.</p></div></div>
            <div class="form-grid two-col">
                <div class="form-group"><label>Shop Name</label><input name="shop_name" value="{{ old('shop_name',$settings['shop_name']) }}" required></div>
                <div class="form-group"><label>Owner Name</label><input name="owner_name" value="{{ old('owner_name',auth()->user()->fullName()) }}" required></div>
                <div class="form-group"><label>Owner Username</label><input name="owner_username" value="{{ old('owner_username',auth()->user()->username ?: 'owner') }}" required autocomplete="off"><small>Used across MauzoTrack and accepted on sign in.</small></div>
                <div class="form-group"><label>Owner Email</label><input type="email" name="owner_email" value="{{ old('owner_email',auth()->user()->email) }}" required autocomplete="email"><small>Use an address you can access for verification and recovery.</small></div>
                <div class="form-group"><label>Language</label><select name="language"><option value="en" @selected(old('language','en')==='en')>English</option><option value="sw" @selected(old('language')==='sw')>Kiswahili Assist</option></select></div>
                <div class="form-group"><label>New Owner Password</label><input type="password" name="new_password" autocomplete="new-password" minlength="8" required><small>At least 8 characters.</small></div>
                <div class="form-group"><label>Confirm Password</label><input type="password" name="new_password_confirmation" autocomplete="new-password" minlength="8" required></div>
            </div>
            <div class="setup-wizard-actions"><span></span><button class="btn" type="button" data-setup-next>Continue to Categories</button></div>
        </section>

        <section class="card settings-section setup-step setup-wizard-panel" data-setup-step="2" hidden>
            <div class="setup-step-heading"><span>2</span><div><h2>Categories <small>(Optional)</small></h2><p>Add one category per line. They will be available immediately after setup.</p></div></div>
            <div class="form-grid two-col">
                <div class="form-group"><label>Product Categories</label><textarea name="product_categories_text" rows="7" maxlength="4000" placeholder="Filters&#10;Lubricants & Fluids&#10;Electrical Parts">{{ old('product_categories_text') }}</textarea><small>Maximum 30 unique categories.</small></div>
                <div class="form-group"><label>Expense Categories</label><textarea name="expense_categories_text" rows="7" maxlength="4000" placeholder="Transport&#10;Utilities&#10;Shop Supplies">{{ old('expense_categories_text') }}</textarea><small>Maximum 30 unique categories.</small></div>
            </div>
            <div class="setup-wizard-actions"><button class="btn btn-secondary" type="button" data-setup-back>Previous</button><button class="btn" type="button" data-setup-next>Continue to Final Check</button></div>
        </section>

        <section class="card settings-section setup-step setup-ready-step setup-wizard-panel" data-setup-step="3" hidden>
            <div class="setup-step-heading"><span>3</span><div><h2>Ready to Start</h2><p>Review the defaults, then save setup and continue to verification.</p></div></div>
            <div class="setup-ready-list"><span>✓ Piece and Carton units prepared</span><span>✓ Cash payment prepared</span><span>✓ Offline sales enabled</span></div>
            <div class="setup-final-note"><strong>After this step</strong><p>Production will wait for email verification. During local development, the verification screen includes a controlled “Continue to Dashboard” option.</p></div>
            <div class="setup-wizard-actions"><button class="btn btn-secondary" type="button" data-setup-back>Previous</button><button class="btn btn-success" type="submit">Save Setup & Continue</button></div>
        </section>
    </form>
</div>
<script src="{{ asset('js/setup-wizard.js') }}?v=10037" defer></script>
@endsection