@php
    use Carbon\CarbonImmutable;
@endphp
<div x-data="{{ $isAll ? 'sales_all' : 'sales' }}" 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">
        <x-primary-button x-bind:disabled="!items.length" x-data="" x-on:click.prevent="downloadCsv()"
            class="">
            {{ __('CSVダウンロード') }}</x-primary-button>
    </div>
    <div class="my-2 flex space-x-4 justify-center">
        <div class="search-confitions flex flex-wrap gap-x-4">
            <div>
                <x-input-label for="from" :value="__('期間(自)')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="date" x-model="inputs.from" name="from" class="w-48" />
                </div>
            </div>
            <div>
                <x-input-label class="opacity-0" for="" :value="__('〜')" />
                <div class="mt-1 flex space-x-2 items-center">
                    〜
                </div>
            </div>
            <div>
                <x-input-label for="to" :value="__('期間(至)')" />
                <div class="mt-1 flex space-x-2 items-center">
                    <x-text-input type="date" x-model="inputs.to" name="to" class="w-48" />
                </div>
            </div>
            <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.length">
        <div>
            <div class="relative overflow-auto shadow-md rounded-lg" x-ref="wrapper"
                x-on:resize.window="windowResized()">
                <table class="w-full text-sm text-left text-gray-700">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-200 sticky top-0">
                        <tr>
                            <th class="px-2 py-3">日付</th>
                            <th class="px-2 py-3">査定数<br>(自己配送)</th>
                            <th class="px-2 py-3">査定数<br>(FBA)</th>
                            <th class="px-2 py-3">査定数<br>(不可)</th>
                            <th class="px-2 py-3">査定数<br>(総数)</th>
                            <th class="px-2 py-3">1日の出品総数<br>(自己配送)</th>
                            <th class="px-2 py-3">1日の出品総数<br>(FBA)</th>
                            <th class="px-2 py-3">注文商品売上<br>(自己配送)</th>
                            <th class="px-2 py-3">配送料<br>(自己配送)</th>
                            <th class="px-2 py-3">注文商品売上<br>(FBA)</th>
                            <th class="px-2 py-3">注文された<br>商品点数<br>(自己配送)</th>
                            <th class="px-2 py-3">注文された<br>商品点数<br>(FBA)</th>
                            <th class="px-2 py-3">品目あたりの<br>平均売上<br>(自己配送)</th>
                            <th class="px-2 py-3">品目あたりの<br>平均配送料<br>(自己配送)</th>
                            <th class="px-2 py-3">品目あたりの<br>平均売上<br>(FBA)</th>
                            <th class="px-2 py-3">平均在庫数<br>(自己配送)</th>
                            <th class="px-2 py-3">平均在庫数<br>(FBA)</th>
                        </tr>
                    </thead>
                    <tbody class="overflow-y-auto">
                        <template x-for="item in items" :key="item.id">
                            <tr class="bg-white border-b hover:bg-gray-100" x-bind:data-id="item.id">
                                <td class="px-2 py-1">
                                    <span x-text="getFormatedDate(item.report_date)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.self_assessment_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.fba_assessment_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.ng_assessment_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span
                                        x-text="numberFormat((item.self_assessment_count ?? 0) + (item.fba_assessment_count ?? 0) + (item.ng_assessment_count ?? 0))"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.self_shupin_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.fba_shupin_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span x-text="numberFormat(item.self_sales_sum ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span x-text="numberFormat(item.self_shipping_price_sum ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span x-text="numberFormat(item.fba_sales_sum ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.self_sales_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.fba_sales_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span x-text="numberFormat(Math.round(item.self_per_item_sales_avg ?? 0))"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span
                                        x-text="numberFormat(Math.round((item.self_shipping_price_sum ?? 0) / (item.self_sales_count ?? 1)))"></span>
                                </td>
                                <td class="px-2 py-1">
                                    ￥<span x-text="numberFormat(Math.round(item.fba_per_item_sales_avg ?? 0))"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.self_item_count ?? 0)"></span>
                                </td>
                                <td class="px-2 py-1">
                                    <span x-text="numberFormat(item.fba_item_count ?? 0)"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                    <tfoot class="text-xs text-gray-700 uppercase bg-gray-200 sticky bottom-0">
                        <tr>
                            <th class="px-2 py-3">合計</th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.self_assessment_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.fba_assessment_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.ng_assessment_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span
                                    x-text="numberFormat((totals.self_assessment_count ?? 0) + (totals.fba_assessment_count ?? 0) + (totals.ng_assessment_count ?? 0))"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.self_shupin_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.fba_shupin_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span x-text="numberFormat(totals.self_sales_sum ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span x-text="numberFormat(totals.self_shipping_price_sum ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span x-text="numberFormat(totals.fba_sales_sum ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.self_sales_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.fba_sales_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span x-text="numberFormat(Math.round(totals.self_per_item_sales_avg ?? 0))"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span
                                    x-text="numberFormat(Math.round(totals.self_per_item_shipping_price_avg ?? 0))"></span>
                            </th>
                            <th class="px-2 py-3">
                                ￥<span x-text="numberFormat(Math.round(totals.fba_per_item_sales_avg ?? 0))"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.self_item_count ?? 0)"></span>
                            </th>
                            <th class="px-2 py-3">
                                <span x-text="numberFormat(totals.fba_item_count ?? 0)"></span>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </template>
    <template x-if="!items.length">
        <p>{{ __('データが見つかりませんでした') }}</p>
    </template>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('{{ $isAll ? 'sales_all' : 'sales' }}', () => ({
                items: [],
                totals: {},
                inputs: {
                    // {{-- 検索条件(ユーザの入力を受け取る用) --}}
                    from: @js(
                        CarbonImmutable::today()->subMonth()->subDay()->format('Y-m-d')
                    ),
                    to: @js(
                        CarbonImmutable::today()->subDay()->format('Y-m-d')
                    )
                },
                query: {
                    // {{-- 検索条件(実際の検索に使用する用。検索ボタンの押下でのみ検索条件を確定するため inputs と分けている) --}}
                },

                init() {
                    if (this.currentTab == '{{ $isAll ? 'sales_all' : 'sales' }}') {
                        this.query = Object.assign({}, Alpine.raw(this.inputs));
                        this.loadData();
                    }
                },

                onSearchClick(el) {
                    this.query = Object.assign({}, Alpine.raw(this.inputs));
                    this.selectState = {};
                    this.loadData();
                },

                onClearClick(el) {
                    this.query = {};
                    this.inputs = {
                        from: @js(
                            CarbonImmutable::today()->subMonth()->subDay()->format('Y-m-d')
                        ),
                        to: @js(
                            CarbonImmutable::today()->subDay()->format('Y-m-d')
                        )
                    };
                    this.sort = {};
                    this.selectState = {};
                    this.query = Object.assign({}, Alpine.raw(this.inputs));
                    this.loadData();
                },

                tabChanged(tab, old) {
                    if (!(tab != old && tab == '{{ $isAll ? 'sales_all' : 'sales' }}')) {
                        return;
                    }
                    this.query = Object.assign({}, Alpine.raw(this.inputs));
                    this.loadData();
                },

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

                    this.queue = [];

                    if (!url) {
                        url = '{{ route('report.get_sales_items') }}';
                    }
                    url = addQueryString(url, {
                        ...this.query,
                        ...{isAll: {{ $isAll ? 1 : 0 }}},
                    });
                    const response = await ajaxGet(url);

                    this.global_loader.show = false;

                    response.json().then((data) => {
                        // data = [...data.map(item => ({
                        //     ...item
                        // })), ...data.map(item => ({
                        //     ...item
                        // }))];
                        // data = [...data.map(item => ({
                        //     ...item
                        // })), ...data.map(item => ({
                        //     ...item
                        // }))];
                        // data = [...data.map(item => ({
                        //     ...item
                        // })), ...data.map(item => ({
                        //     ...item
                        // }))];
                        // data = [...data.map(item => ({
                        //     ...item
                        // })), ...data.map(item => ({
                        //     ...item
                        // }))];
                        // data = data.map((item, i) => {
                        //     item.id = i + 1;
                        //     return item;
                        // });
                        // console.log(data);

                        this.items = data;
                        this.calcTotals();
                        this.$nextTick(() => {
                            this.setTableMaxHeight();
                        });
                    }).catch((e) => {
                        console.log(e);
                        promiseAlert(this, 'エラー', 'エラーが発生しました');
                    });
                },

                calcTotals() {
                    const fields = {
                        'self_assessment_count': null,
                        'fba_assessment_count': null,
                        'ng_assessment_count': null,
                        'self_shupin_count': null,
                        'fba_shupin_count': null,
                        'self_sales_sum': null,
                        'self_shipping_price_sum': null,
                        'fba_sales_sum': null,
                        'self_sales_count': null,
                        'fba_sales_count': null,
                        'self_per_item_sales_avg': Math.round,
                        'self_per_item_shipping_price_avg': Math.round,
                        'fba_per_item_sales_avg': Math.round,
                        'self_item_count': null,
                        'fba_item_count': null,
                    };

                    this.totals = {};
                    for (const [field, func] of Object.entries(fields)) {
                        this.totals[field] = 0;
                        const f = func ? func : v => v;
                        this.items.forEach((item) => {
                            this.totals[field] += f(item[field] ?? 0);
                        });
                    }

                    // 平均値の計算
                    if (this.totals.self_sales_count) {
                        this.totals.self_per_item_sales_avg = Math.round(this.totals.self_sales_sum / this.totals.self_sales_count);
                    }
                    if (this.totals.self_sales_count) {
                        this.totals.self_per_item_shipping_price_avg = Math.round(this.totals.self_shipping_price_sum / this.totals.self_sales_count);
                    }
                    if (this.totals.fba_sales_count) {
                        this.totals.fba_per_item_sales_avg = Math.round(this.totals.fba_sales_sum / this.totals.fba_sales_count);
                    }
                    if (this.items.length) {
                        this.totals.self_item_count = Math.round(this.totals.self_item_count / this.items.length);
                    }
                    if (this.items.length) {
                        this.totals.fba_item_count = Math.round(this.totals.fba_item_count / this.items.length);
                    }
                },

                setTableMaxHeight() {
                    const wrapper = this.$refs.wrapper;
                    if (!wrapper) {
                        return;
                    }
                    const rect = wrapper.getBoundingClientRect();
                    const top = rect.top + window.pageYOffset;
                    const h = window.innerHeight - top - 45;
                    if (h > 200) {
                        wrapper.style.maxHeight = h + 'px';
                    } else {
                        delete wrapper.style.maxHeight;
                    }
                },

                windowResized() {
                    this.setTableMaxHeight();
                },

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

                        const url = '{{ route('report.sales_csv') }}';
                        const response = await jsonPost(url, {
                            body: JSON.stringify({
                                ...this.query,
                                ...{isAll: {{ $isAll ? 1 : 0 }}},
                            })
                        });

                        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);
                    }
                },
            }));
        });
    </script>
</div>