@props(['listitems' => null, 'editmode' => false, 'admin' => false, 'locked' => false, 'imported' => false])

{{-- {{ dd($listitems) }} --}}

<div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl overflow-hidden " x-data="{
    position: '',
    list: [],
    removedList: [],
    activeRowIndex: 0,
    editMode: false,
    locked: false,
    imported: false,
    newRow: { 'id': null, 'refid': null, 'value': '', 'color': '#ffffff', 'inactive': false, 'order': null, 'removed': false },
    removeItem(index) {
        const removedItem = this.list.splice(index, 1)[0];
        removedItem.removed = true;
        this.removedList.push(removedItem);
        this.resetIds();
    },
    resetIds() {
        this.list.forEach((item, idx) => {
            item.order = idx + 1;
        });
    },
    updateOrder() {
        this.list = this.list.map((item, idx) => {
            return {
                ...item,
                order: idx + 1
            };
        });
    },
    addNewItem() {
        let maxRefId = this.list.reduce((max, item) => {
            const refid = parseInt(item.refid, 10);
            return !isNaN(refid) && refid > max ? refid : max;
        }, 0);

        this.list.push({
            'id': null,
            'refid': maxRefId + 1,
            'value': '',
            'hex': '#ffffff',
            'inactive': false,
            'order': this.list.length + 1,
            'removed': false
        });
    },
    initializeList() {
        this.locked = {{ $locked ? 'true' : 'false' }};
        this.imported = {{ $imported ? 'true' : 'false' }};
        @if($listitems)
            this.list = {{ json_encode($listitems) ?? null }};

            this.list.sort((a, b) => a.order - b.order); // Sort by order
        @endif
    }
}" x-init="initializeList()" >


    <div class="px-4 pt-6 pb-2 sm:px-8 sm:pt-8">
        <h2 class="text-base font-semibold leading-7 text-gray-900">List Options</h2>
    </div>
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 overflow-hidden">
        <div>
            <table class="w-full divide-y divide-gray-300 list-table" id="listOptions">
                <thead class="text-xs text-gray-700 uppercase">
                    <tr class="">
                        @if ($editmode)
                            <th scope="col"></th>
                        @endif
                        <th scope="col" class="px-3">ID</th>
                        <th scope="col" class="px-3">Value</th>
                        {{-- <th scope="col" class="px-3">Online</th> --}}
                        @if (!$admin)
                        <th scope="col" class="px-3">Inactive</th>
                        @endif
                        <th scope="col" class="px-3">Color Picker</th>
                        @if ($editmode)
                            <th scope="col" class="px-3" x-show="!locked">Actions</th>
                        @endif
                    </tr>
                </thead>
                @if ($editmode)
                    <tbody class="divide-y divide-gray-200 bg-white" x-sort:ghost>
                        <template x-for="(item, index) in removedList" :key="item.refid">

                        </template>
                        <template x-for="(item, index) in list" :key="item.refid">
                            <tr x-sort:item class="bg-white">
                                <td class="max-w-5 cursor-grab ">
                                {{-- <td class="max-w-5 cursor-grab active:cursor-grabbing"> --}}
                                    <div class="flex justify-center" x-sort:handle>
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                                        </svg>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 !py-0 text-sm text-gray-500 ">
                                    <input type="text" x-model="item.refid" :name="'options[' + (index + 1) + '][refid]'" class="table-input bg-gray-50 disabled" x-show="!locked" @if (!$admin) readonly @endif>
                                    <div x-text="item.refid" class="table-input" x-show="locked"></div>
                                </td>
                                <td class="whitespace-nowrap px-3 !py-0 text-sm font-medium text-gray-900">
                                    {{-- <input type="number" x-model="item.order" :name="'options[' + item.order + '][order]'" hidden> --}}
                                    <input type="text" x-model="item.value"
                                        :name="'options[' + (index + 1) + '][value]'" class="table-input" x-show="!locked">
                                    <div x-text="item.value" class="table-input" x-show="locked"></div>
                                </td>
                   {{--              <td class="whitespace-nowrap px-3 !py-0 text-sm text-gray-500">
                                    <div class="flex h-6 items-center">
                                        <input type="checkbox" x-model="item.isonline"
                                            :name="'options[' + (index + 1) + '][isonline]'" class="checkbox-style">
                                    </div>
                                </td> --}}
                                 @if (!$admin)
                                <td class="whitespace-nowrap px-3 !py-0 text-sm text-gray-500">
                                    <div class="flex h-6 items-center">
                                        <input type="checkbox" x-model="item.inactive"
                                            :name="'options[' + (index + 1) + '][inactive]'" class="checkbox-style">
                                    </div>
                                </td>
                                @endif
                                <td class="whitespace-nowrap px-3 !py-0 text-sm text-gray-500 items-center justify-center">
                                    <input type="color" x-model="item.hex"
                                       class="p-1 h-10 w-14 block bg-white border border-gray-200 cursor-pointer rounded-lg"
                                       :name="'options[' + (index + 1) + '][hex]'">
                                </td>
                                <td class="whitespace-nowrap px-3 !py-0 text-sm text-gray-500">
                                    <input type="checkbox" x-model="item.removed" :name="'options[' + (index + 1) + '][removed]'" class="hidden" >
                                    <button type="button" x-on:click="removeItem(index)" class="text-red-400 cursor-pointer hover:underline" x-show="!locked">Remove</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6" class="p-3 sm:p-4">
                                {{-- <div x-show="!locked" x-on:click="list.push({ 'refid': list.length + 1, 'value': '', 'hex': '#ffffff', 'inactive': false, 'order': list.length + 1 })" class="btn btn-primary cursor-pointer w-fit"> --}}
                                <div x-show="!locked" x-on:click="addNewItem()" class="btn btn-primary cursor-pointer w-fit">
                                    Add Line +
                                </div>
                                <div x-show="locked && !imported" class="">
                                    Rows are locked.
                                </div>
                                <div x-show="locked && imported" class="">
                                    List has been imported from third party. Re-import to update.
                                </div>
                            </td>
                        </tr>
                    </tfoot>
                @else
                    <tbody class="divide-y divide-gray-200 bg-white">
                        <template x-for="(item, index) in list" :key="item.id">
                            <tr class="bg-white">
                                <td class="whitespace-nowrap p-3 sm:p-4 text-sm text-gray-500">
                                    <div x-text="item.refid" class="table-input"></div>
                                </td>
                                <td class="whitespace-nowrap p-3 sm:p-4 text-sm font-medium text-gray-900 ">
                                    <div x-text="item.value" class="table-input"></div>
                                </td>
                                @if (!$admin)
                                <td class="whitespace-nowrap p-3 sm:p-4 text-sm text-gray-500">
                                    <div class="flex h-6 items-center">
                                        <input type="checkbox" :checked="item.inactive" class="checkbox-style"
                                            disabled>
                                    </div>
                                </td>
                                @endif
                                <td>
                                    <div class="flex h-6 items-center">
                                        <input type="color" :value="item.hex"
                                            class="p-1 h-10 w-14 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700"
                                            id="hs-color-input" title="Choose your color" disabled>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                @endif
            </table>
        </div>
    </div>
</div>