@php
    use App\Enums\ItemCategoryEnum;
    use App\Enums\ItemConditionEnum;
    use App\Enums\FulfillmentChannelEnum;
@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')

    <style>
        input[type=number] {
            text-align: right;
        }
    </style>
    <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 class="px-4 sm:px-6 lg:px-8 py-6 text-gray-900" x-data="settings">
                    <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>


                    @livewire('tab', [
                        'tabs' => [
                            'by_channel' => '自己配送・FBAごとの設定',
                            'whole' => '全体設定',
                        ],
                        'tabDataName' => 'tabdata',
                        'currentTab' => session()->pull('assessment.settings.tab'),
                    ])

                    <div x-data="tabdata" class="px-2 py-2 border border-gray-200">
                        <div id="by_channel" x-show="isVisible($el)" class="">
                            <div class="flex">
                                @foreach (['self' => '自己配送', 'fba' => 'FBA'] as $channel => $channelName)
                                    <div class="w-1/2 text-gray-700 p-2">
                                        <h2 class="font-bold text-lg text-center my-4">{{ $channelName }}</h2>
                                        <h3 class="font-bold mb-1 text-gray-700">基本査定率(%)</h3>
                                        <table class="w-full text-sm mb-8">
                                            <thead class="text-xs uppercase bg-gray-200">
                                                <tr>
                                                    <template x-for="col in schemes.kihon.header">
                                                        <th class="px-1 py-2"><span x-text="col"></span></th>
                                                    </template>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <template x-for="(item, index) in data.{{ $channel }}.kihon"
                                                    :key="index">
                                                    <tr class="bg-white border-b hover:bg-gray-100">
                                                        <template x-for="col in schemes.kihon.columns">
                                                            <td class="px-1 py-1"
                                                                :class="{
                                                                    'bg-rose-100 hover:bg-rose-200': hasError(
                                                                        '{{ $channel }}', 'kihon', index, col
                                                                        .key)
                                                                }">
                                                                <x-text-input x-bind:type="col.type"
                                                                    x-bind:disabled="col.readonly ? true : false"
                                                                    x-model="item[col.key]"
                                                                    x-bind:class="col.readonly ? 'bg-gray-100' : ''"
                                                                    class="w-full px-2 py-1" />
                                                            </td>
                                                        </template>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>

                                        <h3 class="font-bold mb-1 text-gray-700">コンディション別の査定率(%)</h3>
                                        <table class="w-full text-sm mb-8">
                                            <thead class="text-xs uppercase bg-gray-200">
                                                <tr>
                                                    <template x-for="col in schemes.cond.header">
                                                        <th class="px-1 py-2"><span x-text="col"></span></th>
                                                    </template>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <template x-for="(item, index) in data.{{ $channel }}.cond"
                                                    :key="index">
                                                    <tr class="bg-white border-b hover:bg-gray-100">
                                                        <template x-for="col in schemes.cond.columns">
                                                            <td class="px-1 py-1"
                                                                :class="{
                                                                    'bg-rose-100 hover:bg-rose-200': hasError(
                                                                        '{{ $channel }}', 'cond', index, col
                                                                        .key)
                                                                }">
                                                                <x-text-input x-bind:type="col.type"
                                                                    x-bind:disabled="col.readonly ? true : false"
                                                                    x-model="item[col.key]"
                                                                    x-bind:class="col.readonly ? 'bg-gray-100' : ''"
                                                                    class="w-full px-2 py-1" />
                                                            </td>
                                                        </template>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>

                                        <h3 class="font-bold mb-1 text-gray-700">売れ筋ランキング別の査定率(%)</h3>
                                        <div class="relative overflow-auto mb-8">
                                            <table class="w-auto text-sm">
                                                <thead class="text-xs uppercase bg-gray-200">
                                                    <tr>
                                                        <template x-for="col in schemes.uresuji.header">
                                                            <th class="px-1 py-2"><span x-text="col"></span></th>
                                                        </template>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <template x-for="(item, index) in data.{{ $channel }}.uresuji"
                                                        :key="index">
                                                        <tr class="bg-white border-b hover:bg-gray-100"
                                                            x-on:focusout="onRowBlur('{{ $channel }}', 'uresuji', index)">
                                                            <template x-for="col in schemes.uresuji.columns">
                                                                <td class="px-0.5 py-1"
                                                                    :class="{
                                                                        'bg-rose-100 hover:bg-rose-200': hasError(
                                                                            '{{ $channel }}', 'uresuji',
                                                                            index,
                                                                            col.key)
                                                                    }">
                                                                    <x-text-input x-bind:type="col.type"
                                                                        x-bind:disabled="col.readonly ? true : false"
                                                                        x-model="item[col.key]"
                                                                        x-bind:class="col.readonly ? 'bg-gray-100' : ''"
                                                                        class="w-20 px-0 py-1" />
                                                                </td>
                                                            </template>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>

                                        @if ($channel == 'self')
                                            <h3 class="font-bold mb-1 text-gray-700">自己配送ランキング別グループ分け</h3>
                                            <table class="w-full text-sm mb-2">
                                                <thead class="text-xs uppercase bg-gray-200">
                                                    <tr>
                                                        <template x-for="col in schemes.rankgroup.header">
                                                            <th class="px-1 py-2"><span x-text="col"></span></th>
                                                        </template>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <template
                                                        x-for="(item, index) in data.{{ $channel }}.rankgroup"
                                                        :key="index">
                                                        <tr class="bg-white border-b hover:bg-gray-100"
                                                            x-on:focusout="onRowBlur('{{ $channel }}', 'rankgroup', index)">
                                                            <template x-for="col in schemes.rankgroup.columns">
                                                                <td class="px-1 py-1"
                                                                    :class="{
                                                                        'bg-rose-100 hover:bg-rose-200': hasError(
                                                                            '{{ $channel }}', 'rankgroup',
                                                                            index,
                                                                            col.key)
                                                                    }">
                                                                    <x-text-input x-bind:type="col.type"
                                                                        x-bind:disabled="col.readonly ? true : false"
                                                                        x-model="item[col.key]"
                                                                        x-bind:class="col.readonly ? 'bg-gray-100' : ''"
                                                                        class="w-full px-2 py-1" />
                                                                </td>
                                                            </template>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div id="whole" x-show="isVisible($el)" class="">
                            <div class="flex">
                                <div class="w-1/2">
                                    {{-- <h2 class="font-bold text-lg text-center my-4">全体</h2> --}}
                                    <h3 class="font-bold mb-1 text-gray-700">出品可否</h3>
                                    <table class="w-full text-sm mb-8">
                                        <thead class="text-xs uppercase bg-gray-200">
                                            <tr>
                                                <template x-for="col in schemes.kahi.header">
                                                    <th class="px-1 py-2"><span x-text="col"></span></th>
                                                </template>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template x-for="(item, index) in data.whole.kahi" :key="index">
                                                <tr class="bg-white border-b hover:bg-gray-100">
                                                    <template x-for="col in schemes.kahi.columns">
                                                        <td class="px-1 py-1"
                                                            :class="{
                                                                'bg-rose-100 hover:bg-rose-200': hasError(
                                                                    'whole', 'kahi', index, col.key)
                                                            }">
                                                            <x-text-input x-bind:type="col.type"
                                                                x-bind:disabled="col.readonly ? true : false"
                                                                x-model="item[col.key]"
                                                                x-bind:class="col.readonly ? 'bg-gray-100' : ''"
                                                                class="w-full px-2 py-1" />
                                                        </td>
                                                    </template>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>

                                    <h3 class="font-bold mb-1 text-gray-700">低すぎる査定額</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'lower') }">
                                        査定額が
                                        <x-text-input type="number" x-model="data.inputs.lower"
                                            class="w-24 px-2 py-1" />
                                        円以上を査定額として計上する
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">カウントする査定額</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'count') }">
                                        査定額が
                                        <x-text-input type="number" x-model="data.inputs.count"
                                            class="w-24 px-2 py-1" />
                                        円以上を査定額がついたものとしてカウントする
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">査定時の比較対象</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'price_comparison') }">
                                        <label class="block">
                                            <x-text-input type="radio" x-model="data.inputs.price_comparison"
                                                class="mr-2" value="1" />
                                            全体の最低価格
                                        </label>
                                        <label class="block">
                                            <x-text-input type="radio" x-model="data.inputs.price_comparison"
                                                class="mr-2" value="2" />
                                            コンディション毎の最低価格
                                        </label>
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">定価が取得できないときに設定する価格</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'price_when_no_price') }">
                                        <x-text-input type="number" x-model="data.inputs.price_when_no_price"
                                            class="w-24 px-2 py-1" />
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">査定価格の上限</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'max_price_percent') }">
                                        定価の
                                        <x-text-input type="number" x-model="data.inputs.max_price_percent"
                                            class="w-24 px-2 py-1" />
                                        ％
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">中古出品数の制限</h3>
                                    <div class="mb-4 pb-4 border-b"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'max_listed_used_items') }">
                                        <x-text-input type="number" x-model="data.inputs.max_listed_used_items"
                                            class="w-24 px-2 py-1" />
                                        以上は暫定査定額を0円にする
                                    </div>

                                    <h3 class="font-bold mb-1 text-gray-700">ライバルの購入者支払額</h3>
                                    <div class="pb-4"
                                        :class="{ 'bg-rose-100 hover:bg-rose-200': hasError('inputs', 'min_buyer_payment') }">
                                        ライバルの購入者支払額が
                                        <x-text-input type="number" x-model="data.inputs.min_buyer_payment"
                                            class="w-24 px-2 py-1" />
                                        円未満は「不可」にする
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-center pt-2">
                        <x-primary-button x-on:click.prevent="save()" class="m-2">
                            {{ __('保存する') }}
                        </x-primary-button>
                    </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>

    @php
        $categories = collect(ItemCategoryEnum::getDropdownOptions())
            ->map(function ($value, $key) {
                return ['key' => $key, 'value' => $value];
            })
            ->values();
        $prependedCategories = collect([['key' => 0, 'value' => '']])->concat($categories);
        $conditions = collect(ItemConditionEnum::getDropdownOptions('exhibit'))
            ->map(function ($value, $key) {
                return ['key' => $key, 'value' => $value];
            })
            ->values();
        $grid3headers = (function () use ($categories) {
            $headers = [['key' => 'value', 'value' => '査定率 (%)']];
            foreach ($categories as $category) {
                $headers[] = ['key' => "{$category['key']}_from", 'value' => "{$category['value']} (自)"];
                $headers[] = ['key' => "{$category['key']}_to", 'value' => "{$category['value']} (至)"];
            }
            return collect($headers);
        })();
    @endphp
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('settings', () => ({
                schemes: {
                    kihon: {
                        header: @js($categories->pluck('value')),
                        columns: @js(
                            collect($categories)->map(function ($item) {
                                return ['key' => $item['key'], 'type' => 'number'];
                            })
                        ),
                        maxRows: 1
                    },
                    cond: {
                        header: @js($categories->pluck('value')->prepend('')),
                        columns: @js(
                            $prependedCategories->map(function ($item) {
                                return $item['key']
                                    ? ['key' => $item['key'], 'type' => 'number']
                                    : [
                                        'key' => $item['key'],
                                        'type' => 'text',
                                        'readonly' => true,
                                    ];
                            })
                        ),
                        maxRows: @js(count($conditions))
                    },
                    uresuji: {
                        header: @js($grid3headers->pluck('value')),
                        columns: @js(
                            $grid3headers->map(function ($item) {
                                return ['key' => $item['key'], 'type' => 'number'];
                            })
                        ),
                        maxRows: 50
                    },
                    rankgroup: {
                        header: ['売れ筋ランキング(自)', '売れ筋ランキング(至)', '追加表示内容', 'カラーコード'],
                        columns: [{
                            key: '1_from',
                            type: 'number'
                        }, {
                            key: '1_to',
                            type: 'number'
                        }, {
                            key: 'value',
                            type: 'text',
                        }, {
                            key: 'color',
                            type: 'text',
                            validator: function(v) {
                                if (!v) {
                                    return true;
                                }
                                if (/^#[0-9a-fA-F]{6}$/.test(v)) {
                                    return true;
                                }
                                return false;
                            }
                        }],
                        maxRows: 10
                    },
                    kahi: {
                        header: @js($categories->pluck('value')->prepend('')),
                        columns: @js(
                            $prependedCategories->map(function ($item) {
                                return $item['key']
                                    ? ['key' => $item['key'], 'type' => 'number']
                                    : [
                                        'key' => $item['key'],
                                        'type' => 'text',
                                        'readonly' => true,
                                    ];
                            })
                        ),
                        maxRows: 2
                    }
                },

                data: @js($data),
                errors: [],

                init() {
                    console.log(Alpine.raw(this.schemes));
                    console.log(Alpine.raw(this.data));
                    this.prepareData();
                },

                prepareData() {
                    let conditions = @js(ItemConditionEnum::getDropdownOptions('exhibit'));
                    let channels = ['', '自己配送', 'FBA'];

                    ['self', 'fba'].forEach((channel) => {
                        // コンディション別の査定率にコンディション名を付加する
                        Object.keys(this.data[channel].cond).forEach((id) => {
                            this.data[channel].cond[id][0] = conditions[id];
                        });

                        // 売れ筋ランキング別の査定率に追加行を付加する
                        this.addRow(channel, 'uresuji');
                    });

                    // 自己配送ランキング別グループ分けに追加行を付加する
                    this.addRow('self', 'rankgroup');

                    // 出品可否に配送方法名を付加する
                    Object.keys(this.data.whole.kahi).forEach((id) => {
                        this.data.whole.kahi[id][0] = channels[id];
                    });
                },

                addRow(channel, type) {
                    if (this.data[channel][type].length < this.schemes[type].maxRows) {
                        let row = {};
                        this.schemes[type].columns.forEach((col) => {
                            row[col.key] = null;
                        });
                        this.data[channel][type].push(row);
                    }
                },

                onRowBlur(channel, type, index) {
                    // 最後の行に何か入力された場合に新しい行を追加する
                    if (this.data[channel][type].length == index + 1) {
                        if (Object.values(this.data[channel][type][index]).filter((v) => !!v).length) {
                            this.addRow(channel, type);
                        }
                    }
                },

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

                        const url = '{{ route('assessment.save_settings') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify(this.data)
                        });

                        this.$dispatch('close');

                        this.global_loader.show = false;

                        response.json().then((data) => {
                            if (data.success) {
                                location.href = '{{ route(Route::currentRouteName()) }}';
                                return;
                            } else {
                                this.errors = data.errors ?? [];
                                promiseAlert(this, 'エラー', data.message ? data.message :
                                    'エラーが発生しました');
                            }
                        }).catch(() => {
                            promiseAlert(this, 'エラー', 'エラーが発生しました');
                        });
                    } catch (error) {
                        console.log(error);
                    }
                },

                hasError() {
                    const key = [...arguments].join('.');
                    return this.errors.includes(key);
                }
            }));
        });
    </script>
</x-app-layout>