@extends('layouts.app')
@section('title', $site->name . ' - ページ設定')
@section('page-title', $site->name . ' - ページ設定')
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
会員サイトのページ設定（コースページ / レッスンページ / ログインページ / 固定ページ）を編集します。
@endsection
@section('content')
@php
  $tabs = [
    'course' => 'コースページ',
    'lesson' => 'レッスンページ',
    'login' => 'ログインページ',
    'fixed' => '固定ページ',
  ];
  $currentTab = in_array($tab ?? 'course', array_keys($tabs), true) ? $tab : 'course';
  $courseSettings = is_array($site->course_page_settings ?? null) ? $site->course_page_settings : [];
  $courseHeaderBg = old('course_page_header_bg_color', $courseSettings['header_bg_color'] ?? '#212529');
  $courseHeaderText = old('course_page_header_text_color', $courseSettings['header_text_color'] ?? '#ffffff');
  $courseLogoUrl = (string) ($courseSettings['header_logo_url'] ?? '');
  $courseLogoMode = old('course_page_logo_mode', $courseLogoUrl !== '' ? 'upload' : 'none');
  $courseMenusBase = is_array($courseSettings['header_menus'] ?? null) ? $courseSettings['header_menus'] : [];
  $courseMenusOld = old('course_page_header_menus');
  $courseMenus = is_array($courseMenusOld) ? $courseMenusOld : $courseMenusBase;
  if (! is_array($courseMenus)) $courseMenus = [];
  $courseMenus = array_values($courseMenus);
  if (count($courseMenus) === 0) {
      $courseMenus = [['mode' => 'none', 'label' => '', 'url' => '']];
  }
@endphp
<ul class="nav nav-tabs mb-3">
  @foreach($tabs as $tabKey => $tabLabel)
    <li class="nav-item">
      <a class="nav-link {{ $currentTab === $tabKey ? 'active' : '' }}" href="{{ route('site.page-settings', ['site' => $site, 'tab' => $tabKey]) }}">{{ $tabLabel }}</a>
    </li>
  @endforeach
</ul>

<form id="page-settings-form" method="POST" enctype="multipart/form-data" action="{{ route('site.page-settings.update', ['site' => $site, 'tab' => $currentTab]) }}">
  @csrf @method('PUT')

  @if($currentTab === 'course')
    <div class="card mb-4">
      <div class="card-header bg-white fw-semibold">サイトのヘッダ設定</div>
      <div class="card-body">
        <div class="row g-4">
          <div class="col-lg-6">
            <div style="max-width: 420px;">
              <div class="mb-3">
                <label class="form-label fw-semibold">ヘッダー色</label>
                <div class="input-group">
                  <span class="input-group-text p-0" style="width:52px;justify-content:center;">
                    <input type="color" name="course_page_header_bg_color" class="form-control form-control-color border-0" value="{{ $courseHeaderBg }}" data-sync-color="header_bg">
                  </span>
                  <input type="text" class="form-control" value="{{ $courseHeaderBg }}" data-sync-text="header_bg" inputmode="text" autocomplete="off">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label fw-semibold">ヘッダー文字色</label>
                <div class="input-group">
                  <span class="input-group-text p-0" style="width:52px;justify-content:center;">
                    <input type="color" name="course_page_header_text_color" class="form-control form-control-color border-0" value="{{ $courseHeaderText }}" data-sync-color="header_text">
                  </span>
                  <input type="text" class="form-control" value="{{ $courseHeaderText }}" data-sync-text="header_text" inputmode="text" autocomplete="off">
                </div>
              </div>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-header-match-footer">
                <i class="bi bi-arrow-down-up me-1"></i>フッターと合わせる
              </button>
              <div class="form-text">フッター色・フッター文字色をヘッダーにコピーします（フッター背景が透明のときは文字色のみ）。</div>
            </div>
          </div>
          <div class="col-lg-6">
            <label class="form-label fw-semibold">サイトのロゴ画像設定</label>
            <select name="course_page_logo_mode" class="form-select" id="course_page_logo_mode">
              <option value="none" @selected($courseLogoMode === 'none')>設定しない（デフォルト）</option>
              <option value="upload" @selected($courseLogoMode === 'upload')>設定する</option>
            </select>
            @if($courseLogoUrl !== '')
              <div class="mt-2">
                <img src="{{ $courseLogoUrl }}" alt="" style="height:36px;width:auto;object-fit:contain;" class="border rounded bg-white px-2 py-1">
              </div>
            @endif
            <div class="mt-2" id="course_page_logo_file_wrap" style="{{ $courseLogoMode === 'upload' ? '' : 'display:none;' }}">
              <div class="card border bg-light">
                <div class="card-body">
                  <input type="file" name="course_page_logo_file" class="form-control" id="course_page_logo_file" accept=".png,.jpg,.jpeg,.gif,.webp">
                  <div class="form-text">
                    @if($courseLogoUrl !== '')
                      別の画像を選んで保存すると、現在のロゴを差し替えます。png / jpg / gif / webp、5MB以下。
                    @else
                      png / jpg / gif / webp、5MB以下。
                    @endif
                  </div>
                  @if($courseLogoUrl !== '')
                    <label class="form-check mt-2 mb-0">
                      <input class="form-check-input" type="checkbox" name="course_page_logo_remove" value="1" id="course_page_logo_remove">
                      <span class="form-check-label">ロゴを削除する（画像を選ばずに消す場合のみ）</span>
                    </label>
                  @endif
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 pt-2">
            <label class="form-label fw-semibold">ヘッダーメニュー（ヘッダーにリンクを置く）</label>
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div class="text-muted small">複数追加できます（最大5件）。</div>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="add-header-menu"><i class="bi bi-plus-lg"></i> 追加</button>
            </div>
            <div id="header-menus" class="d-grid gap-2">
              @foreach($courseMenus as $idx => $menu)
                @php
                  $mMode = (string) ($menu['mode'] ?? 'none');
                  $mLabel = (string) ($menu['label'] ?? '');
                  $mUrl = (string) ($menu['url'] ?? '');
                  $mFixedId = (int) ($menu['fixed_page_id'] ?? 0);
                @endphp
                <div class="card border header-menu-row">
                  <div class="card-body py-3">
                    <div class="row g-2 align-items-end">
                      <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">種類</label>
                        <select name="course_page_header_menus[{{ $idx }}][mode]" class="form-select header-menu-mode">
                          <option value="url" @selected($mMode === 'url')>URL</option>
                          <option value="announcements" @selected($mMode === 'announcements')>お知らせ一覧</option>
                          <option value="fixed_page" @selected($mMode === 'fixed_page')>固定ページ</option>
                        </select>
                      </div>
                      <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">表示名</label>
                        <input type="text" name="course_page_header_menus[{{ $idx }}][label]" class="form-control header-menu-label" value="{{ $mLabel }}" placeholder="例：詳細を確認">
                      </div>
                      <div class="col-md-5 header-menu-url-col" style="{{ $mMode === 'url' ? '' : 'display:none;' }}">
                        <label class="form-label small text-muted mb-1">URL</label>
                        <input type="text" name="course_page_header_menus[{{ $idx }}][url]" class="form-control header-menu-url" value="{{ $mUrl }}" placeholder="https://...">
                      </div>
                      <div class="col-md-5 header-menu-fixed-col" style="{{ $mMode === 'fixed_page' ? '' : 'display:none;' }}">
                        <label class="form-label small text-muted mb-1">固定ページ</label>
                        <select name="course_page_header_menus[{{ $idx }}][fixed_page_id]" class="form-select header-menu-fixed">
                          <option value="">— 選択 —</option>
                          @foreach($fixedPagesForMenu ?? [] as $fp)
                            <option value="{{ $fp->id }}" @selected($mFixedId === (int) $fp->id)>{{ $fp->title }}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="col-md-1 d-grid">
                        <button type="button" class="btn btn-outline-danger btn-sm remove-header-menu" title="削除"><i class="bi bi-trash"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
            <div class="form-text">「お知らせ一覧」「固定ページ」は会員サイト内の公開ページへ遷移します（固定ページは公開状態のもののみ選択できます）。</div>
          </div>
        </div>
      </div>
    </div>

    @include('site.partials._course_list_page_settings', [
      'site' => $site,
      'courseSettings' => $courseSettings,
    ])

    @include('site.partials._course_footer_settings', [
      'courseSettings' => $courseSettings,
      'fixedPagesForMenu' => $fixedPagesForMenu ?? collect(),
    ])

  @elseif($currentTab === 'lesson')
    @include('site.partials._page_settings_lesson_tab', ['site' => $site])
  @elseif($currentTab === 'login')
    @include('site.partials._page_settings_login_tab', ['site' => $site])
  @else
    @include('site.partials._page_settings_fixed_tab', ['site' => $site, 'fixedPages' => $fixedPages ?? collect()])
  @endif

  @if(in_array($currentTab, ['lesson', 'login'], true))
    <button type="submit" class="btn btn-primary mb-4" id="page-settings-submit">保存する</button>
  @elseif($currentTab === 'course')
    <div class="d-flex flex-wrap gap-2 mb-4">
      <button type="submit" class="btn btn-primary" id="page-settings-submit">保存</button>
      <button type="button" class="btn btn-outline-primary" id="btn-course-page-preview"><i class="bi bi-eye me-1"></i>プレビュー</button>
    </div>
  @endif
</form>

@if($currentTab === 'course')
@include('site.partials._course_page_preview_form', ['site' => $site])
@endif

@if($currentTab === 'course')
<script>
  (function () {
    const pageForm = document.getElementById('page-settings-form');
    const syncColorsToNamedInputs = () => {
      document.querySelectorAll('[data-sync-color]').forEach((colorEl) => {
        if (colorEl.disabled) return;
        const key = colorEl.getAttribute('data-sync-color');
        const textEl = document.querySelector('[data-sync-text="' + key + '"]');
        if (textEl && !textEl.disabled) {
          const v = textEl.value.trim();
          if (/^#[0-9a-fA-F]{3,8}$/.test(v)) colorEl.value = v;
        }
      });
    };
    pageForm?.addEventListener('submit', syncColorsToNamedInputs);

    const previewBtn = document.getElementById('btn-course-page-preview');
    const previewForm = document.getElementById('course-page-preview-form');
    if (previewBtn && previewForm && pageForm) {
      previewBtn.addEventListener('click', () => {
        if (typeof tinymce !== 'undefined') tinymce.triggerSave();
        syncColorsToNamedInputs();
        const pick = (name) => pageForm.querySelector('[name="' + name + '"]');
        const setPrev = (id, name) => {
          const el = document.getElementById(id);
          const src = pick(name);
          if (el && src) el.value = src.type === 'checkbox' ? (src.checked ? '1' : '0') : src.value;
        };
        const editor = document.getElementById('dashboard_page_message_editor');
        document.getElementById('preview_dashboard_message').value = editor ? editor.value : '';
        setPrev('preview_show_top_message', 'course_page_show_top_message');
        setPrev('preview_bg_color', 'course_page_background_color');
        setPrev('preview_font_size', 'course_page_font_size');
        setPrev('preview_display_mode', 'course_page_display_mode');
        setPrev('preview_footer_bg', 'course_page_footer_bg_color');
        setPrev('preview_footer_text', 'course_page_footer_text_color');
        setPrev('preview_footer_menu_enabled', 'course_page_footer_menu_enabled');
        const t = document.getElementById('preview_footer_bg_transparent');
        if (t) t.value = pick('course_page_footer_bg_transparent')?.checked ? '1' : '0';
        previewForm.submit();
      });
    }

    // color <-> text sync (simple, no heavy UI)
    const isHex = (v) => /^#[0-9a-fA-F]{3,8}$/.test(String(v || '').trim());
    const getColorPair = (key) => {
      const colorEl = document.querySelector('[data-sync-color="' + key + '"]');
      const textEl = document.querySelector('[data-sync-text="' + key + '"]');
      if (textEl && !textEl.disabled) {
        const v = textEl.value.trim();
        if (isHex(v)) return v;
      }
      if (colorEl && !colorEl.disabled) return colorEl.value;
      return null;
    };
    const setColorPair = (key, hex) => {
      if (!isHex(hex)) return;
      const colorEl = document.querySelector('[data-sync-color="' + key + '"]');
      const textEl = document.querySelector('[data-sync-text="' + key + '"]');
      if (colorEl && !colorEl.disabled) colorEl.value = hex;
      if (textEl && !textEl.disabled) textEl.value = hex;
    };
    document.getElementById('btn-footer-match-header')?.addEventListener('click', () => {
      const headerBg = getColorPair('header_bg');
      const headerText = getColorPair('header_text');
      const transparentCb = document.getElementById('course_page_footer_bg_transparent');
      if (transparentCb?.checked) {
        transparentCb.checked = false;
        transparentCb.dispatchEvent(new Event('change'));
      }
      if (headerBg) setColorPair('footer_bg', headerBg);
      if (headerText) setColorPair('footer_text', headerText);
    });
    document.getElementById('btn-header-match-footer')?.addEventListener('click', () => {
      const transparentCb = document.getElementById('course_page_footer_bg_transparent');
      const footerBg = transparentCb?.checked ? null : getColorPair('footer_bg');
      const footerText = getColorPair('footer_text');
      if (footerBg) setColorPair('header_bg', footerBg);
      if (footerText) setColorPair('header_text', footerText);
    });
    document.querySelectorAll('[data-sync-color]').forEach((colorEl) => {
      const key = colorEl.getAttribute('data-sync-color');
      const textEl = document.querySelector('[data-sync-text="' + key + '"]');
      if (!textEl) return;
      colorEl.addEventListener('input', () => { textEl.value = colorEl.value; });
      textEl.addEventListener('input', () => {
        const v = textEl.value.trim();
        if (isHex(v)) colorEl.value = v;
      });
      textEl.addEventListener('blur', () => {
        const v = textEl.value.trim();
        if (!isHex(v)) textEl.value = colorEl.value;
      });
    });

    const logoMode = document.getElementById('course_page_logo_mode');
    const logoWrap = document.getElementById('course_page_logo_file_wrap');
    const logoFile = document.getElementById('course_page_logo_file');
    const logoRemove = document.getElementById('course_page_logo_remove');
    if (logoMode && logoWrap) {
      const sync = () => { logoWrap.style.display = (logoMode.value === 'upload') ? '' : 'none'; };
      logoMode.addEventListener('change', sync);
      sync();
    }
    if (logoFile && logoRemove) {
      logoFile.addEventListener('change', () => {
        if (logoFile.files && logoFile.files.length > 0) logoRemove.checked = false;
      });
    }
    const wrap = document.getElementById('header-menus');
    const addBtn = document.getElementById('add-header-menu');
    const max = 5;
    const syncRow = (row) => {
      const mode = row.querySelector('.header-menu-mode');
      const urlCol = row.querySelector('.header-menu-url-col');
      const fixedCol = row.querySelector('.header-menu-fixed-col');
      if (!mode) return;
      if (urlCol) urlCol.style.display = (mode.value === 'url') ? '' : 'none';
      if (fixedCol) fixedCol.style.display = (mode.value === 'fixed_page') ? '' : 'none';
    };
    const bindRow = (row) => {
      const mode = row.querySelector('.header-menu-mode');
      const rm = row.querySelector('.remove-header-menu');
      if (mode) mode.addEventListener('change', () => syncRow(row));
      if (rm) rm.addEventListener('click', () => { row.remove(); renumber(); });
      syncRow(row);
    };
    const renumber = () => {
      const rows = Array.from(wrap.querySelectorAll('.header-menu-row'));
      rows.forEach((row, i) => {
        row.querySelectorAll('select,input').forEach((el) => {
          const name = el.getAttribute('name') || '';
          el.setAttribute('name', name.replace(/course_page_header_menus\\[\\d+\\]/, 'course_page_header_menus[' + i + ']'));
        });
      });
      if (addBtn) addBtn.disabled = rows.length >= max;
    };
    if (wrap) {
      wrap.querySelectorAll('.header-menu-row').forEach(bindRow);
      renumber();
    }
    if (addBtn && wrap) {
      addBtn.addEventListener('click', () => {
        const rows = wrap.querySelectorAll('.header-menu-row');
        if (rows.length >= max) return;
        const idx = rows.length;
        const div = document.createElement('div');
        div.className = 'card border header-menu-row';
        div.innerHTML = `
          <div class="card-body py-3">
            <div class="row g-2 align-items-end">
              <div class="col-md-3">
                <label class="form-label small text-muted mb-1">種類</label>
                <select name="course_page_header_menus[${idx}][mode]" class="form-select header-menu-mode">
                  <option value="url">URL</option>
                  <option value="announcements">お知らせ一覧</option>
                  <option value="fixed_page">固定ページ</option>
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label small text-muted mb-1">表示名</label>
                <input type="text" name="course_page_header_menus[${idx}][label]" class="form-control header-menu-label" value="" placeholder="例：詳細を確認">
              </div>
              <div class="col-md-5 header-menu-url-col">
                <label class="form-label small text-muted mb-1">URL</label>
                <input type="text" name="course_page_header_menus[${idx}][url]" class="form-control header-menu-url" value="" placeholder="https://...">
              </div>
              <div class="col-md-5 header-menu-fixed-col" style="display:none;">
                <label class="form-label small text-muted mb-1">固定ページ</label>
                <select name="course_page_header_menus[${idx}][fixed_page_id]" class="form-select header-menu-fixed">
                  <option value="">— 選択 —</option>
                  @foreach($fixedPagesForMenu ?? [] as $fp)
                    <option value="{{ $fp->id }}">{{ $fp->title }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-1 d-grid">
                <button type="button" class="btn btn-outline-danger btn-sm remove-header-menu" title="削除"><i class="bi bi-trash"></i></button>
              </div>
            </div>
          </div>
        `;
        wrap.appendChild(div);
        div.classList.add('header-menu-row');
        bindRow(div);
        renumber();
      });
    }
  })();
</script>
@endif
@endsection