krgm.so-manager-dev.com/resources/views/admin/news/add.blade.php

@extends('layouts.app')
@section('title', 'ニュース新規作成')

@section('content')
  {{-- ▼ コンテンツヘッダー（パンくず） --}}
  <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"><a href="{{ route('news') }}">最新ニュース登録</a></li>
            <li class="breadcrumb-item active">新規</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

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

      {{-- ▼ バリデーションエラー表示 --}}
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
      @endif

      {{-- ▼ 成功メッセージ表示 --}}
      @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif

      {{-- ▼ 入力フォーム --}}
      <div class="card">
        <div class="card-body">
          <form method="post" action="{{ route('news_add') }}" id="news-add-form">
            @csrf

            {{-- 基本情報 --}}
            <div class="form-group">
              <label>ニュース内容 <span class="text-danger">*</span></label>
              <textarea name="news" class="form-control" rows="8" required>{{ old('news') }}</textarea>
            </div>
            <div class="form-group">
              <label>公開日時<span class="text-danger">*</span></label>
              <input type="date"
                     name="open_date"
                     class="form-control"
                     value="{{ old('open_date') }}"
                     required>
            </div>

            <div class="form-group">
              <label>リンクURL</label>
              <input type="text" name="link_url" class="form-control" value="{{ old('link_url') }}">
            </div>

            {{-- 画像操作ボタン行：左=画像1、右=画像2 --}}
            <div class="row mb-3">
              <div class="col-md-6 mb-2">
                <div class="btn-group">
                  <button type="button" class="btn btn-default" id="btn-image1-upload">画像1アップロード</button>
                  <button type="button" class="btn btn-default" id="btn-image1-clear">画像1削除</button>
                </div>
                <input type="file" id="file-image1" accept="image/*" class="d-none">
              </div>
              <div class="col-md-6 mb-2">
                <div class="btn-group">
                  <button type="button" class="btn btn-default" id="btn-image2-upload">画像2アップロード</button>
                  <button type="button" class="btn btn-default" id="btn-image2-clear">画像2削除</button>
                </div>
                <input type="file" id="file-image2" accept="image/*" class="d-none">
              </div>
            </div>

            {{-- 画像ボックス：左=画像1、右=画像2 --}}
            <div class="row">
              <div class="col-md-6">
                <div class="imgbox mb-3">
                  <div class="imgbox-title">画像1</div>
                  <div class="mb-2">
                    <label class="small text-muted d-block mb-1">画像1URLスペース</label>
                    <input type="text" name="image1_filename" id="image1_url" class="form-control"
                      placeholder="https://..." value="{{ old('image1_filename') }}">
                  </div>
                  <div>
                    <label class="small text-muted d-block mb-1">画像1表示スペース</label>
                    <div class="imgbox-preview">
                      <img id="image1_preview" src="{{ old('image1_filename') }}" alt=""
                        style="display: {{ old('image1_filename') ? 'block' : 'none' }};">
                      <span id="image1_placeholder" class="text-muted"
                        style="display: {{ old('image1_filename') ? 'none' : 'block' }};">プレビューなし</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="imgbox mb-3">
                  <div class="imgbox-title">画像2</div>
                  <div class="mb-2">
                    <label class="small text-muted d-block mb-1">画像2URLスペース</label>
                    <input type="text" name="image2_filename" id="image2_url" class="form-control"
                      placeholder="https://..." value="{{ old('image2_filename') }}">
                  </div>
                  <div>
                    <label class="small text-muted d-block mb-1">画像2表示スペース</label>
                    <div class="imgbox-preview">
                      <img id="image2_preview" src="{{ old('image2_filename') }}" alt=""
                        style="display: {{ old('image2_filename') ? 'block' : 'none' }};">
                      <span id="image2_placeholder" class="text-muted"
                        style="display: {{ old('image2_filename') ? 'none' : 'block' }};">プレビューなし</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {{-- 表示モード（デフォルト：非表示） --}}
            <div class="form-group mt-3">
              <label class="d-block">表示モード <span class="text-danger">*</span></label>

              {{-- 下書き（非表示） --}}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="mode" id="mode_draft" value="1" required
                  @checked(old('mode', $row->mode ?? '') == '1')>
                <label class="form-check-label" for="mode_draft">下書き（非表示）</label>
              </div>

              {{-- 公開 --}}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="mode" id="mode_public" value="2" @checked(old('mode', $row->mode ?? '') == '2')>
                <label class="form-check-label" for="mode_public">公開</label>
              </div>

              {{-- 自動公開 --}}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="mode" id="mode_auto" value="3" @checked(old('mode', $row->mode ?? '') == '3')>
                <label class="form-check-label" for="mode_auto">自動公開</label>
              </div>

              {{-- 非表示 --}}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="mode" id="mode_hidden" value="4" @checked(old('mode', $row->mode ?? '') == '4')>
                <label class="form-check-label" for="mode_hidden">非表示</label>
              </div>
            </div>

            <div class="text-left">
              <button type="button" class="btn btn-default register" id="register-btn">登録</button>
              <!-- 変更点: class="register" を付与して app.js の汎用確認を使用 -->
              <a href="{{ route('news') }}" class="btn btn-default">戻る</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('styles')
  <style>
    /* 画像ボックスの体裁 */
    .imgbox {
      border: 1px solid #ced4da;
      border-radius: .25rem;
    }

    .imgbox-title {
      background: #f4f6f9;
      border-bottom: 1px solid #ced4da;
      padding: .5rem .75rem;
      font-weight: 600;
    }

    .imgbox-preview {
      border: 1px solid #ced4da;
      border-radius: .25rem;
      background: #f8f9fa;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .imgbox-preview img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  </style>
@endpush

@push('scripts')
  <script>
    // 画像プレビュー系のみ（確認ダイアログは app.js に委譲）
    (function () {
      function bindUrlPreview(urlId, imgId, phId) {
        const url = document.getElementById(urlId);
        const img = document.getElementById(imgId);
        const ph = document.getElementById(phId);
        if (!url || !img || !ph) return;
        function update() {
          const v = (url.value || '').trim();
          if (v) { img.src = v; img.style.display = 'block'; ph.style.display = 'none'; }
          else { img.removeAttribute('src'); img.style.display = 'none'; ph.style.display = 'block'; }
        }
        url.addEventListener('input', update); update();
      }
      function bindUpload(btnId, fileId, urlId, imgId, phId, clearBtnId) {
        const btn = document.getElementById(btnId);
        const file = document.getElementById(fileId);
        const url = document.getElementById(urlId);
        const img = document.getElementById(imgId);
        const ph = document.getElementById(phId);
        const clr = document.getElementById(clearBtnId);
        if (!btn || !file || !url || !img || !ph || !clr) return;
        btn.addEventListener('click', () => file.click());
        file.addEventListener('change', () => {
          const f = file.files && file.files[0]; if (!f) return;
          const reader = new FileReader();
          reader.onload = e => { img.src = e.target.result; img.style.display = 'block'; ph.style.display = 'none'; };
          reader.readAsDataURL(f);
        });
        clr.addEventListener('click', () => {
          file.value = ''; url.value = '';
          img.removeAttribute('src'); img.style.display = 'none'; ph.style.display = 'block';
        });
      }

      bindUrlPreview('image1_url', 'image1_preview', 'image1_placeholder');
      bindUrlPreview('image2_url', 'image2_preview', 'image2_placeholder');
      bindUpload('btn-image1-upload', 'file-image1', 'image1_url', 'image1_preview', 'image1_placeholder', 'btn-image1-clear');
      bindUpload('btn-image2-upload', 'file-image2', 'image2_url', 'image2_preview', 'image2_placeholder', 'btn-image2-clear');
    })();
  </script>
@endpush