@extends('layouts.app')
@section('title', 'テンプレート一覧')
@section('page-title', 'テンプレート')
@section('page-subtitle')
契約書のひな形を登録します。まず基本情報（テンプレートID・名前・説明）を登録し、続けて署名者・文書・差込み項目などの詳細設定を行います。
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <a href="{{ route('contract.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>契約書トップ</a>
  <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#contractTemplateBasicModal">
    <i class="bi bi-plus-lg me-1"></i>テンプレートを追加
  </button>
</div>

@if($templates->isEmpty())
<div class="card">
  <div class="card-body text-center py-5">
    <i class="bi bi-layout-text-window" style="font-size:3rem;color:#ddd;"></i>
    <h5 class="mt-3 text-muted">テンプレートがありません</h5>
    <p class="text-muted small mb-3">「テンプレートを追加」から基本情報を登録してください。</p>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contractTemplateBasicModal">テンプレートを追加</button>
  </div>
</div>
@else
<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-4">テンプレートID</th>
            <th>テンプレート名</th>
            <th>説明</th>
            <th>更新日</th>
            <th class="text-end pe-4">操作</th>
          </tr>
        </thead>
        <tbody>
          @foreach($templates as $template)
          @php $isFavorite = in_array($template->id, $favoriteIds ?? [], true); @endphp
          <tr>
            <td class="ps-4 text-muted small">{{ $template->template_code ?: '—' }}</td>
            <td class="fw-semibold">
              <form method="POST" action="{{ route('contract.templates.favorite.toggle', $template) }}" class="d-inline me-1">
                @csrf
                <button type="submit" class="btn btn-link btn-sm p-0 text-decoration-none {{ $isFavorite ? 'text-warning' : 'text-muted' }}" title="{{ $isFavorite ? 'お気に入り解除' : 'お気に入り' }}">
                  <i class="bi {{ $isFavorite ? 'bi-star-fill' : 'bi-star' }}"></i>
                </button>
              </form>
              <a href="{{ route('contract.templates.show', $template) }}">{{ $template->name }}</a>
              @if(($template->sharing_scope ?? 'owner') === 'all_operators')
                <span class="badge bg-info text-dark ms-1">全オペレーター</span>
              @endif
            </td>
            <td class="small text-muted">{{ $template->description ? \Illuminate\Support\Str::limit($template->description, 60) : '—' }}</td>
            <td class="small text-muted">{{ $template->updated_at?->format('Y-m-d H:i') }}</td>
            <td class="text-end pe-4">
              <a href="{{ route('contract.templates.show', $template) }}" class="btn btn-sm btn-outline-secondary me-1">詳細設定</a>
              <form method="POST" action="{{ route('contract.templates.destroy', $template) }}" class="d-inline" onsubmit="return confirm('このテンプレートを削除しますか？')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
              </form>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>
@endif

<div class="modal fade" id="contractTemplateBasicModal" tabindex="-1" aria-labelledby="contractTemplateBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contractTemplateBasicModalLabel">テンプレート情報</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <form method="POST" action="{{ route('contract.templates.store') }}">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold" for="template_code">テンプレートID</label>
            <input type="text" name="template_code" id="template_code" class="form-control @error('template_code') is-invalid @enderror" value="{{ old('template_code') }}" maxlength="64" placeholder="任意・管理用コード">
            @error('template_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div class="form-text">社内で識別するための任意コードです。未入力でも登録できます。</div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold" for="name">テンプレート名 <span class="text-danger">*</span></label>
            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required maxlength="191">
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-0">
            <label class="form-label fw-semibold" for="description">説明</label>
            <input type="text" name="description" id="description" class="form-control @error('description') is-invalid @enderror" value="{{ old('description') }}" maxlength="5000">
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-primary">確定</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
@if($errors->any())
<script>
document.addEventListener('DOMContentLoaded', () => {
  const modal = new bootstrap.Modal(document.getElementById('contractTemplateBasicModal'));
  modal.show();
});
</script>
@endif
@endpush