@php
  $mapsToLabel = [
    'name' => '名前',
    'email' => 'メール',
    'phone' => '電話',
    'custom' => '追加項目',
  ];
  $inputTypeOptionLabels = \App\Models\EventBookingFormField::inputTypeOptionLabels();
@endphp

<div class="card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-2">申込フォーム項目</h2>
    <p class="text-muted small mb-3">
      公開予約フォームに表示する項目を設定します。<strong>フォーム利用</strong>で出し分け、<strong>必須</strong>で入力必須にできます。
      お名前・メールアドレスは申込処理に必要なため、常にフォームに表示されます（メールは必須固定）。
      カスタム項目は行末から追加・削除できます。
    </p>

    <form method="POST" action="{{ route('event.workspace.booking-fields.update', $event) }}" id="booking-fields-form">
      @csrf
      @method('PUT')
      <input type="hidden" name="field_order" id="field_order" value="{{ $bookingFormFields->pluck('id')->implode(',') }}">

      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th style="width:44px" class="text-muted small" title="表示順">順</th>
              <th>名称</th>
              <th style="width:7rem">キー</th>
              <th style="width:5rem">格納先</th>
              <th style="width:5rem" class="text-center">フォーム利用</th>
              <th style="width:5rem" class="text-center">必須</th>
              <th style="width:12rem">入力形式</th>
              <th>初期値・選択肢</th>
              <th style="width:3rem"></th>
            </tr>
          </thead>
          <tbody id="booking-fields-tbody">
            @foreach($bookingFormFields as $f)
              @php
                $optionsText = '';
                if (is_array($f->options_json) && count($f->options_json)) {
                  $optionsText = implode("\n", $f->options_json);
                }
                $coreLocked = $f->maps_to === 'email';
                $nameLocked = $f->maps_to === 'name';
              @endphp
              <tr data-field-id="{{ $f->id }}">
                <td class="text-nowrap">
                  <button type="button" class="btn btn-sm btn-outline-secondary btn-move-up py-0" title="上へ"><i class="bi bi-chevron-up"></i></button>
                  <button type="button" class="btn btn-sm btn-outline-secondary btn-move-down py-0" title="下へ"><i class="bi bi-chevron-down"></i></button>
                </td>
                <td>
                  <input type="text" class="form-control form-control-sm" name="fields[{{ $f->id }}][label]" value="{{ old('fields.'.$f->id.'.label', $f->label) }}" maxlength="200" required>
                </td>
                <td><code class="small">{{ $f->field_key }}</code></td>
                <td><span class="small text-muted">{{ $mapsToLabel[$f->maps_to] ?? $f->maps_to }}</span></td>
                <td class="text-center">
                  @if($coreLocked || $nameLocked)
                    <input type="hidden" name="fields[{{ $f->id }}][form_enabled]" value="1">
                    <input class="form-check-input" type="checkbox" checked disabled title="申込に必要な項目です">
                  @else
                    <input type="hidden" name="fields[{{ $f->id }}][form_enabled]" value="0">
                    <input class="form-check-input js-form-enabled" type="checkbox" name="fields[{{ $f->id }}][form_enabled]" value="1" {{ old('fields.'.$f->id.'.form_enabled', $f->form_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                  @endif
                </td>
                <td class="text-center">
                  @if($coreLocked)
                    <input type="hidden" name="fields[{{ $f->id }}][is_required]" value="1">
                    <input class="form-check-input" type="checkbox" checked disabled title="必須です">
                  @else
                    <input type="hidden" name="fields[{{ $f->id }}][is_required]" value="0">
                    <input class="form-check-input js-is-required" type="checkbox" name="fields[{{ $f->id }}][is_required]" value="1" {{ old('fields.'.$f->id.'.is_required', $f->is_required ? '1' : '0') === '1' ? 'checked' : '' }} {{ ($f->form_enabled || $nameLocked) ? '' : 'disabled' }}>
                  @endif
                </td>
                <td>
                  <select class="form-select form-select-sm" name="fields[{{ $f->id }}][input_type]">
                    @foreach(\App\Models\EventBookingFormField::allowedInputTypes() as $it)
                      <option value="{{ $it }}" {{ old('fields.'.$f->id.'.input_type', $f->input_type) === $it ? 'selected' : '' }}>{{ $inputTypeOptionLabels[$it] ?? $it }}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <input type="text" class="form-control form-control-sm mb-1" name="fields[{{ $f->id }}][default_value]" value="{{ old('fields.'.$f->id.'.default_value', $f->default_value) }}" maxlength="500" placeholder="初期値">
                  <textarea class="form-control form-control-sm" name="fields[{{ $f->id }}][options_lines]" rows="2" placeholder="リスト形式のとき：1行に1つ">{{ old('fields.'.$f->id.'.options_lines', $optionsText) }}</textarea>
                </td>
                <td class="text-end">
                  @if(! $f->is_preset)
                    <button type="button" class="btn btn-sm btn-outline-danger" title="削除" data-bs-toggle="modal" data-bs-target="#deleteBookingFieldModal{{ $f->id }}"><i class="bi bi-trash"></i></button>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div class="d-flex flex-wrap gap-2 align-items-center mt-2">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-1"></i>保存</button>
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addBookingFieldModal"><i class="bi bi-plus-lg me-1"></i>項目追加</button>
        <a href="{{ route('event.workspace.show', [$event, 'booking-form']) }}" class="btn btn-outline-secondary">申込フォーム（公開設定）へ</a>
      </div>
      <p class="text-muted small mt-2 mb-0">行の <strong>↑↓</strong> で表示順を変えてから保存すると、並びが反映されます。</p>
    </form>
  </div>
</div>

@foreach($bookingFormFields->where('is_preset', false) as $f)
  <div class="modal fade" id="deleteBookingFieldModal{{ $f->id }}" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">項目を削除</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body small">「{{ $f->label }}」（{{ $f->field_key }}）を削除しますか？</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <form method="POST" action="{{ route('event.workspace.booking-fields.destroy', [$event, $f->id]) }}" class="d-inline">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">削除する</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endforeach

<div class="modal fade" id="addBookingFieldModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="POST" action="{{ route('event.workspace.booking-fields.store', $event) }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">カスタム項目を追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label fw-semibold">名称</label>
            <input type="text" name="label" class="form-control" maxlength="200" required>
          </div>
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="set_field_key" value="1" id="add_booking_set_field_key">
            <label class="form-check-label" for="add_booking_set_field_key">キーを自分で設定する</label>
            <div class="form-text">オフのときはシステムが自動で一意のキーを付けます。</div>
          </div>
          <div class="mb-2 d-none" id="add_booking_field_key_wrap">
            <label class="form-label fw-semibold">キー</label>
            <input type="text" name="field_key" class="form-control" id="add_booking_field_key" pattern="[a-z][a-z0-9_]*" maxlength="64" disabled placeholder="例: company_name">
          </div>
          <div class="mb-2">
            <label class="form-label fw-semibold">入力形式</label>
            <select name="input_type" class="form-select">
              @foreach(\App\Models\EventBookingFormField::allowedInputTypes() as $it)
                <option value="{{ $it }}">{{ $inputTypeOptionLabels[$it] ?? $it }}</option>
              @endforeach
            </select>
          </div>
          <div class="form-check mt-2">
            <input type="hidden" name="form_enabled" value="0">
            <input class="form-check-input" type="checkbox" name="form_enabled" value="1" id="add_booking_form_enabled" checked>
            <label class="form-check-label" for="add_booking_form_enabled">フォームで利用する</label>
          </div>
          <div class="form-check">
            <input type="hidden" name="is_required" value="0">
            <input class="form-check-input" type="checkbox" name="is_required" value="1" id="add_booking_is_required">
            <label class="form-check-label" for="add_booking_is_required">入力必須</label>
          </div>
          <div class="mb-2 mt-2">
            <label class="form-label">初期値（任意）</label>
            <input type="text" name="default_value" class="form-control" maxlength="500">
          </div>
          <div class="mb-0">
            <label class="form-label">選択肢（任意・1行1件）</label>
            <textarea name="options_lines" class="form-control" rows="3" placeholder="リスト形式のとき：1行に1つ"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-primary">追加する</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
(function () {
  const tbody = document.getElementById('booking-fields-tbody');
  const orderInput = document.getElementById('field_order');
  const form = document.getElementById('booking-fields-form');
  if (!tbody || !orderInput || !form) return;

  function refreshOrder() {
    const ids = Array.from(tbody.querySelectorAll('tr[data-field-id]')).map((tr) => tr.getAttribute('data-field-id'));
    orderInput.value = ids.join(',');
  }

  function syncRequiredState(tr) {
    const fe = tr.querySelector('.js-form-enabled');
    const rq = tr.querySelector('.js-is-required');
    if (!fe || !rq) return;
    if (fe.checked) {
      rq.removeAttribute('disabled');
    } else {
      rq.checked = false;
      rq.setAttribute('disabled', 'disabled');
    }
  }

  tbody.querySelectorAll('tr[data-field-id]').forEach((tr) => syncRequiredState(tr));
  tbody.addEventListener('change', (e) => {
    if (e.target && e.target.classList.contains('js-form-enabled')) {
      syncRequiredState(e.target.closest('tr'));
    }
  });

  tbody.addEventListener('click', (e) => {
    const btn = e.target.closest('.btn-move-up, .btn-move-down');
    if (!btn || !tbody.contains(btn)) return;
    const tr = btn.closest('tr');
    if (!tr) return;
    if (btn.classList.contains('btn-move-up')) {
      const prev = tr.previousElementSibling;
      if (prev) tbody.insertBefore(tr, prev);
    } else {
      const next = tr.nextElementSibling;
      if (next) tbody.insertBefore(next, tr);
    }
    refreshOrder();
  });

  form.addEventListener('submit', () => refreshOrder());
  refreshOrder();
})();

(function () {
  const modal = document.getElementById('addBookingFieldModal');
  const keyToggle = document.getElementById('add_booking_set_field_key');
  const keyWrap = document.getElementById('add_booking_field_key_wrap');
  const keyInput = document.getElementById('add_booking_field_key');
  if (!modal || !keyToggle || !keyWrap || !keyInput) return;

  function syncAddFieldKeyUi() {
    const on = keyToggle.checked;
    keyWrap.classList.toggle('d-none', !on);
    keyInput.disabled = !on;
    if (!on) {
      keyInput.value = '';
      keyInput.removeAttribute('required');
    } else {
      keyInput.setAttribute('required', 'required');
    }
  }

  keyToggle.addEventListener('change', syncAddFieldKeyUi);
  modal.addEventListener('show.bs.modal', function () {
    keyToggle.checked = false;
    syncAddFieldKeyUi();
  });
  syncAddFieldKeyUi();
})();
</script>
@endpush