@php
    use App\Enums\ItemConditionEnum;
    use App\Enums\FeedProcTypeEnum;
    use App\Enums\OrderCancelReasonEnum;
    use App\Libs\SpApi;
    use Carbon\Carbon;
    use App\Libs\Settings;
    use App\Libs\ShippingWays;
@endphp
<div x-data="{{ $type }}" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <div class="buttons flex flex-wrap gap-2 items-center justify-end">
        @if ($type == 'pending' || $type == 'settled' || $type == 'unshipped')
            <x-danger-button x-on:click.prevent="showCancelReasonModal()" x-bind:disabled="!selectedCount()"
                class="">
                {{ __('注文をキャンセルする') }}
            </x-danger-button>
        @endif
        @if ($type == 'unshipped')
            <x-primary-button x-show="items.data.length" x-data="" x-on:click.prevent="downloadPickingList()"
                class="">
                {{ __('ピッキングリスト') }}</x-primary-button>
            <x-primary-button x-show="items.data.length" x-data=""
                x-on:click.prevent="downloadStatementOfDeliveryPdf()" x-bind:disabled="!selectedCount()" class="">
                {{ __('納品書') }}</x-primary-button>
            <div class="flex relative group">
                @php
                    $offsets = range(1, 10);
                    $offsets = collect($offsets)->combine($offsets);
                @endphp
                <x-select-input x-ref="offset" :options="$offsets" class="py-0 rounded-r-none" />
                <div role="tooltip"
                    class="absolute -top-10 opacity-0 group-hover:opacity-100 transition rounded-md bg-gray-900 py-2 px-3 text-sm font-medium text-white before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-['']">
                    {{ _('印刷開始位置') }}
                </div>
                <x-primary-button x-show="items.data.length" x-data=""
                    x-on:click.prevent="downloadAddressLabelPdf()" x-bind:disabled="!selectedCount()"
                    class="rounded-l-none">
                    {{ __('宛名ラベル') }}</x-primary-button>
            </div>
            <x-primary-button x-show="items.data.length" x-data=""
                x-on:click.prevent="downloadClickPostCsv()" x-bind:disabled="!selectedCount()" class="">
                {{ __('クリックポストまとめ申込') }}</x-primary-button>
            <x-primary-button x-on:click.prevent="showNotifications()" x-bind:disabled="!selectedCount()"
                class="">
                {{ __('出荷通知送信(確認)') }}
            </x-primary-button>
        @endif
    </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 for="amazon_order_id" :value="__('注文番号')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-model="inputs.amazon_order_id" name="amazon_order_id"
                        class="w-48" />
                </div>
            </div>
            <div>
                <x-input-label for="sku" :value="__('SKU')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-model="inputs.sku" name="sku" class="w-48" />
                </div>
            </div>
            <div>
                <x-input-label for="title" :value="__('商品名')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-model="inputs.title" name="title" class="w-48" />
                </div>
            </div>
            <div>
                <x-input-label for="jan" :value="__('ISBN')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-model="inputs.jan" name="jan" class="w-48" />
                </div>
            </div>
            <div>
                <x-input-label for="jan" :value="__('ASIN')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="text" x-model="inputs.asin" name="asin" class="w-48" />
                </div>
            </div>
            @if ($type == 'shipped')
                <div>
                    <x-input-label for="jan" :value="__('お届先')" />
                    <div class="mt-1 flex space-x-2 items-center">
                        <x-text-input type="text" x-model="inputs.address" name="address" class="w-48" />
                    </div>
                </div>
            @endif
            <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'" />
            @if ($type == 'unshipped')
                <div class="my-1 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                    @php
                        $deadline = Carbon::createFromTimeString(config('app.order_settlement'));
                        $deadlineText =
                            ($deadline->format('a') == 'am' ? __('午前') : __('午後')) . $deadline->format('g時');
                    @endphp
                    <p>データの反映は毎日{{ $deadlineText }}です。</p>
                    <p>本日出荷するべき注文の確認は、毎日{{ $deadlineText }}以降にお願いします。</p>
                    <p><b>出荷完了したら、最後に必ず「出荷通知送信」を押してください。</b></p>
                </div>
            @endif
            <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>
                            @if ($type == 'pending' || $type == 'settled' || $type == 'unshipped')
                                <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 w-16">状態</th>
                            @endif
                            <th class="px-2 py-3 w-16">画像</th>
                            <th class="px-2 py-3 w-1/3">
                                @if ($type == 'unshipped')
                                    <p class="cursor-pointer" x-on:click="onSort('seqno_numer')">出荷予定番号
                                        <x-sorticons :col="'seqno_numer'" />
                                    </p>
                                @endif
                                <p class="cursor-pointer" x-on:click="onSort('title')">タイトル
                                    <x-sorticons :col="'title'" />
                                </p>
                                @if ($type == 'unshipped' || $type == 'shipped')
                                    <p class="cursor-pointer" x-on:click="onSort('ship_method')">配送方法
                                        <x-sorticons :col="'ship_method'" />
                                    </p>
                                    <p class="cursor-pointer" x-on:click="onSort('tracking_number')">お問い合わせ番号
                                        <x-sorticons :col="'tracking_number'" />
                                    </p>
                                @endif
                            </th>
                            <th class="px-2 py-3">
                                <p class="cursor-pointer" x-on:click="onSort('sku')">SKU
                                    <x-sorticons :col="'sku'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('jan')">ISBN/JAN
                                    <x-sorticons :col="'jan'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('amazon_order_id')">注文番号
                                    <x-sorticons :col="'amazon_order_id'" />
                                </p>
                                @if ($type == 'settled' || $type == 'unshipped' || $type == 'shipped')
                                    <p class="cursor-pointer" x-on:click="onSort('earliest_ship_date')">出荷予定日
                                        <x-sorticons :col="'earliest_ship_date'" />
                                    </p>
                                @elseif ($type == 'canceled')
                                    キャンセル理由
                                @endif
                            </th>
                            <th class="px-2 py-3 @if ($type == 'shipped') w-52 @endif">
                                <p class="cursor-pointer" x-on:click="onSort('created_at')">取込日時
                                    <x-sorticons :col="'created_at'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('purchase_date')">注文日
                                    <x-sorticons :col="'purchase_date'" />
                                </p>
                                <p class="cursor-pointer" x-on:click="onSort('quantity_ordered')">注文数
                                    <x-sorticons :col="'quantity_ordered'" />
                                </p>
                                @if ($type == 'settled' || $type == 'unshipped')
                                    <p>電話番号</p>
                                @elseif ($type == 'shipped')
                                    <p class="cursor-pointer" x-on:click="onSort('delivery_date')">出荷日
                                        <x-sorticons :col="'delivery_date'" />
                                    </p>
                                @endif
                            </th>
                            @if ($type == 'shipped')
                                <th class="px-2 py-3">
                                    <p>お届先</p>
                                    <p>コンディション</p>
                                    <p>コンディション説明文</p>
                                </th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="item in items.data" :key="item.id">
                            <tr class="bg-white border-b hover:bg-gray-100" x-bind:data-id="item.id">
                                @if ($type == 'pending' || $type == 'settled' || $type == 'unshipped')
                                    <template x-if="item.operable">
                                        <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>
                                    </template>
                                    <template x-if="!item.operable">
                                        <td class="px-2 py-1"></td>
                                    </template>
                                    <td class="px-2 py-1 text-center">
                                        <p x-show="item.process_started_at">処理中</p>
                                        <x-heroicon-o-exclamation-triangle x-show="hasMessages(item)"
                                            x-on:click="showMessages(item)"
                                            class="text-rose-600 inline w-6 h-6 cursor-pointer" />
                                    </td>
                                @endif
                                <td class="px-2 py-1">
                                    <img x-show="item.catalog && item.image_url" :src="item.image_url"
                                        class="w-full max-h-32">
                                    <div x-show="item.catalog && !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>
                                    <div x-show="!item.catalog" class="text-center">
                                        <x-heroicon-o-arrow-path class="text-gray-600 inline w-8 h-8 loader" />
                                        <p><small>読込中</small></p>
                                    </div>
                                </td>
                                <td class="px-2 py-1">
                                    @if ($type == 'unshipped')
                                        <b><span x-text="item.seqno_numer"></span>
                                            /
                                            <span x-text="item.seqno_denom"></span></b><br>
                                    @endif
                                    <b><a target="_blank" class="underline"
                                            x-bind:href="'https://www.amazon.co.jp/dp/' + item.asin"><b><span
                                                    x-text="item.title"></span></a></b><br>
                                    @if ($type == 'unshipped')
                                        同じ届け先: <span x-show="item.same_order != null"
                                            x-text="item.same_order ? 'あり' : 'なし'"
                                            :class="{ 'rounded bg-orange-400 text-white px-1': item.same_order }"></span><span
                                            x-show="item.same_order == null">集計中…</span><br>
                                    @endif
                                    @if ($type == 'unshipped')
                                        <div class="flex justify-between">
                                            <div>
                                                配送方法: <span x-text="item.ship_method"></span><br>
                                                お問い合わせ番号: <span x-text="item.tracking_number"></span>
                                                <span x-show="item.is_trackable && !item.tracking_number"
                                                    class="text-red-600 font-bold">番号を入力してください</span><br>
                                                届け先名前: <span x-text="item.order?.data?.ShippingAddress?.Name"></span>
                                            </div>
                                            <div>
                                                <x-secondary-button x-on:click="edit(item)">{{ __('編集') }}
                                                </x-secondary-button>
                                            </div>
                                        </div>
                                    @elseif ($type == 'shipped')
                                        <div class="flex justify-between pt-2">
                                            <div>
                                                配送方法: <span x-text="item.ship_method"></span><br>
                                                お問い合わせ番号: <span x-text="item.tracking_number"></span>
                                            </div>
                                        </div>
                                    @endif
                                </td>
                                <td class="px-2 py-1">
                                    <b><span x-text="item.sku ?? 'SKU未確定'"></span></b><br>
                                    ISBN/JAN: <span x-text="item.jan"></span>
                                    <span x-show="item.same_asin"
                                        class="rounded bg-orange-400 text-white px-1">同一商品あり</span><br>
                                    注文番号: <span x-text="item.amazon_order_id"></span><br>
                                    @if ($type == 'settled' || $type == 'unshipped')
                                        出荷予定日: <span x-text="item.ship_date"></span>
                                        <span x-show="item.is_ship_date_over"
                                            class="text-red-600 py-1 px-2 font-bold rounded-md">遅延</span>
                                    @elseif ($type == 'shipped')
                                        出荷予定日: <span x-text="item.ship_date"></span>
                                    @elseif ($type == 'canceled')
                                        <p x-show="item.is_buyer_canceled" class="font-bold">
                                            <x-heroicon-o-exclamation-triangle
                                                class="text-orange-600 inline w-5 h-5" />購入者によるキャンセル</p>
                                        キャンセル理由: <span x-text="item.cancel_reason_text || '不明'"></span>
                                    @endif
                                </td>
                                <td class="px-2 py-1">
                                    取込日時: <span x-text="getFormatedDateTime(item.created_at)"></span><br>
                                    注文日: <span x-text="getFormatedDateTime(item.purchase_date)"></span><br>
                                    注文数: <span x-text="numberFormat(item.quantity_ordered)"></span><br>
                                    @if ($type == 'settled' || $type == 'unshipped')
                                        電話番号: <span x-text="item.order?.data?.ShippingAddress?.Phone"></span>
                                    @elseif ($type == 'shipped')
                                        出荷日: <span x-text="getFormatedDate(item.delivery_date)"></span>
                                    @endif
                                </td>
                                @if ($type == 'shipped')
                                    <td class="px-2 py-1">
                                        お届先:
                                        <span x-text="item.order?.data?.ShippingAddress?.Name" class="mx-2"></span>
                                        <span x-text="item.order?.data?.ShippingAddress?.StateOrRegion"></span>
                                        <span x-text="item.order?.data?.ShippingAddress?.AddressLine1"></span>
                                        <span x-text="item.order?.data?.ShippingAddress?.AddressLine2"></span>
                                        <span x-text="item.order?.data?.ShippingAddress?.AddressLine3"></span><br>
                                        コンディション: <span x-text="item.condition_text"></span><br>
                                        説明文: <span x-text="strLimit(item.data?.ConditionNote, 40, '...')"></span>
                                        <a href="#" class="underline"
                                            x-on:click="showConditionNote(item)">{{ _('続きを見る') }}</a>
                                    </td>
                                @endif
                            </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">
                @if ($type == 'pending' || $type == 'settled' || $type == 'unshipped')
                    <p>チェック数: <span x-text="numberFormat(selectedCount())"></span>件</p>
                @endif
                {{-- @if ($type == 'pending')
                    <x-danger-button x-on:click.prevent="showCancelReasonModal()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('注文をキャンセルする') }}
                    </x-danger-button>
                @elseif ($type == 'settled')
                    <x-danger-button x-on:click.prevent="showCancelReasonModal()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('注文をキャンセルする') }}
                    </x-danger-button>
                @elseif ($type == 'unshipped')
                    <x-danger-button x-on:click.prevent="showCancelReasonModal()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('注文をキャンセルする') }}
                    </x-danger-button>
                    <x-primary-button x-on:click.prevent="showNotifications()" x-bind:disabled="!selectedCount()"
                        class="m-2">
                        {{ __('出荷通知送信(確認)') }}
                    </x-primary-button>
                @endif --}}
            </div>
        </div>
    </template>
    <template x-if="!items.data.length">
        <p>{{ __('商品が見つかりませんでした') }}</p>
    </template>

    <x-modal name="{{ $type }}-edit">
        <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.amazon_order_id"></p>
                </div>
                <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="__('出荷日')" />
                    <p class="text-xs text-gray-600 mb-1">
                        ※未指定の場合は出荷通知を行った日になります。
                    </p>
                    <x-text-input type="date" class="" x-model="curItem.delivery_date" />
                    <ul class="text-sm text-red-600 space-y-1 mt-2">
                        <li x-text="curItem.errors?.delivery_date"></li>
                    </ul>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('配送方法')" />
                    <x-select-input class="" x-model="curItem.ship_method" :options="ShippingWays::getShipMethodDropdownOptions()" />
                    <ul class="text-sm text-red-600 space-y-1 mt-2">
                        <li x-text="curItem.errors?.ship_method"></li>
                    </ul>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('お問い合わせ番号')" />
                    <x-text-input type="text" class="w-full" x-model="curItem.tracking_number" />
                    <ul class="text-sm text-red-600 space-y-1 mt-2">
                        <li x-text="curItem.errors?.tracking_number"></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-show="curItem.source.operable" x-on:click="saveEdit()" class="ml-3">
                    {{ __('保存する') }}
                </x-primary-button>
            </div>
        </div>
    </x-modal>

    <x-modal name="{{ $type }}-cancel-reason">
        <div class="p-6">
            <h2 class="text-lg font-medium text-gray-900">
                {{ __('注文のキャンセル') }}
            </h2>

            <div class="my-1 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                <p><span x-text="numberFormat(selectedCount())"></span>件の商品についてキャンセルします。<br>(同じ注文の他の商品もキャンセルされます。)</p>
            </div>

            <div class="mt-1 text-sm text-gray-600 max-h-[70vh]">
                <div class="my-3">
                    <x-input-label for="" :value="__('キャンセル理由')" />
                    <x-select-input class="" x-model="cancelReason" :options="OrderCancelReasonEnum::getDropdownOptions()" />
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <x-secondary-button x-on:click="$dispatch('close')">
                    {{ __('閉じる') }}
                </x-secondary-button>
                <x-danger-button x-on:click="cancelItems()" class="ml-3">
                    {{ __('注文をキャンセルする') }}
                </x-danger-button>
            </div>
        </div>
    </x-modal>

    <x-modal name="{{ $type }}-condition-note-view">
        <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="__('コンディション')" />
                    <p class="text-base font-bold" x-text="curItem.source.condition_text"></p>
                </div>
                <div class="my-3">
                    <x-input-label for="" :value="__('コンディション説明文')" />
                    <p class="text-base font-bold" x-text="curItem.source.data?.ConditionNote"></p>
                </div>
            </div>

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

    @if ($type == 'unshipped')
        @include('order/notification-modal')
    @endif

    <script>
        document.addEventListener('alpine:init', () => {
            let defaultCancelReason = '{{ OrderCancelReasonEnum::NoInventory }}';

            Alpine.data('{{ $type }}', () => ({
                conditions: @js(ItemConditionEnum::getDropdownOptions()),
                items: {
                    data: []
                },
                inputs: {
                    // {{-- 検索条件(ユーザの入力を受け取る用) --}}
                },
                query: {
                    // {{-- 検索条件(実際の検索に使用する用。検索ボタンの押下でのみ検索条件を確定するため inputs と分けている) --}}
                },
                sort: {},
                selectDefault: false,
                selectState: {},
                curItem: {
                    source: {}
                },
                queue: [], // {{-- バックグラウンドで実行する処理(商品詳細情報の取得など)のキュー --}}
                queuePromise: null,

                notifications: [],

                cancelReason: defaultCancelReason,

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

                    if (this.currentTab == '{{ $type }}') {
                        this.query = Object.assign({}, Alpine.raw(this.inputs));
                        this.loadData();
                    }

                    console.log(Alpine.raw(this.ship_methods));
                },

                getItemMessages(item) {
                    const procTypes = [
                        {{ FeedProcTypeEnum::ORDER_CANCEL }},
                        {{ FeedProcTypeEnum::ORDER_NOTIFICATION }},
                    ];
                    const feeds = (item.data?.feeds ?? []);
                    const feed = feeds.filter(feed => procTypes.includes(feed.proc_type)).slice(-1)[0];
                    if (feed?.messages?.length) {
                        return feed.messages;
                    }
                    return null;
                },

                hasMessages(item) {
                    return !!this.getItemMessages(item);
                },

                showMessages(item) {
                    const messages = this.getItemMessages(item);
                    if (messages) {
                        promiseAlert(this, 'APIの警告/エラー', messages.join('<br>'));
                    }
                },

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

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

                    this.queue = [];

                    if (!url) {
                        url = '{{ route('order.get_' . $type . '_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;
                        this.enqueueGetCatalogData();
                        if ('{{ $type }}' == 'unshipped') {
                            this.enqueueGetSameOrder();
                        }
                        this.enqueueGetSameAsin();
                        this.startQueue();
                    }).catch((e) => {
                        console.log(e);
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                enqueueGetCatalogData() {
                    let unknownAsins = this.items.data.filter((item) => {
                        return item.catalog == null;
                    }).map((item) => {
                        return item.asin;
                    });
                    unknownAsins = arrayUnique(unknownAsins);
                    unknownAsins = arrayChunk(unknownAsins,
                        {{ SpApi::SEARCH_CATALOG_ITEMS_MAX_PAGE_SIZE }});
                    // console.log(unknownAsins);

                    unknownAsins.forEach((asins) => {
                        this.queue.push(async () => {
                            const url = '{{ route('catalog.get_data') }}';
                            const response = await jsonPost(url, {
                                body: JSON.stringify({
                                    asins: asins
                                })
                            });

                            return response.json().then(async (data) => {
                                console.log([asins, data]);
                                await this.reloadItems(this.items.data
                                    .filter((item) => {
                                        return data[item.asin];
                                    }));
                            });
                        });
                    });
                },

                enqueueGetSameAsin() {
                    this.items.data.forEach((item) => {
                        this.queue.push(async () => {
                            const url =
                                '{{ route('order.get_same_asin', [$type]) }}';
                            const response = await jsonPost(url, {
                                body: JSON.stringify({
                                    item: item
                                })
                            });

                            return response.json().then(async (data) => {
                                this.items.data.forEach((_item,
                                    index) => {
                                    if (_item.id == item.id) {
                                        this.items.data[index]
                                            .same_asin = data
                                            .count;
                                    }
                                });
                            });
                        });
                    });
                },

                enqueueGetSameOrder() {
                    this.items.data.forEach((item) => {
                        this.queue.push(async () => {
                            const url =
                                '{{ route('order.get_same_order', [$type]) }}';
                            const response = await jsonPost(url, {
                                body: JSON.stringify({
                                    item: item
                                })
                            });

                            return response.json().then(async (data) => {
                                this.items.data.forEach((_item,
                                    index) => {
                                    if (_item.id == item.id) {
                                        this.items.data[index]
                                            .same_order = data
                                            .count;
                                    }
                                });
                            });
                        });
                    });
                },

                async reloadItems(items) {
                    if (!items.length) {
                        return;
                    }

                    const ids = items.map((item) => {
                        return item.id;
                    });
                    const url = '{{ route('order.get_item_data') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            ids: ids
                        })
                    });

                    return response.json().then((data) => {
                        console.log(data);
                        this.items.data.forEach((item, index) => {
                            if (data[item.id]) {
                                this.items.data[index] = {
                                    ...Alpine.raw(item),
                                    ...data[item.id]
                                };
                            }
                        });
                    });
                },

                async startQueue() {
                    if (!this.queuePromise && this.queue.length) {
                        let task = this.queue.shift();
                        while (task) {
                            this.queuePromise = task();
                            await this.queuePromise;
                            task = this.queue.shift();
                        }
                        this.queuePromise = null;
                    }
                },

                edit(item) {
                    this.curItem = {
                        source: item,
                        delivery_date: item.delivery_date,
                        ship_method: item.ship_method,
                        tracking_number: item.tracking_number
                    };
                    this.$dispatch('open-modal', '{{ $type }}-edit');
                },

                showConditionNote(item) {
                    this.curItem = {
                        source: item,
                    };
                    this.$dispatch('open-modal', '{{ $type }}-condition-note-view');
                },

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

                    this.curItem.errors = null;

                    const url = '{{ route('order.update_ship_method') }}';
                    const response = await jsonPost(url, {
                        body: JSON.stringify({
                            id: this.curItem.source.id,
                            delivery_date: this.curItem.delivery_date,
                            ship_method: this.curItem.ship_method,
                            tracking_number: this.curItem.tracking_number
                        })
                    });

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        if (data.success) {
                            this.curItem.source.delivery_date = this.curItem.delivery_date;
                            this.curItem.source.ship_method = this.curItem.ship_method;
                            this.curItem.source.tracking_number = this.curItem
                                .tracking_number;
                            this.curItem.source.is_trackable = data.trackable;
                            this.$dispatch('close');
                        } else {
                            this.curItem.errors = data.errors;
                        }
                    }).catch(() => {
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                downloadPickingList() {
                    let url = '{{ route('order.picking_list') }}';
                    url = addQueryString(url, {
                        ...this.sort,
                        ...this.query
                    });
                    window.location = url;
                },

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

                        const url = '{{ route('order.statement_of_delivery_pdf') }}';
                        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 downloadAddressLabelPdf() {
                    try {
                        this.global_loader.show = true;

                        const url = '{{ route('order.address_label_pdf') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: {
                                    ...this.sort,
                                    ...this.query
                                },
                                offset: this.$refs.offset.value
                            })
                        });

                        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 downloadClickPostCsv() {
                    try {
                        this.global_loader.show = true;

                        const url = '{{ route('order.click_post_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);
                    }
                },

                showCancelReasonModal() {
                    this.cancelReason = defaultCancelReason;
                    this.$dispatch('open-modal', '{{ $type }}-cancel-reason');
                },

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

                        const url = '{{ route('order.cancel_items', [$type]) }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                selectState: this.selectState,
                                selectDefault: this.selectDefault,
                                query: this.query,
                                cancelReason: this.cancelReason
                            })
                        });

                        this.$dispatch('close');

                        this.global_loader.show = false;

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

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

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

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                this.notifications = data.items;
                                this.$dispatch('open-modal', 'notifications');
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                removeFromNotifications(item) {
                    this.notifications = this.notifications.filter((_item) => _item !== item);
                    if (!this.notifications.length) {
                        this.$dispatch('close');
                    }
                },

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

                        const url = '{{ route('order.notice_items') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                query: this.query,
                                ids: this.notifications.map((item) => item.id)
                            })
                        });

                        this.$dispatch('close');

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                setTimeout(() => {
                                    this.selectState = {};
                                    this.loadData();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                }
            }));
        });
    </script>
</div>