@php
    use App\Enums\ItemConditionEnum;
@endphp
<div x-data="complete" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <template x-if="items.data.length && (shipment.data?.shipment) && (shipment.inputs?.boxInfo?.companyType == 'other')">
        <div>
            <div class="buttons flex flex-wrap gap-2 items-center justify-end">
            </div>
            <div class="my-2 flex space-x-4 justify-between">
                <div class="px-4 w-full">
                    <table class="w-full">
                        <tr class="">
                            <th class="py-2 w-48 text-left">{{ __('納品プラン') }}</th>
                            <td class="py-2"><span x-text="shipment.name"></span></td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('納品番号') }}</th>
                            <td class="py-2"><span x-text="shipment.shipment_id"></span></td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('配送元') }}</th>
                            <td class="py-2"><span x-text="shipment.inputs?.shipFrom?.name"></span></td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('配送') }}</th>
                            <td class="py-2"><span
                                    x-text="shipment.inputs?.boxInfo?.companyType == 'fba' ? 'FBAパートナーキャリア' : '他の配送業者'"></span>
                            </td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('納品先') }}</th>
                            <td class="py-2"><span x-text="shipment.data?.plan?.ShipToAddress?.Name"></span></td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('輸送箱の数') }}</th>
                            <td class="py-2"><span x-text="shipment.inputs?.boxInfo?.count"></span></td>
                        </tr>
                        <tr class="border-t">
                            <th class="py-2 w-48 text-left">{{ __('重量と寸法') }}</th>
                            <td class="py-2">
                                <template x-for="(box, index) in shipment.inputs?.boxInfo?.boxes ?? []"
                                    :key="index">
                                    <p x-show="box.weight && box.width && box.height && box.depth">
                                        <span class="" x-text="index + 1"></span>.
                                        <span class="pl-1" x-text="box.weight"></span>kg
                                        <span class="pl-1" x-text="box.width"></span>x
                                        <span class="pl-1" x-text="box.height"></span>x
                                        <span class="pl-1" x-text="box.depth"></span>cm
                                    </p>
                                </template>
                            </td>
                        </tr>
                    </table>
                </div>
            </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> --}}
                            <th class="px-2 py-3 w-16">画像</th>
                            <th class="px-2 py-3">作成日</th>
                            <th class="px-2 py-3">
                                SKU<br>
                                ISBN/ASIN<br>
                            </th>
                            <th class="px-2 py-3">
                                商品情報
                            </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"><img :src="item.image_url" class="w-full"></td>
                                <td class="px-2 py-1"><span x-text="getFormatedDateTime(item.created_at)"></span></td>
                                <td class="px-2 py-1">
                                    SKU: <span x-text="item.item.sku"></span><br>
                                    ISBN/ASIN: <span x-text="item.item.jan"></span><br>
                                </td>
                                <td class="px-2 py-1">
                                    {{-- <span x-text="item.id"></span> --}}
                                    <b><span x-text="item.item.title"></span></b><br>
                                    著者: <span x-text="item.item.creator"></span><br>
                                    出版社: <span x-text="item.item.publisher"></span><br>
                                    出版日: <span x-text="getFormatedDate(item.item.publication_date)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="conditions[item.item.condition]"></span>
                                </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-primary-button x-on:click.prevent="complete()" x-bind:disabled="!selectedCount()" class="m-2">
                    {{ __('出荷済みにする') }}
                </x-primary-button>
            </div>
        </div>
    </template>

    <template x-if="!items.data.length">
        <p>{{ __('先に納品プランの作成を行ってください') }}</p>
    </template>

    <template x-if="items.data.length && !(shipment.data?.shipment)">
        <p>{{ __('前のページで操作を行ってください') }}</p>
    </template>

    <template x-if="items.data.length && (shipment.data?.shipment) && !(shipment.inputs?.boxInfo?.companyType == 'other')">
        <p>{{ __('FBAパートナーキャリアが選択されているため表示できません') }}</p>
    </template>

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

                shipment: {},
                shipmentId: null,

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

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

                async loadData(url) {
                    this.shipment = Alpine.store('fba').shipment;
                    this.query.shipmentId = this.shipment?.id;

                    this.global_loader.show = true;

                    if (!url) {
                        url = '{{ route('fba.get_completable_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 complete() {
                    try {
                        await promiseConfirm(this, '確認', 'この納品を出荷済みにします。よろしいですか？');

                        this.global_loader.show = true;

                        const url = '{{ route('fba.complete') }}';
                        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) => {
                            console.log(data);
                            if (data.success) {
                                setTimeout(() => {
                                    let parent = Alpine.store('fba');
                                    parent.shipment = data.shipment;

                                    // 納品管理タブに遷移する
                                    document.querySelector('#lw-tab-manage')
                                        .click();
                                }, 100);
                            } else {
                                promiseAlert(this, 'エラー', data.message ?? 'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                }
            }));
        });
    </script>
</div>