<div>

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.produk') }}" wire:navigate
            class="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800">
                {{ $productId ? 'Edit Produk' : 'Tambah Produk' }}
            </h1>
            <p class="text-sm text-slate-500 mt-0.5">
                {{ $productId ? 'Perbarui informasi produk.' : 'Isi detail produk baru.' }}
            </p>
        </div>
    </div>

    <form wire:submit.prevent="save">
        <div class="grid lg:grid-cols-3 gap-6">

            {{-- Kolom kiri (2/3) --}}
            <div class="lg:col-span-2 space-y-5">

                {{-- Informasi Dasar --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-4">Informasi Produk</h2>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Nama Produk <span class="text-red-500">*</span></label>
                            <input wire:model.live="name" type="text" placeholder="Contoh: Beras Pulen 5kg"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Slug URL</label>
                            <input wire:model="slug" type="text" placeholder="auto-generate dari nama"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            <p class="mt-1 text-xs text-slate-400">Dikosongkan untuk generate otomatis.</p>
                            @error('slug') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Deskripsi</label>
                            <textarea wire:model="description" rows="4" placeholder="Jelaskan detail produk, bahan, cara penyajian, dll..."
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
                            @error('description') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                {{-- Harga --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-4">Harga</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Harga Beli (dari Mitra) <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 font-medium">Rp</span>
                                <input wire:model="buy_price" type="number" min="0" step="100" placeholder="0"
                                    class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            </div>
                            @error('buy_price') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Harga Jual (ke Customer) <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 font-medium">Rp</span>
                                <input wire:model="sell_price" type="number" min="0" step="100" placeholder="0"
                                    class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            </div>
                            @error('sell_price') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Preview margin --}}
                    @if ($buy_price > 0 && $sell_price > 0)
                        @php
                            $margin = (float) $sell_price - (float) $buy_price;
                            $marginPct = $buy_price > 0 ? round($margin / (float) $buy_price * 100, 1) : 0;
                        @endphp
                        <div class="mt-3 flex items-center gap-2 text-xs text-slate-500 bg-slate-50 rounded-lg px-3 py-2">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zM10.5 15h.008v.008H10.5V15zm0 2.25h.008v.008H10.5V17.25zm2.25-4.5h.008v.008H12.75v-.008zm0 2.25h.008v.008H12.75V15zm0 2.25h.008v.008H12.75V17.25zm2.25-4.5h.008v.008H15v-.008zm0 2.25h.008v.008H15V15zM3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h6M9 12h6"/>
                            </svg>
                            Margin kotor: Rp {{ number_format($margin, 0, ',', '.') }}
                            ({{ $marginPct }}%)
                        </div>
                    @endif
                </div>

                {{-- Komisi Override --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <div class="flex items-center justify-between mb-1">
                        <h2 class="font-semibold text-slate-800">Override Komisi</h2>
                        <span class="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full font-medium">Opsional</span>
                    </div>
                    <p class="text-xs text-slate-500 mb-4">
                        Dikosongkan = pakai komisi default mitra.
                        @if ($selectedPartner)
                            Default mitra ini:
                            <strong>
                                {{ $selectedPartner->default_commission_value }}
                                {{ $selectedPartner->default_commission_type->value === 'percent' ? '%' : 'Rp' }}
                            </strong>
                        @endif
                    </p>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Tipe Komisi</label>
                            <select wire:model.live="commission_type"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="">— Pakai Default Mitra —</option>
                                <option value="percent">Persentase (%)</option>
                                <option value="fixed">Nominal Tetap (Rp)</option>
                            </select>
                        </div>

                        @if ($commission_type)
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Nilai Komisi</label>
                                <input wire:model="commission_value"
                                    type="number" min="0" step="0.01"
                                    placeholder="{{ $commission_type === 'percent' ? 'Contoh: 10' : 'Contoh: 2000' }}"
                                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                                @error('commission_value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                            </div>
                        @endif
                    </div>
                </div>

            </div>

            {{-- Kolom kanan (1/3) --}}
            <div class="space-y-5">

                {{-- Status & Pengaturan --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-4">Pengaturan</h2>
                    <div class="space-y-4">

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Status</label>
                            <select wire:model="is_active"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="1">Aktif (tampil di katalog)</option>
                                <option value="0">Nonaktif (tersembunyi)</option>
                            </select>
                        </div>

                        <div class="flex items-center justify-between py-2 border-t border-slate-100">
                            <div>
                                <p class="text-sm font-medium text-slate-700">Produk Unggulan</p>
                                <p class="text-xs text-slate-400">Tampil di beranda dengan bintang</p>
                            </div>
                            <button type="button" wire:click="$toggle('is_featured')"
                                @class([
                                    'relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200',
                                    'bg-orange-500' => $is_featured,
                                    'bg-slate-200'  => ! $is_featured,
                                ])>
                                <span @class([
                                    'inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200',
                                    'translate-x-6' => $is_featured,
                                    'translate-x-1' => ! $is_featured,
                                ])></span>
                            </button>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Urutan Tampil</label>
                            <input type="number" wire:model="sort_order" min="0" placeholder="0 = otomatis"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            <p class="mt-1 text-xs text-slate-400">Angka kecil tampil lebih awal.</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Stok</label>
                            <input type="number" wire:model="stock" min="0" placeholder="Kosongkan = tidak dikelola"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            <p class="mt-1 text-xs text-slate-400">Kosong = stok tidak dikelola (selalu tersedia). 0 = habis. > 0 = tersedia.</p>
                            @error('stock') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                    </div>
                </div>

                {{-- Kategori & Mitra --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-4">Klasifikasi</h2>
                    <div class="space-y-4">

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Kategori <span class="text-red-500">*</span></label>
                            <select wire:model="category_id"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="0">— Pilih Kategori —</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                            @error('category_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Mitra <span class="text-red-500">*</span></label>
                            <select wire:model.live="partner_id"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="0">— Pilih Mitra —</option>
                                @foreach ($partners as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                            @error('partner_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Satuan</label>
                            <input wire:model="unit" type="text" placeholder="pcs, kg, liter, porsi..."
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            @error('unit') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                    </div>
                </div>

                {{-- Upload Foto --}}
                <div class="bg-white rounded-xl border border-slate-200 p-5">
                    <h2 class="font-semibold text-slate-800 mb-3">Foto Produk</h2>

                    {{-- Preview foto yang sudah ada --}}
                    @if ($existing_image && ! $image)
                        <div class="relative mb-3 group">
                            <img src="{{ Storage::url($existing_image) }}"
                                class="w-full aspect-square object-cover rounded-xl border border-slate-200" />
                            <button type="button" wire:click="removeImage"
                                wire:confirm="Hapus foto ini?"
                                class="absolute top-2 right-2 w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </div>
                    @endif

                    {{-- Preview foto baru yang dipilih --}}
                    @if ($image)
                        <div class="relative mb-3">
                            <img src="{{ $image->temporaryUrl() }}"
                                class="w-full aspect-square object-cover rounded-xl border border-slate-200" />
                            <button type="button" wire:click="$set('image', null)"
                                class="absolute top-2 right-2 w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </div>
                    @endif

                    {{-- Upload input --}}
                    @if (! $image)
                        <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-slate-300 rounded-xl cursor-pointer hover:border-orange-400 hover:bg-orange-50 transition-colors">
                            <svg class="w-6 h-6 text-slate-400 mb-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 7.5m0 0L7.5 12m4.5-4.5v9"/>
                            </svg>
                            <span class="text-sm text-slate-500">Klik untuk unggah foto</span>
                            <span class="text-xs text-slate-400 mt-0.5">JPG, PNG, WEBP · Maks 3MB</span>
                            <input type="file" wire:model="image"
                                accept="image/jpeg,image/png,image/webp"
                                class="hidden" />
                        </label>
                    @endif

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

                    {{-- Loading indicator upload --}}
                    <div wire:loading wire:target="image"
                        class="mt-2 flex items-center gap-2 text-xs text-slate-500">
                        <svg class="animate-spin w-3.5 h-3.5 text-orange-500" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                        Mengunggah...
                    </div>
                </div>

                {{-- Tombol simpan --}}
                <div class="flex gap-3">
                    <a href="{{ route('admin.produk') }}" wire:navigate class="flex-1">
                        <button type="button" class="w-full px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                            Batal
                        </button>
                    </a>
                    <button type="submit"
                        class="flex-1 px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                        wire:loading.attr="disabled" wire:target="save">
                        <span wire:loading.remove wire:target="save">
                            {{ $productId ? 'Simpan Perubahan' : 'Tambah Produk' }}
                        </span>
                        <span wire:loading wire:target="save">Menyimpan...</span>
                    </button>
                </div>

            </div>
        </div>
    </form>

</div>
