@extends('layouts.app')
@section('title', 'Penyesuaian Stok')
@section('page-title', 'Penyesuaian Stok')

@section('content')
<div class="max-w-lg">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">

        @if(session('error'))
            <div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
                {{ session('error') }}
            </div>
        @endif

        <form method="POST" action="{{ route('stock.store') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Produk <span class="text-red-500">*</span></label>
                <select name="product_id" id="product_id" onchange="updateStock(this)"
                        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('product_id') border-red-400 @enderror">
                    <option value="">— Pilih Produk —</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}"
                                data-stock="{{ $product->stock }}"
                                data-unit="{{ $product->unit }}"
                                {{ old('product_id') == $product->id ? 'selected' : '' }}>
                            [{{ $product->code }}] {{ $product->name }} — Stok: {{ $product->stock }} {{ $product->unit }}
                        </option>
                    @endforeach
                </select>
                @error('product_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div id="stock-info" class="hidden bg-gray-50 rounded-lg px-4 py-3 text-sm text-gray-600">
                Stok saat ini: <span id="current-stock" class="font-semibold text-gray-800">—</span>
            </div>

            <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 Tipe —</option>
                    <option value="masuk"       {{ old('type') === 'masuk'       ? 'selected' : '' }}>Stok Masuk (tambah)</option>
                    <option value="keluar"      {{ old('type') === 'keluar'      ? 'selected' : '' }}>Stok Keluar (kurangi)</option>
                    <option value="penyesuaian" {{ old('type') === 'penyesuaian' ? 'selected' : '' }}>Penyesuaian (set ke nilai baru)</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">Jumlah <span class="text-red-500">*</span></label>
                <input type="number" name="quantity" value="{{ old('quantity') }}" min="1"
                       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('quantity') border-red-400 @enderror">
                @error('quantity')<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">Catatan</label>
                <textarea name="notes" rows="2" placeholder="Alasan penyesuaian stok..."
                          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('notes') }}</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('stock.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>

@push('scripts')
<script>
function updateStock(select) {
    const option = select.options[select.selectedIndex];
    const info   = document.getElementById('stock-info');
    const label  = document.getElementById('current-stock');
    if (option.value) {
        label.textContent = option.dataset.stock + ' ' + option.dataset.unit;
        info.classList.remove('hidden');
    } else {
        info.classList.add('hidden');
    }
}
// Restore on page load if old value exists
window.addEventListener('DOMContentLoaded', () => {
    const sel = document.getElementById('product_id');
    if (sel && sel.value) updateStock(sel);
});
</script>
@endpush
@endsection