@extends('layouts.wizard')
@section('title', 'Setup your company')

@section('content')
    <div class="wizard">
        <aside class="wizard__aside">
            <h1 class="wizard__title">Set up your business</h1>
            <p class="wizard__subtitle">
                A one-time setup. Enter details carefully — this drives your invoicing,
                accounting, tax and reporting.
            </p>

            <ol class="wizard__steps" data-wizard-steps>
                @foreach(config('decent.wizard.steps') as $index => $step)
                    <li class="wizard__step" data-step="{{ $index + 1 }}">
                        <span class="wizard__step-index">{{ $index + 1 }}</span>
                        <span class="wizard__step-label">{{ $step['label'] }}</span>
                    </li>
                @endforeach
            </ol>

            <div class="wizard__badge">
                {!! icon('shield-check') !!}
                <span>All data stays on your tenant. Idempotent, audited, encrypted at rest.</span>
            </div>
        </aside>

        <main class="wizard__main">
            <form method="POST" action="{{ route('setup.store') }}"
                  enctype="multipart/form-data" class="wizard__form"
                  data-wizard-form novalidate>
                @csrf

                {{-- Step 1: Company identity --}}
                <section class="wizard__panel" data-panel="1">
                    <header class="wizard__panel-header">
                        <h2>Company identity</h2>
                        <p>Legal business details that appear on invoices and reports.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-form.input name="name" label="Business name" required
                                placeholder="Decent Traders" autocomplete="organization" />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="legal_name" label="Legal name (as per registration)"
                                placeholder="Decent Traders Pvt. Ltd." />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="owner_name" label="Owner / Proprietor name" required />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="gstin" label="GSTIN"
                                placeholder="27ABCDE1234F1Z5"
                                help="15-character GSTIN. Leave blank if unregistered." />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="pan" label="PAN"
                                placeholder="ABCDE1234F" />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="phone" label="Business phone" required
                                type="tel" autocomplete="tel"
                                placeholder="+91 98XXX XXXXX" />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="email" label="Business email" required
                                type="email" autocomplete="email"
                                placeholder="hello@company.com" />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="website" label="Website (optional)"
                                type="url" placeholder="https://" />
                        </div>
                    </div>
                </section>

                {{-- Step 2: Address --}}
                <section class="wizard__panel" data-panel="2" hidden>
                    <header class="wizard__panel-header">
                        <h2>Registered address</h2>
                        <p>Used on invoices, GST returns and delivery challans.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-12">
                            <x-form.textarea name="address_line1" label="Address" rows="2" required />
                        </div>
                        <div class="col-md-4">
                            <x-form.input name="city" label="City" required />
                        </div>
                        <div class="col-md-4">
                            <x-form.input name="state" label="State" required />
                        </div>
                        <div class="col-md-2">
                            <x-form.input name="pincode" label="PIN" required />
                        </div>
                        <div class="col-md-2">
                            <x-form.input name="country" label="Country"
                                :value="old('country', 'India')" required />
                        </div>
                    </div>
                </section>

                {{-- Step 3: Branding --}}
                <section class="wizard__panel" data-panel="3" hidden>
                    <header class="wizard__panel-header">
                        <h2>Branding</h2>
                        <p>Upload your logo and pick a brand color for invoices and dashboards.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-form.file name="logo" label="Company logo"
                                accept="image/png,image/jpeg,image/svg+xml"
                                help="PNG/JPG/SVG, up to 2 MB. Square recommended." />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="brand_color" label="Brand color"
                                type="color" :value="old('brand_color', '#2563EB')" />
                        </div>
                    </div>
                </section>

                {{-- Step 4: Preferences --}}
                <section class="wizard__panel" data-panel="4" hidden>
                    <header class="wizard__panel-header">
                        <h2>Regional preferences</h2>
                        <p>Currency, timezone and language for the whole tenant.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-md-4">
                            <x-form.select name="currency" label="Currency" required
                                :options="collect(config('decent.currencies', ['INR','USD','EUR','GBP','AED']))->mapWithKeys(fn($c)=>[$c=>$c])->all()"
                                :value="old('currency', config('decent.defaults.currency','INR'))" />
                        </div>
                        <div class="col-md-4">
                            <x-form.select name="timezone" label="Timezone" required
                                :options="collect($timezones)->mapWithKeys(fn($t)=>[$t=>$t])->all()"
                                :value="old('timezone', config('decent.defaults.timezone','Asia/Kolkata'))" />
                        </div>
                        <div class="col-md-4">
                            <x-form.select name="locale" label="Language" required
                                :options="$locales"
                                :value="old('locale', config('decent.defaults.locale','en'))" />
                        </div>
                    </div>
                </section>

                {{-- Step 5: Financial --}}
                <section class="wizard__panel" data-panel="5" hidden>
                    <header class="wizard__panel-header">
                        <h2>Financial year & taxes</h2>
                        <p>Sets the fiscal year and default tax rate on new items.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-md-4">
                            <x-form.select name="financial_year_start_month" label="Financial year starts"
                                :options="$months"
                                :value="old('financial_year_start_month', config('decent.defaults.financial_year_start_month', 4))"
                                required />
                        </div>
                        <div class="col-md-4">
                            <x-form.input name="invoice_prefix" label="Invoice prefix"
                                :value="old('invoice_prefix', config('decent.defaults.invoice_prefix','INV'))"
                                required maxlength="8" />
                        </div>
                        <div class="col-md-4">
                            <x-form.input name="purchase_prefix" label="Purchase prefix"
                                :value="old('purchase_prefix', config('decent.defaults.purchase_prefix','PO'))"
                                required maxlength="8" />
                        </div>
                        <div class="col-md-4">
                            <x-form.input name="default_tax_rate" label="Default tax rate (%)"
                                type="number" step="0.01" min="0" max="50"
                                :value="old('default_tax_rate', config('decent.defaults.tax_rate', 18.00))" />
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <x-form.checkbox name="tax_inclusive" label="Prices are tax-inclusive by default"
                                :checked="(bool) old('tax_inclusive', false)" />
                        </div>
                        <div class="col-md-4">
                            <x-form.select name="default_printer" label="Default printer size"
                                :options="['a4' => 'A4', 'a5' => 'A5', 'thermal_58' => '58mm Thermal', 'thermal_80' => '80mm Thermal']"
                                :value="old('default_printer','a4')" required />
                        </div>
                    </div>
                </section>

                {{-- Step 6: Admin account --}}
                <section class="wizard__panel" data-panel="6" hidden>
                    <header class="wizard__panel-header">
                        <h2>Create admin account</h2>
                        <p>Your first login. You can invite team members later.</p>
                    </header>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-form.input name="admin_name" label="Full name" required
                                autocomplete="name" />
                        </div>
                        <div class="col-md-6">
                            <x-form.input name="admin_email" label="Email" type="email" required
                                autocomplete="email" />
                        </div>
                        <div class="col-md-6">
                            <x-form.password name="admin_password" label="Password"
                                autocomplete="new-password"
                                :required="true"
                                :show-strength="true"
                                :help="'Minimum ' . config('decent.security.password_min',8) . ' characters. Mix upper, lower, number and symbol.'" />
                        </div>
                        <div class="col-md-6">
                            <x-form.password name="admin_password_confirmation" label="Confirm password"
                                autocomplete="new-password"
                                :required="true"
                                :show-toggle="true" />
                        </div>
                        <div class="col-12">
                            <x-form.checkbox name="accept_terms" label="I agree to the Terms of Service and Privacy Policy." required />
                        </div>
                    </div>
                </section>

                <footer class="wizard__actions">
                    <button type="button" class="btn btn-ghost" data-wizard-back disabled>
                        {!! icon('arrow-left') !!} Back
                    </button>
                    <div class="wizard__progress">
                        <span data-wizard-current>1</span> / <span data-wizard-total>{{ count(config('decent.wizard.steps')) }}</span>
                    </div>
                    <button type="button" class="btn btn-primary" data-wizard-next>
                        Continue {!! icon('arrow-right') !!}
                    </button>
                    <button type="submit" class="btn btn-primary" data-wizard-submit hidden>
                        {!! icon('check2-circle') !!} Complete setup
                    </button>
                </footer>
            </form>
        </main>
    </div>
@endsection