{{--            <div class="bg-gray-600 px-4 pt-1 pb-2 text-white">{{ __('workshop.get_from_warehouse_title') }}</div>--}}
<div x-data="{ scrollHeight: '500px' }" class="overflow-hidden border border-gray-300">
    <div :style="{ maxHeight: scrollHeight; }" class="overflow-y-auto">
        <table class="min-w-full divide-y divide-gray-300 border border-gray-300 rounded-md shadow-sm">
            <thead class="bg-gray-300">
            <tr class="divide-x divide-gray-100">
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.product') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.th_get_from_warehouse') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.mechanic') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700"> </th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.items_quantity') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.units') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.expiration_date') }}</th>
                <th class="px-2 py-1 text-left text-sm text-gray-700">{{ __('workshop.location') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($stocks as $stock)
                <tr class="divide-x divide-gray-300 odd:bg-white even:bg-gray-200">
                    <form action="{{ route('workshop.cases.update.warehouse.pickup') }}" method="post">@csrf
                        <td class="px-2 py-1 text-sm text-gray-800">{{ $stock->name }} {{ $stock->producer }} {{ $stock->description }}</td>
                        <td class="px-2 py-1 text-sm text-gray-800">
                            <input type="hidden" name="stock_id" value="{{ $stock->stock_id }}">
                            <input type="hidden" name="case_id" value="{{ $case->id }}">
                            <div x-data="{ quantity: '', error: '' }">
                                <input type="number" name="stock_quantity"
                                       x-model="quantity"
                                       step="any"
                                       max="{{ $stock->quantity }}"
                                       @input="const result = validateStockQuantity(quantity, {{ $stock->quantity }});
                                error = result.error;
                                if (result.corrected !== null) {
                                    quantity = result.corrected;
                                }"
                                       class="border border-gray-300 rounded-md p-1 w-20"
                                       autocomplete="off"
                                       required
                                >
                                <template x-if="error">
                                    <p class="text-red-600 text-sm mt-1" x-text="error"></p>
                                </template>
                            </div>
                        </td>
                        <td class="px-2 py-1 text-sm text-gray-800">
                            @if(count($allMechanics) > 1)
                                <select name="mechanic_id" id="mechanic_id" class="mt-1 w-full p-1 block w-full border border-gray-300 rounded-md" required>
                                    <option value="">&nbsp;</option>
                                    @foreach($allMechanics as $mechanic)
                                        <option value="{{ $mechanic->id }}">{{ $mechanic->name }} {{ $mechanic->last_name }}</option>
                                    @endforeach
                                </select>
                            @else
                                <input type="hidden" name="mechanic_id" value="{{ $allMechanics[0]->id }}" />
                                <span>{{ $allMechanics[0]->name }} {{ $allMechanics[0]->last_name }}</span>
                            @endif
                        </td>
                        <td class="px-2 py-1 text-sm text-gray-800">
                            <button type="submit" class="text-2xl px-2 m-0 bg-lime-500 text-white rounded-sm hover:bg-lime-700">+</button>
                        </td>
                        <td class="px-2 py-1 text-sm text-gray-800">{{ $stock->quantity }}</td>
                        <td class="px-2 py-1 text-sm text-gray-800">{{ $stock->units }}</td>
                        <td class="px-2 py-1 text-sm text-gray-800">{{ $stock->expiration_date }}</td>
                        <td class="px-2 py-1 text-sm text-gray-800">{{ $stock->location }}</td>
                    </form>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@push('custom-js')
    <script>
        function validateStockQuantity(value, max_value) {
            const floatValue = parseFloat(value);
            const max = parseFloat(max_value);

            if (isNaN(floatValue)) {
                return { error: 'Wprowadź liczbę', corrected: null };
            } else if (floatValue > max) {
                //return 'Maksymalna wartość to ' + max;
                return { error: 'Maksymalna wartość to ' + max, corrected: max };
            } else if (!/^\d+(\.\d+)?$/.test(value)) {
                return { error: 'Dozwolone tylko liczby zmiennoprzecinkowe', corrected: null };
            }

            return { error: '', corrected: null };
        }
    </script>
@endpush