{{--
    日付入力を生成する
    @props value デフォルト値
    @props disabled disabled属性
--}}
@props([
  'name' => 'month',
  'value' => '',
  'disabled' => false,
  'id' => null,
])

@php
  use Illuminate\Support\Str;
  $uid = $id ?: ('ym-'.Str::uuid());
@endphp

<div class="input-button-group" wire:ignore>
  <input type="text"
         id="{{ $uid }}"
         name="{{ $name }}"
         value="{{ $value }}"
         placeholder="YYYY/MM"
         class="datepicker-month"
         @disabled($disabled)
         readonly
         {{ $attributes }}> {{-- ← data-peer 等はここにマージ --}}
  <button type="button" tabindex="-1" onclick="document.getElementById('{{ $uid }}')._flatpickr.open()">
    <i class="fa-regular fa-calendar"></i>
  </button>
</div>

@push('scripts')
    @once
    <script>
    (function () {
    if (window.__monthpicker_bootstrapped) return;
    window.__monthpicker_bootstrapped = true;

    // root(差し替えノード)配下だけ初期化
    function initMonthPicker(root) {
        const scope = root || document;
        scope.querySelectorAll('.datepicker-month').forEach(el => {
        if (el._flatpickr || !window.flatpickr) return;

            const fp = flatpickr(el, {
                dateFormat: 'Y/m',
                locale: 'ja',
                defaultDate: el.value || null,
                plugins: [
                new monthSelectPlugin({
                    shorthand: true,
                    dateFormat: 'Y/m',
                    altFormat: 'Y年m月',
                })
                ],
                onChange: function (selectedDates) {
                // 連動：from → to の下限、to → from の上限を更新
                const role = el.dataset.peer;          // 'from' or 'to'
                const targetSel = el.dataset.peerTarget; // '#date_to' など
                if (role && targetSel) {
                    const peer = document.querySelector(targetSel);
                    if (peer && peer._flatpickr) {
                    if (role === 'from') {
                        peer._flatpickr.set('minDate', selectedDates[0] || null);
                    } else if (role === 'to') {
                        peer._flatpickr.set('maxDate', selectedDates[0] || null);
                    }
                    }
                }
                }
            });

            el.style.width = '6rem';
        });
    }

    document.addEventListener('DOMContentLoaded', () => initMonthPicker());
    document.addEventListener('livewire:init', () => {
        // 差分DOM差し替え時、差し替えられたルートだけ再初期化
        Livewire.hook('morph.updated', ({ el }) => initMonthPicker(el));
    });

    // グローバルへ出しておくと、必要なら手動でも呼べる
    window.initMonthPicker = initMonthPicker;
    })();
    </script>
    @endonce
@endpush