<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-9 h-9 sm:w-10 sm:h-10 gradient-primary rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-history text-white text-sm"></i>
                </div>
                <div class="min-w-0">
                    <h1 class="text-lg sm:text-xl font-bold text-stone-800 truncate">Riwayat Stok</h1>
                    <p class="text-xs text-stone-500 truncate">
                        @isset($product) {{ $product->product_name }} @else Semua pergerakan stok @endisset
                    </p>
                </div>
            </div>
            @isset($product)
            <a href="{{ route('admin.product.edit', $product->product_id) }}"
                @else
                <a href="{{ route('admin.product.index') }}"
                @endisset
                class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-stone-100 hover:bg-stone-200 border border-stone-300 text-stone-700 text-xs sm:text-sm rounded-xl transition">
                <i class="fas fa-arrow-left text-[10px] sm:text-xs"></i>
                <span class="hidden sm:inline">Kembali</span>
            </a>
        </div>
    </x-slot>

    <div class="py-5 sm:py-6 bg-stone-50 min-h-screen">
        <div class="space-y-4 sm:space-y-5">

            {{-- ALERTS --}}
            @if($errors->any())
            <div class="bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl text-sm">
                <p class="font-semibold mb-1 flex items-center gap-2"><i class="fas fa-exclamation-triangle text-rose-500"></i> Terdapat kesalahan:</p>
                <ul class="list-disc list-inside space-y-0.5 text-rose-600">
                    @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                </ul>
            </div>
            @endif

            {{-- SUMMARY CARDS --}}
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
                @php
                $cards = [
                ['label' => 'Total Transaksi', 'value' => $histories->total(), 'color' => 'text-stone-800', 'sub' => 'semua waktu'],
                ['label' => 'Stok Masuk', 'value' => number_format($totalIn), 'color' => 'text-emerald-600', 'sub' => 'total unit'],
                ['label' => 'Stok Keluar', 'value' => number_format($totalOut), 'color' => 'text-rose-600', 'sub' => 'total unit'],
                ['label' => 'Produk Aktif', 'value' => $totalProducts, 'color' => 'text-amber-600', 'sub' => 'produk'],
                ];
                @endphp
                @foreach($cards as $c)
                <div class="bg-white border border-stone-200 rounded-2xl p-4 sm:p-5 shadow-sm">
                    <p class="text-[10px] sm:text-xs text-stone-500 uppercase tracking-widest mb-1">{{ $c['label'] }}</p>
                    <p class="text-2xl sm:text-3xl font-black {{ $c['color'] }} leading-none">{{ $c['value'] }}</p>
                    <p class="text-[10px] sm:text-xs text-stone-400 mt-1.5">{{ $c['sub'] }}</p>
                </div>
                @endforeach
            </div>

            {{-- FILTER + AKSI STOK --}}
            <div class="bg-white border border-stone-200 rounded-2xl p-4 sm:p-6 space-y-5 shadow-sm">

                {{-- FILTER (opsional, tidak wajib) --}}
                <form method="GET" action="{{ route('product.admin.stock-history') }}"
                    class="flex flex-wrap gap-2 sm:gap-3 items-end">
                    <div class="relative flex-1 min-w-[140px]">
                        <label class="block text-[10px] text-stone-500 uppercase tracking-wider mb-1.5">Cari Produk</label>
                        <div class="relative">
                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-stone-400 text-xs pointer-events-none"></i>
                            <input type="text" name="search" value="{{ request('search') }}"
                                placeholder="Nama produk..."
                                class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl pl-8 pr-3 py-2 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 placeholder-stone-400 transition">
                        </div>
                    </div>
                    <div class="min-w-[120px]">
                        <label class="block text-[10px] text-stone-500 uppercase tracking-wider mb-1.5">Tipe</label>
                        <select name="type" class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition">
                            <option value="">Semua</option>
                            <option value="in" {{ request('type') === 'in'  ? 'selected' : '' }}>↑ Masuk</option>
                            <option value="out" {{ request('type') === 'out' ? 'selected' : '' }}>↓ Keluar</option>
                        </select>
                    </div>
                    <div class="min-w-[140px]">
                        <label class="block text-[10px] text-stone-500 uppercase tracking-wider mb-1.5">Sumber</label>
                        <select name="source" class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition">
                            <option value="">Semua Sumber</option>
                            <option value="initial" {{ request('source') === 'initial'    ? 'selected' : '' }}>Stok Awal</option>
                            <option value="manual" {{ request('source') === 'manual'     ? 'selected' : '' }}>Restock</option>
                            <option value="adjustment" {{ request('source') === 'adjustment' ? 'selected' : '' }}>Adjustment</option>
                            <option value="order" {{ request('source') === 'order'      ? 'selected' : '' }}>Penjualan</option>
                            <option value="cancel" {{ request('source') === 'cancel'     ? 'selected' : '' }}>Batal Order</option>
                        </select>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit"
                            class="h-9 px-4 btn-primary text-white font-semibold rounded-xl text-sm transition flex items-center gap-1.5 whitespace-nowrap shadow-md hover:shadow-lg">
                            <i class="fas fa-filter text-xs"></i><span class="hidden sm:inline">Filter</span>
                        </button>
                        @if(request()->hasAny(['search', 'type', 'source']))
                        <a href="{{ route('product.admin.stock-history') }}"
                            class="h-9 px-3 bg-stone-200 hover:bg-stone-300 text-stone-700 rounded-xl text-sm transition flex items-center shadow-sm" title="Reset filter">
                            <i class="fas fa-times"></i>
                        </a>
                        @endif
                    </div>
                </form>

                <div class="border-t border-stone-200"></div>

                {{-- AKSI STOK: Restock + Adjustment --}}
                <div>
                    <p class="text-[10px] text-stone-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                        <i class="fas fa-bolt text-amber-600"></i> Aksi Stok Cepat
                    </p>

                    <form action="{{ route('admin.stock.action') }}" method="POST" id="stockForm"
                        class="bg-stone-50 border border-stone-200 rounded-xl p-4 space-y-4">
                        @csrf

                        {{-- Toggle Restock / Adjustment --}}
                        <div class="flex gap-2">
                            <label class="flex-1 cursor-pointer select-none">
                                <input type="radio" name="action_type" value="restock" class="sr-only peer" checked>
                                <div class="text-center py-2 px-3 rounded-xl border-2 border-stone-300 text-stone-600 text-sm font-semibold transition
                                            peer-checked:border-emerald-600 peer-checked:bg-emerald-50 peer-checked:text-emerald-700">
                                    <i class="fas fa-plus-circle mr-1.5 text-xs"></i>Restock
                                </div>
                            </label>
                            <label class="flex-1 cursor-pointer select-none">
                                <input type="radio" name="action_type" value="adjustment" class="sr-only peer">
                                <div class="text-center py-2 px-3 rounded-xl border-2 border-stone-300 text-stone-600 text-sm font-semibold transition
                                            peer-checked:border-amber-600 peer-checked:bg-amber-50 peer-checked:text-amber-700">
                                    <i class="fas fa-sliders-h mr-1.5 text-xs"></i>Adjustment
                                </div>
                            </label>
                        </div>

                        {{-- Fields baris 1: Produk + Jumlah + (Tipe adj) --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
                            <div class="sm:col-span-2 xl:col-span-2">
                                <label class="block text-xs text-stone-700 font-medium mb-1.5">Produk <span class="text-rose-500">*</span></label>
                                <select name="product_id" required
                                    class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition">
                                    <option value="">-- Pilih Produk --</option>
                                    @foreach($products as $p)
                                    <option value="{{ $p->product_id }}">
                                        {{ Str::limit($p->product_name, 35) }} — stok: {{ $p->stock }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs text-stone-700 font-medium mb-1.5">Jumlah <span class="text-rose-500">*</span></label>
                                <input type="number" name="quantity" min="1" placeholder="0" required
                                    class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 placeholder-stone-400 transition">
                            </div>

                            {{-- Tipe (adj only) --}}
                            <div id="adjTypeWrap" class="hidden">
                                <label class="block text-xs text-stone-700 font-medium mb-1.5">Tipe <span class="text-rose-500">*</span></label>
                                <select name="adj_type"
                                    class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-amber-600 focus:ring-1 focus:ring-amber-500 transition">
                                    <option value="in">Tambah (+)</option>
                                    <option value="out">Kurang (−)</option>
                                </select>
                            </div>
                        </div>

                        {{-- Note --}}
                        <div>
                            <label class="block text-xs text-stone-700 font-medium mb-1.5">
                                Catatan
                                <span id="noteReq" class="hidden text-rose-500 font-semibold">* wajib</span>
                                <span id="noteOpt" class="text-stone-500 font-normal">(opsional untuk restock)</span>
                            </label>
                            <input type="text" name="note" id="noteInput"
                                placeholder="Contoh: Restock dari supplier A"
                                class="w-full bg-white border border-stone-300 text-stone-900 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 placeholder-stone-400 transition">
                        </div>

                        {{-- Submit Button --}}
                        <div class="flex justify-end">
                            <button type="submit" id="submitBtn"
                                class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-semibold rounded-xl text-sm transition shadow-md hover:shadow-lg">
                                <i class="fas fa-plus-circle text-xs"></i>
                                <span id="submitLabel">Tambah Stok</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- TABEL HISTORY --}}
            <div class="bg-white border border-stone-200 rounded-2xl overflow-hidden shadow-sm">

                {{-- Table header --}}
                <div class="px-4 sm:px-6 py-4 border-b border-stone-200 flex flex-wrap items-center justify-between gap-2">
                    <h3 class="text-sm sm:text-base font-bold text-stone-800 flex items-center gap-2">
                        <i class="fas fa-list-alt text-amber-600 text-sm"></i>
                        Riwayat Perubahan Stok
                    </h3>
                    <div class="flex items-center gap-2">
                        @if(request()->hasAny(['search', 'type', 'source']))
                        <span class="text-xs text-amber-700 bg-amber-50 border border-amber-200 px-2.5 py-1 rounded-full flex items-center gap-1.5">
                            <i class="fas fa-filter text-[9px]"></i>Filter aktif
                        </span>
                        @endif
                        <span class="text-xs text-stone-600 bg-stone-100 border border-stone-200 px-2.5 py-1 rounded-full">
                            {{ $histories->total() }} record
                        </span>
                    </div>
                </div>

                @if($histories->isEmpty())
                <div class="text-center py-16">
                    <div class="w-14 h-14 bg-stone-100 rounded-2xl flex items-center justify-center mx-auto mb-4 border border-stone-200">
                        <i class="fas fa-inbox text-stone-400 text-xl"></i>
                    </div>
                    <p class="text-stone-600 text-sm">Belum ada riwayat perubahan stok</p>
                    @if(request()->hasAny(['search', 'type', 'source']))
                    <a href="{{ route('product.admin.stock-history') }}" class="mt-3 inline-block text-xs text-amber-600 hover:text-amber-700 transition">
                        Reset filter
                    </a>
                    @endif
                </div>

                @else

                {{-- DESKTOP TABLE (lg+) --}}
                <div class="hidden lg:block overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-stone-50 text-left">
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider whitespace-nowrap">Waktu</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider">Produk</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider">Tipe</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider">Sumber</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider text-center">Jml</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider text-center">Sebelum</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider text-center">Sesudah</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider">Oleh</th>
                                <th class="px-5 py-3 text-xs font-semibold text-stone-600 uppercase tracking-wider">Catatan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-stone-200">
                            @foreach($histories as $h)
                            @php
                            $src = match($h->source ?? '') {
                            'initial' => ['lbl' => 'Stok Awal', 'cls' => 'bg-sky-50 text-sky-700 border-sky-200', 'ico' => 'fa-star'],
                            'manual' => ['lbl' => 'Restock', 'cls' => 'bg-blue-50 text-blue-700 border-blue-200', 'ico' => 'fa-hand-paper'],
                            'adjustment' => ['lbl' => 'Adjustment', 'cls' => 'bg-amber-50 text-amber-700 border-amber-200', 'ico' => 'fa-sliders-h'],
                            'order' => ['lbl' => 'Penjualan', 'cls' => 'bg-purple-50 text-purple-700 border-purple-200', 'ico' => 'fa-shopping-cart'],
                            'cancel' => ['lbl' => 'Batal Order', 'cls' => 'bg-orange-50 text-orange-700 border-orange-200', 'ico' => 'fa-undo'],
                            default => ['lbl' => ucfirst($h->source ?? ''), 'cls' => 'bg-stone-100 text-stone-700 border-stone-300', 'ico' => 'fa-tag'],
                            };
                            @endphp
                            <tr class="hover:bg-stone-50 transition-colors">

                                <td class="px-5 py-4 whitespace-nowrap align-top">
                                    <p class="text-sm text-stone-800">{{ $h->created_at->format('d M Y') }}</p>
                                    <p class="text-xs text-stone-500">{{ $h->created_at->format('H:i:s') }}</p>
                                </td>

                                <td class="px-5 py-4 align-top">
                                    <div class="flex items-center gap-3">
                                        @if($h->product?->image)
                                        <img src="{{ asset('storage/' . (is_array($h->product->image) ? $h->product->image[0] : $h->product->image)) }}"
                                            class="w-9 h-9 rounded-lg object-cover flex-shrink-0 border border-stone-200">
                                        @else
                                        <div class="w-9 h-9 bg-stone-100 rounded-lg flex items-center justify-center flex-shrink-0 border border-stone-200">
                                            <i class="fas fa-box text-stone-400 text-xs"></i>
                                        </div>
                                        @endif
                                        <div class="min-w-0">
                                            <p class="text-sm text-stone-800 font-medium leading-snug">{{ $h->product->product_name ?? '—' }}</p>
                                            <p class="text-xs text-stone-500">{{ $h->product->category->category_name ?? '—' }}</p>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-5 py-4 whitespace-nowrap align-top">
                                    @if($h->type === 'in')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                        <i class="fas fa-arrow-up text-[9px]"></i>Masuk
                                    </span>
                                    @else
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-rose-50 text-rose-700 border border-rose-200">
                                        <i class="fas fa-arrow-down text-[9px]"></i>Keluar
                                    </span>
                                    @endif
                                </td>

                                <td class="px-5 py-4 align-top">
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold border {{ $src['cls'] }}">
                                        <i class="fas {{ $src['ico'] }} text-[9px]"></i>{{ $src['lbl'] }}
                                    </span>
                                    @if($h->reference_id && in_array($h->source, ['order', 'cancel']))
                                    <p class="text-[10px] text-stone-500 mt-0.5">#{{ $h->reference_id }}</p>
                                    @endif
                                </td>

                                <td class="px-5 py-4 text-center align-top whitespace-nowrap">
                                    <span class="text-base font-bold {{ $h->type === 'in' ? 'text-emerald-600' : 'text-rose-600' }}">
                                        {{ $h->type === 'in' ? '+' : '−' }}{{ $h->quantity }}
                                    </span>
                                </td>

                                <td class="px-5 py-4 text-center align-top">
                                    <span class="text-sm text-stone-500 font-mono">{{ $h->stock_before }}</span>
                                </td>

                                <td class="px-5 py-4 text-center align-top">
                                    <span class="text-sm font-mono font-bold
                                        {{ ($h->stock_after ?? 99) <= 5 ? 'text-rose-600' : (($h->stock_after ?? 99) <= 20 ? 'text-amber-600' : 'text-emerald-600') }}">
                                        {{ $h->stock_after }}
                                    </span>
                                </td>

                                <td class="px-5 py-4 whitespace-nowrap align-top">
                                    @if($h->user)
                                    <p class="text-sm text-stone-800 leading-snug">{{ $h->user->name }}</p>
                                    <p class="text-xs text-stone-500 capitalize">{{ $h->user->role }}</p>
                                    @else
                                    <span class="text-xs text-stone-400 italic">Sistem</span>
                                    @endif
                                </td>

                                <td class="px-5 py-4 align-top min-w-[180px] max-w-[260px]">
                                    <p class="text-sm text-stone-600 break-words whitespace-normal leading-relaxed">
                                        {{ $h->note ?: '—' }}
                                    </p>
                                </td>

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- MOBILE/TABLET CARD VIEW --}}
                <div class="lg:hidden divide-y divide-stone-200">
                    @foreach($histories as $h)
                    @php
                    $src = match($h->source ?? '') {
                    'initial' => ['lbl' => 'Stok Awal', 'cls' => 'bg-sky-50 text-sky-700 border-sky-200', 'ico' => 'fa-star'],
                    'manual' => ['lbl' => 'Restock', 'cls' => 'bg-blue-50 text-blue-700 border-blue-200', 'ico' => 'fa-hand-paper'],
                    'adjustment' => ['lbl' => 'Adjustment', 'cls' => 'bg-amber-50 text-amber-700 border-amber-200', 'ico' => 'fa-sliders-h'],
                    'order' => ['lbl' => 'Penjualan', 'cls' => 'bg-purple-50 text-purple-700 border-purple-200', 'ico' => 'fa-shopping-cart'],
                    'cancel' => ['lbl' => 'Batal Order', 'cls' => 'bg-orange-50 text-orange-700 border-orange-200', 'ico' => 'fa-undo'],
                    default => ['lbl' => ucfirst($h->source ?? ''), 'cls' => 'bg-stone-100 text-stone-700 border-stone-300', 'ico' => 'fa-tag'],
                    };
                    @endphp
                    <div class="p-4 space-y-3">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-center gap-2.5 min-w-0">
                                @if($h->product?->image)
                                <img src="{{ asset('storage/' . (is_array($h->product->image) ? $h->product->image[0] : $h->product->image)) }}"
                                    class="w-10 h-10 rounded-lg object-cover flex-shrink-0 border border-stone-200">
                                @else
                                <div class="w-10 h-10 bg-stone-100 rounded-lg flex items-center justify-center flex-shrink-0 border border-stone-200">
                                    <i class="fas fa-box text-stone-400 text-xs"></i>
                                </div>
                                @endif
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-stone-800 leading-snug break-words">{{ $h->product->product_name ?? '—' }}</p>
                                    <p class="text-xs text-stone-500">{{ $h->created_at->format('d M Y, H:i') }}</p>
                                </div>
                            </div>
                            <span class="text-xl font-black flex-shrink-0 {{ $h->type === 'in' ? 'text-emerald-600' : 'text-rose-600' }}">
                                {{ $h->type === 'in' ? '+' : '−' }}{{ $h->quantity }}
                            </span>
                        </div>

                        <div class="flex flex-wrap gap-1.5">
                            @if($h->type === 'in')
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <i class="fas fa-arrow-up text-[8px]"></i>Masuk
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-rose-50 text-rose-700 border border-rose-200">
                                <i class="fas fa-arrow-down text-[8px]"></i>Keluar
                            </span>
                            @endif
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold border {{ $src['cls'] }}">
                                <i class="fas {{ $src['ico'] }} text-[8px]"></i>{{ $src['lbl'] }}
                            </span>
                        </div>

                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
                            <span class="text-stone-600">
                                Stok:
                                <span class="text-stone-500 font-mono">{{ $h->stock_before }}</span>
                                <span class="text-stone-400 mx-1">→</span>
                                <span class="font-mono font-bold {{ ($h->stock_after ?? 99) <= 5 ? 'text-rose-600' : (($h->stock_after ?? 99) <= 20 ? 'text-amber-600' : 'text-emerald-600') }}">
                                    {{ $h->stock_after }}
                                </span>
                            </span>
                            @if($h->user)
                            <span class="text-stone-500">oleh <span class="text-stone-700">{{ $h->user->name }}</span></span>
                            @endif
                        </div>

                        @if($h->note)
                        <div class="bg-stone-50 border border-stone-200 rounded-lg px-3 py-2">
                            <p class="text-xs text-stone-600 break-words leading-relaxed">
                                <i class="fas fa-comment-alt text-stone-400 mr-1.5 text-[10px]"></i>{{ $h->note }}
                            </p>
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="px-4 sm:px-6 py-4 border-t border-stone-200 bg-stone-50">
                    {{ $histories->appends(request()->query())->links() }}
                </div>

                @endif
            </div>

        </div>
    </div>

    <script>
        (function() {
            const radios = document.querySelectorAll('input[name="action_type"]');
            const adjTypeWrap = document.getElementById('adjTypeWrap');
            const noteReq = document.getElementById('noteReq');
            const noteOpt = document.getElementById('noteOpt');
            const noteInput = document.getElementById('noteInput');
            const submitBtn = document.getElementById('submitBtn');
            const submitLabel = document.getElementById('submitLabel');

            function update() {
                const isAdj = document.querySelector('input[name="action_type"]:checked').value === 'adjustment';

                adjTypeWrap.classList.toggle('hidden', !isAdj);
                noteReq.classList.toggle('hidden', !isAdj);
                noteOpt.classList.toggle('hidden', isAdj);
                noteInput.required = isAdj;
                noteInput.placeholder = isAdj ?
                    'Wajib — contoh: Barang rusak / retur supplier' :
                    'Contoh: Restock dari supplier A (opsional)';

                if (isAdj) {
                    submitBtn.className = 'inline-flex items-center gap-2 px-6 py-2.5 btn-primary text-white font-semibold rounded-xl text-sm transition shadow-md hover:shadow-lg';
                    submitLabel.textContent = 'Sesuaikan Stok';
                } else {
                    submitBtn.className = 'inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-semibold rounded-xl text-sm transition shadow-md hover:shadow-lg';
                    submitLabel.textContent = 'Tambah Stok';
                }
            }

            radios.forEach(r => r.addEventListener('change', update));
            update();
        })();
    </script>
</x-app-layout>