@php
    $detail_first = in_array('item_codes', $another_storages)
        ? (in_array('start_date', $another_storages) ? 'row_data.0.start_date' : 'item_codes.0')
        : 'row_data.0.' . ($skip_element_id ?? 'item_code');
@endphp
<div
        x-ref="base"
        id="table-editor"
        class="focus:outline-none static w-full h-full"
        tabindex="-1"
        x-data="tableEditor(@entangle('row_count').live)"
        @keydown.shift.enter.prevent.stop="document.getElementById('{{ $detail_first }}').focus();"
        x-on:focus-on.window="setTimeout(() => focusOn($event.detail.target), $event.detail.ms ?? 100)"
        {{--    x-on:delayed-sync-row-data.window="--}}
        {{--        setTimeout(function() {--}}
        {{--            $wire.syncRowData();--}}
        {{--        }, 50);--}}
        {{--    "--}}
>
    <div>
        <div class="flex-1 sm:flex justify-between p-2 pb-4 px-2">
            <div>
                <div class="flex flex-col pt-2 relative">
                    @section('title_supplement')
                    @show
                    <x-titles.title-primary :title="$title" :subtitle="$this->getSubTitle" :subtitledescription="$this->getSubTitleDescription" icon="fa fa-feather"/>
                </div>
            </div>
            @if (count($info = $this->editorInfo()) > 0)
                <div class="text-right">
                    <x-cards.horizontal-info-cards :items="$info"/>
                </div>
            @endif
        </div>
        <fieldset @disabled(!$this->canEdit) style="display: contents">
            <div class="w-full">
                @yield('header')
            </div>
        </fieldset>
        <div class="overflow-x-auto max-h-[27rem] h-full mb-4">
            <div class="overflow-auto w-full h-full">
                <table class="text-sm text-gray-500 text-center w-full">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 sticky top-0 z-10">
                    <tr>
                        @if($this->is_reorder_rows)
                            <th scope="col" class="p-2 whitespace-nowrap">
                            </th>
                        @endif
                        <th scope="col" class="p-4 whitespace-nowrap">
                            {{ $checkbox_header_label }}
                            {{--                    <x-forms.checkbox id="checkbox-form-all" wire:model.live="all_checked" label="削除"/>--}}
                        </th>
                        <th scope="col" class="p-1 whitespace-nowrap">
                            行数
                        </th>
                        @foreach($table_headers as $index => $main_header)
                            @php
                                $attribute = Arr::get($field_attributes, $index);
                            @endphp
                            <th scope="col" class="px-6 whitespace-nowrap divide-y">
                                @foreach($this->thHeaders($attribute, $main_header) as $header)
                                    <div class="py-1">
                                        {{$header}}
                                    </div>
                                @endforeach
                            </th>
                        @endforeach
                    </tr>
                    </thead>
                    <tbody>
                    @for($i = 0; $i < $row_count; $i++)
                        <tr class="{{$this->getRowClass($i)}} border-b whitespace-nowrap"
                            @if(!$is_updated_last_record)
                                x-init="document.getElementById('{{$detail_first}}'.replace('0', (row_count - 1).toString())).focus()"
                                @endif
                        >
                            @if($this->is_reorder_rows)
                                <td class="px-2 py-3 w-2 divide-y">
                                    <div class="cursor-pointer"
                                         @click="{{$index}};$wire.dispatchSelf('row-up-clicked',{index: {{$i}} });">
                                        ↑
                                    </div>
                                    <div class="cursor-pointer"
                                         @click="{{$index}};$wire.dispatchSelf('row-down-clicked',{index: {{$i}} });">
                                        ↓
                                    </div>
                                </td>
                            @endif
                            <td class="px-4 py-3 w-4">
                                <x-forms.checkbox
                                        id="checkbox-table-form-{{$i}}" :checked="$this->isChecked($i)"
                                        wire:click="checkId('{{$i}}')" @click.stop=""
                                        wire:model.live="row_data.{{$i}}.{{$checkbox_key}}"
                                        :disabled="$this->isDisabledFromProperty('row_data.'.$i.'.is_deleted')"
                                        focus-skip
                                />
                            </td>
                            <td x-text="{{$i + 1}}">
                            </td>
                            @section('tds' . $i)
                                @foreach($field_attributes as $col_number => $main_attribute)
                                    <td class="divide-y">
                                        @foreach($this->tdAttributes($main_attribute) as $attribute)
                                            <div class="">
                                                @if (in_array($attribute, $not_editable_cols))
                                                    {{ $this->displayFormat($attribute, \Illuminate\Support\Arr::get($row_data, "{$i}.{$attribute}")) }}
                                                @else
                                                    @php
                                                        $format = toEnum(\Illuminate\Support\Arr::get($formats, $attribute, \App\Enums\FieldFormat::TEXT), \App\Enums\FieldFormat::class);
                                                        $is_deleted = \Illuminate\Support\Arr::get($row_data, "{$i}.is_deleted", false);
                                                        $model_name = "row_data.{$i}.{$attribute}";
                                                        $is_addNextRow = $this->valueFromProperty("row_data.{$i}.is_addNextRow") ?? false;//セット商品の場合はEnterキーで次の行を追加できるようにするフラグ
                                                        $is_trigger_for_next_row =(in_array($attribute, $next_row_attributes) && $is_addNextRow)|| (($i == $row_count - 1) && ($main_attribute == last($field_attributes) || in_array($attribute, $next_row_attributes)));
                                                        $trade_direction = \App\Enums\Partners\ETradeDirection::fromId($this->trade_direction_key);
                                                        $shows_minus_mark = in_array($attribute, $shows_minus_mark_cols) && $trade_direction->getIsShowsMinusMark();
                                                        $wire_model_name = $model_name;
                                                        $another_storage = \Illuminate\Support\Arr::get($this->another_storages, last(explode('.', $model_name)));
                                                        if ($another_storage) {
                                                            $index = explode('.', $model_name)[1];
                                                            $wire_model_name = "{$another_storage}.{$index}";
                                                        }
                                                        $model_names[] = $wire_model_name;
                                                    @endphp
                                                    <div
                                                            class="flex justify-center"
                                                            @keydown.enter.prevent="{{$is_trigger_for_next_row ? 'addNextRow;' : ''}}"
                                                    >
                                                        <x-forms.input-divider :name="$wire_model_name"
                                                                               :value="$this->valueFromProperty($model_name)"
                                                                               :format="$format"
                                                                               :show-error="false"
                                                                               :nullable="in_array($attribute, $nullable_cols)"
                                                                               :disable="$is_deleted || !$this->canEdit || $this->isDisabledFromProperty($model_name)"
                                                                               :options="\Illuminate\Support\Arr::get($col_options, $attribute, [])"
                                                                               :shows-minus-mark="$shows_minus_mark"
                                                                               :focus-skip="in_array($attribute, $focus_skips)"
                                                                               :warning="\Illuminate\Support\Arr::get($warnings, $model_name)"
                                                                               :show-side-panel-button="$this->isShowSidePanelButton($model_name)"
                                                        />
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </td>
                                @endforeach
                            @show
                        </tr>
                    @endfor
                    </tbody>
                </table>
            </div>
            <div>
                @foreach($model_names ?? [] as $name)
                    @error($name) <span class="text-red-500 text-xs mr-5">{{ $message }}</span> @enderror
                @endforeach
            </div>
        </div>
        <x-buttons.bottom-buttons
                :is-new="$this->isNew"
                :is-copy="$is_copy"
                :update-btn-name="$this->updateBtnName"
                :has-candidates-alignment="$this->hasCandidatesAlignment()"
                :has-partner-prices-alignment="$this->hasPartnerPricesAlignment()"
                :has-trade-candidate-form="$this->hasTradeCandidateForm()"
                :has-edit-log="true"
                :has-config="$this->hasConfig"
                :additional-info-label="$this->additionalInfoLabel()"
                :disabled="!$this->canEdit"
                :is-active-btns="$is_active_buttons"
                :edit-logs="$edit_logs"
                :current-page="$title"
                :is-active-copy-btn="$is_active_copy_btn"
        >
            <x-slot:config>
                @yield('config')
            </x-slot:config>
        </x-buttons.bottom-buttons>
        @include('livewire.components.session-message', ['key' => $key])
    </div>
    <script>
        function tableEditor(row_count) {
            return {
                row_count: row_count,
                is_adding_row: false,
                init() {
                    this.$el.focus();
                    Livewire.hook('commit', ({component, commit, respond, succeed, fail}) => {
                        if (this.$wire.is_debug) {
                            console.log(this.$wire.get('row_data'));
                            console.log(this.$wire.get('price_breakdown_array'));
                        }
                    });
                },
                focusOn(target) {
                    document.getElementById(target).focus();
                },
                addNextRow(event) {
                    event.stopPropagation();
                    if (this.is_adding_row) return;

                    document.querySelector("[x-ref='addBtn']").click();

                    // 連打防止
                    this.is_adding_row = true;
                    setTimeout(() => {
                        this.is_adding_row = false;
                    }, 1000);
                },
            }
        }
    </script>
</div>