@extends('layouts.app')
@section('title', '最新ニュース登録')

@section('content')
@php
    // ▼ 表示モードのラベル
    $modeLabel = [0=>'非表示', 1=>'公開', 2=>'下書き', 3=>'自動公開'];
@endphp

{{-- ▼ コンテンツヘッダー（パンくず） --}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-lg-6"><h1 class="m-0 text-dark">最新ニュース登録</h1></div>
      <div class="col-lg-6">
        <ol class="breadcrumb float-sm-right text-sm">
          <li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
          <li class="breadcrumb-item active">最新ニュース登録</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
<div class="container-fluid">

  {{-- ▼ フラッシュメッセージ --}}
  @if(session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
  @if(session('error'))   <div class="alert alert-danger">{{ session('error') }}</div> @endif

  <div class="card">

    {{-- ▼ ヘッダー：新規／削除 --}}
    <div class="card-header d-flex align-items-center">
      <a href="{{ route('news_add') }}" class="btn btn-primary mr-2">新規</a>
      <button form="news-list-form" type="submit" class="btn btn-outline-secondary"
              onclick="return confirm('選択した項目を削除しますか？')">削除</button>
    </div>

    {{-- ▼ 一覧テーブル --}}
    <div class="card-body p-0">
      <form id="news-list-form" method="POST" action="{{ route('news_delete') }}">
        @csrf
        <div class="table-responsive">
          <table class="table table-bordered text-nowrap mb-0 table-news"> {{-- ← table-striped は使わない --}}
            <thead class="thead-light">
              <tr>
                {{-- 統合列：ヘッダーも同色 --}}
                <th class="col-actions">
                  <div class="actions-wrap">
                    <input type="checkbox" id="check-all">
                    <span class="text-muted" style="font-weight:normal;"></span>
                  </div>
                </th>
                {{-- データ列 --}}
                <th class="w-id">ニュースID</th>
                <th>ニュース内容</th>
                <th class="w-datetime">公開日時</th>
                <th class="w-url">リンクURL</th>
                <th class="w-img">画像1URL</th>
                <th class="w-img">画像2URL</th>
                <th class="w-mode">表示モード</th>
                <th class="w-created">登録日時</th>
                <th class="w-updated">更新日時</th>
              </tr>
            </thead>
            <tbody>
              @forelse($rows as $r)
                <tr>
                  {{-- ▼ 統合セル--}}
                  <td style="background: #faebd7;">
                    <div class="actions-wrap">
                      <input type="checkbox" name="ids[]" value="{{ $r->id }}">
                      <a href="{{ route('news_edit', ['id' => $r->id]) }}" 
                      class="btn btn-sm btn-outline-primary ml-2">編集</a>
                    </div>
                  </td>

                  {{-- ▼ データ本体 --}}
                  <td class="w-id">{{ $r->id }}</td>
                  <td class="one-line" title="{{ $r->news }}">{{ \Illuminate\Support\Str::limit($r->news, 80) }}</td>
                  <td class="w-datetime">{{ $r->open_datetime }}</td>
                  <td class="w-url one-line" title="{{ $r->link_url }}">{{ $r->link_url }}</td>
                  <td class="w-img one-line" title="{{ $r->image1_filename }}">{{ $r->image1_filename }}</td>
                  <td class="w-img one-line" title="{{ $r->image2_filename }}">{{ $r->image2_filename }}</td>
                  <td class="w-mode">{{ $modeLabel[$r->mode] ?? $r->mode }}</td>
                  <td class="w-created">{{ $r->created_at }}</td>
                  <td class="w-updated">{{ $r->updated_at }}</td>
                </tr>
              @empty
                <tr>
                  <td colspan="10" class="text-center text-muted">データがありません。</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        {{-- ▼ フッター：ページネーション右寄せ --}}
        <div class="d-flex align-items-center p-3">
          <div class="ml-auto">
            {{ $rows->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</section>

{{-- ▼ スクリプト：全選択/全解除 --}}
<script>
  document.getElementById('check-all')?.addEventListener('change', function(e){
    document.querySelectorAll('input[name="ids[]"]').forEach(function(el){
      el.checked = e.target.checked;
    });
  });
</script>
@endsection