@extends('layouts.app')
@section('title', $event->name.' — 日程設定')
@section('page-title', $event->name)
@section('content')
@include('event.partials._workspace_toolbar')

<div class="row g-3 mb-3">
  @foreach([
    ['label' => '申込者数', 'value' => $bookingStats['total'], 'class' => 'text-primary'],
    ['label' => '確定', 'value' => $bookingStats['confirmed'], 'class' => 'text-success'],
    ['label' => '保留', 'value' => $bookingStats['pending'], 'class' => 'text-warning'],
    ['label' => 'キャンセル', 'value' => $bookingStats['cancelled'], 'class' => 'text-danger'],
  ] as $stat)
  <div class="col-md-3">
    <div class="card text-center"><div class="card-body py-3">
      <div class="fs-3 fw-bold {{ $stat['class'] }}">{{ $stat['value'] }}</div>
      <div class="text-muted small">{{ $stat['label'] }}</div>
    </div></div>
  </div>
  @endforeach
</div>

@include('event.partials._schedule_settings', [
  'event' => $event,
  'scheduleState' => $scheduleState,
  'staffMembers' => $staffMembers,
])

<details class="card mb-3">
  <summary class="card-header fw-semibold" style="cursor:pointer">手動で枠を追加・旧形式の一括生成</summary>
  <div class="card-body">
    <p class="small text-muted">通常は上の「保存して予約枠を生成」で十分です。個別調整や従来の日付範囲指定が必要なときだけ使います。</p>
    <div class="row g-3">
      <div class="col-lg-6">
        <form method="POST" action="{{ route('event.schedules.store', $event) }}" class="mb-4 pb-3 border-bottom">
          @csrf
          <h3 class="h6">1件追加</h3>
          <div class="row g-2">
            <div class="col-md-6"><label class="form-label small">開始</label><input type="datetime-local" name="start_at" class="form-control form-control-sm" required></div>
            <div class="col-md-6"><label class="form-label small">終了</label><input type="datetime-local" name="end_at" class="form-control form-control-sm" required></div>
            <div class="col-md-6"><label class="form-label small">定員</label><input type="number" name="capacity" class="form-control form-control-sm" min="1" placeholder="無制限は空白"></div>
            <div class="col-12"><button type="submit" class="btn btn-sm btn-outline-secondary">1件追加</button></div>
          </div>
        </form>
        <form method="POST" action="{{ route('event.schedules.generate', $event) }}">
          @csrf
          <h3 class="h6">日付範囲で一括生成（簡易）</h3>
          <div class="row g-2">
            <div class="col-md-6"><label class="form-label small">開始日</label><input type="date" name="date_from" class="form-control form-control-sm" required></div>
            <div class="col-md-6"><label class="form-label small">終了日</label><input type="date" name="date_to" class="form-control form-control-sm" required></div>
            <div class="col-12"><label class="form-label small">曜日（空なら全日）</label>
              <div class="d-flex flex-wrap gap-2">
                @foreach(['日'=>0,'月'=>1,'火'=>2,'水'=>3,'木'=>4,'金'=>5,'土'=>6] as $label => $d)
                <label class="form-check form-check-inline small"><input class="form-check-input" type="checkbox" name="weekdays[]" value="{{ $d }}"> {{ $label }}</label>
                @endforeach
              </div>
            </div>
            <div class="col-md-4"><label class="form-label small">開始時刻</label><input type="text" name="start_time" class="form-control form-control-sm" placeholder="10:00" required></div>
            <div class="col-md-4"><label class="form-label small">終了時刻</label><input type="text" name="end_time" class="form-control form-control-sm" placeholder="18:00" required></div>
            <div class="col-md-4"><label class="form-label small">定員</label><input type="number" name="per_slot_capacity" class="form-control form-control-sm" min="1" placeholder="空白で無制限"></div>
            <div class="col-12"><button type="submit" class="btn btn-sm btn-outline-secondary">一括生成（簡易）</button></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</details>

@php
  $scheduleCalPresenter = app(\App\Services\EventScheduleCalendarPresenter::class);
  $scheduleNow = now(config('app.timezone'));
@endphp
<div class="card mb-3" id="event-schedules-list-card">
  <div class="card-header py-3">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
      <h2 class="h5 mb-0 fw-semibold">予約枠一覧</h2>
      <div class="d-flex align-items-center gap-2">
        <span class="small text-muted">最大1000件</span>
        @if($schedules->isNotEmpty())
        <button type="submit" form="event-schedules-bulk-destroy-form" class="btn btn-sm btn-outline-danger d-none" id="btn-schedules-bulk-destroy" disabled data-sched-tab-action="table">
          <i class="bi bi-trash me-1"></i>選択を削除
        </button>
        @endif
      </div>
    </div>
    <ul class="nav nav-pills gap-1 p-1 bg-white rounded-3 border d-inline-flex" id="sched-slots-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="sched-tab-calendar" data-bs-toggle="tab" data-bs-target="#sched-pane-calendar" type="button" role="tab">
          <i class="bi bi-calendar3 me-1"></i>カレンダー
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="sched-tab-table" data-bs-toggle="tab" data-bs-target="#sched-pane-table" type="button" role="tab">
          <i class="bi bi-table me-1"></i>表で見る
        </button>
      </li>
    </ul>
  </div>
  <form id="event-schedules-bulk-destroy-form" method="POST" action="{{ route('event.schedules.bulk-destroy', $event) }}" class="d-none" aria-hidden="true" onsubmit="return confirm('選択した予約枠を削除しますか？\n紐づく申込データも削除されます。');">
    @csrf
  </form>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="sched-pane-calendar" role="tabpanel" aria-labelledby="sched-tab-calendar" tabindex="0">
      @include('event.partials._schedule_calendar', ['calendarEvents' => $calendarEvents, 'embedded' => true])
    </div>
    <div class="tab-pane fade" id="sched-pane-table" role="tabpanel" aria-labelledby="sched-tab-table" tabindex="0">
  <div class="card-body p-0 border-top" style="max-height:480px;overflow:auto">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light sticky-top">
        <tr>
          @if($schedules->isNotEmpty())
          <th class="ps-3 pe-0" style="width:2.5rem;">
            <input type="checkbox" class="form-check-input" id="schedule-check-all" title="表示中を全選択" aria-label="表示中を全選択">
          </th>
          @endif
          <th class="{{ $schedules->isEmpty() ? 'ps-3' : '' }}">状態</th>
          <th>日時</th>
          <th>定員 / 申込</th>
          <th class="text-end pe-3"></th>
        </tr>
      </thead>
      <tbody>
        @forelse($schedules as $s)
        @php
          $booked = (int) ($s->active_bookings_count ?? 0);
          $slotState = $scheduleCalPresenter->resolveState($s, $booked, $scheduleNow);
          $slotColors = $scheduleCalPresenter->colors($slotState);
        @endphp
        <tr class="schedule-row-{{ $slotState }}">
          <td class="ps-3 pe-0">
            <input type="checkbox" class="form-check-input schedule-row-check" form="event-schedules-bulk-destroy-form" name="schedule_ids[]" value="{{ $s->id }}" aria-label="選択">
          </td>
          <td><span class="badge text-bg-{{ $slotColors['badge'] }}">{{ $scheduleCalPresenter->stateLabel($slotState) }}</span></td>
          <td>
            <span class="fw-semibold">{{ $s->start_at?->timezone(config('app.timezone'))->format('Y/m/d H:i') }}</span>
            <span class="text-muted">〜 {{ $s->end_at?->timezone(config('app.timezone'))->format('H:i') }}</span>
          </td>
          <td>
            @if($s->capacity)
              <span class="{{ $booked >= (int)$s->capacity ? 'text-danger fw-semibold' : '' }}">{{ $booked }} / {{ $s->capacity }}名</span>
            @else
              <span class="text-muted">無制限</span>@if($booked > 0)<span class="ms-1">（{{ $booked }}件）</span>@endif
            @endif
          </td>
          <td class="text-end pe-3">
            <form method="POST" action="{{ route('event.schedules.destroy', [$event, $s]) }}" class="d-inline" onsubmit="return confirm('この予約枠を削除しますか？')">
              @csrf @method('DELETE')
              <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="5" class="text-center text-muted py-4">枠がありません。上で設定を保存し「予約枠を生成」を実行してください。</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  const checkAll = document.getElementById('schedule-check-all');
  const bulkBtn = document.getElementById('btn-schedules-bulk-destroy');
  const rowChecks = () => Array.from(document.querySelectorAll('.schedule-row-check'));
  function syncBulkUi() {
    const checks = rowChecks();
    const checked = checks.filter(c => c.checked);
    if (bulkBtn) {
      bulkBtn.disabled = checked.length === 0;
      const n = checked.length;
      bulkBtn.innerHTML = n > 0
        ? '<i class="bi bi-trash me-1"></i>選択を削除（' + n + '件）'
        : '<i class="bi bi-trash me-1"></i>選択を削除';
    }
    if (checkAll && checks.length) {
      checkAll.checked = checks.length > 0 && checked.length === checks.length;
      checkAll.indeterminate = checked.length > 0 && checked.length < checks.length;
    }
  }
  if (checkAll) {
    checkAll.addEventListener('change', function () {
      const on = checkAll.checked;
      rowChecks().forEach(c => { c.checked = on; });
      syncBulkUi();
    });
  }
  rowChecks().forEach(c => c.addEventListener('change', syncBulkUi));
  syncBulkUi();

  const tableTab = document.getElementById('sched-tab-table');
  const calendarTab = document.getElementById('sched-tab-calendar');
  function syncBulkBtnVisibility() {
    if (!bulkBtn) return;
    const onTable = tableTab?.classList.contains('active');
    bulkBtn.classList.toggle('d-none', !onTable);
    bulkBtn.classList.toggle('d-inline-block', onTable);
  }
  tableTab?.addEventListener('shown.bs.tab', syncBulkBtnVisibility);
  calendarTab?.addEventListener('shown.bs.tab', syncBulkBtnVisibility);
  syncBulkBtnVisibility();
})();
</script>
@endpush