@extends('layouts.app')
@section('title', $template->name . ' — テンプレート詳細')
@section('page-title', 'テンプレート詳細設定')
@section('page-subtitle')
{{ $template->name }} の署名者・受領者・文書・差込み項目を設定します。基本情報の変更は「基本情報を編集」から行えます。
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
  <a href="{{ route('contract.templates.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>テンプレート一覧</a>
  <div class="d-flex gap-2">
    <form method="POST" action="{{ route('contract.templates.duplicate', $template) }}">
      @csrf
      <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bi bi-copy me-1"></i>複製</button>
    </form>
    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#contractTemplateEditBasicModal">
      <i class="bi bi-pencil me-1"></i>基本情報を編集
    </button>
  </div>
</div>

{{-- テンプレート概要 --}}
<div class="card mb-4">
  <div class="card-body">
    <div class="row g-3 align-items-start">
      <div class="col-md-8">
        <div class="small text-muted mb-1">テンプレート名</div>
        <div class="fw-semibold fs-5 mb-2">{{ $template->name }}</div>
        @if($template->template_code)
          <div class="small text-muted mb-1">テンプレートID</div>
          <div class="mb-2">{{ $template->template_code }}</div>
        @endif
        <div class="small text-muted mb-1">説明</div>
        <div class="mb-0">{{ $template->description ?: '—' }}</div>
      </div>
      <div class="col-md-4">
        <form method="POST" action="{{ route('contract.templates.update', $template) }}" id="template-options-form">
          @csrf @method('PUT')
          <input type="hidden" name="template_code" value="{{ $template->template_code }}">
          <input type="hidden" name="name" value="{{ $template->name }}">
          <input type="hidden" name="description" value="{{ $template->description }}">
          <label class="form-label fw-semibold small">テンプレート固定</label>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="allow_content_change_on_send" value="1" id="allow_content_change_on_send"
              @checked(old('allow_content_change_on_send', $template->allow_content_change_on_send))
              onchange="document.getElementById('template-options-form').submit()">
            <label class="form-check-label small" for="allow_content_change_on_send">送信時に内容の変更を許可する</label>
          </div>
        </form>
        <form method="POST" action="{{ route('contract.templates.update', $template) }}" class="mt-3" id="sharing-scope-form">
          @csrf @method('PUT')
          <input type="hidden" name="template_code" value="{{ $template->template_code }}">
          <input type="hidden" name="name" value="{{ $template->name }}">
          <input type="hidden" name="description" value="{{ $template->description }}">
          @if($template->allow_content_change_on_send)
            <input type="hidden" name="allow_content_change_on_send" value="1">
          @endif
          <label class="form-label fw-semibold small">共有設定</label>
          <select name="sharing_scope" class="form-select form-select-sm" onchange="document.getElementById('sharing-scope-form').submit()">
            @foreach($sharingScopes as $value => $label)
              <option value="{{ $value }}" @selected(old('sharing_scope', $template->sharing_scope ?? 'owner') === $value)>{{ $label }}</option>
            @endforeach
          </select>
          <div class="form-text">全オペレーターは同一契約内の他オペレーター向け表示用です（一覧統合は今後）。</div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- 署名者一覧 --}}
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center bg-white py-3">
    <h2 class="h6 mb-0 fw-semibold"><i class="bi bi-pen me-2 text-secondary"></i>署名者一覧</h2>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addSignerModal"><i class="bi bi-plus-lg"></i></button>
  </div>
  <div class="card-body p-0">
    @if($template->signers->isEmpty())
      <div class="text-center text-muted small py-4">署名者が登録されていません</div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr><th>順</th><th>依頼先</th><th>識別用ラベル</th><th>署名方法</th><th>プレースホルダ</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($template->signers as $signer)
            <tr>
              <td class="small">{{ $signer->sign_order ?? 1 }}</td>
              <td>{{ $signer->requestee }}</td>
              <td>{{ $signer->identity_label ?: '—' }}</td>
              <td>{{ $signer->signingMethodLabel() }}</td>
              <td class="small">{{ $signer->is_placeholder ? ($signer->preset_name ?: '—') : '—' }}</td>
              <td class="text-end">
                <form method="POST" action="{{ route('contract.templates.signers.destroy', [$template, $signer]) }}" 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>
    @endif
  </div>
</div>

{{-- 受領者一覧 --}}
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center bg-white py-3">
    <h2 class="h6 mb-0 fw-semibold"><i class="bi bi-person-lines-fill me-2 text-secondary"></i>受領者一覧</h2>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addRecipientModal"><i class="bi bi-plus-lg"></i></button>
  </div>
  <div class="card-body p-0">
    @if($template->recipients->isEmpty())
      <div class="text-center text-muted small py-4">受領者が登録されていません</div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr><th>氏名</th><th>メールアドレス / SMS</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($template->recipients as $recipient)
            <tr>
              <td>{{ $recipient->name }}</td>
              <td>{{ $recipient->contact }}</td>
              <td class="text-end">
                <form method="POST" action="{{ route('contract.templates.recipients.destroy', [$template, $recipient]) }}" 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>
    @endif
  </div>
</div>

{{-- テンプレート文書一覧 --}}
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center bg-white py-3">
    <h2 class="h6 mb-0 fw-semibold"><i class="bi bi-file-earmark-pdf me-2 text-secondary"></i>テンプレート文書一覧</h2>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addDocumentModal"><i class="bi bi-plus-lg"></i></button>
  </div>
  <div class="card-body p-0">
    @if($template->documents->isEmpty())
      <div class="text-center text-muted small py-4">テンプレート文書が登録されていません</div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr><th>文書名</th><th>説明</th><th>PDF</th><th>最終更新日</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($template->documents as $document)
            <tr>
              <td>{{ $document->name }}</td>
              <td class="small text-muted">{{ $document->description ?: '—' }}</td>
              <td>
                @if($document->storage_path)
                  <a href="{{ $documentService->publicUrl($document->storage_path) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">開く</a>
                @else
                  <span class="text-muted small">未添付</span>
                @endif
              </td>
              <td class="small text-muted">{{ $document->updated_at?->format('Y-m-d H:i') }}</td>
              <td class="text-end">
                <form method="POST" action="{{ route('contract.templates.documents.destroy', [$template, $document]) }}" 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>
    @endif
  </div>
</div>

{{-- 差込み項目一覧 --}}
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center bg-white py-3">
    <h2 class="h6 mb-0 fw-semibold"><i class="bi bi-braces me-2 text-secondary"></i>差込み項目一覧</h2>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addMergeFieldModal"><i class="bi bi-plus-lg"></i></button>
  </div>
  <div class="card-body p-0">
    @if($template->mergeFields->isEmpty())
      <div class="text-center text-muted small py-4">差込み項目が登録されていません</div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr><th>差込み項目名</th><th>種別</th><th>既定値</th><th>必須・任意</th><th>設置状況</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($template->mergeFields as $field)
            <tr>
              <td>{{ $field->field_name }}</td>
              <td class="small">{{ $field->fieldTypeLabel() }}</td>
              <td class="small text-muted">{{ $field->default_value ?: '—' }}</td>
              <td>{{ $field->is_required ? '必須' : '任意' }}</td>
              <td>{{ $field->is_placed ? '設置済み' : '未設置' }}</td>
              <td class="text-end">
                <form method="POST" action="{{ route('contract.templates.merge-fields.destroy', [$template, $field]) }}" 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>
    @endif
  </div>
</div>

{{-- 配置パーツ（メタデータ） --}}
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center bg-white py-3">
    <h2 class="h6 mb-0 fw-semibold"><i class="bi bi-bounding-box me-2 text-secondary"></i>配置パーツ</h2>
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addComponentModal"><i class="bi bi-plus-lg"></i></button>
  </div>
  <div class="card-body p-0">
    @if($template->components->isEmpty())
      <div class="text-center text-muted small py-4">パーツ未登録（PDF 上の座標配置 UI は今後対応）</div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr><th>種別</th><th>ラベル</th><th>Data ID</th><th>必須</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($template->components as $component)
            <tr>
              <td>{{ $component->partTypeLabel() }}</td>
              <td>{{ $component->label ?: '—' }}</td>
              <td class="small font-monospace">{{ $component->data_id ?: '—' }}</td>
              <td>{{ $component->is_required ? '必須' : '任意' }}</td>
              <td class="text-end">
                <form method="POST" action="{{ route('contract.templates.components.destroy', [$template, $component]) }}" 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>
    @endif
  </div>
</div>

@include('contract.templates.partials._modal_signer', ['template' => $template, 'signingMethods' => $signingMethods])
@include('contract.templates.partials._modal_recipient', ['template' => $template])
@include('contract.templates.partials._modal_document', ['template' => $template])
@include('contract.templates.partials._modal_merge_field', ['template' => $template, 'fieldTypes' => $fieldTypes])

<div class="modal fade" id="addComponentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ route('contract.templates.components.store', $template) }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">配置パーツを追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">種別 <span class="text-danger">*</span></label>
            <select name="part_type" class="form-select" required>
              @foreach($partTypes as $value => $label)<option value="{{ $value }}">{{ $label }}</option>@endforeach
            </select>
          </div>
          <div class="mb-3"><label class="form-label fw-semibold">ラベル</label><input type="text" name="label" class="form-control" maxlength="191"></div>
          <div class="mb-3"><label class="form-label fw-semibold">Data ID</label><input type="text" name="data_id" class="form-control" maxlength="64"></div>
          <div class="mb-3"><label class="form-label fw-semibold">入力ガイド</label><input type="text" name="input_guide" class="form-control" maxlength="500"></div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="is_required" value="1" id="component_required">
            <label class="form-check-label" for="component_required">必須</label>
          </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>

{{-- 基本情報編集モーダル --}}
<div class="modal fade" id="contractTemplateEditBasicModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">テンプレート情報</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('contract.templates.update', $template) }}">
        @csrf @method('PUT')
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">テンプレートID</label>
            <input type="text" name="template_code" class="form-control" value="{{ old('template_code', $template->template_code) }}" maxlength="64">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">テンプレート名 <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control" value="{{ old('name', $template->name) }}" required maxlength="191">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">説明</label>
            <input type="text" name="description" class="form-control" value="{{ old('description', $template->description) }}" maxlength="5000">
          </div>
          <input type="hidden" name="allow_content_change_on_send" value="{{ $template->allow_content_change_on_send ? '1' : '0' }}">
        </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