<x-layouts.tenant pageTitle="Configuración del negocio">
    <x-page-header title="Configuración del negocio" subtitle="Gestiona la identidad, datos públicos y recursos visuales de tu empresa." />

    <x-card title="Identidad y presencia pública">
        <form method="POST" action="{{ request()->routeIs('tenant.branding.*') ? route('tenant.branding.update') : route('tenant.business-settings.update') }}" enctype="multipart/form-data" class="space-y-7">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 gap-5 lg:grid-cols-[18rem_1fr]">
                <div class="space-y-4">
                    <div class="rounded-2xl border border-ink-100 bg-ink-50 p-4">
                        <span class="text-sm font-semibold text-ink-700">Logo actual</span>
                        <div class="mt-3 flex h-32 w-full items-center justify-center overflow-hidden rounded-2xl bg-white border border-ink-100">
                            @if ($company->logoUrl())
                                <img src="{{ $company->logoUrl() }}" alt="{{ $company->name }}" class="max-h-full max-w-full object-contain p-3">
                            @else
                                <div class="flex h-16 w-16 items-center justify-center rounded-2xl text-xl font-black text-white" style="background: linear-gradient(135deg, {{ $company->primary_color }}, {{ $company->secondary_color }});">
                                    {{ strtoupper(substr($company->name, 0, 1)) }}
                                </div>
                            @endif
                        </div>
                        <label class="mt-4 block">
                            <span class="text-sm font-semibold text-ink-700">Subir logo</span>
                            <input type="file" name="logo" accept="image/jpeg,image/png,image/webp" class="input mt-1.5">
                            <span class="mt-1 block text-xs text-ink-500">PNG, JPG o WebP. Recomendado fondo transparente.</span>
                        </label>
                        @error('logo') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="rounded-2xl border border-ink-100 bg-ink-50 p-4">
                        <span class="text-sm font-semibold text-ink-700">Portada pública</span>
                        <div class="mt-3 h-28 overflow-hidden rounded-2xl bg-white border border-ink-100">
                            @if ($company->coverUrl())
                                <img src="{{ $company->coverUrl() }}" alt="Portada de {{ $company->name }}" class="h-full w-full object-cover">
                            @else
                                <div class="h-full w-full" style="background: linear-gradient(135deg, {{ $company->primary_color }}, {{ $company->secondary_color }});"></div>
                            @endif
                        </div>
                        <label class="mt-4 block">
                            <span class="text-sm font-semibold text-ink-700">Subir portada</span>
                            <input type="file" name="cover" accept="image/jpeg,image/png,image/webp" class="input mt-1.5">
                        </label>
                        @error('cover') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Nombre</span>
                    <input name="name" value="{{ old('name', $company->name) }}" required class="input mt-1.5">
                    @error('name') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Razón social</span>
                    <input name="legal_name" value="{{ old('legal_name', $company->legal_name) }}" class="input mt-1.5">
                    @error('legal_name') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Correo público</span>
                    <input type="email" name="email" value="{{ old('email', $company->email) }}" class="input mt-1.5" placeholder="hola@empresa.com">
                    @error('email') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Teléfono</span>
                    <input name="phone" value="{{ old('phone', $company->phone) }}" class="input mt-1.5" placeholder="+57...">
                    @error('phone') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">WhatsApp</span>
                    <input name="whatsapp" value="{{ old('whatsapp', $company->whatsapp) }}" class="input mt-1.5" placeholder="+57...">
                    @error('whatsapp') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Sitio web</span>
                    <input name="website" value="{{ old('website', $company->website) }}" class="input mt-1.5" placeholder="https://...">
                    @error('website') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Color principal</span>
                    <input type="color" name="primary_color" value="{{ old('primary_color', $company->primary_color) }}" class="mt-1.5 h-11 w-24 rounded-lg border border-ink-200">
                    @error('primary_color') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Color secundario</span>
                    <input type="color" name="secondary_color" value="{{ old('secondary_color', $company->secondary_color) }}" class="mt-1.5 h-11 w-24 rounded-lg border border-ink-200">
                    @error('secondary_color') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Dirección</span>
                    <input name="address" value="{{ old('address', $company->address) }}" class="input mt-1.5">
                    @error('address') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Ciudad</span>
                    <input name="city" value="{{ old('city', $company->city) }}" class="input mt-1.5">
                    @error('city') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">Departamento / estado</span>
                    <input name="state" value="{{ old('state', $company->state) }}" class="input mt-1.5">
                    @error('state') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block">
                    <span class="text-sm font-semibold text-ink-700">País</span>
                    <input name="country" value="{{ old('country', $company->country) }}" class="input mt-1.5">
                    @error('country') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                <label class="block md:col-span-2">
                    <span class="text-sm font-semibold text-ink-700">Descripción pública</span>
                    <textarea name="description" rows="4" class="input mt-1.5">{{ old('description', $company->description) }}</textarea>
                    @error('description') <p class="text-xs text-rose-600 mt-1">{{ $message }}</p> @enderror
                </label>
                </div>
            </div>
            <x-btn type="submit">Guardar marca</x-btn>
        </form>
    </x-card>
</x-layouts.tenant>
