@props([
    'isNew' => true,
    'isCopy' => false,
    'updateBtnName' => '更新',
    'hasCandidatesAlignment' => false,
    'hasPartnerPricesAlignment' => false,
    'hasTradeCandidateForm' => false,
    'hasEditLog' => false,
    'hasClear' => true,
    'hasSubmit' => true,
    'hasConfig' => true,
    'canSave' => true,
    'disabled' => false,
    'isActiveBtns' => true,
    'returnLink' => null,
    'config' => null,
    'key' => null,
    'additionalInfoLabel' => null,
    'currentPage' => null,
    'isActiveCopyBtn' => false,
])
@php
    $disabled = $disabled || !$isActiveBtns;
@endphp
<div class="flex justify-center"
     x-data="bottomButton()"
     x-show="!openSidePanel"
     @keydown.f1.prevent.window="focusButton($el, 'submit');"
     @keydown.shift.f1.prevent.window="clickButton($el, 'submit');"
     @keydown.f2.prevent.window="$refs.additional.focus();"
     @keydown.shift.f2.prevent.window="$refs.additional.click();"
     @keydown.f3.prevent.window="$refs.addBtn.focus();"
     @keydown.shift.f3.prevent.window="$refs.addBtn.click();"
     @keydown.f4.prevent.window="$refs.config.focus();"
     @keydown.shift.f4.prevent.window="$refs.config.click();"
     @keydown.f5.prevent.window=""
     @keydown.f6.prevent.window=""
     @keydown.f7.prevent.window="$refs.log.focus();"
     @keydown.shift.f7.prevent.window="$refs.log.click();"
     @keydown.f8.prevent.window="$refs.history.focus();"
     @keydown.shift.f8.prevent.window="$refs.history.click();"
     @keydown.f9.prevent.window="focusButton($el, 'clear');"
     @keydown.shift.f9.prevent.window="clickButton($el, 'clear');"
     @keydown.f10.prevent.window="$refs.copy.focus();"
     @keydown.shift.f10.prevent.window="$refs.copy.click();"
     @keydown.f11.prevent.window=""
     @keydown.f12.prevent.window="$refs.exit.focus();"
     @keydown.shift.f12.prevent.window="$refs.exit.click(); event.stopPropagation();"
     x-on:disable-buttons="$refs.submit.setAttribute('disabled', 'true')"
>
    <x-modals.loading-modal wire:loading.long wire:target="submit,showTradeCandidateForm,showAdditionalInfo,showTradeCandidateForm,resetData,copyData" />
    <div class="fixed bottom-0 w-full bg-gray-100 z-10">
        <div class="grid gap-y-1 place-items-center grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-12">
            @if ($hasSubmit)
                <x-buttons.primary
                    x-ref="submit"
                    class="col-start-1 w-[6rem] text-xs"
                    wire:click.stop="submit"
                    :disabled="$disabled || !$canSave"
                    focusable
                >
                    <i class="fa fa-save"></i>
                    <span>
                        @if($isNew)
                            登録
                        @else
                            {{$updateBtnName}}
                        @endif</span>
                    <span>(F1)</span>
                </x-buttons.primary>
            @else
                <x-buttons.neutral
                    class="col-start-1 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif
            @if ($additionalInfoLabel)
                <x-buttons.neutral
                        x-ref="additional"
                    class="col-start-2 w-[6rem] text-xs"
                    wire:click.stop="showAdditionalInfo"
                >
                    <i class="fa fa-money-check mr-1"></i>{{$additionalInfoLabel}}(F2)
                </x-buttons.neutral>
            @else
                <x-buttons.neutral
                    class="col-start-2 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            @if(is_a($this, \App\Concerns\WithBottomAddBtn::class))
                <x-dynamic-component :component="$this->getAddBtnViewFile()"/>
            @else
                <x-buttons.add-buttons.disabled />
            @endif

            @if ($hasConfig && $config != '' && $isNew)
                <x-buttons.neutral
                    x-ref="config"
                    class="sm:col-start-4 w-[6rem] text-xs"
                    wire:click.stop="$dispatch('showConfig')"
                    :disabled="$disabled"
                >
                    <i class="fa fa-toolbox mr-1"></i>設定(F4)
                </x-buttons.neutral>
            @else
                <x-buttons.neutral
                    class="sm:col-start-4 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            @if (!$hasCandidatesAlignment)
                <x-buttons.neutral
                    class="md:col-start-5 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @else
                <x-buttons.neutral
                    x-ref="copy"
                    class="md:col-start-5 w-[6rem] text-xs"
                    wire:click.stop="bulkToggleCandidatesSync"
                    :disabled="$disabled"
                >
                    <i class="fa fa-arrows-rotate mr-1"></i>候補連携
                </x-buttons.neutral>
            @endif

            @if (!$hasPartnerPricesAlignment)
                <x-buttons.neutral
                    class="col-start-6 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @else
                <x-buttons.neutral
                    x-ref="copy"
                    class="col-start-6 w-[6rem] text-xs"
                    wire:click.stop="bulkTogglePartnerPricesSync"
                    :disabled="$disabled"
                >
                    <i class="fa fa-arrows-rotate mr-1"></i>単価連携
                </x-buttons.neutral>
            @endif

            @if ($hasEditLog && !$isNew)
                <x-buttons.neutral
                    x-ref="log"
                    class="xl:col-start-7 w-[6rem] text-xs"
                    wire:click.stop="$dispatch('showEditLog')"
                    @click="$wire.retrieveEditLogs()"
                    :disabled="$disabled"
                >
                    <i class="fa fa-clock-rotate-left mr-1"></i>ログ(F7)
                </x-buttons.neutral>
            @else
                <x-buttons.neutral
                    class="xl:col-start-7 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            @if ($hasTradeCandidateForm)
                <x-buttons.neutral
                    x-ref="history"
                    class="xl:col-start-8 w-[6rem] text-xs"
                    wire:click.stop="showTradeCandidateForm"
                    :disabled="$disabled"
                >
                    <i class="fa fa-book mr-1"></i>候補(F8)
                </x-buttons.neutral>

            @else
                <x-buttons.neutral
                    class="xl:col-start-8 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            @if ($hasClear)
                <x-buttons.secondary
                    x-ref="clear"
                    class="xl:col-start-9 w-[6rem] text-xs"
                    padding="px-1"
                    wire:click.stop="resetData"
                    :disabled="$disabled"
                >
                    <i class="fa fa-eraser"></i>クリア(F9)
                </x-buttons.secondary>

            @else
                <x-buttons.neutral
                    class="xl:col-start-9 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            @if (!$isNew && !$isCopy)
                <x-buttons.neutral
                    x-ref="copy"
                    class="xl:col-start-10 w-[6rem] text-xs"
                    wire:click.stop="copyData"
                    :disabled="$disabled && !$isActiveCopyBtn"
                >
                    <i class="fa fa-copy mr-1"></i>複製(F10)
                </x-buttons.neutral>

            @else
                <x-buttons.neutral
                    class="xl:col-start-10 w-[6rem] text-xs" disabled
                >　
                </x-buttons.neutral>
            @endif

            <x-buttons.neutral
                class="xl:col-start-11 w-[6rem] text-xs" disabled
            >
                　
            </x-buttons.neutral>

            <x-buttons.history-back
                x-ref="exit"
                class="xl:col-start-12 w-[6rem] text-xs"
                :disabled="$disabled"
                :return-link="$isActiveBtns ? $returnLink : '#'"
            >
                <i class="fa fa-arrow-left mr-1"></i>終了(F12)
            </x-buttons.history-back>
        </div>
    </div>
</div>

{{--ドロアーを開くためのボタン、livewireから呼び出す--}}
<button hide type="button"
        id="open-form-drawer-{{$key}}"
        data-drawer-target="form-drawer-{{$key}}"
        data-drawer-show="form-drawer-{{$key}}"
        data-drawer-placement="left"
        aria-controls="form-drawer-{{$key}}"
        x-init="$wire.on('showConfig', () => {
                if($refs.drawer.ariaHidden) $el.click();
                else $refs.closeDrawer.click();
            });"
        tabindex="-1"
>
</button>
<button hide type="button"
        id="open-log-drawer-{{$key}}"
        data-drawer-target="log-drawer-{{$key}}"
        data-drawer-show="log-drawer-{{$key}}"
        data-drawer-placement="right"
        aria-controls="log-drawer-{{$key}}"
        x-init="$wire.on('showEditLog', () => {
                if($refs.logDrawer.ariaHidden) $el.click();
                else $refs.closeLogDrawer.click();
            });"
        tabindex="-1"
>
</button>
{{--ドロアーの中身--}}
<div id="form-drawer-{{$key}}" wire:ignore.self x-ref="drawer"
     class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-96"
     tabindex="-1" aria-labelledby="drawer-left-label"
>
    <button type="button" x-ref="closeDrawer"
            id="close-form-drawer-{{$key}}" data-drawer-hide="form-drawer-{{$key}}"
            aria-controls="form-drawer-{{$key}}"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
        <i class="fa fa-xmark"></i>
    </button>
    <div class="text-xl py-2">
        登録設定
    </div>
    <div class="h-full">
        {{$config}}
    </div>
</div>

<div id="log-drawer-{{$key}}" wire:ignore.self x-ref="logDrawer"
     class="fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white w-96"
     tabindex="-1" aria-labelledby="drawer-left-label"
>
    <button type="button" x-ref="closeLogDrawer"
            id="close-log-drawer-{{$key}}" data-drawer-hide="log-drawer-{{$key}}"
            aria-controls="log-drawer-{{$key}}"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
        <i class="fa fa-xmark"></i>
    </button>
    <div class="text-xl py-2">
        編集ログ
    </div>
    <div class="h-full p-4">
        <x-others.timeline :events="$editLogs ?? []" click-func="overWriteFromLog"/>
    </div>
</div>
<script>
    function bottomButton() {
        return {
            // 子要素にx-dataを定義した場合に$refsでアクセスできない
            focusButton(el, key) {
                el.querySelector("[x-ref='" + key + "']").focus();
            },
            clickButton(el, key) {
                el.querySelector("[x-ref='" + key + "']").click();
            }
        };
    }
</script>