@php
  $s = $scheduleState;
  $weeklyRows = $s['weeklyRows'] ?? [];
  $specificDateRows = $s['specificDateRows'] ?? [];
  $specificOn = (bool) old('specific_dates_enabled', $s['specific_dates_enabled'] ?? false);
  $displayMode = old('display_period_mode', $s['display_period_mode'] ?? 'auto');
  $holidayMode = old('holiday_mode', $s['holiday_mode'] ?? 'hold');
  $staffMode = old('schedule_staff_mode', $s['schedule_staff_mode'] ?? 'single');
  $meetingOn = (bool) old('online_meeting_enabled', $s['online_meeting_enabled'] ?? false);
@endphp

<form method="POST" action="{{ route('event.workspace.schedules.update', $event) }}" id="event-schedule-settings-form">
  @csrf
  @method('PUT')

  <div class="card mb-3">
    <div class="card-header fw-semibold">基本設定</div>
    <div class="card-body">
      @include('event.partials._schedule_preset_row', [
        'label' => '所要時間',
        'name' => 'duration',
        'presets' => \App\Support\EventScheduleSettingsNormalizer::DURATION_PRESETS,
        'preset' => old('duration_preset', $s['duration_preset'] ?? '60'),
        'custom' => old('duration_custom', $s['duration_custom'] ?? 60),
        'suffix' => '分',
      ])
      @include('event.partials._schedule_preset_row', [
        'label' => '開催前の確保時間',
        'name' => 'buffer_before',
        'presets' => \App\Support\EventScheduleSettingsNormalizer::BUFFER_PRESETS,
        'preset' => old('buffer_before_preset', $s['buffer_before_preset'] ?? '0'),
        'custom' => old('buffer_before_custom', $s['buffer_before_custom'] ?? 0),
        'suffix' => '分',
      ])
      @include('event.partials._schedule_preset_row', [
        'label' => '開催後の確保時間',
        'name' => 'buffer_after',
        'presets' => \App\Support\EventScheduleSettingsNormalizer::BUFFER_PRESETS,
        'preset' => old('buffer_after_preset', $s['buffer_after_preset'] ?? '30'),
        'custom' => old('buffer_after_custom', $s['buffer_after_custom'] ?? 30),
        'suffix' => '分',
      ])
      <p class="small text-muted ms-md-3 mb-3 ps-md-0" style="margin-top:-0.5rem">
        一括生成では、各枠の長さは<strong>所要時間</strong>、枠と枠のあいだは<strong>所要時間＋開催後の確保時間</strong>で空けます（別途「間隔」を設定する必要はありません）。
      </p>
      <div class="row mb-0 align-items-center">
        <div class="col-md-3"><label class="form-label fw-semibold mb-0">定員</label></div>
        <div class="col-md-3">
          <input type="number" name="capacity" class="form-control form-control-sm" min="1" max="99999" value="{{ old('capacity', $s['capacity'] ?? '') }}" placeholder="1">
          <div class="form-text">各予約枠に適用。空欄は無制限。</div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">担当者設定</div>
    <div class="card-body">
      <div class="row mb-3 align-items-center">
        <div class="col-md-3"><span class="fw-semibold">参加方式</span></div>
        <div class="col-md-9">
          <div class="btn-group btn-group-sm" role="group">
            <input type="radio" class="btn-check" name="schedule_staff_mode" id="staff_mode_single" value="single" {{ $staffMode === 'single' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="staff_mode_single">担当者1名のみ参加</label>
            <input type="radio" class="btn-check" name="schedule_staff_mode" id="staff_mode_pick" value="present_pick" {{ $staffMode === 'present_pick' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="staff_mode_pick">担当者を提示し1名が参加</label>
          </div>
        </div>
      </div>
      <div class="row mb-0 align-items-center" id="schedule-staff-select-wrap">
        <div class="col-md-3"><label class="form-label fw-semibold mb-0" for="schedule_staff_member_id">担当者</label></div>
        <div class="col-md-6">
          <select name="schedule_staff_member_id" id="schedule_staff_member_id" class="form-select form-select-sm @error('schedule_staff_member_id') is-invalid @enderror">
            <option value="">選択してください</option>
            @foreach($staffMembers as $staff)
              <option value="{{ $staff->id }}" @selected((string) old('schedule_staff_member_id', $s['schedule_staff_member_id'] ?? '') === (string) $staff->id)>{{ $staff->name }}</option>
            @endforeach
          </select>
          @error('schedule_staff_member_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
          @if($staffMembers->isEmpty())
            <div class="form-text"><a href="{{ route('event.staff.create', $event) }}">担当者を追加</a>してから選べます。</div>
          @endif
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">Zoom連携 / Google Meet連携</div>
    <div class="card-body">
      <div class="btn-group btn-group-sm" role="group">
        <input type="radio" class="btn-check" name="online_meeting_enabled" id="online_meeting_on" value="1" {{ $meetingOn ? 'checked' : '' }}>
        <label class="btn btn-outline-primary" for="online_meeting_on">利用する</label>
        <input type="radio" class="btn-check" name="online_meeting_enabled" id="online_meeting_off" value="0" {{ ! $meetingOn ? 'checked' : '' }}>
        <label class="btn btn-outline-secondary" for="online_meeting_off">利用しない</label>
      </div>
      <p class="small text-muted mt-2 mb-0">会議URLは <a href="{{ route('event.edit', $event) }}">詳細設定</a> の Zoom / Meet URL、または各担当者の会議URLを利用します（自動連携は未実装）。</p>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">開催する曜日・時間帯</div>
    <div class="card-body">
      @error('weekly_schedule')<div class="alert alert-danger small py-2">{{ $message }}</div>@enderror
      @foreach($weeklyRows as $wi => $day)
      <div class="border rounded p-2 mb-2 weekly-day-row">
        <div class="d-flex align-items-center gap-2 mb-2">
          <input type="hidden" name="weekly_schedule[{{ $wi }}][weekday]" value="{{ $day['weekday'] }}">
          <input type="checkbox" class="form-check-input weekly-day-enable" name="weekly_schedule[{{ $wi }}][enabled]" value="1" id="es_wd{{ $day['weekday'] }}" {{ old('weekly_schedule.'.$wi.'.enabled', $day['enabled'] ? '1' : '0') === '1' ? 'checked' : '' }}>
          <label class="form-check-label fw-semibold" for="es_wd{{ $day['weekday'] }}">{{ $day['label'] }}</label>
        </div>
        <div class="weekly-slots">
          @foreach($day['slots'] as $si => $slot)
          <div class="row g-2 align-items-center mb-1 weekly-slot-row">
            <div class="col-auto"><input type="time" name="weekly_schedule[{{ $wi }}][slots][{{ $si }}][start]" class="form-control form-control-sm" value="{{ old('weekly_schedule.'.$wi.'.slots.'.$si.'.start', $slot['start'] ?? '') }}"></div>
            <div class="col-auto small text-muted">〜</div>
            <div class="col-auto"><input type="time" name="weekly_schedule[{{ $wi }}][slots][{{ $si }}][end]" class="form-control form-control-sm" value="{{ old('weekly_schedule.'.$wi.'.slots.'.$si.'.end', $slot['end'] ?? '') }}"></div>
            <div class="col-auto">
              <button type="button" class="btn btn-sm btn-outline-danger weekly-slot-remove">削除</button>
              <button type="button" class="btn btn-sm btn-outline-success weekly-slot-add">追加</button>
            </div>
          </div>
          @endforeach
        </div>
      </div>
      @endforeach
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">特定日の開催設定</div>
    <div class="card-body">
      <div class="btn-group btn-group-sm mb-3" role="group">
        <input type="radio" class="btn-check" name="specific_dates_enabled" id="specific_on" value="1" {{ $specificOn ? 'checked' : '' }}>
        <label class="btn btn-outline-primary" for="specific_on">設定する</label>
        <input type="radio" class="btn-check" name="specific_dates_enabled" id="specific_off" value="0" {{ ! $specificOn ? 'checked' : '' }}>
        <label class="btn btn-outline-secondary" for="specific_off">設定しない</label>
      </div>
      <div id="specific-dates-wrap" class="{{ $specificOn ? '' : 'd-none' }}">
        <div id="specific-dates-rows">
          @foreach($specificDateRows as $di => $dateRow)
          <div class="border rounded p-2 mb-2 specific-date-row">
            <div class="row g-2 align-items-center mb-2">
              <div class="col-md-4">
                <label class="form-label small mb-0">日付</label>
                <input type="date" name="specific_dates[{{ $di }}][date]" class="form-control form-control-sm" value="{{ old('specific_dates.'.$di.'.date', $dateRow['date']) }}">
              </div>
              <div class="col-md-8 text-end">
                <button type="button" class="btn btn-sm btn-outline-danger specific-date-remove">この日を削除</button>
              </div>
            </div>
            <div class="specific-date-slots" data-date-index="{{ $di }}">
              @foreach($dateRow['slots'] as $si => $slot)
              <div class="row g-2 align-items-center mb-1 specific-slot-row">
                <div class="col-auto"><input type="time" name="specific_dates[{{ $di }}][slots][{{ $si }}][start]" class="form-control form-control-sm" value="{{ old('specific_dates.'.$di.'.slots.'.$si.'.start', $slot['start'] ?? '') }}"></div>
                <div class="col-auto small text-muted">〜</div>
                <div class="col-auto"><input type="time" name="specific_dates[{{ $di }}][slots][{{ $si }}][end]" class="form-control form-control-sm" value="{{ old('specific_dates.'.$di.'.slots.'.$si.'.end', $slot['end'] ?? '') }}"></div>
                <div class="col-auto">
                  <button type="button" class="btn btn-sm btn-outline-danger specific-slot-remove">削除</button>
                  <button type="button" class="btn btn-sm btn-outline-success specific-slot-add">追加</button>
                </div>
              </div>
              @endforeach
            </div>
          </div>
          @endforeach
        </div>
        <button type="button" class="btn btn-sm btn-outline-success" id="specific-date-add">日付を追加</button>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">表示・生成のルール</div>
    <div class="card-body">
      <div class="row mb-3 align-items-center">
        <div class="col-md-3"><span class="fw-semibold">祝日の開催</span></div>
        <div class="col-md-9">
          <div class="btn-group btn-group-sm">
            <input type="radio" class="btn-check" name="holiday_mode" id="holiday_hold" value="hold" {{ $holidayMode === 'hold' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="holiday_hold">開催する</label>
            <input type="radio" class="btn-check" name="holiday_mode" id="holiday_closed" value="closed" {{ $holidayMode === 'closed' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="holiday_closed">開催しない</label>
          </div>
          <div class="form-text">開催しない場合、主要な国民の祝日をスキップします（振替休日は未対応）。</div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-3"><span class="fw-semibold">日程の表示期間</span></div>
        <div class="col-md-9">
          <p class="small text-muted mb-2">
            <strong>「保存して予約枠を生成」</strong>するときに、<strong>何日目から何日目まで</strong>予約枠を作るかの上限です（公開ページに出る日時の範囲にも影響します）。
          </p>
          <div class="btn-group btn-group-sm mb-2">
            <input type="radio" class="btn-check" name="display_period_mode" id="display_auto" value="auto" {{ $displayMode === 'auto' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="display_auto">自動で調整</label>
            <input type="radio" class="btn-check" name="display_period_mode" id="display_range" value="range" {{ $displayMode === 'range' ? 'checked' : '' }}>
            <label class="btn btn-outline-primary" for="display_range">期間を指定</label>
          </div>
          <div class="form-text mb-2">
            <strong>自動で調整</strong> … 下の「いつから」「何日分を表示」で決まります（例: 12時間後から14日間）。<br>
            <strong>期間を指定</strong> … 開始日〜終了日を直接指定します（「いつから」より前には作りません）。
          </div>
          <div id="display-range-wrap" class="row g-2 align-items-center {{ $displayMode === 'range' ? '' : 'd-none' }}">
            <div class="col-auto"><input type="date" name="display_range_from" class="form-control form-control-sm" value="{{ old('display_range_from', $s['display_range_from'] ?? '') }}" aria-label="表示期間の開始日"></div>
            <div class="col-auto small text-muted">〜</div>
            <div class="col-auto"><input type="date" name="display_range_to" class="form-control form-control-sm" value="{{ old('display_range_to', $s['display_range_to'] ?? '') }}" aria-label="表示期間の終了日"></div>
          </div>
        </div>
      </div>
      @include('event.partials._schedule_preset_row', [
        'label' => 'いつから',
        'name' => 'lead_time',
        'presets' => \App\Support\EventScheduleSettingsNormalizer::LEAD_TIME_PRESETS,
        'preset' => old('lead_time_preset', $s['lead_time_preset'] ?? '12'),
        'custom' => old('lead_time_custom', $s['lead_time_custom'] ?? 12),
        'suffix' => '時間後',
        'presetLabels' => ['12' => '12時間後', '18' => '18時間後', '24' => '24時間後', '48' => '48時間後'],
      ])
      <p class="small text-muted ms-md-3 mb-3 ps-md-0" style="margin-top:-0.5rem">※「日程の表示期間」が<strong>自動</strong>のとき使われます。今すぐ予約を受け付けないための余白です。</p>
      @include('event.partials._schedule_preset_row', [
        'label' => '何日分を表示',
        'name' => 'display_days',
        'presets' => \App\Support\EventScheduleSettingsNormalizer::DISPLAY_DAYS_PRESETS,
        'preset' => old('display_days_preset', $s['display_days_preset'] ?? '14'),
        'custom' => old('display_days_custom', $s['display_days_custom'] ?? 14),
        'suffix' => '日間',
        'presetLabels' => ['7' => '7日', '10' => '10日', '14' => '14日', '21' => '21日'],
      ])
      <p class="small text-muted ms-md-3 mb-0 ps-md-0" style="margin-top:-0.5rem">※「日程の表示期間」が<strong>自動</strong>のとき、上の「いつから」から何日分の枠を生成するかです。</p>
    </div>
  </div>

  <div class="d-flex flex-wrap gap-2 mb-4">
    <button type="submit" name="action" value="save" class="btn btn-primary"><i class="bi bi-check2 me-1"></i>設定を保存</button>
    <button type="submit" name="action" value="generate" class="btn btn-outline-primary" onclick="return confirm('保存した設定に基づき、表示期間内の予約枠を一括生成します。既存枠と重複する時間帯はスキップされます。よろしいですか？');">
      <i class="bi bi-calendar-plus me-1"></i>保存して予約枠を生成
    </button>
  </div>
</form>

@push('scripts')
<script>
(function () {
  function toggleRadio(name, wrapId, onValue) {
    document.querySelectorAll('input[name="' + name + '"]').forEach(r => {
      r.addEventListener('change', () => {
        const on = document.querySelector('input[name="' + name + '"]:checked')?.value === onValue;
        document.getElementById(wrapId)?.classList.toggle('d-none', !on);
      });
    });
  }
  toggleRadio('specific_dates_enabled', 'specific-dates-wrap', '1');
  toggleRadio('display_period_mode', 'display-range-wrap', 'range');

  document.querySelectorAll('.js-preset-custom').forEach(customInput => {
    const key = customInput.getAttribute('data-preset-group');
    const group = document.querySelector('[data-preset-group="' + key + '"]');
    if (!group) return;

    function syncPresetInput() {
      const checked = group.querySelector('input[type=radio]:checked');
      const val = checked ? checked.value : '';
      const allowAuto = customInput.hasAttribute('data-preset-allow-auto');
      const isCustom = val === 'custom';

      if (isCustom) {
        customInput.readOnly = false;
        customInput.classList.remove('bg-light');
        customInput.removeAttribute('aria-disabled');
        return;
      }

      if (allowAuto && val === 'auto') {
        customInput.readOnly = true;
        customInput.classList.add('bg-light');
        customInput.setAttribute('aria-disabled', 'true');
        return;
      }

      if (val && val !== 'custom') {
        customInput.value = val;
      }
      customInput.readOnly = true;
      customInput.classList.add('bg-light');
      customInput.setAttribute('aria-disabled', 'true');
    }

    group.querySelectorAll('input[type=radio]').forEach(r => r.addEventListener('change', syncPresetInput));
    syncPresetInput();
  });

  function bindSlotButtons(container, rowSel, addClass, removeClass, namePrefix) {
    container?.addEventListener('click', e => {
      const add = e.target.closest('.' + addClass);
      const rem = e.target.closest('.' + removeClass);
      if (add) {
        const slots = add.closest('.weekly-slots, .specific-date-slots');
        const row = add.closest(rowSel);
        const clone = row.cloneNode(true);
        clone.querySelectorAll('input').forEach(inp => { inp.value = ''; });
        slots.appendChild(clone);
      }
      if (rem) {
        const slots = rem.closest('.weekly-slots, .specific-date-slots');
        const rows = slots.querySelectorAll(rowSel);
        if (rows.length > 1) rem.closest(rowSel).remove();
      }
    });
  }
  bindSlotButtons(document.getElementById('event-schedule-settings-form'), '.weekly-slot-row', 'weekly-slot-add', 'weekly-slot-remove');
  bindSlotButtons(document.getElementById('event-schedule-settings-form'), '.specific-slot-row', 'specific-slot-add', 'specific-slot-remove');

  document.getElementById('specific-date-add')?.addEventListener('click', () => {
    const rows = document.getElementById('specific-dates-rows');
    const first = rows?.querySelector('.specific-date-row');
    if (!first || !rows) return;
    const idx = rows.querySelectorAll('.specific-date-row').length;
    const clone = first.cloneNode(true);
    clone.querySelectorAll('input').forEach(inp => {
      inp.value = '';
      const n = inp.getAttribute('name');
      if (n) inp.setAttribute('name', n.replace(/\[\d+\]/, '[' + idx + ']'));
    });
    rows.appendChild(clone);
  });
  document.getElementById('specific-dates-rows')?.addEventListener('click', e => {
    if (e.target.closest('.specific-date-remove')) {
      const rows = document.querySelectorAll('#specific-dates-rows .specific-date-row');
      if (rows.length > 1) e.target.closest('.specific-date-row').remove();
    }
  });

  function syncStaffSelect() {
    const single = document.getElementById('staff_mode_single')?.checked;
    const wrap = document.getElementById('schedule-staff-select-wrap');
    const sel = document.getElementById('schedule_staff_member_id');
    if (wrap && sel) {
      wrap.classList.toggle('opacity-50', !single);
      sel.disabled = !single;
    }
  }
  document.querySelectorAll('input[name=schedule_staff_mode]').forEach(r => r.addEventListener('change', syncStaffSelect));
  syncStaffSelect();
})();
</script>
@endpush