@php
    use App\Enums\ItemCategoryEnum;
@endphp
<div x-data="mfn" x-on:end="sorted($event)">
    <div class="mb-2">
        <x-secondary-button x-data="" x-on:click.prevent="insertRow()" class="mr-1">
            {{ __('カーソルがある行の下に1行挿入') }}</x-secondary-button>
        <x-secondary-button x-data="" x-on:click.prevent="deleteRow()" class="mr-1">
            {{ __('カーソルがある行を削除') }}</x-secondary-button>
        <x-secondary-button x-data="" x-on:click.prevent="insertRow(true)" class="mr-1">
            {{ __('カーソルがある行の下に複製して挿入') }}</x-secondary-button>
        <x-primary-button x-data="" x-on:click.prevent="save()" class="float-right">
            {{ __('保存する') }}</x-primary-button>
    </div>
    <div class="relative overflow-x-auto shadow-md rounded-lg">
        <table id="mfn" class="table-fixed w-full text-sm text-left text-gray-700">
            <thead class="text-xs text-gray-700 uppercase bg-gray-200">
                <tr>
                    <th class="pl-3 py-3 w-10"></th>
                    <th class="pl-3 py-3">カテゴリー</th>
                    <th class="pl-3 py-3">配送パターン名</th>
                    <th class="pl-3 py-3">Amazon配送料</th>
                    <th class="pl-3 py-3">業務委託基本手数料</th>
                    <th class="pl-3 py-3">売上ボーナス（％）</th>
                    <th class="pl-3 py-3">業務委託基本手数料上限</th>
                </tr>
            </thead>
            <tbody>
                <template x-for="item in items" :key="item.uuid" class="">
                    <tr x-on:mousedown="selectRow($event)"
                        :class="{
                            'bg-gray-100': item.selected,
                            'bg-rose-100 hover:bg-rose-200': item.error
                        }"
                        class="border-b hover:bg-gray-100">
                        <td class="pl-3 py-2 text-center relative">
                            <x-heroicon-o-bars-3 class="cursor-pointer" />
                            {{-- <span x-text="item.order" class="absolute left-0 top-0"></span>
                            <span x-text="item.added?'new':''" class="absolute right-0 top-0"></span> --}}
                        </td>
                        <td class="pl-3 py-2">
                            <x-select-input x-model="item.category" class="w-full" :options="ItemCategoryEnum::getDropdownOptionsForShippingFees()" />
                        </td>
                        <td class="pl-3 py-2">
                            <x-text-input x-model="item.name" type="text" class="w-full" />
                        </td>
                        <td class="pl-3 py-2">
                            <x-text-input x-model="item.price" type="text" class="w-full text-right" />
                        </td>
                        <td class="pl-3 py-2">
                            <x-text-input x-model="item.cost" type="text" class="w-full text-right" />
                        </td>
                        <td class="pl-3 py-2">
                            <x-text-input x-model="item.bonus" type="text" class="w-full text-right" />
                        </td>
                        <td class="pl-3 pr-2 py-2">
                            <x-text-input x-model="item.max" type="text" class="w-full text-right" />
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('mfn', () => ({
                    items: @js($items),
                    selectedIndex: null,

                    init() {
                        this.renumber();
                    },

                    renumber() {
                        this.items.forEach((item, index) => {
                            item.order = index;
                        });
                    },

                    updateSelected() {
                        this.items.forEach((item, index) => {
                            item.selected = (index == this.selectedIndex);
                        });
                    },

                    setSelectedIndex(index) {
                        if (index == null) {
                            this.selectedIndex = null;
                            this.updateSelected();
                            return;
                        }
                        if (index < 0 || index >= this.items) {
                            return;
                        }
                        this.selectedIndex = index;
                        this.updateSelected();
                    },

                    getIndexFromElement(elem) {
                        let tbody = elem.closest('tbody');
                        let row = elem.closest('tr');
                        if (!tbody || !row) {
                            return null;
                        }

                        let index = Array.from(tbody.querySelectorAll('tr')).indexOf(row);
                        if (index < 0) {
                            return null;
                        }
                        return index;
                    },

                    getSelectedItem() {
                        let index = this.selectedIndex;
                        if (index == null) {
                            return null;
                        }
                        if (index < 0 || index >= this.items) {
                            return null;
                        }
                        return this.items[index];
                    },

                    selectRow(evt) {
                        this.setSelectedIndex(this.getIndexFromElement(evt.target));
                    },

                    insertRow(copy) {
                        let item = this.getSelectedItem();
                        if (!item) {
                            return;
                        }

                        this.items.splice(this.selectedIndex + 1, 0, {
                            'uuid': (new Date()).getTime(), // uuid はサーバ側で正式なものに付け直す
                            'category': item.category,
                            'name': copy ? item.name : '',
                            'price': copy ? item.price : '',
                            'cost': copy ? item.cost : '',
                            'bonus': copy ? item.bonus : '',
                            'max': copy ? item.max : '',
                            'added': true,
                        });

                        this.setSelectedIndex(this.selectedIndex + 1); // 新しい行を選択する
                        this.renumber();
                        this.updateSelected();
                    },

                    deleteRow() {
                        let item = this.getSelectedItem();
                        if (!item) {
                            return;
                        }
                        this.items.splice(this.selectedIndex, 1);

                        this.setSelectedIndex(null); // 連続削除防止で一旦現在の選択をクリアする
                        this.renumber();
                        this.updateSelected();
                    },

                    sorted(evt) {
                        // まず、データの並びを変えないまま order の値を適切に付け替える
                        if (evt.oldIndex < evt.newIndex) {
                            this.items.forEach((item, index) => {
                                if (item.order > evt.oldIndex && item.order <= evt.newIndex) {
                                    // oldIndex より大きく newIndex 以下のものをデクリメントする
                                    item.order--;
                                } else if (item.order == evt.oldIndex) {
                                    // oldIndex を newIndex にする
                                    item.order = evt.newIndex;
                                }
                            });
                        } else {
                            this.items.forEach((item, index) => {
                                if (item.order < evt.oldIndex && item.order >= evt.newIndex) {
                                    // oldIndex より小く newIndex 以上のものをインクリメントする
                                    item.order++;
                                } else if (item.order == evt.oldIndex) {
                                    // oldIndex を newIndex にする
                                    item.order = evt.newIndex;
                                }
                            });
                        }

                        // 次に実際にソートする(これで画面に反映される)
                        this.items.sort((a, b) => {
                            if (a.order == b.order) {
                                return 0;
                            }
                            return (a.order < b.order) ? -1 : 1;
                        });
                    },

                    async save() {
                        const url = '{{ route('settings.shipping_fees.save', 'mfn') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify(Alpine.raw(this.items))
                        });

                        response.json().then((data) => {
                            if (data.success) {
                                location.href = '{{ route(Route::currentRouteName()) }}';
                                return;
                            } else {
                                data.errors = data.errors || [];
                                this.items.forEach((item, index) => {
                                    item.error = (data.errors.includes(index));
                                });
                                this.modal = {
                                    title: 'エラー',
                                    body: data.message ? data.message : '不明なエラーが発生しました'
                                };
                                this.$dispatch('open-modal', 'alert');
                            }
                        });
                    }
                }));

                let table = document.querySelector('#mfn tbody');
                let sortable = Sortable.create(table, {
                    handle: 'svg',
                    animation: 150,
                    swapThreshold: 0.1,
                    ghostClass: 'bg-blue-200',
                    onEnd(evt) {
                        // sortable で並び替えすると DOM の順番が変わってしまう(が alpinejs のほうのデータの並びには影響を与えない)。
                        // "カーソルがある行"に関する処理があるため alpinejs 側で並び順を管理したいが
                        // DOM の順番が変わっていると alpinejs 側のデータの並びが正しく表示されない。
                        // そのため sortable 側では DOM の入れ替えをしないようにする(入れ替え後すぐ元に戻すようにする)。
                        const items = evt.from.querySelectorAll(':scope > tr');
                        evt.from.insertBefore(evt.item, items[evt.oldIndex + (evt.oldIndex > evt.newIndex)]);
                        return false;
                    }
                });
            });
        </script>
    </div>
</div>