@extends('layouts.app')
@section('title', 'Inventory - UniformFlow')
@section('page-heading', 'Inventory')
@section('content')
<section class="page-intro"><div><span class="eyebrow">Stock control</span><h1>Uniform <em>inventory.</em></h1><p>Create uniform types and manage stock for every size.</p></div></section>
<div class="two-column forms-top">
<section class="panel"><div class="panel-head"><div><span class="eyebrow">Catalogue</span><h2>Add uniform type</h2></div></div>
<form method="POST" action="{{ route('inventory.items.store') }}" class="form-grid">@csrf
<label>Item code<input name="code" required placeholder="SHIRT-NVY" value="{{ old('code') }}"></label><label>Uniform name<input name="name" required placeholder="Navy work shirt" value="{{ old('name') }}"></label>
<label class="full">Sizes <span>select all applicable sizes</span>
<details class="check-dropdown" id="size-dropdown"><summary><span id="size-summary">Select sizes</span><span class="dropdown-arrow">&#8964;</span></summary><div class="check-options">
@foreach(['XXS','XS','S','M','L','XL','2XL','3XL','4XL','26','28','30','32','34','36','38','40','42','44','46','48'] as $size)
<label><input type="checkbox" name="sizes[]" value="{{ $size }}" @checked(in_array($size, old('sizes', [])))><span class="checkmark">&#10003;</span><span>{{ $size }}</span></label>
@endforeach
</div></details></label><label>Low-stock level<input type="number" min="0" name="reorder_level" value="{{ old('reorder_level', 5) }}" required></label><label>Description<input name="description" placeholder="Optional notes" value="{{ old('description') }}"></label>
<button class="button primary full" type="submit">Add uniform & sizes</button></form></section>

<section class="panel"><div class="panel-head"><div><span class="eyebrow">Goods received</span><h2>Bulk add stock</h2></div></div>
<form method="POST" action="{{ route('inventory.restock') }}" class="form-grid">@csrf
<label class="full">Uniform name<select name="uniform_item_id" id="stock-item" required><option value="">Select uniform</option>@foreach($items as $item)<option value="{{ $item->id }}" @selected(old('uniform_item_id') == $item->id)>{{ $item->name }}</option>@endforeach</select></label>
<label class="full">Stock category<select name="stock_category" required><option value="new" @selected(old('stock_category', 'new') === 'new')>New stock / supplier delivery</option><option value="returned" @selected(old('stock_category') === 'returned')>Returned stock / manual intake</option></select></label>
<div class="full bulk-stock-picker">
    <div class="bulk-picker-head"><span>Sizes, quantities and unit values</span><b id="stock-selection-count">0 selected</b></div>
    <div class="bulk-picker-placeholder" id="bulk-picker-placeholder">Select a uniform above to see its sizes.</div>
    @foreach($items as $item)
    <div class="bulk-size-group" data-item-id="{{ $item->id }}" hidden>
        @foreach($item->variants as $variant)
        @php($previousQuantity = old("stocks.{$variant->id}"))
        @php($previousValue = old("values.{$variant->id}", $variant->unit_value))
        <div class="bulk-size-row">
            <label class="bulk-size-check"><input type="checkbox" class="stock-size-check" data-quantity-id="stock-qty-{{ $variant->id }}" data-value-id="stock-value-{{ $variant->id }}" @checked($previousQuantity !== null)><span class="checkmark">&#10003;</span><span><strong>{{ $variant->size }}</strong><small>{{ $variant->quantity }} available ({{ $variant->new_quantity }} new / {{ $variant->returned_quantity }} returned)</small></span></label>
            <label class="bulk-quantity">Received<input id="stock-qty-{{ $variant->id }}" type="number" name="stocks[{{ $variant->id }}]" min="1" max="100000" value="{{ $previousQuantity ?? 1 }}" @disabled($previousQuantity === null)></label>
            <label class="bulk-value">Unit value<input id="stock-value-{{ $variant->id }}" type="number" name="values[{{ $variant->id }}]" min="0" max="9999999999" step="0.01" value="{{ $previousValue }}" @disabled($previousQuantity === null)></label>
        </div>
        @endforeach
    </div>
    @endforeach
</div>
<label class="full">Reference / note<input name="notes" value="{{ old('notes') }}" placeholder="PO number, supplier, delivery note..."></label><button class="button dark full" type="submit">Receive selected stock</button></form></section>
</div>

<section class="panel table-panel"><div class="panel-head"><div><span class="eyebrow">Live balances</span><h2>Stock by size</h2></div><span class="pill">{{ $items->sum(fn($i) => $i->variants->count()) }} size records</span></div>
<div class="table-wrap"><table><thead><tr><th>Uniform</th><th>Code</th><th>Size</th><th>New</th><th>Returned</th><th>Available</th><th>Unit value</th><th>Total value</th><th>Status</th></tr></thead><tbody>
@forelse($items as $item)@foreach($item->variants as $variant)<tr><td><strong>{{ $item->name }}</strong></td><td>{{ $item->code }}</td><td><span class="size-badge">{{ $variant->size }}</span></td><td><span class="pill good">{{ $variant->new_quantity }}</span></td><td><span class="pill">{{ $variant->returned_quantity }}</span></td><td><strong>{{ $variant->quantity }}</strong></td><td>{{ number_format($variant->unit_value, 2) }}</td><td><strong>{{ number_format($variant->quantity * $variant->unit_value, 2) }}</strong></td><td><span class="pill {{ $variant->quantity <= $variant->reorder_level ? ($variant->quantity === 0 ? 'danger' : 'warning') : 'good' }}">{{ $variant->quantity === 0 ? 'Out of stock' : ($variant->quantity <= $variant->reorder_level ? 'Low stock' : 'Healthy') }}</span></td></tr>@endforeach @empty<tr><td colspan="9" class="empty">Add your first uniform type above.</td></tr>@endforelse
</tbody></table></div></section>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const checkedSizes = () => [...document.querySelectorAll('input[name="sizes[]"]:checked')];
    const updateSizeSummary = () => {
        const selected = checkedSizes().map(input => input.value);
        document.getElementById('size-summary').textContent = selected.length ? `${selected.length} selected: ${selected.join(', ')}` : 'Select sizes';
    };
    document.querySelectorAll('input[name="sizes[]"]').forEach(input => input.addEventListener('change', updateSizeSummary));
    updateSizeSummary();

    const itemSelect = document.getElementById('stock-item');
    const groups = [...document.querySelectorAll('.bulk-size-group')];
    const placeholder = document.getElementById('bulk-picker-placeholder');
    const selectionCount = document.getElementById('stock-selection-count');
    const updateSelectionCount = () => {
        const activeGroup = groups.find(group => !group.hidden);
        const selected = activeGroup ? activeGroup.querySelectorAll('.stock-size-check:checked').length : 0;
        selectionCount.textContent = `${selected} selected`;
    };
    const updateStockSizes = () => {
        groups.forEach(group => {
            const active = group.dataset.itemId === itemSelect.value;
            group.hidden = !active;
            group.querySelectorAll('.stock-size-check').forEach(checkbox => {
                if (!active) checkbox.checked = false;
                const quantity = document.getElementById(checkbox.dataset.quantityId);
                const value = document.getElementById(checkbox.dataset.valueId);
                quantity.disabled = !active || !checkbox.checked;
                quantity.required = active && checkbox.checked;
                value.disabled = !active || !checkbox.checked;
                value.required = active && checkbox.checked;
            });
        });
        placeholder.hidden = itemSelect.value !== '';
        updateSelectionCount();
    };
    document.querySelectorAll('.stock-size-check').forEach(checkbox => checkbox.addEventListener('change', () => {
        const quantity = document.getElementById(checkbox.dataset.quantityId);
        const value = document.getElementById(checkbox.dataset.valueId);
        quantity.disabled = !checkbox.checked;
        quantity.required = checkbox.checked;
        value.disabled = !checkbox.checked;
        value.required = checkbox.checked;
        if (checkbox.checked) quantity.focus();
        updateSelectionCount();
    }));
    itemSelect.addEventListener('change', updateStockSizes);
    updateStockSizes();
});
</script>
@endsection