@php
    // Konwersja danych z old()
    $oldItems = collect(old('items_to_repair', []));
    $oldMechanics = old('items_mechanics', []);
    $itemPriority = old('item_priority', []);

    // Pozycje z przypisanym mechanic_id (int!)
    $itemsWithMechanics = $oldItems->map(function ($item, $index) use ($oldMechanics, $itemPriority) {
        return [
            'text' => $item,
            'mechanic_id' => isset($oldMechanics[$index]) ? (int) $oldMechanics[$index] : null,
            'priority' => isset($itemPriority[$index]) ? (int) $itemPriority[$index] : 1, // domyślnie 1
        ];
    });


@endphp

<label for="vehicle_search_label" class="block mb-1 ml-4 text-lg pt-2 font-bold">
    {{ __('vehicle.repair.add.enter_repair_item') }}
</label>

<div class="border border-stone-300 p-4 rounded-xl" id="vehicle_search_label">


    <div
        x-data="{
        inputText: '',
        items: {{ Js::from($itemsWithMechanics) }},
        mechanics: {{ Js::from($mechanics) }},
        draggedIndex: null,
        dragStart(index) {
            this.draggedIndex = index;
        },
        drop(index) {
            const draggedItem = this.items.splice(this.draggedIndex, 1)[0];
            this.items.splice(index, 0, draggedItem);
        }
    }"
    >
    <textarea
        x-model="inputText"
        placeholder="{{ __('vehicle.repair.add.enter_repair_item') }}"
        class="border p-2 w-full h-24 rounded"
        @keydown.enter.prevent="
        if (inputText.trim() !== '') {
            items.push({ text: inputText, mechanic_id: null, priority: items.length + 1 });
            inputText = '';
        }
    "
    ></textarea>

        <button
            type="button"
            class="btn_md btn_gray mt-2"
            @click="if (inputText.trim() !== '') { items.push({text: inputText, mechanic_id: null}); inputText = '' }"
        >
            {{ __('vehicle.repair.add.btn_add') }}
        </button>

        <!-- Lista sortowalna -->
        <div class="space-y-2 mt-4">
            <template x-for="(item, index) in items" :key="index">
                <div
                    class="p-2 flex flex-col gap-2 rounded-xl bg-white shadow-xl cursor-move"
                    draggable="true"
                    @dragstart="dragStart(index)"
                    @dragover.prevent
                    @drop="drop(index)"
                >
                    <!-- Nazwa pozycji -->
                    <div class="flex items-center justify-between gap-2">
                        <div class="flex items-start gap-2 flex-1">
                            <div class="font-bold w-6 text-left" x-text="index + 1"></div>
                            <div class="flex-1">
                                <span x-text="item.text"></span>
                                <input type="hidden" name="items_to_repair[]" :value="item.text">
                                <input type="hidden" name="item_priority[]" :value="index + 1">
                            </div>
                        </div>
                        <button
                            type="button"
                            @click="items.splice(index, 1)"
                            class="text-red-600 hover:text-red-800 text-xl leading-none font-bold"
                        >
                            &times;
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>


</div>
{{--    <div--}}
{{--        x-data="{--}}
{{--            inputText: '',--}}
{{--            items: {{ Js::from($itemsWithMechanics) }},--}}
{{--            mechanics: {{ Js::from($mechanics) }}--}}
{{--        }"--}}
{{--    >--}}
{{--        <pre x-text="JSON.stringify(items, null, 2)" class="text-xs bg-gray-200 p-2 mt-2"></pre>--}}

{{--        <textarea--}}
{{--            x-model="inputText"--}}
{{--            placeholder="{{ __('vehicle.repair.add.enter_repair_item') }}"--}}
{{--            class="border p-2 w-full h-24 rounded"--}}
{{--        ></textarea>--}}

{{--        <button--}}
{{--            type="button"--}}
{{--            class="btn_md btn_gray mt-2"--}}
{{--            @click="if (inputText.trim() !== '') { items.push({text: inputText, mechanic_id: null}); inputText = '' }"--}}
{{--        >--}}
{{--            {{ __('vehicle.repair.add.btn_add') }}--}}
{{--        </button>--}}

{{--        <!-- Lista pozycji z numeracją, inputem ukrytym i wyborem mechanika -->--}}
{{--        <div class="space-y-2 mt-4">--}}
{{--            <template x-for="(item, index) in items" :key="index">--}}
{{--                <div class="p-2 flex flex-col gap-2 rounded-xl bg-white shadow-xl">--}}

{{--                    <!-- Nazwa pozycji + ukryty input + przycisk usuwania -->--}}
{{--                    <div class="flex items-center justify-between gap-2">--}}
{{--                        <div class="flex items-start gap-2 flex-1">--}}
{{--                            <div class="font-bold w-6 text-left" x-text="index + 1"></div>--}}
{{--                            <div class="flex-1">--}}
{{--                                <span x-text="item.text"></span>--}}
{{--                                <input type="hidden" name="items_to_repair[]" :value="item.text">--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <button--}}
{{--                            type="button"--}}
{{--                            @click="items.splice(index, 1)"--}}
{{--                            class="text-red-600 hover:text-red-800 text-xl leading-none font-bold"--}}
{{--                        >--}}
{{--                            &times;--}}
{{--                        </button>--}}
{{--                    </div>--}}

{{--                    <!-- Select z przypisaniem mechanika -->--}}
{{--                    <div class="grid grid-cols-12 gap-4">--}}

{{--                        <div class="col-span-10">--}}
{{--                            <label class="text-sm block text-gray-500 ml-1 mb-1">{{ __('office.mechanic') }}</label>--}}
{{--                            <select--}}
{{--                                class="border border-gray-300 rounded p-1 w-full"--}}
{{--                                x-model="item.mechanic_id"--}}
{{--                                :name="'items_mechanics[' + index + ']'"--}}
{{--                            >--}}
{{--                                <option value="">{{ __('Wybierz...') }}</option>--}}
{{--                                <template x-for="mechanic in mechanics" :key="mechanic.id">--}}
{{--                                    <option--}}
{{--                                        :value="mechanic.id"--}}
{{--                                        x-text="mechanic.name + ' ' + mechanic.last_name"--}}
{{--                                        :selected="mechanic.id === parseInt(item.mechanic_id)"--}}
{{--                                    ></option>--}}
{{--                                </template>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                        <div class="col-span-2">--}}
{{--                            <label class="text-sm block text-gray-500 ml-1 mb-1">{{ __('office.item_priority') }}</label>--}}
{{--                            <select--}}
{{--                                class="border border-gray-300 rounded p-1 w-full"--}}
{{--                                x-model="item.priority"--}}
{{--                                :name="'item_priority[' + index + ']'"--}}
{{--                            >--}}
{{--                                <template x-for="priority in {{ Js::from(config('page.case_priorities')) }}" :key="priority">--}}
{{--                                    <option--}}
{{--                                        :value="priority"--}}
{{--                                        x-text="priority"--}}
{{--                                        :selected="parseInt(item.priority) === priority"--}}
{{--                                    ></option>--}}
{{--                                </template>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </template>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}