@php
    use App\Enums\FbaInboundDeliveryCompanyEnum;
@endphp
<div x-data="preparation" x-init="$watch('currentTab', (tab, old) => { tabChanged(tab, old) })" x-on:show="onShow(event)">
    <template x-if="items.length && shipment.name">
        <div>
            <div class="mt-8 buttons flex flex-wrap gap-8 items-center justify-center">
                <x-primary-button x-data="" x-on:click.prevent="downloadDeliveryPdf()" class="">
                    {{ __('配送ラベル') }}</x-primary-button>
                <div class="flex relative group">
                    @php
                        $offsets = range(1, 2);
                        $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-data="" x-on:click.prevent="downloadOverweightPdf()"
                        class="rounded-l-none">
                        {{ __('重量超過ラベル') }}</x-primary-button>
                </div>
            </div>

            <section class="mx-auto py-4 max-w-[640px]">
                <div class="py-2">
                    <x-input-label for="shipment.name" :value="__('納品プラン')" />
                    <x-text-input x-model="shipment.name" name="shipment.name" type="text"
                        class="mt-1 block w-full bg-gray-100" x-bind:disabled="true" />
                </div>

                <div class="py-2">
                    <x-input-label for="boxInfo.companyType" :value="__('配送')" />
                    <div class="flex items-center py-1 px-2">
                        <x-text-input x-model="boxInfo.companyType" name="boxInfo.companyType" type="radio"
                            class="mr-2" value="other" id="boxInfo.companyType.other" />
                        <x-input-label for="boxInfo.companyType.other" class="" :value="__('他の配送業者')" />
                        <x-select-input name="boxInfo.company" class="ml-2" x-model="boxInfo.company"
                            :options="FbaInboundDeliveryCompanyEnum::getDropdownOptions()" x-bind:disabled="boxInfo.companyType != 'other'" />
                    </div>
                    <div class="flex items-center py-1 px-2">
                        <x-text-input x-model="boxInfo.companyType" name="boxInfo.companyType" type="radio"
                            class="mr-2" value="fba" id="boxInfo.companyType.fba" />
                        <x-input-label for="boxInfo.companyType.fba" class="" :value="__('FBAパートナーキャリア')" />
                    </div>
                </div>

                <div class="py-2">
                    <x-input-label for="boxInfo.count" :value="__('輸送箱の数')" />
                    <x-text-input x-model="boxInfo.count" name="boxInfo.count" type="number" class="mt-1 block w-full"
                        x-bind:disabled="boxInfo.companyType != 'other'" />
                </div>

                <div class="py-2">
                    <x-input-label for="boxInfo.trackingNumber" :value="__('お問い合わせ番号')" />
                    <x-text-input x-model="boxInfo.trackingNumber" name="boxInfo.trackingNumber" type="text"
                        class="mt-1 block w-full" x-bind:disabled="boxInfo.companyType != 'other'" />
                </div>

                <div class="py-2">
                    <x-input-label for="" :value="__('重量と寸法')" />
                    <template x-for="(box, index) in boxInfo.boxes" :key="index">
                        <div class="py-1">
                            <div class="flex items-center">
                                <x-text-input x-model="box.weight" type="number" class="w-24 mx-1" min="1"
                                    max="30" x-bind:disabled="boxInfo.companyType != 'other'" />kg
                                <x-text-input x-model="box.width" type="number" class="w-24 ml-4 mr-1" min="1"
                                    max="170" x-bind:disabled="boxInfo.companyType != 'other'" />x
                                <x-text-input x-model="box.height" type="number" class="w-24 mx-1" min="1"
                                    max="170" x-bind:disabled="boxInfo.companyType != 'other'" />x
                                <x-text-input x-model="box.depth" type="number" class="w-24 mx-1" min="1"
                                    max="170" x-bind:disabled="boxInfo.companyType != 'other'" />cm
                                <x-primary-button x-on:click.prevent="addBox()" x-show="index == 0" class="mx-2"
                                    x-bind:disabled="boxInfo.companyType != 'other'">
                                    {{ __('箱追加') }}
                                </x-primary-button>
                                <x-danger-button x-on:click.prevent="removeBox(index)" x-show="index != 0"
                                    class="mx-2" x-bind:disabled="boxInfo.companyType != 'other'">
                                    {{ __('箱削除') }}
                                </x-danger-button>
                            </div>
                            <p x-show="isFinite(box.weight) && parseInt(box.weight) >= 15"
                                class="ml-2 text-sm text-gray-600">
                                {{ __('※15kg以上の箱には重量超過ラベルを貼ってください') }}
                            </p>
                        </div>
                    </template>
                </div>
            </section>

            <div class="text-center border-t pt-2">
                <p>商品数: <span x-text="numberFormat(items.length)"></span>件</p>
                <x-secondary-button x-on:click.prevent="back()" class="m-2">
                    {{ __('戻る') }}
                </x-secondary-button>
                <x-primary-button x-on:click.prevent="toConfirm()" class="m-2">
                    {{ __('次へ') }}
                </x-primary-button>
            </div>
        </div>
    </template>

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

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('preparation', () => ({
                items: [],
                shipment: {},
                boxInfo: {},

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

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

                async loadData(url) {
                    this.shipment = Alpine.store('fba').shipment;
                    this.boxInfo = Object.assign({}, this.shipment?.inputs?.boxInfo ?? {});
                    if (this.boxInfo.companyType != 'fba') {
                        this.boxInfo.companyType = 'other';
                    }
                    if (!this.boxInfo.boxes || !this.boxInfo.boxes.length) {
                        this.boxInfo.boxes = [{
                            'weight': null,
                            'width': null,
                            'height': null,
                            'depth': null,
                        }];
                    }

                    if (this.shipment?.id) {
                        this.global_loader.show = true;

                        if (!url) {
                            url = '{{ route('fba.get_shipment_items') }}';
                        }
                        url = addQueryString(url, {
                            shipmentId: this.shipment?.id
                        });
                        const response = await ajaxGet(url);

                        this.global_loader.show = false;

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

                addBox() {
                    this.boxInfo.boxes.push({
                        'weight': null,
                        'width': null,
                        'height': null,
                        'depth': null,
                    });
                },

                removeBox(index) {
                    this.boxInfo.boxes = this.boxInfo.boxes.filter((box, _index) => {
                        return _index != index;
                    });
                },

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

                        const url = '{{ route('fba.delivery_label_pdf') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                shipmentId: this.shipment.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 downloadOverweightPdf() {
                    try {
                        this.global_loader.show = true;

                        const url = '{{ route('fba.overweight_label_pdf') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                shipmentId: this.shipment.id,
                                boxes: this.boxInfo.boxes,
                                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);
                    }
                },

                back() {
                    document.querySelector('#lw-tab-label').click();
                },

                async toConfirm() {
                    try {
                        // await promiseConfirm(this, '確認', '最終確認を進めます。よろしいですか？');

                        this.global_loader.show = true;

                        const url = '{{ route('fba.to_confirm') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                shipmentId: this.shipment.id,
                                boxInfo: this.boxInfo,
                                itemIds: this.items.map((item) => {
                                    return item.id;
                                })
                            })
                        });

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            console.log(data);
                            if (data.success) {
                                setTimeout(() => {
                                    if (data.externalUrl) {
                                        promiseConfirm(this, '確認', data.message)
                                            .then((confirmed) => {
                                                if (confirmed) {
                                                    window.location = data
                                                        .externalUrl;
                                                }
                                            });
                                    } else {
                                        let parent = Alpine.store('fba');
                                        parent.shipment = data.shipment;

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

</div>