<?php

use App\Models\Brand;
use App\Models\Media;
use App\Models\Partner;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Livewire\Volt\Component;
use Livewire\WithFileUploads;

use function Livewire\Volt\layout;
use function Livewire\Volt\title;

layout('components.layouts.app');
title('Meine Daten');

new class extends Component
{
    use WithFileUploads;

    public Partner $partner;

    public string $partnerType;

    public string $activeTab = 'stammdaten';

    // Stammdaten
    public string $companyName = '';

    public string $displayName = '';

    public string $salutation = '';

    public string $firstName = '';

    public string $lastName = '';

    public string $description = '';

    public string $street = '';

    public string $houseNumber = '';

    public string $zip = '';

    public string $city = '';

    public string $country = 'Deutschland';

    public string $phone = '';

    public string $website = '';

    // Retailer – Liefergebiete
    public ?int $deliveryRadius = null;

    public ?int $assemblyRadius = null;

    // Manufacturer – Marke
    public string $brandName = '';

    public string $brandDescription = '';

    // Profil-Felder
    public string $storyText = '';

    public int|string $foundedYear = '';

    public string $specialtiesInput = '';

    /**
     * Öffnungszeiten (nur Retailer).
     *
     * @var array<string, array{open: string, close: string, closed: bool}>
     */
    public array $openingHours = [
        'monday' => ['open' => '09:00', 'close' => '18:00', 'closed' => false],
        'tuesday' => ['open' => '09:00', 'close' => '18:00', 'closed' => false],
        'wednesday' => ['open' => '09:00', 'close' => '18:00', 'closed' => false],
        'thursday' => ['open' => '09:00', 'close' => '18:00', 'closed' => false],
        'friday' => ['open' => '09:00', 'close' => '18:00', 'closed' => false],
        'saturday' => ['open' => '10:00', 'close' => '16:00', 'closed' => false],
        'sunday' => ['open' => '', 'close' => '', 'closed' => true],
    ];

    // Neue Fotos (temporäre Upload-Objekte)
    /** @var array<int, \Livewire\Features\SupportFileUploads\TemporaryUploadedFile> */
    public array $newTeamPhotos = [];

    /** @var array<int, \Livewire\Features\SupportFileUploads\TemporaryUploadedFile> */
    public array $newShowroomPhotos = [];

    /** @var array<int, \Livewire\Features\SupportFileUploads\TemporaryUploadedFile> */
    public array $newBrandImages = [];

    // Bestehende Fotos (aus DB, für Drag-&-Drop)
    /** @var array<int, array{id: int, file_path: string, alt_text: string}> */
    public array $existingTeamPhotos = [];

    /** @var array<int, array{id: int, file_path: string, alt_text: string}> */
    public array $existingShowroomPhotos = [];

    /** @var array<int, array{id: int, file_path: string, alt_text: string}> */
    public array $existingBrandImages = [];

    public string $roleIcon = 'shield-check';

    public string $roleName = '-';

    public function mount(): void
    {
        $user = Auth::user();

        if (! $user->partner_id) {
            $this->redirect(route('dashboard'), navigate: true);

            return;
        }

        $role = $user->roles->first();
        if ($role) {
            $this->roleIcon = $role->icon ?? 'shield-check';
            $this->roleName = $role->display_name ?? $role->name;
        }

        $this->partner = Partner::with(['users', 'media'])->findOrFail($user->partner_id);
        $this->partnerType = $this->partner->type?->value ?? '';

        // Stammdaten
        $this->companyName = $this->partner->company_name ?? '';
        $this->displayName = $this->partner->display_name ?? '';
        $this->salutation = $this->partner->salutation ?? '';
        $this->firstName = $this->partner->first_name ?? '';
        $this->lastName = $this->partner->last_name ?? '';
        $this->description = $this->partner->description ?? '';
        $this->street = $this->partner->street ?? '';
        $this->houseNumber = $this->partner->house_number ?? '';
        $this->zip = $this->partner->zip ?? '';
        $this->city = $this->partner->city ?? '';
        $this->country = $this->partner->country ?? 'Deutschland';
        $this->phone = $this->partner->phone ?? '';
        $this->website = $this->partner->website ?? '';
        $this->deliveryRadius = $this->partner->delivery_radius_km;
        $this->assemblyRadius = $this->partner->assembly_radius_km;

        // Platzhalter wie "roles.broker M10000004" ersetzen
        if (str_contains($this->companyName, 'roles.')) {
            $parts = explode(' ', $this->companyName, 2);
            $translatedRole = isset($parts[0]) ? __($parts[0]) : $this->companyName;
            $partnerId = isset($parts[1]) ? ' '.$parts[1] : '';
            $this->companyName = $translatedRole.$partnerId;
        }

        // Namen aus User übernehmen, falls Partner-Felder leer sind
        if (empty($this->firstName) && empty($this->lastName)) {
            $nameParts = explode(' ', $user->name, 2);
            $this->firstName = $nameParts[0] ?? '';
            $this->lastName = $nameParts[1] ?? '';
        }

        // Profil-Felder
        $this->storyText = $this->partner->story_text ?? '';
        $this->foundedYear = $this->partner->founded_year ?? '';
        $this->specialtiesInput = $this->partner->specialties
            ? implode(', ', $this->partner->specialties)
            : '';

        if ($this->partner->opening_hours) {
            $this->openingHours = array_merge($this->openingHours, $this->partner->opening_hours);
        }

        // Marke für Manufacturer
        if ($this->isManufacturer()) {
            $brand = Brand::where('partner_id', $this->partner->id)->first();
            if ($brand) {
                $this->brandName = $brand->name;
                $this->brandDescription = $brand->description ?? '';
            }
        }

        $this->loadExistingMedia();
    }

    // ── Foto-Verwaltung ────────────────────────────────────────────────────────

    public function removeQueuedPhoto(int $index, string $type): void
    {
        $property = $this->queuedPropertyForType($type);
        if ($property && isset($this->$property[$index])) {
            unset($this->$property[$index]);
            $this->$property = array_values($this->$property);
        }
    }

    public function removeExistingPhoto(int $mediaId, string $type): void
    {
        $media = Media::where('id', $mediaId)
            ->where('model_type', Partner::class)
            ->where('model_id', $this->partner->id)
            ->firstOrFail();

        Storage::disk('public')->delete($media->file_path);
        $media->delete();

        $property = $this->existingPropertyForType($type);
        if ($property) {
            $this->$property = array_values(
                array_filter($this->$property, fn ($m) => $m['id'] !== $mediaId)
            );
        }
    }

    /**
     * Reihenfolge per Drag-&-Drop aktualisieren.
     *
     * @param  array<int>  $orderedIds
     */
    public function updatePhotoOrder(array $orderedIds, string $type): void
    {
        foreach ($orderedIds as $position => $mediaId) {
            $this->partner->media()
                ->where('id', $mediaId)
                ->where('type', $type)
                ->update(['order_column' => $position + 1]);
        }

        $property = $this->existingPropertyForType($type);
        if (! $property) {
            return;
        }

        $reordered = collect($orderedIds)->map(function ($id, $index) use ($property) {
            $media = collect($this->$property)->firstWhere('id', $id);

            return $media ? array_merge($media, ['order_column' => $index + 1]) : null;
        })->filter()->values()->toArray();

        $this->$property = $reordered;
    }

    // ── Speichern ──────────────────────────────────────────────────────────────

    public function saveData(): void
    {
        $rules = [
            'salutation' => 'required|in:Herr,Frau,Divers',
            'firstName' => 'required|string|max:255',
            'lastName' => 'required|string|max:255',
            'street' => 'required|string|max:255',
            'houseNumber' => 'required|string|max:20',
            'zip' => 'required|string|max:10',
            'city' => 'required|string|max:255',
            'country' => 'required|string|max:255',
            'phone' => 'nullable|string|max:50',
            'storyText' => 'nullable|string|max:2000',
            'foundedYear' => 'nullable|integer|min:1800|max:'.now()->year,
            'specialtiesInput' => 'nullable|string|max:500',
        ];

        if (! $this->isCustomer()) {
            $rules['companyName'] = 'required|string|max:255';
            $rules['description'] = 'nullable|string|max:1000';
            $rules['website'] = 'nullable|url|max:255';
        }

        if ($this->isBroker()) {
            $rules['displayName'] = 'required|string|max:255';
        }

        if ($this->isRetailer()) {
            $rules['deliveryRadius'] = 'required|integer|min:1|max:500';
            $rules['assemblyRadius'] = 'required|integer|min:1|max:500';
            $rules['newTeamPhotos'] = 'nullable|array|max:10';
            $rules['newTeamPhotos.*'] = 'image|mimes:jpeg,jpg,png|max:204800';
            $rules['newShowroomPhotos'] = 'nullable|array|max:20';
            $rules['newShowroomPhotos.*'] = 'image|mimes:jpeg,jpg,png|max:204800';
        }

        if ($this->isManufacturer()) {
            $rules['brandName'] = 'required|string|max:255';
            $rules['brandDescription'] = 'nullable|string|max:1000';
            $rules['newBrandImages'] = 'nullable|array|max:10';
            $rules['newBrandImages.*'] = 'image|mimes:jpeg,jpg,png|max:204800';
        }

        $this->validate($rules, [
            'salutation.required' => __('Bitte wählen Sie eine Anrede.'),
            'firstName.required' => __('Bitte geben Sie einen Vornamen ein.'),
            'lastName.required' => __('Bitte geben Sie einen Nachnamen ein.'),
            'companyName.required' => __('Bitte geben Sie einen Firmennamen ein.'),
            'displayName.required' => __('Bitte geben Sie einen Anzeigenamen ein.'),
            'street.required' => __('Bitte geben Sie eine Straße ein.'),
            'houseNumber.required' => __('Bitte geben Sie eine Hausnummer ein.'),
            'zip.required' => __('Bitte geben Sie eine Postleitzahl ein.'),
            'city.required' => __('Bitte geben Sie eine Stadt ein.'),
            'country.required' => __('Bitte wählen Sie ein Land.'),
            'website.url' => __('Bitte geben Sie eine gültige URL ein.'),
            'deliveryRadius.required' => __('Bitte geben Sie einen Lieferradius ein.'),
            'deliveryRadius.min' => __('Der Lieferradius muss mindestens 1 km betragen.'),
            'assemblyRadius.required' => __('Bitte geben Sie einen Montageradius ein.'),
            'assemblyRadius.min' => __('Der Montageradius muss mindestens 1 km betragen.'),
            'brandName.required' => __('Bitte geben Sie einen Markennamen ein.'),
            'foundedYear.integer' => __('Bitte geben Sie eine gültige Jahreszahl ein.'),
            'foundedYear.min' => __('Das Gründungsjahr muss nach 1800 liegen.'),
            'foundedYear.max' => __('Das Gründungsjahr darf nicht in der Zukunft liegen.'),
            'newTeamPhotos.*.image' => __('Nur Bilder (JPG, PNG) erlaubt.'),
            'newTeamPhotos.*.max' => __('Bilder dürfen maximal 200 MB groß sein.'),
            'newShowroomPhotos.*.image' => __('Nur Bilder (JPG, PNG) erlaubt.'),
            'newShowroomPhotos.*.max' => __('Bilder dürfen maximal 200 MB groß sein.'),
            'newBrandImages.*.image' => __('Nur Bilder (JPG, PNG) erlaubt.'),
            'newBrandImages.*.max' => __('Bilder dürfen maximal 200 MB groß sein.'),
        ]);

        $specialties = array_values(array_filter(
            array_map('trim', explode(',', $this->specialtiesInput))
        ));

        $updateData = [
            'salutation' => $this->salutation,
            'first_name' => $this->firstName,
            'last_name' => $this->lastName,
            'street' => $this->street,
            'house_number' => $this->houseNumber,
            'zip' => $this->zip,
            'city' => $this->city,
            'country' => $this->country,
            'phone' => $this->phone,
            'story_text' => $this->storyText ?: null,
            'founded_year' => $this->foundedYear ?: null,
            'specialties' => $specialties ?: null,
        ];

        if (! $this->isCustomer()) {
            $updateData['company_name'] = $this->companyName;
            $updateData['description'] = $this->description;
            $updateData['website'] = $this->website;
        }

        if ($this->isBroker()) {
            $updateData['display_name'] = $this->displayName;
        }

        if ($this->isRetailer()) {
            $updateData['delivery_radius_km'] = $this->deliveryRadius;
            $updateData['assembly_radius_km'] = $this->assemblyRadius;
            $updateData['opening_hours'] = $this->openingHours;
        }

        $this->partner->update($updateData);

        if ($this->isManufacturer()) {
            Brand::updateOrCreate(
                ['partner_id' => $this->partner->id],
                [
                    'name' => $this->brandName,
                    'slug' => Str::slug($this->brandName),
                    'description' => $this->brandDescription,
                    'is_active' => true,
                ]
            );
        }

        $this->saveUploadedPhotos($this->newTeamPhotos, 'team_photo');
        $this->saveUploadedPhotos($this->newShowroomPhotos, 'showroom');
        $this->saveUploadedPhotos($this->newBrandImages, 'brand_image');

        $this->newTeamPhotos = [];
        $this->newShowroomPhotos = [];
        $this->newBrandImages = [];

        $this->partner->load('media');
        $this->loadExistingMedia();

        session()->flash('message', __('Ihre Daten wurden erfolgreich aktualisiert.'));
    }

    // ── Hilfsmethoden ──────────────────────────────────────────────────────────

    private function isCustomer(): bool
    {
        return strtolower(str_replace('-', '', $this->partnerType)) === 'customer';
    }

    private function isRetailer(): bool
    {
        return strtolower(str_replace('-', '', $this->partnerType)) === 'retailer';
    }

    private function isManufacturer(): bool
    {
        return strtolower(str_replace('-', '', $this->partnerType)) === 'manufacturer';
    }

    private function isBroker(): bool
    {
        $t = strtolower(str_replace('-', '', $this->partnerType));

        return $t === 'broker' || $t === 'estateagent';
    }

    private function loadExistingMedia(): void
    {
        $this->existingTeamPhotos = $this->partner->media
            ->where('type', 'team_photo')
            ->sortBy('order_column')
            ->values()
            ->map(fn ($m) => ['id' => $m->id, 'file_path' => $m->file_path, 'alt_text' => $m->alt_text ?? ''])
            ->toArray();

        $this->existingShowroomPhotos = $this->partner->media
            ->where('type', 'showroom')
            ->sortBy('order_column')
            ->values()
            ->map(fn ($m) => ['id' => $m->id, 'file_path' => $m->file_path, 'alt_text' => $m->alt_text ?? ''])
            ->toArray();

        $this->existingBrandImages = $this->partner->media
            ->where('type', 'brand_image')
            ->sortBy('order_column')
            ->values()
            ->map(fn ($m) => ['id' => $m->id, 'file_path' => $m->file_path, 'alt_text' => $m->alt_text ?? ''])
            ->toArray();
    }

    /** @param array<int, \Livewire\Features\SupportFileUploads\TemporaryUploadedFile> $files */
    private function saveUploadedPhotos(array $files, string $type): void
    {
        if (empty($files)) {
            return;
        }

        $maxOrder = $this->partner->media()
            ->where('type', $type)
            ->max('order_column') ?? 0;

        $index = $maxOrder + 1;
        foreach ($files as $file) {
            $path = $file->store('partners/'.$this->partner->id.'/'.$type, 'public');
            $this->partner->media()->create([
                'file_path' => $path,
                'type' => $type,
                'alt_text' => $this->partner->company_name,
                'order_column' => $index++,
            ]);
        }
    }

    private function queuedPropertyForType(string $type): ?string
    {
        return match ($type) {
            'team_photo' => 'newTeamPhotos',
            'showroom' => 'newShowroomPhotos',
            'brand_image' => 'newBrandImages',
            default => null,
        };
    }

    private function existingPropertyForType(string $type): ?string
    {
        return match ($type) {
            'team_photo' => 'existingTeamPhotos',
            'showroom' => 'existingShowroomPhotos',
            'brand_image' => 'existingBrandImages',
            default => null,
        };
    }

    /** @return array<string, string> */
    protected function dayLabels(): array
    {
        return [
            'monday' => __('Montag'),
            'tuesday' => __('Dienstag'),
            'wednesday' => __('Mittwoch'),
            'thursday' => __('Donnerstag'),
            'friday' => __('Freitag'),
            'saturday' => __('Samstag'),
            'sunday' => __('Sonntag'),
        ];
    }

    public function with(): array
    {
        return [
            'dayLabels' => $this->dayLabels(),
            'isRetailer' => $this->isRetailer(),
            'isManufacturer' => $this->isManufacturer(),
            'isCustomer' => $this->isCustomer(),
            'isBroker' => $this->isBroker(),
        ];
    }
}; ?>

<div class="space-y-6">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl">{{ __('Meine Daten') }}</flux:heading>
            <flux:subheading>{{ __('Verwalten Sie Ihre Firmendaten und Ihr Profil') }}</flux:subheading>
        </div>
        <div class="flex items-center gap-2">
            @svg('heroicon-o-'.$roleIcon, 'w-6 h-6 text-accent-600 dark:text-accent-400')
            <span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ $roleName }}</span>
        </div>
    </div>

    <x-success-alert />

    <form wire:submit="saveData" class="space-y-6">

        {{-- Tab-Navigation --}}
        <flux:tabs wire:model.live="activeTab" variant="segmented">
            <flux:tab name="stammdaten" icon="building-office">{{ __('Stammdaten') }}</flux:tab>
            <flux:tab name="praesentation" icon="sparkles">{{ $isRetailer ? __('Präsentation') : __('Über uns') }}</flux:tab>
            @if ($isRetailer)
                <flux:tab name="oeffnungszeiten" icon="clock">{{ __('Öffnungszeiten') }}</flux:tab>
            @endif
            @if ($isRetailer || $isManufacturer)
                <flux:tab name="fotos" icon="photo">{{ __('Fotos') }}</flux:tab>
            @endif
        </flux:tabs>

        {{-- ── TAB 1: STAMMDATEN ── --}}
        @if ($activeTab === 'stammdaten')
            <div class="space-y-6">
                <flux:card class="space-y-6 shadow-elegant">
                    <div>
                        <flux:heading size="lg">{{ __('Firmendaten') }}</flux:heading>
                        <flux:subheading>{{ __('Ihre Kontakt- und Adressdaten') }}</flux:subheading>
                    </div>
                    <flux:separator />

                    @if (!$isCustomer)
                        <flux:field>
                            <flux:label>{{ __('Firmenname') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="companyName" name="companyName" icon="building-office" placeholder="{{ __('z.B. Müller GmbH') }}" />
                            @error('companyName') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        @if ($isBroker)
                            <flux:field>
                                <flux:label>{{ __('Anzeigename') }} <span class="text-red-500">*</span></flux:label>
                                <flux:description>{{ __('Der Name, der Ihren Kunden angezeigt wird') }}</flux:description>
                                <flux:input wire:model="displayName" name="displayName" icon="user" />
                                @error('displayName') <flux:error>{{ $message }}</flux:error> @enderror
                            </flux:field>
                        @endif

                        <flux:field>
                            <flux:label>{{ __('Kurzbeschreibung') }}</flux:label>
                            <flux:textarea wire:model="description" name="description" rows="3" placeholder="{{ __('Ein kurzer Text über Ihr Unternehmen...') }}" />
                            @error('description') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:separator />
                    @endif

                    {{-- Persönliche Daten --}}
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                        <flux:field>
                            <flux:label>{{ __('Anrede') }} <span class="text-red-500">*</span></flux:label>
                            <flux:select wire:model="salutation" name="salutation">
                                <flux:select.option value="">{{ __('Bitte wählen') }}</flux:select.option>
                                <flux:select.option value="Herr">{{ __('Herr') }}</flux:select.option>
                                <flux:select.option value="Frau">{{ __('Frau') }}</flux:select.option>
                                <flux:select.option value="Divers">{{ __('Divers') }}</flux:select.option>
                            </flux:select>
                            @error('salutation') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Vorname') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="firstName" name="firstName" icon="user" />
                            @error('firstName') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Nachname') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="lastName" name="lastName" icon="user" />
                            @error('lastName') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>
                    </div>

                    <flux:separator />

                    {{-- Adresse --}}
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
                        <flux:field class="md:col-span-3">
                            <flux:label>{{ __('Straße') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="street" name="street" icon="map-pin" placeholder="{{ __('Musterstraße') }}" />
                            @error('street') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Hausnummer') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="houseNumber" name="houseNumber" placeholder="{{ __('123a') }}" />
                            @error('houseNumber') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>
                    </div>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                        <flux:field>
                            <flux:label>{{ __('Postleitzahl') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="zip" name="zip" icon="map" placeholder="{{ __('12345') }}" />
                            @error('zip') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field class="md:col-span-2">
                            <flux:label>{{ __('Ort') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="city" name="city" icon="building-office" placeholder="{{ __('Musterstadt') }}" />
                            @error('city') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>
                    </div>

                    <flux:field>
                        <flux:label>{{ __('Land') }} <span class="text-red-500">*</span></flux:label>
                        <flux:select wire:model="country" name="country">
                            <flux:select.option value="Deutschland">{{ __('Deutschland') }}</flux:select.option>
                            <flux:select.option value="Österreich">{{ __('Österreich') }}</flux:select.option>
                            <flux:select.option value="Schweiz">{{ __('Schweiz') }}</flux:select.option>
                        </flux:select>
                        @error('country') <flux:error>{{ $message }}</flux:error> @enderror
                    </flux:field>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <flux:field>
                            <flux:label>{{ __('Telefon') }}</flux:label>
                            <flux:input wire:model="phone" name="phone" type="tel" icon="phone" placeholder="{{ __('optional') }}" />
                            @error('phone') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        @if (!$isCustomer)
                            <flux:field>
                                <flux:label>{{ __('Website') }}</flux:label>
                                <flux:input wire:model="website" name="website" type="url" icon="globe-alt" placeholder="https://..." />
                                @error('website') <flux:error>{{ $message }}</flux:error> @enderror
                            </flux:field>
                        @endif
                    </div>

                    {{-- Liefergebiete (nur Händler) --}}
                    @if ($isRetailer)
                        <flux:separator />

                        <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
                            <p class="mb-1 text-sm font-medium text-blue-800 dark:text-blue-200">{{ __('Liefergebiete') }}</p>
                            <p class="text-xs text-blue-600 dark:text-blue-300">{{ __('Definieren Sie, in welchem Umkreis Sie liefern und montieren können.') }}</p>
                        </div>

                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                            <flux:field>
                                <flux:label>{{ __('Lieferradius (km)') }} <span class="text-red-500">*</span></flux:label>
                                <flux:description>{{ __('Ich liefere im Umkreis von ... km') }}</flux:description>
                                <flux:input wire:model="deliveryRadius" name="deliveryRadius" type="number" min="1" max="500" placeholder="z.B. 50" />
                                @error('deliveryRadius') <flux:error>{{ $message }}</flux:error> @enderror
                            </flux:field>

                            <flux:field>
                                <flux:label>{{ __('Montageradius (km)') }} <span class="text-red-500">*</span></flux:label>
                                <flux:description>{{ __('Ich montiere im Umkreis von ... km') }}</flux:description>
                                <flux:input wire:model="assemblyRadius" name="assemblyRadius" type="number" min="1" max="500" placeholder="z.B. 30" />
                                @error('assemblyRadius') <flux:error>{{ $message }}</flux:error> @enderror
                            </flux:field>
                        </div>
                    @endif
                </flux:card>
            </div>
        @endif

        {{-- ── TAB 2: PRÄSENTATION / ÜBER UNS ── --}}
        @if ($activeTab === 'praesentation')
            <div class="space-y-6">

                {{-- Story & Profil --}}
                <flux:card class="space-y-6 shadow-elegant">
                    <div>
                        <flux:heading size="lg">{{ $isRetailer ? __('Präsentation & Story') : __('Über das Unternehmen') }}</flux:heading>
                        <flux:subheading>
                            {{ $isRetailer
                                ? __('Erzählen Sie Ihre Geschichte – was macht Ihren Showroom besonders?')
                                : __('Teilen Sie Ihre Unternehmensgeschichte und Spezialisierungen.') }}
                        </flux:subheading>
                    </div>
                    <flux:separator />

                    <flux:field>
                        <flux:label>{{ __('Über uns / Story') }}</flux:label>
                        <flux:description>{{ __('Sichtbar auf Ihrem öffentlichen Profil. Max. 2000 Zeichen.') }}</flux:description>
                        <flux:textarea
                            wire:model="storyText"
                            name="storyText"
                            rows="8"
                            placeholder="{{ $isRetailer ? __('Erzählen Sie von Ihrem Showroom, Ihrer Geschichte und was Sie besonders macht...') : __('Erzählen Sie von Ihrer Marke, Ihren Werten und Ihrer Philosophie...') }}"
                        />
                        <div class="mt-1 text-right text-xs text-zinc-400">{{ strlen($storyText) }} / 2000</div>
                        @error('storyText') <flux:error>{{ $message }}</flux:error> @enderror
                    </flux:field>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <flux:field>
                            <flux:label>{{ __('Gründungsjahr') }}</flux:label>
                            <flux:input wire:model="foundedYear" name="foundedYear" type="number" min="1800" max="{{ now()->year }}" placeholder="{{ __('z.B. 1998') }}" icon="calendar" />
                            @error('foundedYear') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Spezialisierungen') }}</flux:label>
                            <flux:description>{{ __('Kommagetrennt, z.B.: Polstermöbel, Outdoor, Küchen') }}</flux:description>
                            <flux:input wire:model="specialtiesInput" name="specialtiesInput" icon="tag" placeholder="{{ __('Polstermöbel, Outdoor, Küchen') }}" />
                            @error('specialtiesInput') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>
                    </div>
                </flux:card>

                {{-- Marke (nur Hersteller) --}}
                @if ($isManufacturer)
                    <flux:card class="space-y-6 shadow-elegant">
                        <div>
                            <flux:heading size="lg">{{ __('Ihre Marke') }}</flux:heading>
                            <flux:subheading>{{ __('Unter dieser Marke werden Ihre Produkte auf B2in gelistet.') }}</flux:subheading>
                        </div>
                        <flux:separator />

                        <flux:field>
                            <flux:label>{{ __('Markenname') }} <span class="text-red-500">*</span></flux:label>
                            <flux:input wire:model="brandName" name="brandName" icon="tag" placeholder="{{ __('z.B. Möbelwerke Premium') }}" />
                            @error('brandName') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Marken-Beschreibung') }}</flux:label>
                            <flux:textarea wire:model="brandDescription" name="brandDescription" rows="4" placeholder="{{ __('Ein kurzer Text über Ihre Marke...') }}" />
                            @error('brandDescription') <flux:error>{{ $message }}</flux:error> @enderror
                        </flux:field>
                    </flux:card>
                @endif

            </div>
        @endif

        {{-- ── TAB 3: ÖFFNUNGSZEITEN (nur Händler) ── --}}
        @if ($activeTab === 'oeffnungszeiten' && $isRetailer)
            <div class="space-y-6">
                <flux:card class="space-y-6 shadow-elegant">
                    <div>
                        <flux:heading size="lg">{{ __('Öffnungszeiten') }}</flux:heading>
                        <flux:subheading>{{ __('Wann sind Sie für Kunden erreichbar oder Ihr Showroom geöffnet?') }}</flux:subheading>
                    </div>
                    <flux:separator />

                    <div class="space-y-3">
                        @foreach ($dayLabels as $dayKey => $dayLabel)
                            <div class="flex flex-wrap items-center gap-3 rounded-lg px-3 py-2 even:bg-zinc-50 dark:even:bg-zinc-800/50">
                                <div class="w-28 shrink-0 text-sm font-medium text-zinc-700 dark:text-zinc-300">
                                    {{ $dayLabel }}
                                </div>

                                <flux:checkbox
                                    wire:model.live="openingHours.{{ $dayKey }}.closed"
                                    label="{{ __('Geschlossen') }}"
                                />

                                @unless ($openingHours[$dayKey]['closed'] ?? false)
                                    <div class="flex items-center gap-2">
                                        <flux:input
                                            wire:model="openingHours.{{ $dayKey }}.open"
                                            type="time"
                                            size="sm"
                                        />
                                        <span class="text-sm text-zinc-500">–</span>
                                        <flux:input
                                            wire:model="openingHours.{{ $dayKey }}.close"
                                            type="time"
                                            size="sm"
                                        />
                                    </div>
                                @endunless
                            </div>
                        @endforeach
                    </div>
                </flux:card>
            </div>
        @endif

        {{-- ── TAB 4: FOTOS ── --}}
        @if ($activeTab === 'fotos' && ($isRetailer || $isManufacturer))
            <div class="space-y-6">

                @if ($isRetailer)
                    {{-- ── Team-Fotos ── --}}
                    <flux:card class="shadow-elegant">
                        <div class="mb-4">
                            <flux:heading size="lg">{{ __('Team-Fotos') }}</flux:heading>
                            <flux:subheading>{{ __('Nur JPG/PNG – max. 200 MB pro Bild') }}</flux:subheading>
                        </div>
                        <flux:separator class="mb-6" />

                        @if (count($existingTeamPhotos) > 0)
                            <div class="mb-6">
                                <flux:heading size="sm" class="mb-3">{{ __('Vorhandene Fotos') }}</flux:heading>
                                <flux:text size="sm" class="mb-3 text-zinc-500">{{ __('Per Drag & Drop sortieren – das erste Foto wird als Hauptbild verwendet.') }}</flux:text>
                                <div
                                    x-data="{
                                        dragging: null,
                                        dragOver: null,
                                        items: @js(collect($existingTeamPhotos)->pluck('id')->toArray()),
                                        onDragStart(e, id) {
                                            this.dragging = id;
                                            e.dataTransfer.effectAllowed = 'move';
                                            e.dataTransfer.setData('text/plain', id);
                                        },
                                        onDragOver(e, id) {
                                            e.preventDefault();
                                            e.dataTransfer.dropEffect = 'move';
                                            this.dragOver = id;
                                        },
                                        onDrop(e, targetId) {
                                            e.preventDefault();
                                            if (this.dragging === targetId) { this.dragOver = null; return; }
                                            const fromIdx = this.items.indexOf(this.dragging);
                                            const toIdx = this.items.indexOf(targetId);
                                            this.items.splice(fromIdx, 1);
                                            this.items.splice(toIdx, 0, this.dragging);
                                            this.dragging = null;
                                            this.dragOver = null;
                                            $wire.updatePhotoOrder(this.items, 'team_photo');
                                        },
                                        onDragEnd() { this.dragging = null; this.dragOver = null; }
                                    }"
                                    class="flex flex-wrap items-start gap-3"
                                >
                                    @foreach ($existingTeamPhotos as $photo)
                                        <div
                                            wire:key="team-photo-{{ $photo['id'] }}"
                                            draggable="true"
                                            x-on:dragstart="onDragStart($event, {{ $photo['id'] }})"
                                            x-on:dragover="onDragOver($event, {{ $photo['id'] }})"
                                            x-on:drop="onDrop($event, {{ $photo['id'] }})"
                                            x-on:dragend="onDragEnd()"
                                            :class="{
                                                'opacity-50 scale-95': dragging === {{ $photo['id'] }},
                                                'ring-2 ring-blue-400 ring-offset-2 dark:ring-offset-zinc-800': dragOver === {{ $photo['id'] }} && dragging !== {{ $photo['id'] }}
                                            }"
                                            class="group relative cursor-grab transition-all duration-150 active:cursor-grabbing"
                                        >
                                            <img
                                                src="{{ Storage::url($photo['file_path']) }}"
                                                alt="{{ $photo['alt_text'] }}"
                                                class="h-24 w-24 rounded-lg border border-zinc-200 object-cover dark:border-zinc-700"
                                            />
                                            <flux:button
                                                wire:click="removeExistingPhoto({{ $photo['id'] }}, 'team_photo')"
                                                wire:confirm="{{ __('Foto wirklich löschen?') }}"
                                                variant="filled" size="xs" icon="trash"
                                                class="absolute -right-2 -top-2 !bg-red-500 !text-white hover:!bg-red-600"
                                            />
                                            <div class="absolute bottom-1 left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100">
                                                <flux:icon.arrows-up-down class="h-4 w-4 text-white drop-shadow-md" />
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <flux:separator class="mb-6" />
                        @endif

                        <flux:file-upload wire:model="newTeamPhotos" multiple accept="image/jpeg,image/png,.jpg,.jpeg,.png">
                            <flux:file-upload.dropzone heading="{{ __('Team-Fotos hochladen') }}" text="{{ __('JPEG oder PNG – max. 200 MB') }}" with-progress />
                        </flux:file-upload>

                        @if (count($newTeamPhotos) > 0)
                            <div class="mt-4 flex flex-wrap items-center gap-3">
                                @foreach ($newTeamPhotos as $index => $photo)
                                    <flux:file-item
                                        :heading="$photo->getClientOriginalName()"
                                        :image="(str_starts_with($photo->getMimeType() ?? '', 'image/') && $photo->isPreviewable()) ? $photo->temporaryUrl() : null"
                                        :size="$photo->getSize()"
                                    >
                                        <x-slot name="actions">
                                            <flux:file-item.remove wire:click="removeQueuedPhoto({{ $index }}, 'team_photo')" />
                                        </x-slot>
                                    </flux:file-item>
                                @endforeach
                            </div>
                        @endif
                        <flux:error name="newTeamPhotos.*" />
                    </flux:card>

                    {{-- ── Showroom-Galerie ── --}}
                    <flux:card class="shadow-elegant">
                        <div class="mb-4">
                            <flux:heading size="lg">{{ __('Showroom-Galerie') }}</flux:heading>
                            <flux:subheading>{{ __('Bilder Ihres Showrooms für das öffentliche Profil – nur JPG/PNG, max. 200 MB') }}</flux:subheading>
                        </div>
                        <flux:separator class="mb-6" />

                        @if (count($existingShowroomPhotos) > 0)
                            <div class="mb-6">
                                <flux:heading size="sm" class="mb-3">{{ __('Vorhandene Bilder') }}</flux:heading>
                                <flux:text size="sm" class="mb-3 text-zinc-500">{{ __('Per Drag & Drop sortieren.') }}</flux:text>
                                <div
                                    x-data="{
                                        dragging: null,
                                        dragOver: null,
                                        items: @js(collect($existingShowroomPhotos)->pluck('id')->toArray()),
                                        onDragStart(e, id) {
                                            this.dragging = id;
                                            e.dataTransfer.effectAllowed = 'move';
                                            e.dataTransfer.setData('text/plain', id);
                                        },
                                        onDragOver(e, id) {
                                            e.preventDefault();
                                            e.dataTransfer.dropEffect = 'move';
                                            this.dragOver = id;
                                        },
                                        onDrop(e, targetId) {
                                            e.preventDefault();
                                            if (this.dragging === targetId) { this.dragOver = null; return; }
                                            const fromIdx = this.items.indexOf(this.dragging);
                                            const toIdx = this.items.indexOf(targetId);
                                            this.items.splice(fromIdx, 1);
                                            this.items.splice(toIdx, 0, this.dragging);
                                            this.dragging = null;
                                            this.dragOver = null;
                                            $wire.updatePhotoOrder(this.items, 'showroom');
                                        },
                                        onDragEnd() { this.dragging = null; this.dragOver = null; }
                                    }"
                                    class="flex flex-wrap items-start gap-3"
                                >
                                    @foreach ($existingShowroomPhotos as $photo)
                                        <div
                                            wire:key="showroom-photo-{{ $photo['id'] }}"
                                            draggable="true"
                                            x-on:dragstart="onDragStart($event, {{ $photo['id'] }})"
                                            x-on:dragover="onDragOver($event, {{ $photo['id'] }})"
                                            x-on:drop="onDrop($event, {{ $photo['id'] }})"
                                            x-on:dragend="onDragEnd()"
                                            :class="{
                                                'opacity-50 scale-95': dragging === {{ $photo['id'] }},
                                                'ring-2 ring-blue-400 ring-offset-2 dark:ring-offset-zinc-800': dragOver === {{ $photo['id'] }} && dragging !== {{ $photo['id'] }}
                                            }"
                                            class="group relative cursor-grab transition-all duration-150 active:cursor-grabbing"
                                        >
                                            <img
                                                src="{{ Storage::url($photo['file_path']) }}"
                                                alt="{{ $photo['alt_text'] }}"
                                                class="h-24 w-24 rounded-lg border border-zinc-200 object-cover dark:border-zinc-700"
                                            />
                                            <flux:button
                                                wire:click="removeExistingPhoto({{ $photo['id'] }}, 'showroom')"
                                                wire:confirm="{{ __('Foto wirklich löschen?') }}"
                                                variant="filled" size="xs" icon="trash"
                                                class="absolute -right-2 -top-2 !bg-red-500 !text-white hover:!bg-red-600"
                                            />
                                            <div class="absolute bottom-1 left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100">
                                                <flux:icon.arrows-up-down class="h-4 w-4 text-white drop-shadow-md" />
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <flux:separator class="mb-6" />
                        @endif

                        <flux:file-upload wire:model="newShowroomPhotos" multiple accept="image/jpeg,image/png,.jpg,.jpeg,.png">
                            <flux:file-upload.dropzone heading="{{ __('Showroom-Bilder hochladen') }}" text="{{ __('JPEG oder PNG – max. 200 MB') }}" with-progress />
                        </flux:file-upload>

                        @if (count($newShowroomPhotos) > 0)
                            <div class="mt-4 flex flex-wrap items-center gap-3">
                                @foreach ($newShowroomPhotos as $index => $photo)
                                    <flux:file-item
                                        :heading="$photo->getClientOriginalName()"
                                        :image="(str_starts_with($photo->getMimeType() ?? '', 'image/') && $photo->isPreviewable()) ? $photo->temporaryUrl() : null"
                                        :size="$photo->getSize()"
                                    >
                                        <x-slot name="actions">
                                            <flux:file-item.remove wire:click="removeQueuedPhoto({{ $index }}, 'showroom')" />
                                        </x-slot>
                                    </flux:file-item>
                                @endforeach
                            </div>
                        @endif
                        <flux:error name="newShowroomPhotos.*" />
                    </flux:card>
                @endif

                @if ($isManufacturer)
                    {{-- ── Marken-Bilder ── --}}
                    <flux:card class="shadow-elegant">
                        <div class="mb-4">
                            <flux:heading size="lg">{{ __('Marken-Bilder') }}</flux:heading>
                            <flux:subheading>{{ __('Bilder für Ihre Marken-Präsentation (Atmosphäre, Brand-Story etc.) – nur JPG/PNG, max. 200 MB') }}</flux:subheading>
                        </div>
                        <flux:separator class="mb-6" />

                        @if (count($existingBrandImages) > 0)
                            <div class="mb-6">
                                <flux:heading size="sm" class="mb-3">{{ __('Vorhandene Bilder') }}</flux:heading>
                                <flux:text size="sm" class="mb-3 text-zinc-500">{{ __('Per Drag & Drop sortieren.') }}</flux:text>
                                <div
                                    x-data="{
                                        dragging: null,
                                        dragOver: null,
                                        items: @js(collect($existingBrandImages)->pluck('id')->toArray()),
                                        onDragStart(e, id) {
                                            this.dragging = id;
                                            e.dataTransfer.effectAllowed = 'move';
                                            e.dataTransfer.setData('text/plain', id);
                                        },
                                        onDragOver(e, id) {
                                            e.preventDefault();
                                            e.dataTransfer.dropEffect = 'move';
                                            this.dragOver = id;
                                        },
                                        onDrop(e, targetId) {
                                            e.preventDefault();
                                            if (this.dragging === targetId) { this.dragOver = null; return; }
                                            const fromIdx = this.items.indexOf(this.dragging);
                                            const toIdx = this.items.indexOf(targetId);
                                            this.items.splice(fromIdx, 1);
                                            this.items.splice(toIdx, 0, this.dragging);
                                            this.dragging = null;
                                            this.dragOver = null;
                                            $wire.updatePhotoOrder(this.items, 'brand_image');
                                        },
                                        onDragEnd() { this.dragging = null; this.dragOver = null; }
                                    }"
                                    class="flex flex-wrap items-start gap-3"
                                >
                                    @foreach ($existingBrandImages as $photo)
                                        <div
                                            wire:key="brand-image-{{ $photo['id'] }}"
                                            draggable="true"
                                            x-on:dragstart="onDragStart($event, {{ $photo['id'] }})"
                                            x-on:dragover="onDragOver($event, {{ $photo['id'] }})"
                                            x-on:drop="onDrop($event, {{ $photo['id'] }})"
                                            x-on:dragend="onDragEnd()"
                                            :class="{
                                                'opacity-50 scale-95': dragging === {{ $photo['id'] }},
                                                'ring-2 ring-blue-400 ring-offset-2 dark:ring-offset-zinc-800': dragOver === {{ $photo['id'] }} && dragging !== {{ $photo['id'] }}
                                            }"
                                            class="group relative cursor-grab transition-all duration-150 active:cursor-grabbing"
                                        >
                                            <img
                                                src="{{ Storage::url($photo['file_path']) }}"
                                                alt="{{ $photo['alt_text'] }}"
                                                class="h-24 w-24 rounded-lg border border-zinc-200 object-cover dark:border-zinc-700"
                                            />
                                            <flux:button
                                                wire:click="removeExistingPhoto({{ $photo['id'] }}, 'brand_image')"
                                                wire:confirm="{{ __('Foto wirklich löschen?') }}"
                                                variant="filled" size="xs" icon="trash"
                                                class="absolute -right-2 -top-2 !bg-red-500 !text-white hover:!bg-red-600"
                                            />
                                            <div class="absolute bottom-1 left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100">
                                                <flux:icon.arrows-up-down class="h-4 w-4 text-white drop-shadow-md" />
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <flux:separator class="mb-6" />
                        @endif

                        <flux:file-upload wire:model="newBrandImages" multiple accept="image/jpeg,image/png,.jpg,.jpeg,.png">
                            <flux:file-upload.dropzone heading="{{ __('Marken-Bilder hochladen') }}" text="{{ __('JPEG oder PNG – max. 200 MB') }}" with-progress />
                        </flux:file-upload>

                        @if (count($newBrandImages) > 0)
                            <div class="mt-4 flex flex-wrap items-center gap-3">
                                @foreach ($newBrandImages as $index => $photo)
                                    <flux:file-item
                                        :heading="$photo->getClientOriginalName()"
                                        :image="(str_starts_with($photo->getMimeType() ?? '', 'image/') && $photo->isPreviewable()) ? $photo->temporaryUrl() : null"
                                        :size="$photo->getSize()"
                                    >
                                        <x-slot name="actions">
                                            <flux:file-item.remove wire:click="removeQueuedPhoto({{ $index }}, 'brand_image')" />
                                        </x-slot>
                                    </flux:file-item>
                                @endforeach
                            </div>
                        @endif
                        <flux:error name="newBrandImages.*" />
                    </flux:card>
                @endif

            </div>
        @endif

        {{-- Speichern-Button --}}
        <div class="flex items-center justify-between">
            <x-error-alert />
            <flux:button type="submit" variant="primary" icon="check-circle" wire:loading.attr="disabled" class="ml-auto">
                <span wire:loading.remove>{{ __('Änderungen speichern') }}</span>
                <span wire:loading>{{ __('Wird gespeichert...') }}</span>
            </flux:button>
        </div>

    </form>
</div>