@php
    $sections = [
        ['id' => 'company',       'label' => __('Company Profile'),      'icon' => 'building-office'],
        ['id' => 'branding',      'label' => __('Branding'),             'icon' => 'swatch'],
        ['id' => 'documents',     'label' => __('Documents & Defaults'), 'icon' => 'document-text'],
        ['id' => 'numbering',     'label' => __('Numbering & Currency'), 'icon' => 'banknotes'],
        ['id' => 'letters',       'label' => __('Letters & Letterhead'), 'icon' => 'document-text'],
        ['id' => 'financial',     'label' => __('Financial Settings'),   'icon' => 'currency-dollar'],
        ['id' => 'profit',        'label' => __('Profit & Commission'),  'icon' => 'calculator'],
        ['id' => 'notifications', 'label' => __('Notifications'),        'icon' => 'bell'],
    ];

    $shortcuts = [
        ['href' => route('settings.banking'),      'label' => __('Banking & Currencies'), 'desc' => __('Bank details and rates per currency.'), 'icon' => 'building-office'],
        ['href' => route('taxes.index'),           'label' => __('Taxes'),           'desc' => __('Manage tax rates and rules.'),       'icon' => 'receipt-percent'],
        ['href' => route('payment-methods.index'), 'label' => __('Payment Methods'), 'desc' => __('Configure how clients pay you.'),     'icon' => 'credit-card'],
        ['href' => route('integrations.index'),    'label' => __('Integrations'),    'desc' => __('Connect third-party services.'),      'icon' => 'puzzle-piece'],
        ['href' => route('email-templates.index'), 'label' => __('Email Templates'), 'desc' => __('Customize the emails clients get.'),  'icon' => 'envelope'],
        ['href' => route('custom-fields.index'),   'label' => __('Custom Fields'),   'desc' => __('Capture extra document details.'),    'icon' => 'queue-list'],
        ['href' => route('activity.index'),        'label' => __('Audit Logs'),      'desc' => __('View changes and activity.'),         'icon' => 'clock'],
    ];
@endphp

<div
    class="px-4 py-8 sm:px-6 lg:px-8"
    x-data="{
        section: 'company',
        init() {
            const ids = @js(collect($sections)->pluck('id'));
            const obs = new IntersectionObserver((entries) => {
                entries.forEach(e => { if (e.isIntersecting) this.section = e.target.id });
            }, { rootMargin: '-25% 0px -65% 0px', threshold: 0 });
            this.$nextTick(() => ids.forEach(id => {
                const el = document.getElementById(id);
                if (el) obs.observe(el);
            }));
        }
    }"
>
    <div class="mx-auto max-w-7xl">
        <nav class="mb-4 flex items-center gap-1.5 text-sm text-slate-400">
            <span>{{ __('Settings') }}</span>
            <x-icon name="chevron-down" class="h-3.5 w-3.5 -rotate-90" />
            <span class="font-medium text-slate-600">{{ __('Workspace Settings') }}</span>
        </nav>

        <form wire:submit="save">
            <!-- Sticky header -->
            <div class="sticky top-0 z-10 -mx-4 mb-6 flex items-center justify-between gap-4 border-b border-slate-100 bg-slate-50/80 px-4 py-4 backdrop-blur sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
                <div>
                    <h1 class="text-xl font-bold text-slate-900">{{ __('Workspace Settings') }}</h1>
                    <p class="mt-0.5 text-sm text-slate-500">{{ __('Manage your company, preferences and defaults across the workspace.') }}</p>
                </div>
                <div class="flex shrink-0 items-center gap-4">
                    <x-action-message class="text-sm font-medium text-emerald-600" on="saved">
                        {{ __('Saved.') }}
                    </x-action-message>
                    <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                        {{ __('Save Changes') }}
                    </x-button>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-8 lg:grid-cols-[240px_minmax(0,1fr)]">
                <!-- Section nav -->
                <aside class="hidden lg:block">
                    <div class="sticky top-28 space-y-4">
                        <nav class="space-y-1">
                            @foreach ($sections as $s)
                                <a
                                    href="#{{ $s['id'] }}"
                                    @click="section = '{{ $s['id'] }}'"
                                    :class="section === '{{ $s['id'] }}' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'"
                                    class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition"
                                >
                                    <x-icon :name="$s['icon']" class="h-5 w-5 shrink-0" />
                                    <span>{{ $s['label'] }}</span>
                                </a>
                            @endforeach
                        </nav>

                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <div class="flex items-center gap-2 text-sm font-semibold text-slate-700">
                                <x-icon name="sparkles" class="h-4 w-4 text-indigo-500" />
                                {{ __('Need help?') }}
                            </div>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Visit our Help Center or contact support for assistance.') }}</p>
                        </div>
                    </div>
                </aside>

                <!-- Section content -->
                <div class="space-y-6 scroll-mt-28 [&>section]:scroll-mt-28">
                    <!-- Company Profile -->
                    <section id="company">
                        <x-card class="p-6 sm:p-8">
                            <div class="flex flex-col gap-6 border-b border-slate-100 pb-6 sm:flex-row sm:items-start sm:justify-between">
                                <div>
                                    <h3 class="text-base font-semibold text-slate-900">{{ __('Company Profile') }}</h3>
                                    <p class="mt-0.5 text-sm text-slate-500">{{ __('Your company information as it appears on documents.') }}</p>
                                </div>
                                <div class="shrink-0">
                                    <x-label value="{{ __('Logo') }}" />
                                    <div class="mt-1 flex items-center gap-3">
                                        <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                                            @if ($logo)
                                                <img src="{{ $logo->temporaryUrl() }}" alt="" class="h-6 w-6 rounded object-contain" />
                                            @elseif ($logo_path)
                                                <img src="{{ \App\Models\WorkspaceSetting::srcForLogo($logo_path) }}" alt="" class="h-6 w-6 rounded object-contain" />
                                            @else
                                                <x-icon name="photo" class="h-5 w-5 text-slate-400" />
                                            @endif
                                            <span>{{ $company_name ?: __('Upload Logo') }}</span>
                                            <input type="file" wire:model="logo" accept="image/*" class="hidden" />
                                        </label>
                                    </div>
                                    <p class="mt-1.5 text-xs text-slate-400">{{ __('Recommended: PNG, JPG (400x400px)') }}</p>
                                    <x-upload-progress target="logo" class="mt-2" />
                                </div>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
                                <div>
                                    <x-label for="company_name" value="{{ __('Company Name') }}" />
                                    <x-input id="company_name" type="text" class="mt-1 block w-full" wire:model="company_name" />
                                    <x-input-error for="company_name" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="email" value="{{ __('Email') }}" />
                                    <x-input id="email" type="email" class="mt-1 block w-full" wire:model="email" />
                                    <x-input-error for="email" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="phone" value="{{ __('Phone') }}" />
                                    <x-input id="phone" type="text" class="mt-1 block w-full" wire:model="phone" />
                                    <x-input-error for="phone" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="website" value="{{ __('Website') }}" />
                                    <x-input id="website" type="text" class="mt-1 block w-full" wire:model="website" />
                                    <x-input-error for="website" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="tin_number" value="{{ __('TIN Number') }}" />
                                    <x-input id="tin_number" type="text" class="mt-1 block w-full" wire:model="tin_number" />
                                    <x-input-error for="tin_number" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="refund_policy_link" value="{{ __('Refund Policy Link (Optional)') }}" />
                                    <x-input id="refund_policy_link" type="text" class="mt-1 block w-full" wire:model="refund_policy_link" />
                                    <x-input-error for="refund_policy_link" class="mt-2" />
                                </div>
                                <div class="sm:col-span-2">
                                    <x-label for="address" value="{{ __('Address') }}" />
                                    <textarea id="address" rows="2" wire:model="address" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                    <x-input-error for="address" class="mt-2" />
                                </div>
                            </div>
                        </x-card>
                    </section>

                    <!-- Branding -->
                    <section id="branding">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Branding') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Customize the look and feel of your documents.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <div class="space-y-5">
                                    <x-settings.color-field name="primary_color" label="{{ __('Primary Color') }}" :value="$primary_color" />
                                    <x-settings.color-field name="accent_color" label="{{ __('Accent Color') }}" :value="$accent_color" />
                                    <x-settings.color-field name="secondary_color" label="{{ __('Secondary Color') }}" :value="$secondary_color" />
                                    <x-settings.color-field name="table_header_color" label="{{ __('Table Header Color') }}" :value="$table_header_color" />
                                    <div>
                                        <x-label for="font_family" value="{{ __('Font Family') }}" />
                                        <select id="font_family" wire:model="font_family" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($fontOptions as $font)
                                                <option value="{{ $font }}">{{ $font }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Live document preview -->
                                <div>
                                    <x-label value="{{ __('Document Preview') }}" />
                                    <div class="mt-1 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" style="font-family: '{{ $font_family }}', sans-serif;">
                                        @if ($logo_path)
                                            <img src="{{ \App\Models\WorkspaceSetting::srcForLogo($logo_path) }}" alt="" class="mb-3 h-8 object-contain" />
                                        @endif
                                        <p class="text-lg font-bold" style="color: {{ $primary_color }};">{{ $company_name ?: __('Your Company') }}</p>
                                        <p class="mt-2 text-sm text-slate-500">{{ $number_prefix_quote }}-260608001001</p>
                                        <p class="text-sm text-slate-500">{{ __('Sample Customer') }}</p>
                                        <p class="mt-4 text-xl font-bold text-slate-900">{{ $show_currency_code ? $base_currency_code . ' ' : '' }}106.00</p>
                                        <div class="mt-4 h-1.5 w-full rounded-full" style="background: linear-gradient(90deg, {{ $primary_color }}, {{ $accent_color }});"></div>
                                    </div>
                                </div>
                            </div>
                        </x-card>
                    </section>

                    <!-- Documents & Defaults -->
                    <section id="documents">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Documents & Defaults') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Set default text and terms for your documents.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <x-rich-editor
                                    model="terms_and_conditions"
                                    :label="__('Terms and Conditions')"
                                    :placeholder="__('Payment terms, warranty, delivery…')"
                                />
                                <x-rich-editor
                                    model="banking_details"
                                    :label="__('Banking Details (for invoices)')"
                                    :placeholder="__('Bank name, account number, branch…')"
                                />
                                <div>
                                    <x-label value="{{ __('Default Payment Methods (shown on documents)') }}" />
                                    @if ($teamPaymentMethods->isEmpty() && $gatewayMethods->isEmpty())
                                        <p class="mt-2 text-sm text-slate-500">
                                            {{ __('No payment methods yet.') }}
                                            <a href="{{ route('payment-methods.index') }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Add one') }}</a>.
                                        </p>
                                    @else
                                        <div class="mt-2 flex flex-wrap gap-2">
                                            @foreach ($teamPaymentMethods as $method)
                                                <label class="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 px-3 py-1.5 text-sm transition has-[:checked]:border-indigo-300 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                                    <input type="checkbox" value="{{ $method->id }}" wire:model="display_payment_methods" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                                    {{ $method->name }}
                                                </label>
                                            @endforeach

                                            {{-- Paynow needs a method per currency because each settles into its
                                                 own bank account, but that is a treasury detail. Here it is one
                                                 decision — offer online payment or not — and the document's own
                                                 currency picks which method prints. --}}
                                            @if ($gatewayMethods->isNotEmpty())
                                                <button type="button" wire:click="togglePaynow"
                                                    @class([
                                                        'inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition',
                                                        'border-indigo-300 bg-indigo-50 text-indigo-700' => $this->paynowSelected,
                                                        'border-slate-200 text-slate-700 hover:bg-slate-50' => ! $this->paynowSelected,
                                                    ])>
                                                    <span @class([
                                                        'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
                                                        'border-indigo-600 bg-indigo-600 text-white' => $this->paynowSelected,
                                                        'border-slate-300' => ! $this->paynowSelected,
                                                    ])>
                                                        @if ($this->paynowSelected)
                                                            <x-icon name="check" class="h-3 w-3" />
                                                        @endif
                                                    </span>
                                                    {{ __('Pay online (Paynow)') }}
                                                </button>
                                            @endif
                                        </div>
                                        @if ($gatewayMethods->isNotEmpty())
                                            <p class="mt-2 text-xs text-slate-500">
                                                {{ __('Paynow covers :currencies. Each document shows only the one matching its own currency.', [
                                                    'currencies' => $gatewayMethods
                                                        ->flatMap(fn ($m) => array_filter((array) $m->currencies) ?: [$m->fundAccount?->currency_code])
                                                        ->filter()->unique()->sort()->implode(', '),
                                                ]) }}
                                            </p>
                                        @endif
                                    @endif
                                    <x-input-error for="display_payment_methods" class="mt-2" />
                                </div>
                                <x-rich-editor
                                    model="default_notes"
                                    :label="__('Default Notes (Optional)')"
                                    :placeholder="__('A default note that appears on quotes/invoices…')"
                                    min-height="6rem"
                                />
                            </div>
                        </x-card>
                    </section>

                    <!-- Numbering & Currency -->
                    <section id="numbering">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Numbering & Currency') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Manage prefixes and the base currency for your documents.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                                <div>
                                    <x-label for="number_prefix_quote" value="{{ __('Quote Prefix') }}" />
                                    <x-input id="number_prefix_quote" type="text" class="mt-1 block w-full" wire:model="number_prefix_quote" />
                                    <x-input-error for="number_prefix_quote" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_invoice" value="{{ __('Invoice Prefix') }}" />
                                    <x-input id="number_prefix_invoice" type="text" class="mt-1 block w-full" wire:model="number_prefix_invoice" />
                                    <x-input-error for="number_prefix_invoice" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_job" value="{{ __('Job Prefix') }}" />
                                    <x-input id="number_prefix_job" type="text" class="mt-1 block w-full" wire:model="number_prefix_job" />
                                    <x-input-error for="number_prefix_job" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_purchase_order" value="{{ __('Purchase Order Prefix') }}" />
                                    <x-input id="number_prefix_purchase_order" type="text" class="mt-1 block w-full" wire:model="number_prefix_purchase_order" />
                                    <x-input-error for="number_prefix_purchase_order" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_rfq" value="{{ __('RFQ Prefix') }}" />
                                    <x-input id="number_prefix_rfq" type="text" class="mt-1 block w-full" wire:model="number_prefix_rfq" />
                                    <x-input-error for="number_prefix_rfq" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_delivery_note" value="{{ __('Delivery Note Prefix') }}" />
                                    <x-input id="number_prefix_delivery_note" type="text" class="mt-1 block w-full" wire:model="number_prefix_delivery_note" />
                                    <x-input-error for="number_prefix_delivery_note" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_sku" value="{{ __('SKU Prefix (optional)') }}" />
                                    <x-input id="number_prefix_sku" type="text" class="mt-1 block w-full" wire:model="number_prefix_sku" placeholder="{{ __('e.g. SEM, blank for none') }}" />
                                    <x-input-error for="number_prefix_sku" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="number_prefix_employee" value="{{ __('Employee Number Prefix') }}" />
                                    <x-input id="number_prefix_employee" type="text" class="mt-1 block w-full" wire:model="number_prefix_employee" placeholder="SPE" />
                                    <p class="mt-1 text-xs text-slate-500">{{ __('Staff numbers are issued automatically, e.g. :example. Changing this only affects people added from now on.', ['example' => ($number_prefix_employee ?: 'SPE') . '-001']) }}</p>
                                    <x-input-error for="number_prefix_employee" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="base_currency_code" value="{{ __('Base Currency') }}" />
                                    <x-input id="base_currency_code" type="text" maxlength="3" class="mt-1 block w-full uppercase" wire:model="base_currency_code" />
                                    <x-input-error for="base_currency_code" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="display_currency_code" value="{{ __('Display Currency (Optional)') }}" />
                                    <x-input id="display_currency_code" type="text" maxlength="3" class="mt-1 block w-full uppercase" wire:model="display_currency_code" />
                                    <x-input-error for="display_currency_code" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="exchange_rate_provider" value="{{ __('Exchange Rate Provider') }}" />
                                    <select id="exchange_rate_provider" wire:model="exchange_rate_provider" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option value="custom">{{ __('Custom Rate') }}</option>
                                    </select>
                                    <x-input-error for="exchange_rate_provider" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="exchange_rate" value="{{ __('Exchange Rate') }}" />
                                    <x-input id="exchange_rate" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="exchange_rate" />
                                    <x-input-error for="exchange_rate" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="marketing_allocation_pct" value="{{ __('Marketing Allocation (% of job profit)') }}" />
                                    <x-input id="marketing_allocation_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="marketing_allocation_pct" />
                                    <p class="mt-1 text-xs text-slate-500">{{ __('Default share of each completed job\'s gross profit set aside for marketing. Override per job category. 0 = off.') }}</p>
                                    <x-input-error for="marketing_allocation_pct" class="mt-2" />
                                </div>
                            </div>

                            <div class="mt-6 border-t border-slate-100 pt-5">
                                <x-settings.toggle model="show_currency_code" :label="__('Show currency code')" :description="__('Display the currency code on documents (e.g. USD 100.00).')" />
                            </div>
                        </x-card>
                    </section>

                    <!-- Letters & Letterhead -->
                    <section id="letters">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Letters & Letterhead') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Configure the branded letterhead used when writing letters and documents.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                                <div>
                                    <x-label for="number_prefix_letter" value="{{ __('Letter Prefix') }}" />
                                    <x-input id="number_prefix_letter" type="text" class="mt-1 block w-full" wire:model="number_prefix_letter" />
                                    <x-input-error for="number_prefix_letter" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="letter_header_position" value="{{ __('Logo / header position') }}" />
                                    <select id="letter_header_position" wire:model="letter_header_position" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option value="left">{{ __('Left') }}</option>
                                        <option value="center">{{ __('Center') }}</option>
                                        <option value="right">{{ __('Right') }}</option>
                                    </select>
                                    <x-input-error for="letter_header_position" class="mt-2" />
                                </div>
                            </div>

                            <div class="mt-6">
                                <x-rich-editor model="letter_footer_html" :label="__('Footer band')" min-height="6rem"
                                    :placeholder="__('e.g. Reg. No. 12345 · Directors: A. Smith · Bankers: XYZ Bank')" />
                                <p class="mt-1 text-xs text-slate-500">{{ __('Printed in the footer of every letterhead page. The page number is added automatically.') }}</p>
                            </div>

                            <div class="mt-6 border-t border-slate-100 pt-5">
                                <x-settings.toggle model="letter_watermark_enabled" :label="__('Watermark')" :description="__('Print a faint diagonal watermark behind the letter body.')" />
                                <div class="mt-4 max-w-sm">
                                    <x-label for="letter_watermark_text" value="{{ __('Watermark text (optional)') }}" />
                                    <x-input id="letter_watermark_text" type="text" class="mt-1 block w-full" wire:model="letter_watermark_text"
                                        placeholder="{{ __('Defaults to your company name') }}" />
                                    <x-input-error for="letter_watermark_text" class="mt-2" />
                                </div>
                            </div>

                            <div class="mt-6 border-t border-slate-100 pt-5">
                                <p class="mb-3 text-sm font-medium text-slate-700">{{ __('Page margins (px)') }}</p>
                                <div class="grid grid-cols-2 gap-5 sm:grid-cols-4">
                                    <div>
                                        <x-label for="letter_margin_top" value="{{ __('Top') }}" />
                                        <x-input id="letter_margin_top" type="number" min="0" max="120" class="mt-1 block w-full" wire:model="letter_margin_top" />
                                        <x-input-error for="letter_margin_top" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="letter_margin_right" value="{{ __('Right') }}" />
                                        <x-input id="letter_margin_right" type="number" min="0" max="120" class="mt-1 block w-full" wire:model="letter_margin_right" />
                                        <x-input-error for="letter_margin_right" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="letter_margin_bottom" value="{{ __('Bottom') }}" />
                                        <x-input id="letter_margin_bottom" type="number" min="0" max="120" class="mt-1 block w-full" wire:model="letter_margin_bottom" />
                                        <x-input-error for="letter_margin_bottom" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="letter_margin_left" value="{{ __('Left') }}" />
                                        <x-input id="letter_margin_left" type="number" min="0" max="120" class="mt-1 block w-full" wire:model="letter_margin_left" />
                                        <x-input-error for="letter_margin_left" class="mt-2" />
                                    </div>
                                </div>
                                <p class="mt-2 text-xs text-slate-500">{{ __('Margins apply when the letterhead band is turned off; with the band on, spacing is managed automatically.') }}</p>
                            </div>
                        </x-card>
                    </section>

                    <!-- Financial Settings -->
                    <section id="financial">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Financial Settings') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Set global financial defaults.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <div class="space-y-5">
                                    <div>
                                        <x-label for="default_tax_id" value="{{ __('Default Tax') }}" />
                                        <select id="default_tax_id" wire:model="default_tax_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('No Tax') }}</option>
                                            @foreach ($taxes as $tax)
                                                <option value="{{ $tax->id }}">{{ $tax->name }} ({{ rtrim(rtrim(number_format($tax->rate, 4), '0'), '.') }}%)</option>
                                            @endforeach
                                        </select>
                                        @if ($taxes->isEmpty())
                                            <p class="mt-1.5 text-xs text-slate-400">
                                                <a href="{{ route('taxes.index') }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Create a tax rate') }}</a>
                                                {{ __('to use it as a default.') }}
                                            </p>
                                        @endif
                                        <x-input-error for="default_tax_id" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="default_payment_terms" value="{{ __('Default Payment Terms') }}" />
                                        <select id="default_payment_terms" wire:model="default_payment_terms" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($paymentTermsOptions as $value => $label)
                                                <option value="{{ $value }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                        <x-input-error for="default_payment_terms" class="mt-2" />
                                    </div>
                                </div>

                                <div class="space-y-4 lg:border-l lg:border-slate-100 lg:pl-6">
                                    <x-settings.toggle model="prices_include_tax" :label="__('Prices include tax by default')" />
                                    <x-settings.toggle model="allow_partial_payments" :label="__('Allow partial payments')" />
                                    <x-settings.toggle model="round_amounts" :label="__('Round amounts on documents')" />
                                </div>
                            </div>
                        </x-card>
                    </section>

                    <!-- Profit & Commission Policy (spec §21) -->
                    <section id="profit">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Profit & Commission Policy') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Drives break-even, the GP hurdle and the commission pool. Nothing here is hardcoded, every report reads these values.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <!-- Lifecycle / recognition -->
                                <div class="space-y-5">
                                    <div>
                                        <x-label for="revenue_recognition" value="{{ __('Management Revenue basis') }}" />
                                        <select id="revenue_recognition" wire:model="revenue_recognition" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($revenueRecognitionOptions as $value => $label)
                                                <option value="{{ $value }}">{{ __($label) }}</option>
                                            @endforeach
                                        </select>
                                        <p class="mt-1 text-xs text-slate-500">{{ __('Cash Collected = money received. Invoice Value Raised = invoices created.') }}</p>
                                        <x-input-error for="revenue_recognition" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="job_won_trigger" value="{{ __('Job won trigger') }}" />
                                        <select id="job_won_trigger" wire:model="job_won_trigger" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($jobWonTriggerOptions as $value => $label)
                                                <option value="{{ $value }}">{{ __($label) }}</option>
                                            @endforeach
                                        </select>
                                        <x-input-error for="job_won_trigger" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="job_creation_source" value="{{ __('Job creation source') }}" />
                                        <select id="job_creation_source" wire:model="job_creation_source" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($jobCreationSourceOptions as $value => $label)
                                                <option value="{{ $value }}">{{ __($label) }}</option>
                                            @endforeach
                                        </select>
                                        <x-input-error for="job_creation_source" class="mt-2" />
                                    </div>
                                    <div class="space-y-4 border-t border-slate-100 pt-5">
                                        <x-settings.toggle model="require_deposit_before_production" :label="__('Require deposit before production')" :description="__('Block starting a job until its invoice has a deposit.')" />
                                        <x-settings.toggle model="allow_override_before_deposit" :label="__('Allow management override before deposit')" :description="__('Let owners/admins start an unfunded job with a logged reason.')" />
                                    </div>
                                </div>

                                <!-- Commission / break-even maths -->
                                <div class="space-y-5 lg:border-l lg:border-slate-100 lg:pl-6">
                                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                                        <div>
                                            <x-label for="gp_hurdle_multiplier" value="{{ __('GP Hurdle multiplier') }}" />
                                            <x-input id="gp_hurdle_multiplier" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="gp_hurdle_multiplier" />
                                            <p class="mt-1 text-xs text-slate-500">{{ __('GP Hurdle = Overheads × this. Default 2.') }}</p>
                                            <x-input-error for="gp_hurdle_multiplier" class="mt-2" />
                                        </div>
                                        <div>
                                            <x-label for="commission_pool_rate_pct" value="{{ __('Commission pool rate (%)') }}" />
                                            <x-input id="commission_pool_rate_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="commission_pool_rate_pct" />
                                            <p class="mt-1 text-xs text-slate-500">{{ __('Pool = Excess GP × this. Default 20%.') }}</p>
                                            <x-input-error for="commission_pool_rate_pct" class="mt-2" />
                                        </div>
                                        <div>
                                            <x-label for="commission_split_sales_pct" value="{{ __('Sales/Admin split (%)') }}" />
                                            <x-input id="commission_split_sales_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="commission_split_sales_pct" />
                                            <x-input-error for="commission_split_sales_pct" class="mt-2" />
                                        </div>
                                        <div>
                                            <x-label for="commission_split_production_pct" value="{{ __('Production split (%)') }}" />
                                            <x-input id="commission_split_production_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="commission_split_production_pct" />
                                            <x-input-error for="commission_split_production_pct" class="mt-2" />
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                                        <div>
                                            <x-label for="break_even_basis" value="{{ __('Break-even basis') }}" />
                                            <select id="break_even_basis" wire:model="break_even_basis" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                @foreach ($breakEvenBasisOptions as $value => $label)
                                                    <option value="{{ $value }}">{{ __($label) }}</option>
                                                @endforeach
                                            </select>
                                            <x-input-error for="break_even_basis" class="mt-2" />
                                        </div>
                                        <div>
                                            <x-label for="commission_period" value="{{ __('Commission period') }}" />
                                            <select id="commission_period" wire:model="commission_period" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                @foreach ($commissionPeriodOptions as $value => $label)
                                                    <option value="{{ $value }}">{{ __($label) }}</option>
                                                @endforeach
                                            </select>
                                            <x-input-error for="commission_period" class="mt-2" />
                                        </div>
                                    </div>

                                    <div class="border-t border-slate-100 pt-5">
                                        <x-label value="{{ __('Overhead source') }}" />
                                        <p class="mt-0.5 text-xs text-slate-500">{{ __('What feeds the monthly break-even nut.') }}</p>
                                        <div class="mt-3 space-y-2.5">
                                            @foreach ($overheadSourceOptions as $value => $label)
                                                <label class="flex items-start gap-2.5 text-sm text-slate-700">
                                                    <input type="checkbox" value="{{ $value }}" wire:model="overhead_source" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                                    <span>{{ __($label) }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                        <x-input-error for="overhead_source" class="mt-2" />
                                    </div>

                                    <div class="border-t border-slate-100 pt-5">
                                        <x-label value="{{ __('Active commission model') }}" />
                                        <p class="mt-0.5 text-xs text-slate-500">{{ __('Which model accrues commission and drives the Profitability eligibility column. Both stay configurable; only the active one pays out.') }}</p>
                                        <div class="mt-3 space-y-2.5">
                                            @foreach ($commissionModelOptions as $value => $label)
                                                <label class="flex items-start gap-2.5 text-sm text-slate-700">
                                                    <input type="radio" value="{{ $value }}" wire:model="active_commission_model" name="active_commission_model" class="mt-0.5 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                                    <span>{{ __($label) }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                        <x-input-error for="active_commission_model" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </x-card>
                    </section>

                    <!-- Notifications -->
                    <section id="notifications">
                        <x-card class="p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Notifications') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Choose what notifications you receive.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                                <x-settings.toggle model="notify_invoice_created" icon="document-currency-dollar" :label="__('Invoice Created')" :description="__('Get notified when an invoice is created.')" />
                                <x-settings.toggle model="notify_job_status" icon="briefcase" :label="__('Job Status Updates')" :description="__('Get notified about job status changes.')" />
                                <x-settings.toggle model="notify_payment_received" icon="banknotes" :label="__('Payment Received')" :description="__('Get notified when a payment is recorded.')" />
                                <x-settings.toggle model="notify_overdue" icon="exclamation-triangle" :label="__('Overdue Invoices')" :description="__('Receive alerts for overdue invoices.')" />
                            </div>
                        </x-card>

                        <x-card class="mt-6 p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Client job portal') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('The private link customers use to follow their order, send artwork and approve proofs.') }}</p>
                            </div>

                            <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                                <x-settings.toggle model="client_portal_auto_invite" icon="paper-airplane"
                                    :label="__('Email the link when a job is created')"
                                    :description="__('Off means no automatic email; staff share the link from the job page instead.')" />
                                <x-settings.toggle model="client_portal_uploads" icon="arrow-up-tray"
                                    :label="__('Let clients upload artwork')"
                                    :description="__('Off makes the portal read-only, tracking and proofs only.')" />
                            </div>
                        </x-card>

                        <x-card class="mt-6 p-6 sm:p-8">
                            <div class="border-b border-slate-100 pb-5">
                                <h3 class="text-base font-semibold text-slate-900">{{ __('Google Drive') }}</h3>
                                <p class="mt-0.5 text-sm text-slate-500">{{ __('Keep job files in Drive instead of on this server, so artwork is not limited by disk space and designers can work straight from Drive for Desktop.') }}</p>
                            </div>

                            @if (! $driveConfigured)
                                {{-- The switch is worse than useless without server credentials:
                                     it would look on while every upload quietly fell back to disk. --}}
                                <div class="mt-6 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800 ring-1 ring-amber-100">
                                    <p class="font-semibold">{{ __('Not connected yet') }}</p>
                                    <p class="mt-1 text-[13px]">{{ __('This needs a Google service account and a Shared Drive set up on the server first. Ask your administrator to run "php artisan billpro:drive-check", which prints exactly what is missing.') }}</p>
                                </div>
                            @endif

                            <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                                <x-settings.toggle model="drive_enabled" icon="cloud-arrow-up"
                                    :label="__('Store job files in Google Drive')"
                                    :description="__('Each job gets its own dated folder. Existing files stay where they are.')" />

                                <div>
                                    <x-label for="drive_root_folder_id" :value="__('Folder to file jobs under')" />
                                    <x-input id="drive_root_folder_id" type="text" class="mt-1 block w-full" wire:model="drive_root_folder_id" placeholder="{{ __('Drive folder ID (optional)') }}" />
                                    <p class="mt-1 text-xs text-slate-400">{{ __('Leave blank to use the top of the shared drive. To target a folder, open it in Drive and copy the ID from the end of the address bar.') }}</p>
                                    <x-input-error for="drive_root_folder_id" class="mt-1" />
                                </div>
                            </div>
                        </x-card>
                    </section>

                    <!-- Subsystem shortcuts -->
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        @foreach ($shortcuts as $shortcut)
                            <a href="{{ $shortcut['href'] }}" class="group flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-indigo-300 hover:shadow-md">
                                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 transition group-hover:bg-indigo-100">
                                    <x-icon :name="$shortcut['icon']" class="h-6 w-6" />
                                </span>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-semibold text-slate-900">{{ $shortcut['label'] }}</p>
                                    <p class="mt-0.5 text-sm text-slate-500">{{ $shortcut['desc'] }}</p>
                                </div>
                                <x-icon name="arrow-right" class="h-5 w-5 shrink-0 text-slate-300 transition group-hover:text-indigo-500" />
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </form>

        @if ($this->canResetData)
            <!-- Danger zone: reset test data (owner / super-admin only) -->
            <section id="danger" class="mt-6">
                <x-card class="border-rose-200 p-6 sm:p-8">
                    <div class="border-b border-rose-100 pb-5">
                        <h3 class="text-base font-semibold text-rose-700">{{ __('Danger Zone') }}</h3>
                        <p class="mt-0.5 text-sm text-slate-500">{{ __('Irreversible actions. Only the workspace owner can run these.') }}</p>
                    </div>

                    <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-slate-900">{{ __('Reset test data') }}</p>
                            <p class="mt-0.5 text-sm text-slate-500">
                                {{ __('Permanently delete all invoices, quotes, jobs, payments, expenses, income, treasury movements, stock and related records for this workspace. Users, settings, currencies and configuration are kept.') }}
                            </p>
                        </div>
                        <button type="button" wire:click="confirmReset"
                                class="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-rose-300 bg-white px-3.5 py-2 text-sm font-semibold text-rose-700 shadow-sm transition hover:bg-rose-50">
                            <x-icon name="trash" class="h-4 w-4" />
                            {{ __('Reset test data') }}
                        </button>
                    </div>
                </x-card>
            </section>

            <x-confirmation-modal wire:model.live="showResetModal">
                <x-slot name="title">{{ __('Reset test data') }}</x-slot>

                <x-slot name="content">
                    <div x-data="{ confirm: @entangle('resetConfirm').live }">
                        <p>{{ __('This permanently deletes this workspace\'s transactional data. Users, settings, currencies and configuration are preserved. This cannot be undone.') }}</p>

                        <div class="mt-4 space-y-2">
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model="resetKeepCustomers" class="rounded border-slate-300 text-rose-600 focus:ring-rose-500" />
                                {{ __('Keep customers') }}
                            </label>
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model="resetKeepProducts" class="rounded border-slate-300 text-rose-600 focus:ring-rose-500" />
                                {{ __('Keep products & materials') }}
                            </label>
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model="resetKeepSuppliers" class="rounded border-slate-300 text-rose-600 focus:ring-rose-500" />
                                {{ __('Keep suppliers') }}
                            </label>
                        </div>

                        <label class="mt-5 block text-sm font-medium text-slate-700">
                            {{ __('Type RESET to confirm') }}
                            <input type="text" x-model="confirm" autocomplete="off"
                                   class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-rose-500 focus:ring-rose-500"
                                   placeholder="RESET" />
                        </label>
                        @error('resetConfirm') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>
                </x-slot>

                <x-slot name="footer">
                    <button type="button" wire:click="$set('showResetModal', false)"
                            class="inline-flex items-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                        {{ __('Cancel') }}
                    </button>
                    <button type="button" wire:click="resetTestData" wire:loading.attr="disabled" wire:target="resetTestData"
                            x-bind:disabled="$wire.resetConfirm.trim() !== 'RESET'"
                            class="ms-3 inline-flex items-center gap-1.5 rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 disabled:cursor-not-allowed disabled:opacity-50">
                        <x-icon name="trash" class="h-4 w-4" />
                        {{ __('Permanently reset') }}
                    </button>
                </x-slot>
            </x-confirmation-modal>
        @endif
    </div>
</div>