@php
    use App\Enums\ItemCategoryEnum;
    use App\Enums\ItemConditionEnum;
    use App\Enums\ConditionNotePositionEnum;
    use App\Enums\FulfillmentChannelEnum;
    use App\Libs\Settings;
@endphp
<div x-data="individual" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })">
    <div class="my-2 flex space-x-4 justify-between">
        <div class="search-confitions flex flex-wrap gap-x-4">
            <div>
                <x-input-label for="keyword" :value="__('キーワード/ISBN')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-ref="keyword" x-model="inputs.keyword" x-on:keydown.enter="onSearchClick($el)" name="keyword" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label for="category" :value="__('カテゴリー')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-select-input x-model="inputs.category" class="w-64" :options="ItemCategoryEnum::getDropdownOptionsWithoutOther()" placeholder="すべて" />
                </div>
            </div>
            <div>
                <x-input-label class="opacity-0" for="" :value="__('検索ボタン')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-primary-button x-data="" x-on:click.prevent="onSearchClick($el)"
                        class="px-8 py-2 my-1">
                        {{ __('検索') }}</x-primary-button>
                </div>
            </div>
            {{-- <div>
                <x-input-label class="opacity-0" for="" :value="__('クリアボタン')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-secondary-button x-data="" x-on:click.prevent="onClearClick($el)"
                        class="px-6 py-2 my-1">
                        {{ __('クリア') }}</x-secondary-button>
                </div>
            </div> --}}
        </div>
    </div>
    <template x-if="searched && items.length">
        <div class="relative overflow-x-auto shadow-md rounded-lg">
            <table class="w-full text-sm text-left text-gray-700">
                <thead class="text-xs text-gray-700 uppercase bg-gray-200">
                    <tr>
                        <th class="px-2 py-3 w-20">画像</th>
                        <th class="px-2 py-3">ISBN/ASIN<br>商品名<br>製本</th>
                        <th class="px-2 py-3">著者<br>出版社<br>出版日</th>
                        <th class="px-2 py-3">商品サイズ</th>
                        @if ($channel == FulfillmentChannelEnum::MFN)
                            <th class="px-2 py-3">配送パターン</th>
                            <th class="px-2 py-3 w-20">配送料</th>
                        @endif
                        <th class="px-2 py-3 w-24"></th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="item in items" :key="item.asin">
                        <tr class="bg-white border-b hover:bg-gray-100" x-bind:data-asin="item.asin"
                            x-show="!selected || (selected && item.selected)">
                            <td class="px-2 py-1">
                                <img x-show="item.image_url" :src="item.image_url" class="w-full max-h-32">
                                <div x-show="!item.image_url" class="text-center">
                                    <x-heroicon-o-no-symbol class="text-gray-600 inline w-8 h-8" />
                                    <p><small>画像なし</small></p>
                                </div>
                            </td>
                            <td class="px-2 py-1">
                                ISBN/ASIN: <span x-text="item.jan"></span><br>
                                <a target="_blank" class="underline" x-bind:href="'https://www.amazon.co.jp/gp/offer-listing/' + item.asin"><b><span x-text="item.title"></span></b></a><br>
                                製本: <span x-text="getBindingName(item)"></span><br>
                            </td>
                            <td class="px-2 py-1">
                                著者: <span x-text="item.creator"></span><br>
                                出版社: <span x-text="item.publisher"></span><br>
                                出版日: <span x-text="item.publication_date"></span><br>
                            </td>
                            <td class="px-2 py-1">
                                <span x-text="item.size"></span><br>
                            </td>
                            @if ($channel == FulfillmentChannelEnum::MFN)
                                <td class="px-2 py-1">
                                    @php
                                        $alternative_shipping_way = Settings::get(Settings::alternative_shipping_way);
                                    @endphp
                                    @if ($alternative_shipping_way == 'manual')
                                        {{-- 配送パターンが特定できない場合でも配送パターンを選択し、出品が出来る --}}
                                        <x-select-input class="w-24" x-model="item.shipping_pattern"
                                            x-on:change="calcShippingFee(item)" :options="'direct'">
                                            <template x-for="p in item.shipping_patterns">
                                                <option x-bind:value="p.name" x-text="p.name"
                                                    x-bind:selected="p.name == item.shipping_pattern"></option>
                                            </template>
                                        </x-select-input>
                                    @else
                                        {{-- 配送パターンが特定できない場合は出品ができない --}}
                                        <x-select-input class="w-24" x-show="item.shipping_pattern_identified"
                                            x-model="item.shipping_pattern" x-on:change="calcShippingFee(item)"
                                            :options="'direct'">
                                            <template x-for="p in item.shipping_patterns">
                                                <option x-bind:value="p.name" x-text="p.name"
                                                    x-bind:selected="p.name == item.shipping_pattern"></option>
                                            </template>
                                        </x-select-input>
                                    @endif
                                </td>
                                <td class="px-2 py-1 text-right"><span
                                        x-text="item.shipping_pattern_identified ? numberFormat(item.shipping_pattern_identified.price) + '円': ''"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <x-primary-button x-on:click="selectItem(item)"
                                        x-bind:disabled="!item.shipping_pattern_identified">{{ __('選択') }}
                                    </x-primary-button>
                                </td>
                            @else
                                <td class="px-2 py-1">
                                    <x-primary-button x-on:click="selectItem(item)" x-bind:disabled="!item.size">{{ __('選択') }}
                                    </x-primary-button>
                                </td>
                            @endif
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>
    <template x-if="searched && !items.length">
        <p>{{ __('商品が見つかりませんでした') }}</p>
    </template>

    <div x-show="selected">
        @include('exhibit/condition_note_generator', ['channel' => $channel, 'type' => 'individual'])

        <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>
    </div>

    <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('individual', () => Object.assign(window.getConditionNoteGeneratorBase['individual'](), {
                isbnText: '',
                isbns: [],
                items_not_identified: [],
                navigate_to_confirm: false,
                inputs: {
                    keyword: '',
                    category: ''
                },
                items: [],
                searched: false,
                selected: false,

                tabChanged(tab, old) {
                    if (!(tab != old && tab == 'individual')) {
                        return;
                    }
                    this.$nextTick(() => {
                        this.$refs.keyword.focus();
                    });
                },

                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, 'individual']) }}';
                    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 = [];
                    this.inputs = {
                        keyword: '',
                        category: ''
                    };
                    this.selected = false;
                    this.searched = false;
                    this.items = [];

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

                async onSearchClick() {
                    this.global_loader.show = true;

                    const url = '{{ route('exhibit.individual_search') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            ...this.inputs
                        })
                    });

                    this.global_loader.show = false;

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

                async calcShippingFee(item) {
                    const found = item.shipping_patterns.filter((p) => {
                        return p.name == item.shipping_pattern;
                    })[0];
                    item.shipping_pattern_identified = found;

                    // 選択中の商品の場合、配送パターンの変更を商品登録時に使用する配送パターンに連動させる
                    if (item.selected) {
                        this.pattern = item.shipping_pattern_identified?.uuid ?? null;
                    }
                },

                getBindingName(item) {
                    const binding = item.data?.attributes?.binding?.[0]?.value;
                    const names = {
                        comic: 'コミック',
                        tankobon_hardcover: '単行本(ハードカバー)',
                        tankobon_softcover: '単行本(ソフトカバー)',
                        jp_oversized_book: '大型本',
                        paperback_shinsho: ' 新書',
                        mook: 'ムック',
                        sheet_music: ' 楽譜',
                        audioCD: 'CD',
                        dvd: 'DVD',
                        blu_ray: 'Blu-ray',
                    };
                    return names[binding] ?? binding;
                },

                async selectItem(item) {
                    this.category = item.category;
                    this.items.forEach((_item) => {
                        _item.selected = (_item === item);
                    });
                    await this.categoryChanged(null);
                    this.pattern = item.shipping_pattern_identified?.uuid ?? null;
                    this.isbns = [item.jan];
                    this.selected = true;
                }
            }));
        });
    </script>
</div>