@extends('layouts.member')
@section('title', 'マイページ')
@section('content')
@php
  $showAnnouncements = (bool) ($coursePageSettings['show_announcements'] ?? true);
  $showCategoryFilter = (bool) ($coursePageSettings['show_category_filter'] ?? true);
  $showSearch = (bool) ($coursePageSettings['show_search'] ?? true);
  $displayMode = ($coursePageSettings['display_mode'] ?? 'grid') === 'list' ? 'list' : 'grid';
  $fontSize = $coursePageSettings['font_size'] ?? 'default';
  $bgColor = $coursePageSettings['background_color'] ?? '#f8f9fa';
  $courseNameFontClass = $fontSize === 'small' ? 'small' : ($fontSize === 'large' ? 'fs-5' : '');
@endphp

<style>
  .member-course-page-wrap {
    background: {{ $bgColor }};
    margin: -1.5rem -0.75rem 0;
    padding: 1.25rem 0.75rem 1.5rem;
    border-radius: 10px;
  }
  .member-course-filters .form-select,
  .member-course-filters .form-control { max-width: 100%; }
  .member-announcements-top-btn {
    min-width: min(100%, 300px);
    padding: 0.7rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
</style>

<div class="member-course-page-wrap">
@if(Route::has('member.announcements'))
  <div class="d-flex justify-content-center mb-4">
    <a href="{{ member_portal_route('member.announcements', ['slug' => $site->slug]) }}" class="btn btn-primary member-announcements-top-btn">
      <i class="bi bi-megaphone me-2"></i>お知らせ
    </a>
  </div>
@endif

@if($showCategoryFilter || $showSearch)
  <form method="GET" class="member-course-filters mb-4">
    <div class="row g-2 align-items-end">
      @if($showCategoryFilter && count($categoryOptions) > 0)
      <div class="col-md-4">
        <label class="form-label small text-muted mb-1">カテゴリ</label>
        <select name="category" class="form-select form-select-sm">
          <option value="">全て</option>
          @foreach($categoryOptions as $catId => $catName)
            <option value="{{ $catId }}" @selected((string) $catId === (string) $selectedCategory)>{{ $catName }}</option>
          @endforeach
        </select>
      </div>
      @endif
      @if($showSearch)
      <div class="col-md-6">
        <label class="form-label small text-muted mb-1">検索</label>
        <div class="input-group input-group-sm">
          <input type="text" name="q" class="form-control" value="{{ $search }}" placeholder="コース名で検索">
          <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
        </div>
      </div>
      @endif
      <div class="col-md-2">
        <button class="btn btn-primary btn-sm w-100" type="submit">適用</button>
      </div>
    </div>
  </form>
@endif

@if($showAnnouncements)
@if(($announcements ?? collect())->isNotEmpty())
<div class="card shadow-sm mb-4">
  <div class="card-header bg-white fw-semibold">お知らせ</div>
  <div class="list-group list-group-flush">
    @foreach($announcements as $announcement)
      <div class="list-group-item">
        <div class="d-flex justify-content-between gap-2">
          <div class="fw-semibold">{{ $announcement->title }}</div>
          <div class="text-muted small">{{ $announcement->published_at?->format('Y/m/d') }}</div>
        </div>
        @if($announcement->body)
          @include('member.partials._announcement_body', ['html' => $announcement->body, 'class' => 'mt-2'])
        @endif
      </div>
    @endforeach
  </div>
</div>
@endif
@endif

@if($catalogRows->isEmpty())
<div class="alert alert-info mb-0">
  表示できるコースがありません。コースが付与されていない場合は、各コースの<strong>未購入者へのオファー設定</strong>で「常時表示」または「期間限定」を有効にしてください。
</div>
@elseif($displayMode === 'list')
<div class="d-grid gap-3">
  @foreach($catalogRows as $row)
    @include('member.partials._course_catalog_card', ['row' => $row, 'courseNameFontClass' => $courseNameFontClass, 'colClass' => 'col-12'])
  @endforeach
</div>
@else
<div class="row g-3">
  @foreach($catalogRows as $row)
    @include('member.partials._course_catalog_card', ['row' => $row, 'courseNameFontClass' => $courseNameFontClass, 'colClass' => 'col-md-6 col-lg-4'])
  @endforeach
</div>
@endif
</div>
@endsection