@php
    use App\Enums\ItemCategoryEnum;
    use App\Console\Commands\CheckShipNotificationEarlyDelay;
@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('設定') }}
        </h2>
    </x-slot>

    @include('layouts.settings-submenu')

    <div class="py-2" x-data="{ deletionUrl: '', deletable: false }">
        <div class="mx-auto px-0">
            <div class="bg-white overflow-hidden shadow-sm rounded-lg">
                <div x-data="shipping_way" class="px-4 sm:px-6 lg:px-8 py-6 text-gray-900">
                    <h3 class="text-lg text-gray-800 leading-tight py-2 mb-4 border-b flex items-baseline">
                        {{ __('配送方法') }}
                        @if ($cur_org = Auth::user()->getCurrentOrganization())
                            <span class="font-normal text-sm text-gray-600 ml-2">{{ __('組織コード') }}:
                                {{ $cur_org->sku_prefix }}</span>
                        @endif
                    </h3>

                    <div class="mb-2">
                        <x-primary-button x-data="" x-on:click.prevent="save()" class="float-right">
                            {{ __('保存する') }}</x-primary-button>
                    </div>

                    <div class="my-6">
                        <h4>出荷通知リマインドメール</h4>
                        <div class="m-2">
                            出荷予定日1日目の
                            <x-select-input x-model="check_ship_notification_early_delay_hour" class="w-24"
                                :options="CheckShipNotificationEarlyDelay::HOURS" />
                            時に送信する
                        </div>
                    </div>

                    <div class="my-6">
                        <h4>商品サイズ情報が取得できなかったり、設定を超えている場合</h4>
                        <div class="m-2">
                            <x-text-input x-model="alternative_shipping_way" type="radio"
                                name="alternative_shipping_way" class="mr-1" value="manual"
                                id="alternative_shipping_way_manual" />
                            <label for="alternative_shipping_way_manual">手動で配送方法を選択する</label>
                        </div>
                        <div class="m-2">
                            <x-text-input x-model="alternative_shipping_way" type="radio"
                                name="alternative_shipping_way" class="mr-1" value="none"
                                id="alternative_shipping_way_none" />
                            <label for="alternative_shipping_way_none">「該当の配送方法がありません」と表示する</label>
                        </div>
                    </div>

                    @can('manage_global_settings')
                        <div class="my-6">
                            <h4>出品時の出荷作業日数 <small class="text-gray-600">※この項目は出品時に参照され、最終的に自己配送の注文の出荷予定日に影響します</small></h4>
                            <div class="m-2">
                                <x-text-input x-model="handling_time" type="radio" name="handling_time" class="mr-1"
                                    value="none" id="handling_time_none" />
                                <label for="handling_time_none">Amazon標準の出荷作業日数を使用する</label>
                            </div>
                            <div class="m-2">
                                <x-text-input x-model="handling_time" type="radio" name="handling_time" class="mr-1"
                                    value="manual" id="handling_time_manual" />
                                <label for="handling_time_manual">独自の出荷作業日数を指定する</label>
                                <x-text-input x-model="handling_time_days" type="number" name="handling_time_days"
                                    class="ml-2 w-16 p-1 text-center" min="1" max="30" />日 <small
                                    class="text-gray-600">※1～30日で指定</small>
                            </div>
                        </div>
                        <div class="my-6">
                            <h4>出荷作業日数の一括更新 <small class="text-gray-600">※全組織の出品中の自己配送の全商品について出荷作業日数を一括で上書きします</small></h4>
                            <div class="m-2">
                                <x-danger-button x-data="" x-on:click.prevent="editHandlingTime()"
                                    class="">
                                    {{ __('出荷作業日数を一括更新する') }}</x-danger-button>
                            </div>
                        </div>
                    @endcan
                    @can('manage_global_settings')
                        <x-modal name="handling-time-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-4 p-2 border border-amber-200 rounded bg-amber-50 text-sm text-amber-700">
                                        <p>APIの制限上、出荷作業日数の更新中に注文が入った場合など在庫が復活してしまう可能性があります。</p>
                                        <p>そのため本機能はセラーセントラル側で休止設定を行ってから使用することをおすすめします。</p>
                                        <p>また休止設定を行った場合は、送信予約画面の「出荷作業日数 一括更新」がすべて完了したことを確認してから再開してください。</p>
                                    </div>

                                    <div class="my-3">
                                        <p>全組織の出品中の自己配送の全商品について、</p>
                                        <div class="m-2">
                                            <label>
                                                <x-text-input x-model="handlingTime.enable" type="radio" class="mr-1"
                                                    value="" />
                                                Amazon標準の出荷作業日数に戻す
                                            </label>
                                        </div>
                                        <div class="m-2">
                                            <label>
                                                <x-text-input x-model="handlingTime.enable" type="radio" class="mr-1"
                                                    value="1" />
                                                独自の出荷作業日数を指定する
                                            </label>
                                            <x-text-input x-model="handlingTime.days" type="number"
                                                class="ml-2 w-16 p-1 text-center" min="1" max="30" />日
                                            <small class="text-gray-600">※1～30日で指定</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-6 flex justify-end">
                                    <x-secondary-button x-on:click="$dispatch('close')">
                                        {{ __('キャンセル') }}
                                    </x-secondary-button>
                                    <x-primary-button x-on:click="$dispatch('close'); updateHandlingTime()" class="ml-3">
                                        {{ __('実行する') }}
                                    </x-primary-button>
                                </div>
                            </div>
                        </x-modal>
                    @endcan

                    <div class="my-4 p-2 border border-sky-200 rounded bg-sky-50 text-sm text-sky-700">
                        <p>「メディア種類」、「配送パターン名」、「Amazon配送料」、「業務委託基本手数料」は自動設定されます。</p>
                        <p>その他の項目を各出品拠点にて設定してください。</p>

                        <p class="mt-2">なお、「長辺」「短辺」「厚さ」「三辺合計」「重量」は商品本体のサイズになります。梱包材のサイズも考慮して設定してください。</p>
                        <p>例：配送サービスの厚さ制限が「20mm」だった場合は、梱包「3mm」と想定して、商品サイズは「17mm」と設定するなど。</p>
                    </div>

                    <div x-on:end="sorted($event)">
                        {{-- <div class="mb-2">
                            <x-secondary-button x-data="" x-on:click.prevent="copyRow()" class="mr-1">
                                {{ __('カーソルがある行をコピー') }}</x-secondary-button>
                            <x-secondary-button x-data="" x-on:click.prevent="pasteRow()"
                                class="mr-1">
                                {{ __('カーソルがある行に貼り付け') }}</x-secondary-button>
                        </div> --}}
                        <div class="relative overflow-x-auto shadow-md rounded-lg">
                            <table id="shipping_way" class="table-fixed w-full text-sm text-left text-gray-700">
                                <thead class="text-xs text-gray-700 uppercase bg-gray-200">
                                    <tr>
                                        <th class="pl-3 py-3 w-32">カテゴリー</th>
                                        <th class="pl-3 py-3">配送<br>パターン名</th>
                                        <th class="pl-3 py-3">Amazon<br>配送料</th>
                                        <th class="pl-3 py-3">業務委託<br>基本手数料</th>
                                        <th class="pl-3 py-3">長辺<br><span class="lowercase">(mm)</span></th>
                                        <th class="pl-3 py-3">短辺<br><span class="lowercase">(mm)</span></th>
                                        <th class="pl-3 py-3">厚さ<br><span class="lowercase">(mm)</span></th>
                                        <th class="pl-3 py-3">三辺合計<br><span class="lowercase">(mm)</span></th>
                                        <th class="pl-3 py-3">重量<br><span class="lowercase">(g)</span></th>
                                        <th class="pl-3 py-3">配送料金<br><span class="lowercase">(実費)</span></th>
                                        <th class="pl-3 py-3 w-40">配送方法</th>
                                        <th class="pl-3 py-3 w-16">追跡可</th>
                                        <th class="pl-3 py-3 w-16">無効</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="item in items" :key="item.uuid" class="">
                                        <tr x-on:mousedown="selectRow($event)"
                                            :class="{
                                                'bg-gray-100': item.selected,
                                                'bg-rose-100 hover:bg-rose-200': item.error
                                            }"
                                            class="border-b hover:bg-gray-100">
                                            <td class="pl-3 py-2">
                                                <x-select-input x-model="item.category" class="w-full bg-gray-100"
                                                    :options="ItemCategoryEnum::getDropdownOptionsForShippingFees()" :disabled="true" />
                                            </td>
                                            <td class="pl-3 py-2">
                                                <x-text-input x-model="item.name" type="text"
                                                    class="w-full bg-gray-100" :disabled="true" />
                                            </td>
                                            <td class="pl-3 py-2">
                                                <x-text-input x-model="item.price" type="text"
                                                    class="w-full text-right bg-gray-100" :disabled="true" />
                                            </td>
                                            <td class="pl-3 py-2">
                                                <x-text-input x-model="item.cost" type="text"
                                                    class="w-full text-right bg-gray-100" :disabled="true" />
                                            </td>
                                            <td class="pl-3 py-2">
                                                <x-text-input x-model="item.way.height" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.length" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.width" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.total" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.weight" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.shipping_price" type="text"
                                                    class="w-full text-right" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2">
                                                <x-text-input x-model="item.way.way_name" type="text"
                                                    class="w-full" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2 text-center">
                                                <x-text-input x-model="item.way.trackable" type="checkbox"
                                                    class="w-8 h-8" />
                                            </td>
                                            <td class="pl-3 pr-2 py-2 text-center">
                                                <x-text-input x-model="item.way.disabled" type="checkbox"
                                                    class="w-8 h-8" />
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                            <script>
                                document.addEventListener('alpine:init', () => {
                                    Alpine.data('shipping_way', () => ({
                                        items: @js($items),
                                        check_ship_notification_early_delay_hour: @js($check_ship_notification_early_delay_hour),
                                        alternative_shipping_way: @js($alternative_shipping_way),
                                        handling_time: @js($handling_time),
                                        handling_time_days: @js($handling_time_days),
                                        selectedIndex: null,

                                        handlingTime: {
                                            enable: false,
                                            days: 1,
                                        },

                                        init() {
                                            this.renumber();
                                        },

                                        renumber() {
                                            this.items.forEach((item, index) => {
                                                item.order = index;
                                            });
                                        },

                                        updateSelected() {
                                            this.items.forEach((item, index) => {
                                                item.selected = (index == this.selectedIndex);
                                            });
                                        },

                                        setSelectedIndex(index) {
                                            if (index == null) {
                                                this.selectedIndex = null;
                                                this.updateSelected();
                                                return;
                                            }
                                            if (index < 0 || index >= this.items) {
                                                return;
                                            }
                                            this.selectedIndex = index;
                                            this.updateSelected();
                                        },

                                        getIndexFromElement(elem) {
                                            let tbody = elem.closest('tbody');
                                            let row = elem.closest('tr');
                                            if (!tbody || !row) {
                                                return null;
                                            }

                                            let index = Array.from(tbody.querySelectorAll('tr')).indexOf(row);
                                            if (index < 0) {
                                                return null;
                                            }
                                            return index;
                                        },

                                        getSelectedItem() {
                                            let index = this.selectedIndex;
                                            if (index == null) {
                                                return null;
                                            }
                                            if (index < 0 || index >= this.items) {
                                                return null;
                                            }
                                            return this.items[index];
                                        },

                                        selectRow(evt) {
                                            this.setSelectedIndex(this.getIndexFromElement(evt.target));
                                        },

                                        copyRow(copy) {
                                            let item = this.getSelectedItem();
                                            if (!item) {
                                                return;
                                            }

                                            let way = Object.assign({}, item.way);
                                            this.copied = way;
                                        },

                                        pasteRow() {
                                            let item = this.getSelectedItem();
                                            if (!item) {
                                                return;
                                            }
                                            if (!this.copied) {
                                                return;
                                            }
                                            item.way = this.copied;
                                        },

                                        sorted(evt) {
                                            // まず、データの並びを変えないまま order の値を適切に付け替える
                                            if (evt.oldIndex < evt.newIndex) {
                                                this.items.forEach((item, index) => {
                                                    if (item.order > evt.oldIndex && item.order <= evt.newIndex) {
                                                        // oldIndex より大きく newIndex 以下のものをデクリメントする
                                                        item.order--;
                                                    } else if (item.order == evt.oldIndex) {
                                                        // oldIndex を newIndex にする
                                                        item.order = evt.newIndex;
                                                    }
                                                });
                                            } else {
                                                this.items.forEach((item, index) => {
                                                    if (item.order < evt.oldIndex && item.order >= evt.newIndex) {
                                                        // oldIndex より小く newIndex 以上のものをインクリメントする
                                                        item.order++;
                                                    } else if (item.order == evt.oldIndex) {
                                                        // oldIndex を newIndex にする
                                                        item.order = evt.newIndex;
                                                    }
                                                });
                                            }

                                            // 次に実際にソートする(これで画面に反映される)
                                            this.items.sort((a, b) => {
                                                if (a.order == b.order) {
                                                    return 0;
                                                }
                                                return (a.order < b.order) ? -1 : 1;
                                            });
                                        },

                                        async save() {
                                            const url = '{{ route('settings.shipping_ways.save') }}';
                                            const response = await jsonPost(url, {
                                                body: JSON.stringify({
                                                    items: Alpine.raw(this.items),
                                                    check_ship_notification_early_delay_hour: Alpine.raw(
                                                        this.check_ship_notification_early_delay_hour),
                                                    alternative_shipping_way: Alpine.raw(this
                                                        .alternative_shipping_way),
                                                    handling_time: Alpine.raw(this.handling_time),
                                                    handling_time_days: Alpine.raw(this.handling_time_days)
                                                })
                                            });

                                            response.json().then((data) => {
                                                if (data.success) {
                                                    location.href = '{{ route(Route::currentRouteName()) }}';
                                                    return;
                                                } else {
                                                    data.errors = data.errors || [];
                                                    console.log(data.errors);
                                                    this.items.forEach((item, index) => {
                                                        item.error = (data.errors.includes(index));
                                                    });
                                                    this.modal = {
                                                        title: 'エラー',
                                                        body: data.message ? data.message : '不明なエラーが発生しました'
                                                    };
                                                    this.$dispatch('open-modal', 'alert');
                                                }
                                            });
                                        },

                                        editHandlingTime() {
                                            this.$dispatch('open-modal', 'handling-time-edit');
                                        },

                                        async updateHandlingTime() {
                                            try {
                                                await promiseConfirm(this, '出荷作業日数の一括更新',
                                                    '全組織の出品中の自己配送の全商品について作業日数を変更します。よろしいですか？<br>※組織ごとに商品1,000件ずつに分けて送信予約が行われます。'
                                                );

                                                this.global_loader.show = true;

                                                const url =
                                                    '{{ route('stock.change_handling_time_all') }}';
                                                const response = await jsonPost(url, {
                                                    body: JSON.stringify({
                                                        handlingTime: this.handlingTime,
                                                    })
                                                });

                                                this.global_loader.show = false;

                                                response.json().then((data) => {
                                                    if (data.success) {
                                                        setTimeout(() => {
                                                            promiseAlert(this, '出荷作業日数の一括更新',
                                                                '作業日数変更の送信予約を行いました。<br>結果は後ほど送信予約画面で確認することができます。'
                                                            );
                                                        }, 100);
                                                    } else {
                                                        promiseAlert(this, 'エラー', data.message ? data.message :
                                                            'エラーが発生しました');
                                                    }
                                                }).catch(() => {
                                                    promiseAlert(this, 'エラー', 'エラーが発生しました');
                                                });
                                            } catch (error) {
                                                console.log(error);
                                            }
                                        }
                                    }));

                                    let table = document.querySelector('#shipping_way tbody');
                                    let sortable = Sortable.create(table, {
                                        handle: 'svg',
                                        animation: 150,
                                        swapThreshold: 0.1,
                                        ghostClass: 'bg-blue-200',
                                        onEnd(evt) {
                                            // sortable で並び替えすると DOM の順番が変わってしまう(が alpinejs のほうのデータの並びには影響を与えない)。
                                            // "カーソルがある行"に関する処理があるため alpinejs 側で並び順を管理したいが
                                            // DOM の順番が変わっていると alpinejs 側のデータの並びが正しく表示されない。
                                            // そのため sortable 側では DOM の入れ替えをしないようにする(入れ替え後すぐ元に戻すようにする)。
                                            const items = evt.from.querySelectorAll(':scope > tr');
                                            evt.from.insertBefore(evt.item, items[evt.oldIndex + (evt.oldIndex > evt.newIndex)]);
                                            return false;
                                        }
                                    });
                                });
                            </script>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <x-modal name="confirm-deletion" focusable>
            <form x-show="deletable" method="post" x-bind:action="deletionUrl" class="p-6">
                @csrf
                @method('delete')

                <h2 class="text-lg font-medium text-gray-900">
                    {{ __('本当に削除しますか？') }}
                </h2>

                <p class="mt-1 text-sm text-gray-600">
                    {{ __('削除すると元には戻せません。') }}
                </p>

                <div class="mt-6 flex justify-end">
                    <x-secondary-button x-on:click="$dispatch('close')">
                        {{ __('キャンセル') }}
                    </x-secondary-button>

                    <x-danger-button class="ml-3">
                        {{ __('削除する') }}
                    </x-danger-button>
                </div>
            </form>
            <div x-show="!deletable" class="p-6">
                <h2 class="text-lg font-medium text-gray-900">
                    {{ __('削除できません') }}
                </h2>

                <p class="mt-1 text-sm text-gray-600">
                    {{ __('自分自身は削除できません。') }}
                </p>

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