@php
    use App\Enums\FeedProcTypeEnum;
    use App\Models\Organization;
    use Illuminate\Support\Facades\Gate;
@endphp
<div x-data="feeds" {{-- x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" --}} x-on:show="onShow(event)">
    {{-- <div class="buttons flex items-center justify-end">
    </div> --}}
    <div class="my-2 flex space-x-4 justify-between">
        <div class="search-confitions flex flex-wrap gap-x-4">
            <div>
                <x-input-label :value="__('処理内容')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-select-input x-model="inputs.proc_type" :options="FeedProcTypeEnum::getDropdownOptions(Gate::check('manage_global_settings'))" placeholder="すべて" />

                </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'" />
            <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> --}}
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('id')">送信ID
                                    <x-sorticons :col="'id'" />
                                </p>
                            </th>
                            {{-- <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('organization_name')">組織名
                                    <x-sorticons :col="'organization_name'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('sku_prefix')">組織コード
                                    <x-sorticons :col="'sku_prefix'" />
                                </p>
                            </th> --}}
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('proc_type')">処理内容
                                    <x-sorticons :col="'proc_type'" />
                                </p>
                            </th>
                            <th class="px-2 py-3 text-right">
                                <p class="cursor-pointer" x-on:click="onSort('item_count')">商品数
                                    <x-sorticons :col="'item_count'" />
                                </p>
                            </th>
                            <th class="px-2 py-3"></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('submitted_at')">送信日時
                                    <x-sorticons :col="'submitted_at'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('finished_at')">完了日時
                                    <x-sorticons :col="'finished_at'" />
                                </p>
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('result_type')">結果
                                    <x-sorticons :col="'result_type'" />
                                </p>
                            </th>
                            <th class="px-2 py-3"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="item in items.data" :key="item.id">
                            <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> --}}
                                <td class="px-2 py-1"><span x-text="item.id"></span></td>
                                {{-- <td class="px-2 py-1"><span x-text="item.organization_name"></span></td>
                                <td class="px-2 py-1"><span x-text="item.sku_prefix"></span></td> --}}
                                <td class="px-2 py-1">
                                    <span x-text="item.proc_type_name"></span>
                                    <template x-if="item.proc_type == '{{ FeedProcTypeEnum::STOCK_UPDATE_HANDLING_TIME->value }}'">
                                        <p>(<span x-text="item.rows[0]?.days ? item.rows[0].days + '日に変更' : 'Amazon標準の出荷作業日数に戻す'"></span>)</p>
                                    </template>
                                    <template x-if="item.proc_type == '{{ FeedProcTypeEnum::STOCK_UPDATE_HANDLING_TIME_ALL->value }}'">
                                        <p>(<span x-text="organizationNames[item.rows[0]?.org_id ?? 0]"></span> <span x-text="item.rows[0]?.days ? item.rows[0].days + '日に変更' : 'Amazon標準の出荷作業日数に戻す'"></span>)</p>
                                    </template>
                                </td>
                                <td class="px-2 py-1 text-right"><span x-text="item.item_count"></span></td>
                                <td class="px-2 py-1">
                                    <x-secondary-button x-on:click="showDetails(item)" x-show="item.item_count">
                                        {{ __('詳細') }}
                                    </x-secondary-button>
                                </td>
                                <td class="px-2 py-1"><span x-text="getFormatedDateTime(item.created_at)"></span></td>
                                <td class="px-2 py-1"><span x-text="getFormatedDateTime(item.submitted_at)"></span></td>
                                <td class="px-2 py-1"><span x-text="getFormatedDateTime(item.finished_at)"></span></td>
                                <td class="px-2 py-1"><span x-text="item.result_type_name"></span></td>
                                <td class="px-2 py-1">
                                    <x-secondary-button x-on:click="showResult(item)" x-show="item.result">
                                        {{ __('詳細') }}
                                    </x-secondary-button>
                                </td>
                            </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="exhibitItems()" 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="details">
        <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] overflow-auto">
                <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">SKU</th>
                            <th class="px-2 py-3">商品名</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="item in details" :key="item.id">
                            <tr class="bg-white border-b hover:bg-gray-100">
                                <td class="px-2 py-1"><span x-text="item.sku"></span></td>
                                <td class="px-2 py-1"><span x-text="item.title"></span></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

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

    <x-modal name="result">
        <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]">
                <pre x-text="resultText || '情報はありません'" class="max-h-[70vh] overflow-auto p-2 bg-gray-50 border"></pre>
            </div>

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

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

                details: [],
                resultText: '',

                organizationNames: @js(Organization::withTrashed()->select('id', 'sku_prefix')->orderBy('id', 'asc')->pluck('sku_prefix', 'id')),

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

                    // if (this.currentTab == 'feeds') {
                    //     this.loadData();
                    // }

                    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 == 'feeds')) {
                        return;
                    }
                    this.loadData();
                },

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

                    if (!url) {
                        url = '{{ route('feed.get_items') }}';
                    }
                    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) => {
                        console.log(data);
                        this.items = data;
                    }).catch(() => {
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                async showDetails(item) {
                    this.global_loader.show = true;

                    const url = '{{ route('feed.get_details') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            id: item.id
                        })
                    });

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        console.log(data);
                        this.details = data;
                        this.$dispatch('open-modal', 'details');
                    }).catch(() => {
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                showResult(item) {
                    this.resultText = item.result;
                    this.$dispatch('open-modal', 'result');
                }
            }));
        });
    </script>
</div>