@extends('layouts.app')
@section('title', __('Workspace settings'))
@section('page-title', __('Workspace settings'))

@section('content')
<div class="mb-4 sm:mb-6">
    <h1 class="text-xl sm:text-2xl font-semibold">{{ __('Workspace settings') }}</h1>
    <p class="text-sm text-slate-500">{{ __('Manage your workspace identity and notifications.') }}</p>
</div>

<form method="POST" action="{{ route('tenant.settings.update') }}" enctype="multipart/form-data" class="space-y-4 sm:space-y-6">
    @csrf @method('PATCH')

    {{-- Identity --}}
    <div class="card-pad">
        <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-8">
            <div class="lg:w-72 shrink-0">
                <h3 class="font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 flex items-center justify-center">
                        <x-icon name="building" class="w-4 h-4"/>
                    </span>
                    {{ __('Workspace identity') }}
                </h3>
                <p class="text-xs text-slate-500 mt-1 ms-10">{{ __('How your workspace is named across the app.') }}</p>
            </div>
            <div class="flex-1 grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">{{ __('Workspace name') }}</label>
                    <input name="name" required value="{{ old('name', $tenant->name) }}" class="form-input w-full">
                    @error('name')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('Slug') }}</label>
                    <input value="{{ $tenant->slug }}" class="form-input w-full" disabled>
                    <p class="text-xs text-slate-500 mt-1">{{ __('Contact support to change your slug.') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Notifications --}}
    <div class="card-pad">
        <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-8">
            <div class="lg:w-72 shrink-0">
                <h3 class="font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center">
                        <x-icon name="bell" class="w-4 h-4"/>
                    </span>
                    {{ __('Submission notifications') }}
                </h3>
                <p class="text-xs text-slate-500 mt-1 ms-10">{{ __('Where to send email notifications when clients upload files or evaluate analyses.') }}</p>
            </div>
            <div class="flex-1 space-y-4">
                <div>
                    <label class="form-label">{{ __('Notification email (optional)') }}</label>
                    <input name="notify_email" type="email" value="{{ old('notify_email', $tenant->notify_email) }}"
                           placeholder="{{ __('Defaults to the first tenant admin') }}" class="form-input w-full">
                    @error('notify_email')<div class="form-error">{{ $message }}</div>@enderror
                </div>

                <div class="space-y-2 pt-1">
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-slate-200/70 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700 cursor-pointer has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/50 dark:has-[:checked]:bg-brand-900/10 transition">
                        <input type="checkbox" name="notify_on_upload" value="1" class="mt-0.5 accent-brand-600"
                               {{ old('notify_on_upload', $tenant->notify_on_upload ?? true) ? 'checked' : '' }}>
                        <div class="min-w-0">
                            <div class="text-sm font-medium">{{ __('Notify when a client uploads a file') }}</div>
                            <div class="text-xs text-slate-500">{{ __('You receive an email each time a new submission lands in your inbox.') }}</div>
                        </div>
                    </label>
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-slate-200/70 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700 cursor-pointer has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/50 dark:has-[:checked]:bg-brand-900/10 transition">
                        <input type="checkbox" name="notify_on_evaluation" value="1" class="mt-0.5 accent-brand-600"
                               {{ old('notify_on_evaluation', $tenant->notify_on_evaluation ?? true) ? 'checked' : '' }}>
                        <div class="min-w-0">
                            <div class="text-sm font-medium">{{ __('Notify when a client evaluates an analysis') }}</div>
                            <div class="text-xs text-slate-500">{{ __('Get notified when clients approve, reject or request updates.') }}</div>
                        </div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {{-- Integrations visibility --}}
    <div class="card-pad">
        <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-8">
            <div class="lg:w-72 shrink-0">
                <h3 class="font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 flex items-center justify-center">
                        <x-icon name="link" class="w-4 h-4"/>
                    </span>
                    {{ __('Accounting integrations') }}
                </h3>
                <p class="text-xs text-slate-500 mt-1 ms-10">
                    {{ __('Choose which accounting providers your clients can connect at /space/integrations. You can only narrow within what your plan grants.') }}
                </p>
            </div>
            <div class="flex-1 space-y-3">
                @if(empty($planGrantedIntegrations))
                    <div class="rounded-xl border border-dashed border-slate-200 dark:border-slate-800 px-4 py-6 text-sm text-slate-500 text-center">
                        {{ __('Your current plan does not include any accounting integration. Upgrade to unlock automatic data import.') }}
                    </div>
                @else
                    @php
                        $providerLogos = [
                            'exact_online' => ['mark' => 'EO', 'color' => '#dc1e35', 'name' => 'Exact Online'],
                            'odoo'         => ['mark' => 'Od', 'color' => '#714b67', 'name' => 'Odoo'],
                            'billit'       => ['mark' => 'Bi', 'color' => '#ff8a3c', 'name' => 'Billit'],
                        ];
                    @endphp
                    {{-- Always submit the array (empty if everything is enabled). --}}
                    <input type="hidden" name="disabled_integrations[]" value="">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($planGrantedIntegrations as $p)
                            @php
                                $logo = $providerLogos[$p['key']] ?? ['mark' => strtoupper(substr($p['name'], 0, 2)), 'color' => '#64748b', 'name' => $p['name']];
                                $enabled = ! in_array($p['key'], $tenantDisabledProviders, true);
                            @endphp
                            {{-- A box the admin checks to ENABLE; we invert into disabled_integrations[] on submit. --}}
                            <label x-data="{ on: {{ $enabled ? 'true' : 'false' }} }"
                                   class="flex items-center gap-3 p-3 rounded-lg border border-slate-200/70 dark:border-slate-800 cursor-pointer hover:border-slate-300 dark:hover:border-slate-700 transition"
                                   :class="on ? 'bg-emerald-50/40 border-emerald-300 dark:bg-emerald-900/10 dark:border-emerald-700' : ''">
                                <input type="checkbox" class="accent-emerald-600" x-model="on">
                                {{-- Submitted only when off → effectively narrows visibility. --}}
                                <input type="hidden" name="disabled_integrations[]" value="{{ $p['key'] }}" x-bind:disabled="on">
                                <span class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-xs shrink-0" style="background-color: {{ $logo['color'] }}">{{ $logo['mark'] }}</span>
                                <div class="min-w-0">
                                    <div class="text-sm font-medium">{{ $logo['name'] }}</div>
                                    <div class="text-[11px] text-slate-500" x-text="on ? '{{ __('Visible to clients') }}' : '{{ __('Hidden from clients') }}'"></div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Branding (white-label PDF reports) --}}
    @php
        $branding = (array) (data_get($tenant, 'settings.branding') ?? []);
        $logoPath = $branding['logo_path'] ?? null;
        $logoUrl  = $logoPath ? \Illuminate\Support\Facades\Storage::disk($branding['logo_disk'] ?? 'public')->url($logoPath) : null;
        $primary  = old('primary_color', $branding['primary_color'] ?? '#6366f1');
        $accent   = old('accent_color',  $branding['accent_color']  ?? '#0f172a');
        $footer   = old('footer_text',   $branding['footer_text']   ?? '');
    @endphp
    <div class="card-pad">
        <div class="flex flex-col lg:flex-row lg:items-start gap-4 lg:gap-8">
            <div class="lg:w-72 shrink-0">
                <h3 class="font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 flex items-center justify-center">
                        <x-icon name="sparkles" class="w-4 h-4"/>
                    </span>
                    {{ __('Branding') }}
                </h3>
                <p class="text-xs text-slate-500 mt-1 ms-10">{{ __('Logo and colors applied to PDF, DOCX and XLSX reports your firm sends to clients.') }}</p>
            </div>

            <div class="flex-1 space-y-5"
                 x-data="{
                     primary: @js($primary),
                     accent:  @js($accent),
                     logoUrl: @js($logoUrl),
                     logoName: '',
                     pickLogo(e) {
                         const f = e.target.files && e.target.files[0];
                         if (! f) return;
                         this.logoName = f.name;
                         const r = new FileReader();
                         r.onload = ev => { this.logoUrl = ev.target.result; };
                         r.readAsDataURL(f);
                     },
                 }">

                {{-- Logo --}}
                <div class="grid sm:grid-cols-[auto,1fr] gap-4 items-start">
                    <div class="w-24 h-24 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 flex items-center justify-center overflow-hidden">
                        <template x-if="logoUrl">
                            <img :src="logoUrl" alt="" class="max-w-full max-h-full object-contain">
                        </template>
                        <template x-if="! logoUrl">
                            <span class="text-[10px] uppercase tracking-wider text-slate-400">{{ __('No logo') }}</span>
                        </template>
                    </div>
                    <div class="space-y-2">
                        <label class="form-label">{{ __('Firm logo') }}</label>
                        <input type="file" name="logo" accept="image/png,image/jpeg,image/svg+xml"
                               @change="pickLogo($event)" class="form-input w-full">
                        <p class="text-xs text-slate-500">
                            {{ __('PNG, JPG or SVG · up to 2 MB · ideally a square or wide transparent PNG.') }}
                            <span x-show="logoName" x-cloak class="ms-1 font-medium text-slate-700 dark:text-slate-200" x-text="logoName"></span>
                        </p>
                        <p x-show="logoName" x-cloak class="text-[11px] text-emerald-600 dark:text-emerald-400">
                            {{ __('Preview only — click "Save changes" to apply.') }}
                        </p>
                        @error('logo')<div class="form-error">{{ $message }}</div>@enderror
                        @if($logoUrl)
                            <label class="inline-flex items-center gap-2 text-xs text-rose-600 mt-1">
                                <input type="checkbox" name="logo_remove" value="1"
                                       @change="if ($event.target.checked) { logoUrl = null; logoName = ''; }"
                                       class="accent-rose-600 w-3.5 h-3.5">
                                {{ __('Remove current logo') }}
                            </label>
                        @endif
                    </div>
                </div>

                {{-- Colors --}}
                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">{{ __('Primary color') }}</label>
                        <div class="flex gap-2 items-center">
                            <input type="color" x-model="primary" class="h-10 w-14 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer">
                            <input type="text" name="primary_color" x-model="primary"
                                   class="form-input flex-1 font-mono text-sm" placeholder="#6366f1" maxlength="7">
                        </div>
                        <p class="text-xs text-slate-500 mt-1">{{ __('Used for table headers and accent bar.') }}</p>
                        @error('primary_color')<div class="form-error">{{ $message }}</div>@enderror
                    </div>
                    <div>
                        <label class="form-label">{{ __('Accent color') }}</label>
                        <div class="flex gap-2 items-center">
                            <input type="color" x-model="accent" class="h-10 w-14 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer">
                            <input type="text" name="accent_color" x-model="accent"
                                   class="form-input flex-1 font-mono text-sm" placeholder="#0f172a" maxlength="7">
                        </div>
                        <p class="text-xs text-slate-500 mt-1">{{ __('Used for headings and emphasised values.') }}</p>
                        @error('accent_color')<div class="form-error">{{ $message }}</div>@enderror
                    </div>
                </div>

                {{-- Live preview --}}
                <div class="rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
                    <div class="px-4 py-2 border-b-2" :style="'border-color:'+primary">
                        <div class="flex items-center justify-between gap-3">
                            <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Preview') }}</div>
                            <div class="text-sm font-semibold" :style="'color:'+accent">{{ $tenant->name }}</div>
                        </div>
                    </div>
                    <div class="p-4 text-sm">
                        <div class="text-base font-semibold mb-1" :style="'color:'+accent">{{ __('Quarterly diagnostic — sample') }}</div>
                        <div class="text-xs text-slate-500 mb-3">{{ __('Diagnostic analysis · 2026-Q1') }}</div>
                        <table class="w-full text-xs border-collapse">
                            <thead>
                                <tr>
                                    <th class="px-2 py-1.5 text-white text-start" :style="'background:'+primary">{{ __('Indicator') }}</th>
                                    <th class="px-2 py-1.5 text-white text-start" :style="'background:'+primary">{{ __('Value') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td class="px-2 py-1.5 border border-slate-200 dark:border-slate-700">{{ __('Revenue') }}</td><td class="px-2 py-1.5 border border-slate-200 dark:border-slate-700 font-semibold" :style="'color:'+accent">€ 124,320</td></tr>
                                <tr><td class="px-2 py-1.5 border border-slate-200 dark:border-slate-700">{{ __('Gross margin') }}</td><td class="px-2 py-1.5 border border-slate-200 dark:border-slate-700 font-semibold" :style="'color:'+accent">38.2 %</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Footer line --}}
                <div>
                    <label class="form-label">{{ __('Report footer') }} <span class="text-slate-400 font-normal">({{ __('optional') }})</span></label>
                    <input name="footer_text" value="{{ $footer }}" maxlength="500" class="form-input w-full"
                           placeholder="{{ __('e.g. Acme Audit BV · Rue de la Loi 1, 1000 Brussels · BE0123.456.789') }}">
                    <p class="text-xs text-slate-500 mt-1">{{ __('Appears below the report on every page.') }}</p>
                    @error('footer_text')<div class="form-error">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 pt-1">
        <a href="{{ url()->previous() }}" class="btn-secondary text-center">{{ __('Cancel') }}</a>
        <button class="btn-primary">{{ __('Save changes') }}</button>
    </div>
</form>
@endsection