@extends('admin.layouts.app')
@section('page-title', 'Add Stock')
@section('body-class', 'inventory-preview')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/inventory.css') }}?v={{ filemtime(public_path('assets/inventory.css')) }}">
@endpush
@push('scripts')
    <script type="module" src="{{ asset('assets/stock.js') }}?v={{ filemtime(public_path('assets/stock.js')) }}"></script>
@endpush
@section('content')
<div class="inventory-workspace" data-stock-workspace data-lookup-url="{{ route('admin.products.stock.lookup') }}" data-product-url="{{ route('admin.products.stock.product', ['product' => '__PRODUCT__']) }}" data-selected-product="{{ $selectedProductId }}" data-selected-variant="{{ $selectedVariantId }}">
    <div class="inventory-toolbar"><div><h2>Add Stock</h2><span class="quiet-badge">Stock receipt</span></div><div><a class="inventory-button" href="{{ route('admin.products.stock.index') }}">Stock History</a><a class="inventory-button" href="{{ route('admin.products.index') }}"><x-icon name="orders" :size="15" /> Product List</a></div></div>
    <form data-stock-form action="{{ route('admin.products.stock.store') }}" method="post">
        @csrf
        <input type="hidden" name="submission_key" value="{{ $submissionKey }}">
        <div class="stock-layout">
            <div class="stock-main">
                <section class="panel" aria-labelledby="stock-entry-heading"><div class="inventory-panel-heading"><h2 id="stock-entry-heading"><span class="inventory-step">01</span> Stock entry</h2></div><div class="inventory-form-grid"><div class="inventory-field"><label for="stock-reference">Reference</label><input id="stock-reference" name="reference" maxlength="80" placeholder="e.g. GRN0001" autocomplete="off"></div><div class="inventory-field"><label for="stock-date">Entry date</label><input id="stock-date" name="entryDate" type="date" min="2000-01-01" max="{{ $entryDate }}" value="{{ $entryDate }}" required></div><div class="inventory-field"><label for="stock-source">Stock source</label><select id="stock-source" name="source"><option>Purchase</option><option>Opening stock</option><option>Other</option></select></div><div class="inventory-field stock-note-field"><label for="stock-note">Note</label><input id="stock-note" name="note" maxlength="500" placeholder="Optional delivery note"></div></div></section>
                <section class="panel" aria-labelledby="stock-product-heading"><div class="inventory-panel-heading"><h2 id="stock-product-heading"><span class="inventory-step">02</span> Choose products &amp; variants</h2></div><div class="stock-product-fields"><div class="inventory-field"><label for="stock-product-search">Find product / scan SKU</label><input id="stock-product-search" type="search" placeholder="Search name, code or exact SKU" autocomplete="off" maxlength="80"><small>Shows up to 20 matches. Press Enter on an exact SKU to jump to its variant.</small><p data-stock-search-message role="status"></p></div><div class="inventory-field"><label for="stock-product">Product</label><select id="stock-product"><option value="">Choose a product</option>@foreach($productOptions as $product)<option value="{{ $product->id }}" @selected($selectedProductId === (string) $product->id)>{{ $product->name }} · {{ $product->code }}</option>@endforeach</select></div></div><div class="stock-selected-product" data-stock-selected hidden></div>
                    <div class="stock-variant-area" data-stock-variants hidden>
                        <div class="stock-variant-tools"><label><span class="sr-only">Filter colour</span><select data-stock-colour><option value="">All colours</option></select></label><label><span class="sr-only">Filter size</span><select data-stock-size><option value="">All sizes</option></select></label><span data-stock-variant-count></span></div>
                        <div class="stock-bulk"><label for="stock-bulk-quantity">Quantity for filtered variants<input id="stock-bulk-quantity" type="number" min="1" step="1" inputmode="numeric" placeholder="e.g. 10"></label><button type="button" class="inventory-button" data-stock-bulk>Fill quantities</button><button type="button" class="inventory-text-button" data-stock-clear-product>Clear this product</button></div>
                        <div class="inventory-table-scroll stock-quantity-scroll"><table class="inventory-table stock-quantity-table"><caption class="sr-only">Variant stock entry: current stock, quantity to add and projected stock</caption><thead><tr><th scope="col">Variant / SKU</th><th scope="col">Current</th><th scope="col">Add quantity</th><th scope="col">After adding</th></tr></thead><tbody data-stock-rows></tbody></table></div>
                        <div class="inventory-pagination"><span data-stock-page-label></span><div><button type="button" class="inventory-button" data-stock-prev>Previous</button><button type="button" class="inventory-button" data-stock-next>Next</button></div></div>
                    </div>
                    <div class="stock-choose-empty" data-stock-empty><x-icon name="inventory" :size="30" /><p>Choose a product to enter variant quantities.</p><small>You can include variants from multiple products in one entry.</small></div>
                </section>
            </div>
            <aside class="panel stock-summary" aria-labelledby="stock-summary-heading"><div class="inventory-panel-heading"><h2 id="stock-summary-heading">Stock entry summary</h2><button type="button" class="inventory-text-button" data-stock-clear>Clear all</button></div><div class="stock-summary-metrics"><div><span>Products</span><strong data-stock-products>0</strong></div><div><span>Variants</span><strong data-stock-lines>0</strong></div><div><span>Units to add</span><strong data-stock-units>0</strong></div></div><div class="stock-summary-lines" data-stock-summary><p class="inventory-empty">Enter quantities to build your stock entry.</p></div><div class="stock-summary-bottom"><p data-stock-message role="status" aria-live="polite">Review the entry before saving stock.</p><button type="submit" class="inventory-button inventory-button-primary" data-stock-preview disabled><x-icon name="check" :size="16" /> Review stock entry</button><small>Stock changes only when you confirm Save stock. Unsaved entries reset on refresh.</small></div></aside>
        </div>
    </form>
    <dialog class="inventory-dialog" data-stock-dialog aria-labelledby="stock-preview-title"><div class="inventory-panel-heading"><h2 id="stock-preview-title">Review stock entry</h2><button type="button" class="icon-button" data-stock-close aria-label="Close stock entry review"><x-icon name="close" :size="18" /></button></div><div data-stock-receipt></div><p data-stock-save-message class="stock-save-message" role="status" aria-live="polite"></p><div class="inventory-dialog-actions"><button type="button" class="inventory-button" data-stock-close>Back to entry</button><button type="button" class="inventory-button inventory-button-primary" data-stock-save>Save stock</button></div></dialog>
    <noscript><p>Enable JavaScript to choose variants and save this stock entry.</p></noscript>
</div>
<script type="application/json" id="inventory-preview-data">{!! json_encode($inventoryProducts, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
@endsection