@extends('layouts.member')
@section('title', 'コース一覧プレビュー')
@section('content')
@php
  $showTopMessage = (bool) ($previewShowTopMessage ?? true);
  $fontSize = $previewFontSize ?? 'default';
  $bgColor = $previewBgColor ?? '#f8f9fa';
  $displayMode = ($previewDisplayMode ?? 'grid') === 'list' ? 'list' : 'grid';
  $courseNameFontClass = $fontSize === 'small' ? 'small' : ($fontSize === 'large' ? 'fs-5' : '');
@endphp

<div class="alert alert-warning border-warning mb-3">
  <strong>プレビュー表示</strong> — 会員のコース一覧（トップ）の見え方を確認しています。未保存の内容の場合があります。
</div>

<style>
  .member-course-page-wrap {
    background: {{ $bgColor }};
    margin: -1.5rem -0.75rem 0;
    padding: 1.25rem 0.75rem 1.5rem;
    border-radius: 10px;
  }
</style>

<div class="member-course-page-wrap">
  <div class="d-flex justify-content-center mb-4">
    <span class="btn btn-primary disabled" style="min-width:min(100%,300px);padding:0.7rem 3rem;font-size:1.1rem;font-weight:600;"><i class="bi bi-megaphone me-2"></i>お知らせ</span>
  </div>

  <div class="card shadow-sm border-dashed">
    <div class="card-body text-muted small text-center py-4">
      コースの結合一覧はプレビューでは省略しています。説明文・背景色・コース名のサイズ・表示形式を確認してください。
    </div>
  </div>

  @if($displayMode === 'list')
    <div class="d-grid gap-3 mt-3">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="h6 mb-1 {{ $courseNameFontClass }}">サンプル・コースの結合 A</h2>
          <p class="text-muted small mb-0">含むコース: 2件</p>
        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="h6 mb-1 {{ $courseNameFontClass }}">サンプル・コースの結合 B</h2>
          <p class="text-muted small mb-0">含むコース: 1件</p>
        </div>
      </div>
    </div>
  @else
    <div class="row g-3 mt-1">
      <div class="col-md-6">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h2 class="h6 {{ $courseNameFontClass }}">サンプル・コースの結合 A</h2>
            <p class="text-muted small mb-0">含むコース: 2件</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h2 class="h6 {{ $courseNameFontClass }}">サンプル・コースの結合 B</h2>
            <p class="text-muted small mb-0">含むコース: 1件</p>
          </div>
        </div>
      </div>
    </div>
  @endif
</div>

@include('member.partials._site_footer', [
  'site' => $site,
  'footerSettings' => [
    'footer_bg_color' => ($previewFooterBgTransparent ?? false) ? 'transparent' : ($previewFooterBg ?? '#f8f9fa'),
    'footer_text_color' => $previewFooterText ?? '#6c757d',
    'footer_menu_enabled' => (bool) ($previewFooterMenuEnabled ?? false),
    'footer_menus' => is_array($previewFooterMenus ?? null) ? $previewFooterMenus : [],
  ],
])
@endsection