@php
    use App\Enums\ItemCategoryEnum;
    use App\Enums\RoleEnum;

    $isAdmin = auth()->user()->role == RoleEnum::ADMIN;
@endphp
<div x-data="manage" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <div class="buttons flex items-center justify-end">
        <x-primary-button x-show="items.data.length" x-on:click.prevent="downloadAllItemsCsv()" class="">
            {{ __('データ一括ダウンロード') }}</x-primary-button>
        <x-primary-button x-show="items.data.length" x-on:click.prevent="downloadListCsv()" class="ml-2">
            {{ __('一覧ダウンロード') }}</x-primary-button>
    </div>
    <div class="my-2 flex space-x-4 justify-between">
        <div class="search-confitions flex flex-wrap gap-x-4">
            @if ($isAdmin)
                <div>
                    <x-input-label :value="__('組織名・組織コード')" />
                    <div class="mt-1 flex space-x-2 items-center">
                        <x-text-input x-model="inputs.oname" name="oname" type="text" class="w-64" />
                    </div>
                </div>
            @endif
            <div>
                <x-input-label :value="__('査定名')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input x-model="inputs.name" name="name" type="text" class="w-64" />
                </div>
            </div>
            <div>
                <x-input-label :value="__('査定日')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input x-model="inputs.created_at_from" name="created_at_from" type="date"
                        class="w-64" />
                    <span>〜</span>
                    <x-text-input x-model="inputs.created_at_to" name="created_at_to" type="date" class="w-64" />
                </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="items.data.length">
        <div>
            <x-alpine-paginator :paginator-data-name="'items'" :totalCountTitle="'件数: '" />
            <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-6" x-on:click="toggleselectDefault()">
                                <x-text-input x-model="selectDefault" type="checkbox" class="w-4 h-4" />
                            </th> --}}
                            @if ($isAdmin)
                                <th class="px-2 py-3">
                                    <p class="cursor-pointer" x-on:click="onSort('organization_name')">組織名
                                        <x-sorticons :col="'id'" />
                                    </p>
                                </th>
                                <th class="px-2 py-3">
                                    <p class="cursor-pointer" x-on:click="onSort('sku_prefix')">組織コード
                                        <x-sorticons :col="'id'" />
                                    </p>
                                </th>
                            @endif
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('id')">査定No.
                                    <x-sorticons :col="'id'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('created_at')">査定した日時
                                    <x-sorticons :col="'created_at'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('name')">査定名
                                    <x-sorticons :col="'name'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">状態</th>
                            <th class="px-2 py-3">カテゴリ</th>
                            <th class="px-2 py-3 text-right w-24">販売価格</th>
                            <th class="px-2 py-3 text-right w-24">出品可 個数<br><small
                                    class="font-medium">(値段がついたもの)</small></th>
                            {{-- <th class="px-2 py-3 text-right w-24">総額</th> --}}
                            <th class="px-2 py-3 text-right w-24">出品不可 個数<br><small
                                    class="font-medium">(値段がつかなかったもの)</small>
                            </th>
                            <th class="px-2 py-3 text-right w-24">合計 個数</th>
                            <th class="px-2 py-3 text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="item in items.data" :key="item.unique">
                            <tr class="bg-white border-b hover:bg-gray-100">
                                {{-- <td class="px-2 py-1"
                                    x-on:click="selectState[item.id] = !((selectState[item.id] == null) ? selectDefault : selectState[item.id])">
                                    <x-text-input
                                        x-model="(selectState[item.id] == null) ? selectDefault : selectState[item.id]"
                                        type="checkbox" class="w-4 h-4" />
                                </td> --}}
                                @if ($isAdmin)
                                    <template x-if="item.rowspan">
                                        <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                            <span x-text="item.organization_name"></span>
                                        </td>
                                    </template>
                                    <template x-if="item.rowspan">
                                        <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                            <span x-text="item.sku_prefix"></span>
                                        </td>
                                    </template>
                                @endif
                                <template x-if="item.rowspan">
                                    <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                        <span x-text="item.id"></span>
                                    </td>
                                </template>
                                <template x-if="item.rowspan">
                                    <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                        <span x-text="getFormatedDateTime(item.created_at)"></span>
                                    </td>
                                </template>
                                <template x-if="item.rowspan">
                                    <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                        <a href="#" class="underline" x-text="item.name"
                                            x-on:click="showEditor(item)"></a>
                                    </td>
                                </template>
                                <template x-if="item.rowspan">
                                    <td class="px-2 py-1" x-bind:rowspan="item.rowspan">
                                        <span x-text="status(item)"></span>
                                    </td>
                                </template>
                                <td class="px-2 py-1">
                                    <span x-text="category[item.category]"></span>
                                </td>
                                <td class="px-2 py-1 text-right">
                                    <span x-text="numberFormat(item.price_avg)"></span>
                                </td>
                                <td class="px-2 py-1 text-right">
                                    <span x-text="numberFormat(item.priced_count)"></span>
                                </td>
                                {{-- <td class="px-2 py-1 text-right">
                                    <span x-text="numberFormat(item.total)"></span>
                                </td> --}}
                                <td class="px-2 py-1 text-right">
                                    <span x-text="numberFormat(item.non_priced_count)"></span>
                                </td>
                                <td class="px-2 py-1 text-right">
                                    <span x-text="numberFormat(totalCount(item))"></span>
                                </td>
                                <template x-if="item.rowspan">
                                    <td class="px-2 py-1 text-center" x-bind:rowspan="item.rowspan">
                                        <x-primary-button x-on:click.prevent="resume(item)" class="mr-2">
                                            {{ __('再開') }}
                                        </x-primary-button>
                                        <x-secondary-button x-on:click.prevent="downloadItemsCsv(item)"
                                            class="">
                                            {{ __('ダウンロード') }}
                                        </x-secondary-button>
                                    </td>
                                </template>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <x-alpine-paginator :paginator-data-name="'items'" :show-totals="false" :show-limit-selector="false" />

            {{-- <div class="text-center border-t pt-2">
                <p>チェック数: <span x-text="numberFormat(selectedCount())"></span>件</p>
                <x-danger-button x-on:click.prevent="deleteItems()" x-bind:disabled="!selectedCount()" class="m-2">
                    {{ __('削除する') }}
                </x-danger-button>
                <x-primary-button x-on:click.prevent="toPlan()" x-bind:disabled="!selectedCount()" class="m-2">
                    {{ __('納品プランを作成する') }}
                </x-primary-button>
            </div> --}}
        </div>
    </template>
    <template x-if="!items.data.length">
        <p>{{ __('査定が見つかりませんでした') }}</p>
    </template>

    <x-modal name="editor">
        <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 :value="__('査定名')" />
                    <x-text-input type="text" class="w-full" x-model="curItem.name" />
                    <ul class="text-sm text-red-600 space-y-1 mt-2">
                        <li x-text="curItem.errors?.name"></li>
                    </ul>
                </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="updateItem()" class="ml-3">
                    {{ __('保存する') }}
                </x-primary-button>
            </div>
        </div>
    </x-modal>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('manage', () => ({
                category: @js(ItemCategoryEnum::getDropdownOptions()),
                items: {
                    data: []
                },
                inputs: {
                    // {{-- 検索条件(ユーザの入力を受け取る用) --}}
                },
                query: {
                    // {{-- 検索条件(実際の検索に使用する用。検索ボタンの押下でのみ検索条件を確定するため inputs と分けている) --}}
                },
                sort: {},
                selectDefault: true,
                selectState: {},
                curItem: {
                    source: {}
                },

                init() {
                    const limit = localStorage.getItem('{{ request()->path() }}-limit');
                    if (limit) {
                        this.items.per_page = limit;
                    }

                    if (this.currentTab == 'manage') {
                        this.loadData();
                    }
                },

                toggleselectDefault() {
                    this.selectState = {};
                    this.selectDefault = !this.selectDefault;
                },

                selectedCount() {
                    if (this.selectDefault) {
                        // 「デフォルトで選択」の場合は総件数から明示的な未選択の数を引いて計算する
                        let count = this.items.total;
                        for (const k of Object.keys(this.selectState)) {
                            if (this.selectState[k] === false) {
                                count--;
                            }
                        }
                        return count;
                    } else {
                        // 「デフォルトで未選択」の場合は明示的な選択数を返す
                        let count = 0;
                        for (const k of Object.keys(this.selectState)) {
                            if (this.selectState[k] === true) {
                                count++;
                            }
                        }
                        return count;
                    }
                },

                onSort(col) {
                    if (this.sort.col != col) {
                        this.sort.col = col;
                        this.sort.dir = 'asc';
                    } else {
                        this.sort.dir = (this.sort.dir == 'asc') ? 'desc' : 'asc';
                    }
                    this.loadData();
                },

                onLimitChange(el) {
                    localStorage.setItem('{{ request()->path() }}-limit', this.items.per_page);
                    this.loadData();
                },

                onPaginatorClick(el) {
                    if (el.href) {
                        this.loadData(el.href);
                    }
                },

                onSearchClick(el) {
                    this.query = Object.assign({}, Alpine.raw(this.inputs));
                    this.selectState = {};
                    this.loadData();
                },

                onClearClick(el) {
                    this.query = {};
                    this.inputs = {};
                    this.sort = {};
                    this.selectState = {};
                    this.loadData();
                },

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

                async loadData(url) {
                    this.global_loader.show = true;

                    if (!url) {
                        url = '{{ route('assessment.get_assessments') }}';
                    }
                    url = addQueryString(url, {
                        ...this.sort,
                        ...this.query,
                        limit: this.items.per_page
                    });
                    const response = await ajaxGet(url);

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        // this.items = data;
                        this.items = this.calcRowspan(data);
                        console.log(this.items.data);
                    }).catch((e) => {
                        console.log(e);
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                calcRowspan(assessments) {
                    let items = [];

                    assessments.data.forEach((assessment) => {
                        let categories = assessment.summary?.par_category;
                        if (!categories || !categories.length) {
                            categories = [null];
                        }
                        (categories).forEach((cat, index) => {
                            let item = Object.assign({}, assessment);
                            item = Object.assign(item, cat);
                            if (index == 0) {
                                item.rowspan = categories.length ?? 1;
                            }
                            item.unique = item.id + '-' + index;
                            items.push(item);
                        });
                    });

                    assessments.data = items;
                    return assessments;
                },

                async resume(assessment) {
                    let parent = Alpine.store('sharedData');
                    parent.assessment = assessment;
                    await parent.loadAssessment(true);
                    document.querySelector('#lw-tab-barcode').click();
                },

                totalCount(item) {
                    if (!Number.isFinite(item.priced_count) && !Number.isFinite(item
                            .non_priced_count)) {
                        return null;
                    }
                    return (item.priced_count ?? 0) + (item.non_priced_count ?? 0);
                },

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

                async downloadItemsCsv(assessment) {
                    try {
                        this.global_loader.show = true;

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

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                window.location = addQueryString(url, {
                                    key: data.key
                                });
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

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

                        const url = '{{ route('assessment.all_items_csv') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: {
                                    ...this.sort,
                                    ...this.query
                                }
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                window.location = addQueryString(url, {
                                    key: data.key
                                });
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

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

                        const url = '{{ route('assessment.list_csv') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: {
                                    ...this.sort,
                                    ...this.query
                                }
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                window.location = addQueryString(url, {
                                    key: data.key
                                });
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                showEditor(item) {
                    this.curItem = {
                        source: item,
                        name: item.name
                    };
                    this.$dispatch('open-modal', 'editor');
                },

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

                    this.curItem.errors = null;

                    const url = '{{ route('assessment.update') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            id: this.curItem.source.id,
                            name: this.curItem.name
                        })
                    });

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        if (data.success) {
                            this.curItem.source.name = this.curItem.name;
                            this.$dispatch('close');
                        } else {
                            this.curItem.errors = data.errors;
                        }
                    }).catch(() => {
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                }
            }));
        });
    </script>
</div>