@php
  $eventModel = $event ?? null;
  $feeType = old('participation_fee_type', $eventModel->participation_fee_type ?? 'free');
  $limitedOn = (bool) old('limited_price_enabled', $eventModel->limited_price_enabled ?? false);
  $reminderOn = old('reminder_enabled', $eventModel->reminder_enabled ?? false);
  $reminderOn = $reminderOn === '1' || $reminderOn === 1 || $reminderOn === true;
  $duplicateAllow = old('allow_duplicate_booking', $eventModel->allow_duplicate_booking ?? false);
  $duplicateAllow = $duplicateAllow === '1' || $duplicateAllow === 1 || $duplicateAllow === true;

  $limitedRows = old('limited_prices');
  if ($limitedRows === null && $eventModel && is_array($eventModel->limited_prices)) {
      $limitedRows = [];
      foreach ($eventModel->limited_prices as $row) {
          if (! is_array($row)) {
              continue;
          }
          $starts = $row['starts_at'] ?? null;
          $ends = $row['ends_at'] ?? null;
          $limitedRows[] = [
              'starts_at' => $starts ? \Carbon\Carbon::parse($starts)->timezone(config('app.timezone'))->format('Y-m-d\\TH:i') : '',
              'ends_at' => $ends ? \Carbon\Carbon::parse($ends)->timezone(config('app.timezone'))->format('Y-m-d\\TH:i') : '',
              'amount' => $row['amount'] ?? '',
          ];
      }
  }
  if (! is_array($limitedRows) || $limitedRows === []) {
      $limitedRows = [['starts_at' => '', 'ends_at' => '', 'amount' => '']];
  }

  $accountsJson = ($deliveryAccounts ?? collect())->map(fn ($a) => [
      'id' => $a->id,
      'name' => $a->name,
      'from_name' => $a->from_name,
      'from_email' => $a->from_email,
  ])->values();
@endphp

<div class="mb-3">
  <label class="form-label fw-semibold">管理名称</label>
  <input type="text" name="admin_name" class="form-control @error('admin_name') is-invalid @enderror" value="{{ old('admin_name', $eventModel->admin_name ?? '') }}" maxlength="200" placeholder="管理画面での識別用（任意）">
  @error('admin_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="row mb-3 align-items-center">
  <div class="col-md-3">
    <label class="form-label fw-semibold mb-0">参加費 <span class="text-danger">*</span></label>
  </div>
  <div class="col-md-9">
    <select name="participation_fee_type" id="participation_fee_type" class="form-select @error('participation_fee_type') is-invalid @enderror" required>
      <option value="free" @selected($feeType === 'free')>無料</option>
      <option value="paid" @selected($feeType === 'paid')>有料</option>
    </select>
    @error('participation_fee_type')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
  </div>
</div>

<div id="paid-fee-wrap" class="mb-3 {{ $feeType === 'paid' ? '' : 'd-none' }}">
  <div class="row mb-2 align-items-center">
    <div class="col-md-3">
      <label class="form-label fw-semibold mb-0">参加費（円） <span class="text-danger">*</span></label>
    </div>
    <div class="col-md-9">
      <div class="input-group" style="max-width: 280px;">
        <input type="number" name="participation_fee_amount" id="participation_fee_amount" class="form-control @error('participation_fee_amount') is-invalid @enderror" value="{{ old('participation_fee_amount', $eventModel->participation_fee_amount ?? '') }}" min="1" max="99999999">
        <span class="input-group-text">円</span>
      </div>
      @error('participation_fee_amount')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" name="limited_price_enabled" value="1" id="limited_price_enabled" {{ $limitedOn ? 'checked' : '' }}>
    <label class="form-check-label" for="limited_price_enabled">期間限定価格を指定する</label>
  </div>
  <div id="limited-prices-wrap" class="{{ $limitedOn ? '' : 'd-none' }}">
    @error('limited_prices')<div class="text-danger small mb-2">{{ $message }}</div>@enderror
    <div id="limited-prices-rows">
      @foreach($limitedRows as $i => $row)
      <div class="limited-price-row border rounded p-2 mb-2 bg-light" data-index="{{ $i }}">
        <div class="row g-2 align-items-center">
          <div class="col-md-4">
            <label class="form-label small mb-0">開始</label>
            <input type="datetime-local" name="limited_prices[{{ $i }}][starts_at]" class="form-control form-control-sm" value="{{ $row['starts_at'] ?? '' }}">
          </div>
          <div class="col-md-1 text-center small text-muted pt-4">から</div>
          <div class="col-md-4">
            <label class="form-label small mb-0">終了</label>
            <input type="datetime-local" name="limited_prices[{{ $i }}][ends_at]" class="form-control form-control-sm" value="{{ $row['ends_at'] ?? '' }}">
          </div>
          <div class="col-md-2">
            <label class="form-label small mb-0">価格</label>
            <div class="input-group input-group-sm">
              <input type="number" name="limited_prices[{{ $i }}][amount]" class="form-control" value="{{ $row['amount'] ?? '' }}" min="1">
              <span class="input-group-text">円</span>
            </div>
          </div>
          <div class="col-md-1 pt-4">
            <button type="button" class="btn btn-sm btn-outline-danger limited-price-remove" title="削除">削除</button>
          </div>
        </div>
      </div>
      @endforeach
    </div>
    <button type="button" class="btn btn-sm btn-outline-success" id="limited-price-add">追加</button>
  </div>
</div>

<div class="row mb-3 align-items-center">
  <div class="col-md-3">
    <label class="form-label fw-semibold mb-0">重複申込</label>
  </div>
  <div class="col-md-9">
    <select name="allow_duplicate_booking" class="form-select @error('allow_duplicate_booking') is-invalid @enderror">
      <option value="0" @selected(! $duplicateAllow)>禁止する</option>
      <option value="1" @selected($duplicateAllow)>許可する</option>
    </select>
    @error('allow_duplicate_booking')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
  </div>
</div>

<div class="row mb-3 align-items-center">
  <div class="col-md-3">
    <label class="form-label fw-semibold mb-0">リマインダ配信</label>
  </div>
  <div class="col-md-9">
    <select name="reminder_enabled" id="reminder_enabled" class="form-select @error('reminder_enabled') is-invalid @enderror">
      <option value="0" @selected(! $reminderOn)>しない</option>
      <option value="1" @selected($reminderOn)>する</option>
    </select>
    <div class="form-text">「する」の場合、サーバ側で <code>PUTAGE_EVENT_REMINDERS_ENABLED=true</code> も必要です。</div>
    @error('reminder_enabled')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
  </div>
</div>

<div id="reminder-account-wrap" class="{{ $reminderOn ? '' : 'd-none' }}">
  <div class="row mb-3 align-items-center">
    <div class="col-md-3">
      <label class="form-label fw-semibold mb-0">連携配信アカウント <span class="text-danger">*</span></label>
    </div>
    <div class="col-md-9">
      @if(($deliveryAccounts ?? collect())->isEmpty())
        <div class="alert alert-warning small mb-0 py-2">
          メール送信元とLINE連携が両方設定済みの送信用アカウントがありません。
          <a href="{{ route('setting.setup') }}">初期設定</a> または
          <a href="{{ route('account.index') }}">送信用アカウント</a> で設定してください。
        </div>
      @else
        <select name="delivery_account_id" id="delivery_account_id" class="form-select @error('delivery_account_id') is-invalid @enderror">
          <option value="">選択してください</option>
          @foreach($deliveryAccounts as $acc)
            <option value="{{ $acc->id }}" @selected((string) old('delivery_account_id', $eventModel->delivery_account_id ?? '') === (string) $acc->id)>{{ $acc->name }}</option>
          @endforeach
        </select>
      @endif
      @error('delivery_account_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-3">
      <label class="form-label fw-semibold mb-0">リマインダ送信者名 <span class="text-danger">*</span></label>
    </div>
    <div class="col-md-9">
      <input type="text" name="reminder_from_name" id="reminder_from_name" class="form-control @error('reminder_from_name') is-invalid @enderror" value="{{ old('reminder_from_name', $eventModel->reminder_from_name ?? '') }}" maxlength="200">
      @error('reminder_from_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-3">
      <label class="form-label fw-semibold mb-0">リマインダ送信者メール <span class="text-danger">*</span></label>
    </div>
    <div class="col-md-9">
      <input type="email" name="reminder_from_email" id="reminder_from_email" class="form-control @error('reminder_from_email') is-invalid @enderror" value="{{ old('reminder_from_email', $eventModel->reminder_from_email ?? '') }}" maxlength="191">
      @error('reminder_from_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
  </div>
</div>

@push('scripts')
<script>
(function () {
  const accounts = @json($accountsJson);
  const feeType = document.getElementById('participation_fee_type');
  const paidWrap = document.getElementById('paid-fee-wrap');
  const limitedChk = document.getElementById('limited_price_enabled');
  const limitedWrap = document.getElementById('limited-prices-wrap');
  const rowsEl = document.getElementById('limited-prices-rows');
  const addBtn = document.getElementById('limited-price-add');
  const reminderSel = document.getElementById('reminder_enabled');
  const reminderWrap = document.getElementById('reminder-account-wrap');
  const accountSel = document.getElementById('delivery_account_id');
  const fromName = document.getElementById('reminder_from_name');
  const fromEmail = document.getElementById('reminder_from_email');

  function togglePaid() {
    if (!feeType || !paidWrap) return;
    paidWrap.classList.toggle('d-none', feeType.value !== 'paid');
  }
  function toggleLimited() {
    if (!limitedChk || !limitedWrap) return;
    limitedWrap.classList.toggle('d-none', !limitedChk.checked);
  }
  function toggleReminder() {
    if (!reminderSel || !reminderWrap) return;
    reminderWrap.classList.toggle('d-none', reminderSel.value !== '1');
  }
  function fillFromAccount() {
    if (!accountSel || !fromName || !fromEmail) return;
    const id = parseInt(accountSel.value, 10);
    const acc = accounts.find(a => a.id === id);
    if (!acc) return;
    if (!fromName.value && acc.from_name) fromName.value = acc.from_name;
    if (!fromEmail.value && acc.from_email) fromEmail.value = acc.from_email;
  }
  function reindexLimitedRows() {
    if (!rowsEl) return;
    rowsEl.querySelectorAll('.limited-price-row').forEach((row, i) => {
      row.dataset.index = String(i);
      row.querySelectorAll('input').forEach(inp => {
        const m = inp.name.match(/^limited_prices\[\d+\]\[(\w+)\]$/);
        if (m) inp.name = 'limited_prices[' + i + '][' + m[1] + ']';
      });
    });
  }
  function bindRemove(btn) {
    btn.addEventListener('click', () => {
      const row = btn.closest('.limited-price-row');
      if (!row || !rowsEl) return;
      if (rowsEl.querySelectorAll('.limited-price-row').length <= 1) {
        row.querySelectorAll('input').forEach(i => { i.value = ''; });
        return;
      }
      row.remove();
      reindexLimitedRows();
    });
  }

  feeType?.addEventListener('change', togglePaid);
  limitedChk?.addEventListener('change', toggleLimited);
  reminderSel?.addEventListener('change', toggleReminder);
  accountSel?.addEventListener('change', fillFromAccount);

  addBtn?.addEventListener('click', () => {
    const i = rowsEl.querySelectorAll('.limited-price-row').length;
    const div = document.createElement('div');
    div.className = 'limited-price-row border rounded p-2 mb-2 bg-light';
    div.innerHTML = `
      <div class="row g-2 align-items-center">
        <div class="col-md-4"><label class="form-label small mb-0">開始</label>
          <input type="datetime-local" name="limited_prices[${i}][starts_at]" class="form-control form-control-sm"></div>
        <div class="col-md-1 text-center small text-muted pt-4">から</div>
        <div class="col-md-4"><label class="form-label small mb-0">終了</label>
          <input type="datetime-local" name="limited_prices[${i}][ends_at]" class="form-control form-control-sm"></div>
        <div class="col-md-2"><label class="form-label small mb-0">価格</label>
          <div class="input-group input-group-sm">
            <input type="number" name="limited_prices[${i}][amount]" class="form-control" min="1">
            <span class="input-group-text">円</span></div></div>
        <div class="col-md-1 pt-4"><button type="button" class="btn btn-sm btn-outline-danger limited-price-remove">削除</button></div>
      </div>`;
    rowsEl.appendChild(div);
    bindRemove(div.querySelector('.limited-price-remove'));
  });

  rowsEl?.querySelectorAll('.limited-price-remove').forEach(bindRemove);
  togglePaid();
  toggleLimited();
  toggleReminder();
})();
</script>
@endpush