@extends('layouts.app')
@section('title', 'Tambah Produk')
@section('page-title', 'Tambah Produk')

@push('head')
<style>
.ss-wrap{position:relative}
.ss-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;background:#fff;outline:none;box-sizing:border-box;line-height:1.4}
.ss-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.ss-input.is-invalid{border-color:#f87171}
.ss-dropdown{position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.11);z-index:9999;max-height:220px;overflow-y:auto}
.ss-item{padding:7px 11px;cursor:pointer;font-size:.875rem;line-height:1.35;border-bottom:1px solid #f3f4f6;user-select:none}
.ss-item:last-child{border-bottom:none}
.ss-item:hover{background:#eff6ff}
.ss-item-muted{color:#6b7280;font-style:italic}
.ss-empty{padding:9px 11px;color:#9ca3af;font-size:.84rem}
</style>
@endpush

@section('content')
<div class="max-w-3xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form method="POST" action="{{ route('products.store') }}" class="space-y-5">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kode SKU <span class="text-red-500">*</span></label>
                    <input type="text" name="code" value="{{ old('code') }}" placeholder="contoh: LAP-001"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('code') border-red-400 @enderror">
                    @error('code')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Produk <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name') border-red-400 @enderror">
                    @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipe <span class="text-red-500">*</span></label>
                    <select name="type" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('type') border-red-400 @enderror">
                        <option value="">— Pilih —</option>
                        <option value="barang"    {{ old('type') === 'barang'    ? 'selected' : '' }}>Barang</option>
                        <option value="sparepart" {{ old('type') === 'sparepart' ? 'selected' : '' }}>Sparepart</option>
                        <option value="jasa"      {{ old('type') === 'jasa'      ? 'selected' : '' }}>Jasa</option>
                    </select>
                    @error('type')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kategori <span class="text-red-500">*</span></label>
                    <div class="ss-wrap">
                        <input type="text" id="cat-search" autocomplete="off" placeholder="Cari atau pilih kategori…"
                               class="ss-input @error('category_id') is-invalid @enderror">
                        <input type="hidden" name="category_id" id="cat-hidden" value="{{ old('category_id') }}">
                        <div id="cat-dropdown" class="ss-dropdown" style="display:none"></div>
                    </div>
                    @error('category_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Merek</label>
                    <div class="ss-wrap">
                        <input type="text" id="brand-search" autocomplete="off" placeholder="Cari atau pilih merek…"
                               class="ss-input">
                        <input type="hidden" name="brand_id" id="brand-hidden" value="{{ old('brand_id') }}">
                        <div id="brand-dropdown" class="ss-dropdown" style="display:none"></div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Satuan <span class="text-red-500">*</span></label>
                    <input type="text" name="unit" value="{{ old('unit', 'pcs') }}" placeholder="pcs"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('unit') border-red-400 @enderror">
                    @error('unit')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Harga Beli <span class="text-red-500">*</span></label>
                    <input type="number" name="cost_price" value="{{ old('cost_price', 0) }}" min="0"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('cost_price') border-red-400 @enderror">
                    @error('cost_price')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Harga Jual <span class="text-red-500">*</span></label>
                    <input type="number" name="sell_price" value="{{ old('sell_price', 0) }}" min="0"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('sell_price') border-red-400 @enderror">
                    @error('sell_price')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stok Min.</label>
                    <input type="number" name="min_stock" value="{{ old('min_stock', 0) }}" min="0"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stok Awal</label>
                    <input type="number" name="stock" value="{{ old('stock', 0) }}" min="0"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex items-center gap-3 pt-6">
                    <input type="checkbox" name="is_active" id="is_active" value="1"
                           {{ old('is_active', true) ? 'checked' : '' }}
                           class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                    <label for="is_active" class="text-sm font-medium text-gray-700">Produk aktif</label>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi</label>
                <textarea name="description" rows="2"
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('description') }}</textarea>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 py-2 rounded-lg transition">
                    Simpan
                </button>
                <a href="{{ route('products.index') }}"
                   class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-5 py-2 rounded-lg transition">
                    Batal
                </a>
            </div>
        </form>
    </div>
</div>

@php
    $categoriesData = $categories->map(fn($c) => ['id' => $c->id, 'name' => $c->name]);
    $brandsData = $brands->map(fn($b) => ['id' => $b->id, 'name' => $b->name]);
@endphp
@push('scripts')
<script>
const catData   = @json($categoriesData);
const brandData = @json($brandsData);

function positionDropdown(input, dd) {
    var r = input.getBoundingClientRect();
    dd.style.top = (r.bottom + 2) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.width = r.width + 'px';
}
function safeEsc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function initCatSearch() {
    var input  = document.getElementById('cat-search');
    var hidden = document.getElementById('cat-hidden');
    var dd     = document.getElementById('cat-dropdown');
    function render(q) {
        var list = q ? catData.filter(c => c.name.toLowerCase().includes(q.toLowerCase())) : catData;
        dd.innerHTML = list.length
            ? list.map(c => '<div class="ss-item" data-id="'+c.id+'" data-name="'+safeEsc(c.name)+'">'+safeEsc(c.name)+'</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault(); hidden.value = el.dataset.id; input.value = el.dataset.name; dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

function initBrandSearch() {
    var input  = document.getElementById('brand-search');
    var hidden = document.getElementById('brand-hidden');
    var dd     = document.getElementById('brand-dropdown');
    function render(q) {
        var empty = [{id:'', name:'— Tanpa Merek —'}];
        var list  = q ? brandData.filter(b => b.name.toLowerCase().includes(q.toLowerCase())) : empty.concat(brandData);
        dd.innerHTML = list.length
            ? list.map(b => '<div class="ss-item'+(b.id===''?' ss-item-muted':'')+'" data-id="'+b.id+'" data-name="'+safeEsc(b.name)+'">'+safeEsc(b.name)+'</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault(); hidden.value = el.dataset.id; input.value = el.dataset.id ? el.dataset.name : ''; dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

document.addEventListener('DOMContentLoaded', function() {
    initCatSearch();
    initBrandSearch();
    var oldCat = '{{ old('category_id') }}';
    if (oldCat) { var c = catData.find(x => String(x.id) === oldCat); if (c) document.getElementById('cat-search').value = c.name; }
    var oldBrand = '{{ old('brand_id') }}';
    if (oldBrand) { var b = brandData.find(x => String(x.id) === oldBrand); if (b) document.getElementById('brand-search').value = b.name; }
});
</script>
@endpush
@endsection