@extends('layouts.app')
@section('title', isset($product) ? 'Edit Produk' : 'Tambah Produk')
@section('page-title', isset($product) ? 'Edit Produk' : 'Tambah Produk')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
            <h2 class="font-bold text-slate-800">{{ isset($product) ? 'Edit: '.$product->name : 'Produk Baru' }}</h2>
            <a href="{{ route('products.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← Kembali</a>
        </div>

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

            <div class="grid grid-cols-2 gap-4">
                {{-- Nama --}}
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Nama Produk <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $product->name ?? '') }}" required
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 @error('name') border-red-400 @enderror"
                        placeholder="Nama produk...">
                    @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- SKU --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">SKU / Kode Produk</label>
                    <input type="text" name="sku" value="{{ old('sku', $product->sku ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="Auto generate jika kosong">
                </div>

                {{-- Barcode --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Barcode</label>
                    <input type="text" name="barcode" value="{{ old('barcode', $product->barcode ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="Scan atau ketik barcode">
                </div>

                {{-- Kategori --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Kategori</label>
                    <select name="category_id" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white">
                        <option value="">— Pilih Kategori —</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->icon }} {{ $cat->name }}
                        </option>
                        @endforeach
                    </select>
                </div>

                {{-- Satuan --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Satuan <span class="text-red-500">*</span></label>
                    <input type="text" name="unit" value="{{ old('unit', $product->unit ?? 'pcs') }}" required
                        list="unit-list"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        placeholder="pcs, kg, liter...">
                    <datalist id="unit-list">
                        <option value="pcs"><option value="kg"><option value="gram"><option value="liter">
                        <option value="ml"><option value="botol"><option value="bungkus"><option value="lusin">
                        <option value="box"><option value="karton"><option value="porsi"><option value="gelas">
                    </datalist>
                </div>

                {{-- Harga Modal --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Harga Modal (HPP) <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">Rp</span>
                        <input type="number" name="cost_price" value="{{ old('cost_price', $product->cost_price ?? 0) }}" required min="0"
                            class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                            oninput="calcMargin()">
                    </div>
                </div>

                {{-- Harga Jual --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Harga Jual <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">Rp</span>
                        <input type="number" name="selling_price" value="{{ old('selling_price', $product->selling_price ?? 0) }}" required min="0"
                            class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                            oninput="calcMargin()">
                    </div>
                    <p class="text-xs mt-1" id="marginInfo"></p>
                </div>

                {{-- Stok --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Stok Awal</label>
                    <input type="number" name="stock" value="{{ old('stock', $product->stock ?? 0) }}" min="0"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        {{ isset($product) ? 'disabled' : '' }}>
                    @if(isset($product))
                    <p class="text-xs text-slate-500 mt-1">Gunakan tombol "Penyesuaian Stok" untuk mengubah stok.</p>
                    @endif
                </div>

                {{-- Min Stok --}}
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Min. Stok Alert</label>
                    <input type="number" name="min_stock" value="{{ old('min_stock', $product->min_stock ?? 5) }}" min="0"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                </div>

                {{-- Track Stok --}}
                <div class="col-span-2 flex items-center gap-4">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="track_stock" value="1" class="rounded"
                            {{ old('track_stock', $product->track_stock ?? true) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-slate-700">Lacak Stok</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" class="rounded"
                            {{ old('is_active', $product->is_active ?? true) ? 'checked' : '' }}>
                        <span class="text-sm font-medium text-slate-700">Produk Aktif</span>
                    </label>
                </div>

                {{-- Deskripsi --}}
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Deskripsi (opsional)</label>
                    <textarea name="description" rows="2"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
                        placeholder="Deskripsi singkat produk...">{{ old('description', $product->description ?? '') }}</textarea>
                </div>

                {{-- Gambar --}}
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">Gambar Produk</label>
                    @if(isset($product) && $product->image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/'.$product->image) }}" class="w-20 h-20 object-cover rounded-xl border border-slate-200" alt="">
                    </div>
                    @endif
                    <input type="file" name="image" accept="image/*"
                        class="w-full text-sm border border-slate-200 rounded-xl px-3 py-2 focus:outline-none file:mr-3 file:py-1 file:px-3 file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <p class="text-xs text-slate-500 mt-1">Maks 2MB. Format: JPG, PNG, WebP</p>
                </div>
            </div>

            <div class="flex gap-3 pt-2">
                <a href="{{ route('products.index') }}"
                   class="px-6 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm transition">Batal</a>
                <button type="submit"
                    class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition shadow-sm">
                    {{ isset($product) ? '💾 Update Produk' : '➕ Simpan Produk' }}
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function calcMargin() {
    const cost = parseFloat(document.querySelector('[name=cost_price]').value) || 0;
    const sell = parseFloat(document.querySelector('[name=selling_price]').value) || 0;
    const el = document.getElementById('marginInfo');
    if (sell > 0 && cost > 0) {
        const margin = ((sell - cost) / sell * 100).toFixed(1);
        const profit = sell - cost;
        el.textContent = `Margin: ${margin}% | Untung: Rp ${profit.toLocaleString('id-ID')}`;
        el.className = 'text-xs mt-1 ' + (margin >= 20 ? 'text-emerald-600' : margin >= 10 ? 'text-amber-600' : 'text-red-500');
    } else {
        el.textContent = '';
    }
}
calcMargin();
</script>
@endpush
@endsection