@php
    $isEdit = $laptop->exists;
    $categories = ['mahasiswa' => 'Mahasiswa', 'gaming' => 'Gaming', 'editing' => 'Editing', 'kantoran' => 'Kantoran'];
    $lineText = fn ($value) => is_array($value) ? implode("\n", $value) : (string) ($value ?? '');
    $requiredFields = ['name', 'harga', 'processor', 'ram', 'storage', 'kategori', 'deskripsi', 'image'];
@endphp

<form method="POST" action="{{ $isEdit ? route('laptops.update', $laptop) : route('laptops.store') }}" enctype="multipart/form-data" class="space-y-6" data-laptop-form>
    @csrf
    @if($isEdit)
        @method('PUT')
    @endif

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]">
        <div class="space-y-6">
            <x-admin.card title="Informasi dasar" description="Data utama yang tampil di katalog React dan admin.">
                <div class="grid gap-4 md:grid-cols-2">
                    <div class="md:col-span-2">
                        <label class="form-label" for="name">Nama laptop *</label>
                        <input id="name" name="name" type="text" value="{{ old('name', $laptop->name) }}" class="form-control" placeholder="ASUS VivoBook 15 OLED" required data-progress-field>
                        @error('name') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="form-label" for="harga">Harga *</label>
                        <input id="harga" name="harga" type="text" value="{{ old('harga', $laptop->harga) }}" class="form-control" placeholder="Rp 8.499.000" required data-progress-field>
                        @error('harga') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="form-label" for="kategori">Kategori *</label>
                        <select id="kategori" name="kategori" class="form-control" data-progress-field>
                            <option value="">Pilih kategori</option>
                            @foreach($categories as $value => $label)
                                <option value="{{ $value }}" @selected(old('kategori', $laptop->kategori) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('kategori') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="form-label" for="badge">Badge</label>
                        <input id="badge" name="badge" type="text" value="{{ old('badge', $laptop->badge) }}" class="form-control" placeholder="Terlaris, Promo, Baru">
                        @error('badge') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <label class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-3 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200">
                        <input type="checkbox" name="recommended" value="1" class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" @checked(old('recommended', $laptop->recommended))>
                        Tampilkan sebagai rekomendasi
                    </label>
                </div>
            </x-admin.card>

            <x-admin.card title="Spesifikasi" description="Gunakan format singkat dan konsisten agar mudah dipindai user.">
                <div class="grid gap-4 md:grid-cols-2">
                    @foreach([
                        'processor' => ['Processor *', 'Intel Core i5-1235U'],
                        'ram' => ['RAM *', '16 GB DDR4'],
                        'storage' => ['Storage *', '512 GB SSD'],
                        'gpu' => ['GPU', 'Intel Iris Xe'],
                        'layar' => ['Layar', '15.6 inch FHD'],
                        'battery' => ['Baterai', '50 Wh'],
                        'weight' => ['Bobot', '1.7 kg'],
                        'os' => ['OS', 'Windows 11'],
                    ] as $field => [$label, $placeholder])
                        <div>
                            <label class="form-label" for="{{ $field }}">{{ $label }}</label>
                            <input id="{{ $field }}" name="{{ $field }}" type="text" value="{{ old($field, $laptop->{$field}) }}" class="form-control" placeholder="{{ $placeholder }}" @if(in_array($field, ['processor', 'ram', 'storage'], true)) required data-progress-field @endif>
                            @error($field) <p class="form-error">{{ $message }}</p> @enderror
                        </div>
                    @endforeach
                </div>
            </x-admin.card>

            <x-admin.card title="Deskripsi dan ringkasan" description="Pisahkan ringkasan pendek dan detail produk untuk tampilan katalog.">
                <div class="space-y-4">
                    <div>
                        <label class="form-label" for="deskripsi">Deskripsi singkat</label>
                        <textarea id="deskripsi" name="deskripsi" rows="3" class="form-control" placeholder="Ringkasan laptop untuk kartu katalog." data-progress-field>{{ old('deskripsi', $laptop->deskripsi) }}</textarea>
                        @error('deskripsi') <p class="form-error">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="form-label" for="deskripsi_produk">Deskripsi produk</label>
                        <textarea id="deskripsi_produk" name="deskripsi_produk" rows="5" class="form-control" placeholder="Detail penggunaan, performa, dan kecocokan laptop.">{{ old('deskripsi_produk', $laptop->deskripsi_produk) }}</textarea>
                        @error('deskripsi_produk') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                </div>
            </x-admin.card>

            <x-admin.card title="Kelebihan dan kekurangan" description="Tulis satu poin per baris. Data akan disimpan sebagai array.">
                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="form-label" for="kelebihan">Kelebihan</label>
                        <textarea id="kelebihan" name="kelebihan" rows="5" class="form-control" placeholder="Layar OLED&#10;Bobot ringan">{{ old('kelebihan', $lineText($laptop->kelebihan)) }}</textarea>
                        @error('kelebihan') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="form-label" for="kekurangan">Kekurangan</label>
                        <textarea id="kekurangan" name="kekurangan" rows="5" class="form-control" placeholder="RAM belum dual-channel&#10;Port terbatas">{{ old('kekurangan', $lineText($laptop->kekurangan)) }}</textarea>
                        @error('kekurangan') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="form-label" for="pros">Pros tambahan</label>
                        <textarea id="pros" name="pros" rows="4" class="form-control" placeholder="Opsional">{{ old('pros', $lineText($laptop->pros)) }}</textarea>
                        @error('pros') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="form-label" for="cons">Cons tambahan</label>
                        <textarea id="cons" name="cons" rows="4" class="form-control" placeholder="Opsional">{{ old('cons', $lineText($laptop->cons)) }}</textarea>
                        @error('cons') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                </div>
            </x-admin.card>
        </div>

        <aside class="space-y-6">
            <x-admin.card title="Gambar katalog" description="Preview langsung sebelum disimpan.">
                <div class="space-y-4">
                    <div class="aspect-[4/3] overflow-hidden rounded-2xl border border-slate-200 bg-slate-100 dark:border-slate-700 dark:bg-slate-950">
                        <img src="{{ $laptop->image_url ?? '' }}" alt="Preview laptop" class="h-full w-full object-cover {{ $laptop->image_url ? '' : 'hidden' }}" data-image-preview>
                        @unless($laptop->image_url)
                            <div class="flex h-full items-center justify-center text-slate-400">
                                <i class="fa-solid fa-image text-4xl"></i>
                            </div>
                        @endunless
                    </div>
                    <input type="file" name="image" accept="image/*" class="form-control file:mr-3 file:rounded-lg file:border-0 file:bg-brand-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-brand-600" data-image-input data-progress-field>
                    @error('image') <p class="form-error">{{ $message }}</p> @enderror
                    @if($isEdit)
                        <p class="text-xs text-slate-500 dark:text-slate-400">Kosongkan jika gambar tidak ingin diubah.</p>
                    @endif
                </div>
            </x-admin.card>

            <x-admin.card title="Kelengkapan data">
                <div class="space-y-4">
                    <div>
                        <div class="mb-2 flex items-center justify-between text-sm">
                            <span class="font-semibold text-slate-700 dark:text-slate-200">Progress form</span>
                            <span class="text-slate-500 dark:text-slate-400" data-form-progress-text>0/0 field terisi</span>
                        </div>
                        <div class="h-2 rounded-full bg-slate-100 dark:bg-slate-800">
                            <div class="h-2 rounded-full bg-brand-500 transition-all" style="width: 0%" data-form-progress-fill></div>
                        </div>
                    </div>

                    <ul class="space-y-2 text-sm text-slate-600 dark:text-slate-300">
                        @foreach($requiredFields as $field)
                            @php
                                $filled = $field === 'image' ? filled($laptop->image_url) : filled(old($field, $laptop->{$field} ?? null));
                            @endphp
                            <li class="flex items-center gap-2">
                                <i class="fa-solid {{ $filled ? 'fa-circle-check text-emerald-500' : 'fa-circle text-slate-300 dark:text-slate-600' }}"></i>
                                <span>{{ ucfirst(str_replace('_', ' ', $field)) }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <div class="rounded-2xl bg-slate-50 p-4 text-sm text-slate-600 dark:bg-slate-950 dark:text-slate-300">
                        <p class="font-semibold text-slate-800 dark:text-white">Preview kartu</p>
                        <p class="mt-2 line-clamp-2 font-bold text-slate-950 dark:text-white">{{ old('name', $laptop->name) ?: 'Nama laptop' }}</p>
                        <p class="mt-1 text-xs">{{ old('processor', $laptop->processor) ?: 'Processor' }} / {{ old('ram', $laptop->ram) ?: 'RAM' }}</p>
                        <div class="mt-3 flex items-center justify-between">
                            <span class="badge-blue">{{ old('kategori', $laptop->kategori) ?: 'Kategori' }}</span>
                            <span class="font-bold text-brand-600">{{ old('harga', $laptop->harga) ?: 'Harga' }}</span>
                        </div>
                    </div>
                </div>
            </x-admin.card>
        </aside>
    </div>

    <div class="action-bar flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-sm text-slate-500 dark:text-slate-400">Pastikan data utama lengkap sebelum dipublikasikan ke katalog React.</p>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('laptops.index') }}" class="btn-secondary">Batal</a>
            <button type="submit" class="btn-primary">
                <i class="fa-solid fa-floppy-disk"></i>
                {{ $isEdit ? 'Simpan perubahan' : 'Tambah laptop' }}
            </button>
        </div>
    </div>
</form>