@php
    use App\Enums\ItemConditionEnum;
    use App\Enums\ItemCategoryEnum;
@endphp
<div x-data="keyword" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <template x-if="assessment">
        <div>
            <div x-show="!showResult">
                <section class="mx-auto py-4">
                    <header class="mb-4">
                        <h2 class="text-lg font-medium text-gray-900">
                            <small>{{ __('査定名') }}:</small>
                            <span x-text="assessment.name" class="mr-12"></span>
                            <small>{{ __('査定件数') }}:</small>
                            <span x-text="assessment.item_count" class="mr-12"></span>
                            <small>{{ __('状態') }}:</small>
                            <span x-text="status(assessment)"></span>
                            <x-heroicon-o-arrow-path x-show="timer" class="text-gray-600 inline w-6 h-6 mb-1 loader" />
                        </h2>
                    </header>

                    <div class="search-confitions flex flex-wrap gap-x-4 my-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-model="inputs.keyword"
                                    x-on:keydown.enter="onSearchClick($el)" name="keyword" class="w-80" />
                            </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-80" :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>

                    <template x-if="searched && items.length">
                        <div class="relative overflow-x-auto shadow-md rounded-lg my-4">
                            <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>
                                        <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>
                                                <b><span x-text="item.title" class=""></span></b><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>
                                            <td class="px-2 py-1">
                                                <x-primary-button x-on:click="selectItem(item)">
                                                    {{ __('選択') }}
                                                </x-primary-button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </template>
                    <template x-if="searched && !items.length">
                        <p class="my-4">{{ __('商品が見つかりませんでした') }}</p>
                    </template>

                    <div class="flex gap-4">
                        <template x-for="(input, index) in inputs" :key="index">
                            <div class="w-1/4 text-sm">
                                <div class="px-4 py-2 bg-slate-700 border border-slate-700 text-white"><span
                                        x-text="input.name"></span>
                                    <div class="float-right"><span x-text="lineCount(input)"></span>点</div>
                                </div>
                                <div class="px-4 py-0.5 border border-gray-300">最大<span x-text="input.max"></span>件まで
                                </div>
                                {{-- <div class="border border-gray-300">
                                    <x-text-input x-model="input.text" x-on:keydown.enter="enter(input)" type="text"
                                        class="px-4 py-2 block w-full border-none" />
                                </div> --}}
                                <div class="border border-gray-300">
                                    <x-textarea x-model="input.lines" x-bind:rows="input.rows"
                                        class="px-4 py-2 block w-full border-none" />
                                </div>
                                <div x-show="input.hasOwnButton" class="mt-1 text-right">
                                    <x-primary-button x-on:click.prevent="save()" class="">
                                        {{ __('検索') }}
                                    </x-primary-button>
                                </div>
                            </div>
                        </template>
                    </div>
                </section>

                <div class="text-center pt-2">
                    {{-- <x-secondary-button x-on:click.prevent="back()" class="m-2">
                        {{ __('戻る') }}
                    </x-secondary-button> --}}
                    <x-primary-button x-on:click.prevent="save()" class="m-2">
                        {{ __('検索') }}
                    </x-primary-button>
                </div>
            </div>

            <div x-show="showResult">
                <section class="mx-auto py-4">
                    <header class="mb-4">
                        <h2 class="text-lg font-medium text-gray-900">
                            <small>{{ __('査定名') }}:</small>
                            <span x-text="assessment.name" class="mr-12"></span>
                            <small>{{ __('査定件数') }}:</small>
                            <span x-text="assessment.item_count" class="mr-12"></span>
                            <small>{{ __('状態') }}:</small>
                            <span x-text="status(assessment)"></span>
                            <x-heroicon-o-arrow-path x-show="timer" class="text-gray-600 inline w-6 h-6 mb-1 loader" />
                        </h2>
                    </header>
                </section>

                <div class="my-1 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                    <p>査定結果は自動的に更新されていきます。</p>
                    <p>処理の途中でも、査定済みの商品を削除したり、続けて別の商品の登録をすることができます。</p>
                </div>
                <div x-html="result"></div>

                <div class="text-center pt-2">
                    <x-danger-button x-on:click.prevent="deleteItems()" class="m-2">
                        {{ __('選択した商品を削除する') }}
                    </x-danger-button>
                    {{-- <x-secondary-button x-on:click.prevent="back()" class="m-2">
                        {{ __('戻る') }}
                    </x-secondary-button> --}}
                    <x-primary-button x-on:click.prevent="reset()" class="m-2">
                        {{ __('査定を続ける') }}
                    </x-primary-button>
                    <x-primary-button x-on:click.prevent="toResult()" class="m-2">
                        {{ __('査定結果まとめ') }}
                    </x-primary-button>
                </div>
            </div>
        </div>

    </template>

    <template x-if="!assessment">
        <p>{{ __('先に事前設定を行ってください') }}</p>
    </template>

    <x-modal name="select-condition">
        <div class="p-6">
            <h2 class="text-lg font-medium text-gray-900">
                {{ __('コンディション選択') }}
            </h2>

            <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                <div class="my-3">
                    <x-input-label for="" :value="__('商品名')" />
                    <p class="text-base font-bold" x-text="curItem.source.title"></p>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション')" />
                    <x-select-input x-model="curItem.condition" :options="ItemConditionEnum::getDropdownOptions('exhibit')" />
                </div>
            </div>

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

    @php
        $user = auth()->user();
    @endphp
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('keyword', () => ({
                assessment: null,

                inputs: {
                    keyword: '',
                    category: ''
                },
                items: [],
                searched: false,
                selected: false,
                curItem: {
                    source: {}
                },

                inputs: [],
                showResult: false,
                result: '',
                timer: null,
                itemIds: [],

                init() {
                    this.initInputs();
                    if (this.currentTab == 'keyword') {
                        this.loadData();
                    }
                },

                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');
                    });
                },

                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;
                },

                selectItem(item) {
                    this.curItem = {
                        source: item,
                        condition: @js(ItemConditionEnum::NEW)
                    };
                    this.$dispatch('open-modal', 'select-condition');
                },

                addItem() {
                    this.items.forEach((_item) => {
                        _item.selected = (_item === this.curItem.source);
                    });

                    const condition = this.curItem.condition;
                    let input = this.inputs.filter((input) => input.condition == condition)[0];
                    if (input) {
                        input.text = this.curItem.source.asin;
                        this.enter(input);
                    }
                    this.selected = true;
                },

                initInputs() {
                    this.inputs = [{
                        condition: @js(ItemConditionEnum::NEW),
                        name: '新品',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                    }, {
                        condition: @js(ItemConditionEnum::USED_LIKE_NEW),
                        name: 'ほぼ新品',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                    }, {
                        condition: @js(ItemConditionEnum::USED_VERY_GOOD),
                        name: '非常に良い',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                    }, {
                        condition: @js(ItemConditionEnum::USED_GOOD),
                        name: '良い',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                    }, {
                        condition: @js(ItemConditionEnum::USED_ACCEPTABLE),
                        name: '可',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                    }];
                },

                tabChanged(tab, old) {
                    if (!(tab != old && tab == 'keyword')) {
                        return;
                    }
                    if (this.showResult) {
                        this.reset();
                    }
                    this.loadData();
                },

                loadData(url) {
                    let parent = Alpine.store('sharedData');
                    return parent.loadAssessment().then(() => {
                        this.assessment = parent.assessment;
                    });
                },

                lineCount(input) {
                    return input.lines.split('\n').filter((a) => {
                        return a.trim() ? true : false;
                    }).length;
                },

                status(assessment) {
                    let parent = Alpine.store('sharedData');
                    return parent.status(assessment);
                },

                enter(input, hideError) {
                    let text = input.text.trim();
                    if (!text) {
                        return;
                    }
                    if (this.lineCount(input) >= input.max) {
                        if (!hideError) {
                            promiseAlert(this, 'エラー', '最大件数を超えるため追加できません。');
                        }
                        return;
                    }
                    input.lines = text + '\n' + input.lines.trim();
                    input.text = '';
                },

                back() {
                    document.querySelector('#lw-tab-preconf').click();
                },

                async save() {
                    try {
                        // if (!this.shipment?.id) {
                        //     await promiseConfirm(this, '査定', '査定します。よろしいですか？');
                        // }

                        this.inputs.forEach((input) => {
                            this.enter(input, true);
                        });

                        this.global_loader.show = true;

                        const url = '{{ route('assessment.save_items') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                id: this.assessment.id,
                                inputs: this.inputs,
                                type: 'keyword'
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                this.showResult = true;
                                this.itemIds = data.insertedIds;
                                this.startRedrawTimer();
                            } else {
                                promiseAlert(this, 'エラー', data.message ??
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                startRedrawTimer() {
                    if (this.timer) {
                        return;
                    }

                    let func = () => {
                        this.loadData().then(() => {
                            if (!this.assessment) {
                                this.stopRedrawTimer();
                                return;
                            }

                            this.loadItems();

                            const status = this.assessment.summary?.status;
                            if (!this.showResult || !(status == 'waiting' || status ==
                                    'processing')) {
                                this.stopRedrawTimer();
                            }
                        });
                    };

                    func();
                    this.timer = setInterval(func, {{ $itemRedrawDuration }} * 1000);
                },

                stopRedrawTimer() {
                    if (this.timer) {
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },

                async loadItems() {
                    try {
                        // this.global_loader.show = true;

                        const checked = [...this.$root.querySelectorAll(
                            'input[type="checkbox"]:checked')];
                        const checkedIds = checked.map(item => item.dataset.id);

                        const url = '{{ route('assessment.items_html') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                id: this.assessment.id,
                                itemIds: this.itemIds,
                                checkedIds: checkedIds
                            })
                        });

                        // this.global_loader.show = false;

                        response.json().then(async (data) => {
                            if (data.success) {
                                this.result = data.html;
                            } else {
                                promiseAlert(this, 'エラー', data.message ??
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                check(el) {
                    let checkbox = el.querySelector('input[type="checkbox"]');
                    checkbox.checked = !checkbox.checked;
                },

                async deleteItems() {
                    try {
                        const checked = [...this.$root.querySelectorAll(
                            'input[type="checkbox"]:checked')];
                        if (!checked.length) {
                            await promiseAlert(this, 'エラー', '削除する商品を選択してください。');
                            return;
                        }

                        await promiseConfirm(this, '削除', '選択された商品を削除します。よろしいですか？');

                        const itemIds = checked.map(item => item.dataset.id);

                        this.global_loader.show = true;

                        const url = '{{ route('assessment.delete_items') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                id: this.assessment.id,
                                itemIds: itemIds
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then(async (data) => {
                            if (data.success) {
                                itemIds.forEach((itemId) => {
                                    let checkbox = this.$root.querySelector(
                                        `input[type="checkbox"][data-id="${itemId}"]`
                                    );
                                    let tr1 = checkbox.closest('tr');
                                    let tr2 = tr1.nextElementSibling;
                                    tr1.remove();
                                    tr2.remove();
                                });
                                await this.loadData();
                            } else {
                                promiseAlert(this, 'エラー', data.message ??
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });

                    } catch (error) {
                        console.log(error);
                    }
                },

                reset() {
                    this.items = [];
                    this.searched = false;
                    this.selected = false;
                    this.initInputs();
                    this.showResult = false;
                    this.result = '';
                    this.stopRedrawTimer();
                },

                toResult() {
                    document.querySelector('#lw-tab-results').click();
                }
            }));
        });
    </script>

</div>