@php
    use App\Enums\ItemConditionEnum;
@endphp
<div x-data="barcode" 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="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-2 py-0.5 border border-gray-300 flex items-center justify-between flex-wrap">
                                    <span>最大<span x-text="input.max"></span>件まで</span>
                                    <span x-text="input.note" class="text-slate-600 text-xs"></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" placeholder="{{ __('ここに半角でISBN等を入力する') }}" />
                                </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>

    @php
        $user = auth()->user();
    @endphp
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('barcode', () => ({
                assessment: null,
                inputs: [],
                showResult: false,
                result: '',
                timer: null,
                itemIds: [],

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

                initInputs() {
                    this.inputs = [{
                        condition: @js(ItemConditionEnum::USED_ACCEPTABLE),
                        name: '中古',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                        note: '(商品の現物があるときに使用)',
                        hasOwnButton: true
                    }, {
                        condition: @js(ItemConditionEnum::USED_ACCEPTABLE),
                        name: '中古',
                        text: '',
                        lines: '',
                        rows: 20,
                        max: 300,
                        note: '(ISBN等のリストが大量にあるときに使用)'
                    }, {
                        condition: @js(ItemConditionEnum::NEW),
                        name: '新品',
                        text: '',
                        lines: '',
                        rows: 10,
                        max: 10,
                        note: '(商品の現物があるときに使用)'
                    }, {
                        condition: @js(ItemConditionEnum::NEW),
                        name: '新品',
                        text: '',
                        lines: '',
                        rows: 20,
                        max: 300,
                        note: '(ISBN等のリストが大量にあるときに使用)'
                    }];
                },

                tabChanged(tab, old) {
                    if (!(tab != old && tab == 'barcode')) {
                        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: 'barcode'
                            })
                        });

                        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.initInputs();
                    this.showResult = false;
                    this.result = '';
                    this.stopRedrawTimer();
                },

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

</div>