@extends('content')

@section('page-title')
    {{ __('workshop.case_position.case') }}
@endsection

@section('page-content')

    <x-wrapper-component>

        {{-- INFO - pojazd, status, mechanik, opis --}}
        <x-workshop.case-header-component :vehicle="$vehicle" :keychain="$keychain" :case="$case" :case_employee="$case_employee" />

        <x-workshop.buttons-component :case="$case" />

        <div class="border-4 border-gray-600 mb-4">
            <div class="bg-gray-600 px-4 pt-1 pb-2 text-white">{{ __('workshop.get_from_warehouse_title') }}</div>

                <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-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.product') }}</th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.th_get_from_warehouse') }}</th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.mechanic') }}</th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700"> </th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.items_quantity') }}</th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.units') }}</th>
                        <th class="px-4 py-2 text-left text-sm text-gray-700">{{ __('workshop.expiration_date') }}</th>
                        <th class="px-4 py-2 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-4 py-2 text-sm text-gray-800">{{ $stock->name }} {{ $stock->producer }} {{ $stock->description }}</td>
                                <td class="px-4 py-2 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 px-2 py-2"
                                            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-4 py-2 text-sm text-gray-800">


                                    @if(count($all_mechanics) > 1)
                                        <select name="mechanic_id" id="mechanic_id" class="mt-1 w-full p-2 block w-ful border border-gray-300 rounded-md" required>
                                            <option value="">&nbsp;</option>
                                            @foreach($all_mechanics as $mechanic)
                                                <option value="{{ $mechanic->id }}">{{ $mechanic->name }} {{ $mechanic->last_name }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="hidden" name="mechanic_id" value="{{ $all_mechanics[0]->id }}" />
                                        <span>{{ $all_mechanics[0]->name }} {{ $all_mechanics[0]->last_name }}</span>
                                    @endif




                                <td class="px-4 py-2 text-sm text-gray-800">
                                    <button type="submit" class="btn_lg btn_green">{{ __('workshop.get_btn') }}</button>
                                </td>
                                <td class="px-4 py-2 text-sm text-gray-800">{{ $stock->quantity }}</td>
                                <td class="px-4 py-2 text-sm text-gray-800">{{ $stock->units }}</td>
                                <td class="px-4 py-2 text-sm text-gray-800">{{ $stock->expiration_date }}</td>
                                <td class="px-4 py-2 text-sm text-gray-800">{{ $stock->location }}</td>
                            </form>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </x-wrapper-component>

    <div class="text-center">
        <a href="{{ route('workshop.cases.update.details', ['case'=>$case->id]) }}" class="btn_lg btn_gray">&laquo; {{ __('main.return') }}</a>
    </div>



@endsection
@push('custom-js')
<script>
    // document.addEventListener('DOMContentLoaded', function () {
    //     const buttons = document.querySelectorAll('.lock-button');
    //
    //     buttons.forEach(button => {
    //         button.addEventListener('click', () => {
    //             buttons.forEach(b => b.disabled = true); // zablokuj wszystkie
    //         });
    //     });
    // });

    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