@extends('livewire.components.datatable')
@section('header' . $key)
    <div class="pb-4">
        @php
            $wire_model_type = \App\Enums\ELivewireModelType::DEFER;
        @endphp
        <div class="py-2 pb-4">
            <x-titles.title-secondary :title="$header_title"/>
        </div>
        <div class="pb-4">
            <x-tabs.tab-selector
                :attr="[$wire_model_type->attribute() => 'trade_category']"
                :categories="\App\Enums\TradeCategory::valueNamesForAchievement()"
            />
        </div>
        <div class="w-full sm:flex sm:space-x-2 pb-4">
            <div class="sm:w-1/2">
                <div>A期間</div>
                <x-filters.range_filter type="date" min-model="start_date" max-model="end_date" min-placeholder="開始" max-placeholder="終了" :wire-model-type="$wire_model_type" />
            </div>
            <div class="sm:w-1/2">
                <div>B期間</div>
                <x-filters.range_filter type="date" min-model="compare_start_date" max-model="compare_end_date" min-placeholder="開始" max-placeholder="終了" :wire-model-type="$wire_model_type" />
            </div>
        </div>
        <div class="w-full sm:flex sm:space-x-2">
            <div class="sm:w-1/2">
                <x-forms.field-set label="取引先グループ">
                    <div class="p-4 inline-grid grid-cols-3 lg:grid-cols-5 gap-2 w-full">
                        <x-forms.input-checkbox name="group_partner" label="取引先" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_company" label="企業" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_achievement_group" label="実績集計先" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_branch" label="支店" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_department" label="部門" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_salesman" label="担当者" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_business_type" label="業務形態" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_location_condition" label="立地条件" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_sale_size" label="年商規模" :wire-model-type="$wire_model_type" />
                    </div>
                </x-forms.field-set>
            </div>
            <div class="sm:w-1/2">
                <x-forms.field-set label="商品グループ">
                    <div class="p-4 inline-grid grid-cols-3 lg:grid-cols-5 gap-2 w-full">
                        <x-forms.input-checkbox name="group_item" label="品番" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_category1" label="大分類" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_category2" label="中分類" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_category3" label="小分類" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_brand" label="銘柄" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_manufacturer" label="メーカー" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_place_of_origin" label="原産地" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_main_material" label="主原料" :wire-model-type="$wire_model_type" />
                        <x-forms.input-checkbox name="group_manufacture_type" label="製造区分" :wire-model-type="$wire_model_type" />
                    </div>
                </x-forms.field-set>
            </div>
        </div>
        <div class="text-center pt-1 w-full">
            <x-buttons.primary class="min-w-[10rem]" wire:click="queryExecution">
                <i class="fa fa-arrow-down"></i>
                照会実行
            </x-buttons.primary>
        </div>
    </div>
@endsection