@php $theme = $theme ?? null; @endphp

<div>
    <label class="block text-sm font-medium text-gray-700">Nama Tema</label>
    <input type="text" name="name" value="{{ old('name', $theme->name ?? '') }}" placeholder="contoh: Natal 2026"
           class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Warna Utama</label>
    <div class="mt-1 flex items-center gap-3">
        <input type="color" id="primary_color_picker" value="{{ old('primary_color', $theme->primary_color ?? '#0171bb') }}"
               oninput="document.getElementById('primary_color_text').value = this.value"
               class="h-10 w-14 rounded border border-gray-300">
        <input type="text" name="primary_color" id="primary_color_text" value="{{ old('primary_color', $theme->primary_color ?? '#0171bb') }}"
               oninput="document.getElementById('primary_color_picker').value = this.value"
               class="w-32 rounded border border-gray-300 px-3 py-2 text-sm font-mono"
               placeholder="#0171bb">
    </div>
    <p class="mt-1 text-xs text-gray-400">Dipakai untuk warna tombol, aksen judul, dan ikon di homepage.</p>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Logo</label>
    @if ($theme?->logoUrl())
        <img src="{{ $theme->logoUrl() }}" alt="Logo {{ $theme->name }}" class="mt-2 h-12 rounded border border-gray-200 bg-slate-800 object-contain p-1">
    @endif
    <input type="file" name="logo" accept="image/*" class="mt-1 w-full text-sm">
    <p class="mt-1 text-xs text-gray-400">Logo yang tampil di navbar homepage. Kosongkan untuk memakai logo default.</p>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700">Favicon</label>
    @if ($theme?->faviconUrl())
        <img src="{{ $theme->faviconUrl() }}" alt="Favicon {{ $theme->name }}" class="mt-2 h-8 w-8 rounded border border-gray-200 object-contain">
    @endif
    <input type="file" name="favicon" accept="image/*,.ico" class="mt-1 w-full text-sm">
    <p class="mt-1 text-xs text-gray-400">Ikon tab browser. Idealnya gambar persegi (mis. 32x32 atau 64x64px). Kosongkan untuk memakai favicon default.</p>
</div>

<div class="flex items-center gap-2">
    <input type="checkbox" name="is_active" id="is_active" value="1" @checked(old('is_active', $theme->is_active ?? false))>
    <label for="is_active" class="text-sm text-gray-700">Aktifkan tema ini sekarang</label>
</div>