@props(['model' => null])

@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

<div>
    <label class="{{ $labelClass }}">Tag</label>
    <input name="tag" maxlength="40" value="{{ $model?->tag }}" placeholder="mis. CARA PAKAI" class="{{ $inputClass }}">
</div>

<div>
    <label class="{{ $labelClass }}">Judul <span class="normal-case text-sub font-normal">(boleh kosong kalau teksnya sudah ada di gambar)</span></label>
    <input name="title" maxlength="80" value="{{ $model?->title }}" placeholder="Cari mitra, lalu chat langsung" class="{{ $inputClass }}">
</div>

<div>
    <label class="{{ $labelClass }}">Keterangan</label>
    <input name="subtitle" maxlength="160" value="{{ $model?->subtitle }}" placeholder="Diskusikan kebutuhan Anda langsung dengan mitra" class="{{ $inputClass }}">
</div>

<div class="grid grid-cols-2 gap-2 items-end">
    <div>
        <label class="{{ $labelClass }}">Urutan</label>
        <input name="sort_order" type="number" min="0" max="9999" value="{{ $model?->sort_order ?? 0 }}" class="{{ $inputClass }}">
    </div>
    <label class="flex items-center gap-2 pb-2 text-sm font-medium">
        {{-- Hidden 0 di depan: checkbox yang tidak dicentang tidak ikut terkirim. --}}
        <input type="hidden" name="is_active" value="0">
        <input type="checkbox" name="is_active" value="1" @checked($model?->is_active ?? true)
               class="w-4 h-4 rounded border-line text-brand focus:ring-brand/30">
        Tampilkan
    </label>
</div>

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

    @if ($model?->imageUrl())
        <img src="{{ $model->imageUrl() }}" alt="Gambar banner {{ $model->title }}"
             class="mb-2 w-full h-28 object-cover rounded-xl border border-line">
    @endif

    <input type="file" name="image" 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">
    <p class="mt-1 text-[11px] text-sub">JPG/PNG/WebP, maksimal 4 MB. Kosongkan kalau tidak ingin mengubah gambarnya.</p>

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

    @if ($model?->image_path)
        <label class="mt-2 flex items-center gap-2 text-xs font-semibold text-red-600">
            <input type="hidden" name="remove_image" value="0">
            <input type="checkbox" name="remove_image" value="1" class="w-4 h-4 rounded">
            Hapus gambar (banner kembali jadi kartu teks)
        </label>
    @endif
</div>