@php
    use App\Enums\ItemCategoryEnum;
    use App\Enums\ItemConditionEnum;
    use App\Enums\ConditionNotePositionEnum;
@endphp
<div x-data="bulk">
    <table class="table-fixed w-80 text-sm text-left text-gray-700">
        <tr>
            <th class="pl-3 py-3 w-32">カテゴリー</th>
            <td class="pl-3 py-2">
                <x-select-input x-model="category" x-on:change="categoryChanged($el)" class="w-48" :options="ItemCategoryEnum::getDropdownOptions()"
                    placeholder="選択してください" />
            </td>
        </tr>
    </table>

    @include('exhibit/condition_note_generator', ['channel' => $channel, 'type' => 'bulk'])

    <template x-if="settings && settings.length">
        <table class="table-fixed w-80 text-sm text-left text-gray-700">
            <tr>
                <th class="pl-3 py-3 w-32">ISBN<br>点数: <span x-text="isbns.length"></span></th>
                <td class="pl-3 py-2">
                    <small>※ISBNは半角で入力してください</small>
                    <x-textarea x-model="isbnText" class="w-full" rows="10" x-on:input="isbnsChanged($el)" />
                </td>
            </tr>
        </table>
    </template>

    <template x-if="settings && settings.length">
        <div class="text-center border-t pt-2">
            <x-secondary-button x-on:click.prevent="showAddEntryModal($el)" class="m-2">{{ __('入力パターン保存') }}
            </x-secondary-button>
            <x-primary-button x-on:click.prevent="save(false)" class="m-2">{{ __('商品登録後、続けて登録する') }}
            </x-primary-button>
            <x-primary-button x-on:click.prevent="save(true)" class="m-2">{{ __('商品登録後、内容確認タブに移動する') }}
            </x-primary-button>
        </div>
    </template>

    <x-modal name="items-not-identified">
        <div class="p-6">
            <h2 class="text-lg font-medium text-gray-900">
                {{ __('特定できなかったISBN') }}
            </h2>

            <p class="mt-1 text-sm text-gray-600">{{ __('次のISBNは商品の特定ができなかったためスキップしました。') }}</p>

            <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                <ul class="text-sm text-red-600 space-y-1 mt-2">
                    <template x-for="(isbn, i) in items_not_identified" :key="i">
                        <li x-text="isbn"></li>
                    </template>
                </ul>
            </div>

            <div class="mt-6 flex justify-end">
                <x-secondary-button x-on:click="$dispatch('close'); afterSave()">
                    {{ __('閉じる') }}
                </x-secondary-button>
            </div>
        </div>
    </x-modal>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('bulk', () => Object.assign(window.getConditionNoteGeneratorBase['bulk'](), {
                isbnText: '',
                isbns: [],
                items_not_identified: [],
                navigate_to_confirm: false,

                parseIsbnCount() {
                    setTimeout(() => {
                        this.isbnText = this.isbnText.replace(/[^A-Za-z0-9\r\n]/g, '');
                        this.isbns = this.isbnText.split('\n').filter((isbn) => {
                            return !!isbn.trim();
                        });
                    }, 1);
                },

                isbnsChanged(elem) {
                    this.parseIsbnCount();
                },

                async save(navigate_to_confirm) {
                    this.global_loader.show = true;

                    this.navigate_to_confirm = navigate_to_confirm;
                    const url = '{{ route('exhibit.add_items', [$channel, 'bulk']) }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            condition: this.condition,
                            pattern: this.pattern,
                            texts: this.texts,
                            isbns: this.isbns
                        })
                    });

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        if (data.success) {
                            if (data.items_not_identified.length) {
                                this.items_not_identified = data.items_not_identified;
                                this.$dispatch('open-modal', 'items-not-identified');
                            } else {
                                this.afterSave();
                            }
                        } else {
                            this.modal = {
                                title: 'エラー',
                                body: data.message ? data.message : '登録に失敗しました',
                            };
                            this.$dispatch('open-modal', 'alert');
                        }
                    }).catch(() => {
                        this.modal = {
                            title: 'エラー',
                            body: 'エラーが発生しました'
                        };
                        this.$dispatch('open-modal', 'alert');
                    });
                },

                afterSave() {
                    this.isbnText = '';
                    this.isbns = [];

                    if (this.navigate_to_confirm) {
                        // 内容確認タブに遷移する
                        document.querySelector('#lw-tab-confirm').click();
                    } else {
                        // 同画面に留まる
                        this.modal = {
                            title: '登録完了',
                            body: '商品を登録しました'
                        };
                        this.$dispatch('open-modal', 'alert');
                    }
                }
            }));
        });
    </script>
</div>