@props(['model' => null, 'categories' => null, 'parentId' => null, 'icon' => false])

@php
    $inputClass = 'w-full rounded-xl border border-line px-3 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20';
    $labelClass = 'block text-[11px] font-semibold uppercase tracking-wide text-sub mb-1';
@endphp

@if ($categories !== null)
    <div>
        <label class="{{ $labelClass }}">Kategori</label>
        <select name="parent_id" required class="{{ $inputClass }}">
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected(($model?->parent_id ?? $parentId) == $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
    </div>
@endif

<div>
    <label class="{{ $labelClass }}">Nama</label>
    <input name="name" required maxlength="100" value="{{ $model?->name }}" placeholder="mis. Servis AC" class="{{ $inputClass }}">
</div>

<div class="grid grid-cols-3 gap-2">
    <div class="col-span-2">
        <label class="{{ $labelClass }}">Slug</label>
        <input name="slug" maxlength="120" value="{{ $model?->slug }}" placeholder="otomatis dari nama" class="{{ $inputClass }} font-mono text-xs">
    </div>
    <div>
        <label class="{{ $labelClass }}">Urutan</label>
        <input name="sort_order" type="number" min="0" max="9999" value="{{ $model?->sort_order ?? 0 }}" class="{{ $inputClass }}">
    </div>
</div>

@if ($icon)
    <div>
        <label class="{{ $labelClass }}">
            Ikon @if ($model?->icon_path)<span class="normal-case text-sub font-normal">(sudah ada — unggah untuk mengganti)</span>@endif
        </label>

        @if ($model?->iconUrl())
            <img src="{{ $model->iconUrl() }}" alt="Ikon {{ $model->name }}"
                 class="mb-2 w-12 h-12 object-contain rounded-xl border border-line bg-white p-1">
        @endif

        <input type="file" name="icon" accept="image/jpeg,image/png,image/webp"
               class="{{ $inputClass }} file:mr-3 file:rounded-lg file:border-0 file:bg-brand-soft file:px-3 file:py-1.5 file:text-brand-dark file:text-xs file:font-semibold">
        {{-- Gambarnya dipadatkan ke WebP 256 px saat disimpan, jadi berkas
             besar tidak jadi masalah — batasnya cuma penjaga unggahan. --}}
        <p class="mt-1 text-[11px] text-sub">PNG/JPG/WebP, maksimal 2 MB. Disimpan ulang jadi WebP 256 px. Kosongkan kalau tidak ingin mengubahnya.</p>

        @error('icon')<p class="text-[11px] text-red-600 mt-1">{{ $message }}</p>@enderror

        @if ($model?->icon_path)
            <label class="mt-2 flex items-center gap-2 text-xs font-semibold text-red-600">
                <input type="hidden" name="remove_icon" value="0">
                <input type="checkbox" name="remove_icon" value="1" class="w-4 h-4 rounded">
                Hapus ikon (aplikasi pakai ikon bawaan)
            </label>
        @endif
    </div>
@endif