@extends('layouts.app')
@section('title', '確認して送信')
@section('page-title', '契約を締結')
@section('page-subtitle')
文書管理番号 {{ $instance->document_number ?? '—' }} ・下書き
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  <a href="{{ route('contract.instances.sign-position', $instance) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>署名位置の設定へ戻る</a>
</div>

@include('contract.partials._create_stepper', [
  'activeStep' => 4,
  'stepHint' => '送付前に内容を確認してください。問題なければ <strong>送付する</strong> を押します。',
])

<div class="alert alert-warning border small mb-4">
  <i class="bi bi-info-circle me-1" aria-hidden="true"></i>
  <strong>送付について</strong>：送付すると契約書のステータスが更新されます。メール送信・署名者向け画面・電子署名の実処理は未接続のため、現時点ではデータベース上の状態変更のみ行われます。
</div>

<div class="contract-confirm-page">
  {{-- 基本情報 --}}
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-envelope-paper me-2 text-primary"></i>署名依頼情報</h2>
      <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card">
      <dl class="row contract-confirm-dl mb-0">
        @if($instance->businessSetting)
        <dt class="col-sm-3">対応会社</dt>
        <dd class="col-sm-9">{{ $instance->businessSetting->displayName() }}</dd>
        @endif
        <dt class="col-sm-3">封筒名</dt>
        <dd class="col-sm-9">{{ $instance->title }}</dd>
        <dt class="col-sm-3">送信担当者</dt>
        <dd class="col-sm-9">
          {{ $instance->custom_field_1 ?: '—' }}
          @if(filled($instance->custom_field_2))
            <span class="text-muted">（{{ $instance->custom_field_2 }}）</span>
          @endif
        </dd>
        <dt class="col-sm-3">保管先フォルダ</dt>
        <dd class="col-sm-9">{{ $instance->storageFolder?->name ?? $instance->storage_location ?? '未選択' }}</dd>
        @if($instance->contract_date || $instance->contract_expires_at || filled($instance->amount) || filled($instance->custom_field_3) || filled($instance->note1) || filled($instance->note2) || filled($instance->note3))
        <dt class="col-sm-3">詳細情報</dt>
        <dd class="col-sm-9">
          <ul class="list-unstyled small mb-0 contract-confirm-detail-list">
            @if($instance->contract_date)
              <li>契約／取引日：{{ $instance->contract_date->format('Y/m/d') }}</li>
            @endif
            @if($instance->contract_expires_at)
              <li>契約満了日：{{ $instance->contract_expires_at->format('Y/m/d') }}</li>
            @endif
            @if(filled($instance->amount))
              <li>金額：{{ number_format((float) $instance->amount, $instance->amount == floor($instance->amount) ? 0 : 2) }} {{ $instance->amount_currency ?: 'JPY' }}</li>
            @endif
            @if(filled($instance->custom_field_3))
              <li>保管場所：{{ $instance->custom_field_3 }}</li>
            @endif
            @foreach(['note1' => '備考1', 'note2' => '備考2', 'note3' => '備考3'] as $field => $label)
              @if(filled($instance->{$field}))
                <li>{{ $label }}：{{ $instance->{$field} }}</li>
              @endif
            @endforeach
          </ul>
        </dd>
        @endif
      </dl>
    </div>
  </section>

  {{-- 文書 --}}
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-file-earmark-pdf me-2 text-danger"></i>文書（{{ $instance->documents->count() }}件）</h2>
      @if($instance->contract_template_id)
        <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
      @else
        <a href="{{ route('contract.instances.upload', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
      @endif
    </div>
    <div class="contract-confirm-card">
      <div class="d-flex flex-wrap gap-3">
        @foreach($instance->documents as $document)
          @php
            $pdfUrl = $document->publicUrl();
            $viewerUrl = $document->embedViewerUrl();
            $placementSummary = $placementsByDocument->get($document->id);
          @endphp
          <div class="contract-confirm-doc card border shadow-sm">
            <button type="button"
              class="contract-doc-preview-btn"
              data-contract-doc-preview
              data-viewer-url="{{ $viewerUrl }}"
              data-pdf-url="{{ $pdfUrl }}"
              data-doc-name="{{ $document->name }}"
              title="クリックで全文プレビュー">
              <div class="contract-doc-thumb-canvas-wrap contract-confirm-doc-thumb" data-contract-doc-pdf-url="{{ $pdfUrl }}">
                <span class="contract-doc-thumb-loading">読み込み中…</span>
                <canvas aria-hidden="true"></canvas>
              </div>
            </button>
            <div class="card-body py-2 px-3">
              <div class="fw-semibold small text-truncate" title="{{ $document->name }}">{{ $document->name }}</div>
              @if($placementSummary)
                <div class="text-muted small mt-1">
                  配置 {{ $placementSummary['total'] }} 件
                  @php
                    $typeLabels = [];
                    foreach (\App\Models\ContractInstancePlacement::partTypeOptions() as $type => $label) {
                      $count = $placementSummary['by_type']->get($type, 0);
                      if ($count > 0) {
                        $typeLabels[] = $label.' '.$count;
                      }
                    }
                  @endphp
                  @if($typeLabels !== [])
                    （{{ implode('・', $typeLabels) }}）
                  @endif
                </div>
              @else
                <div class="text-muted small mt-1">配置なし（不可視署名）</div>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- 署名者 --}}
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-pen me-2 text-primary"></i>署名者（{{ $instance->signers->count() }}名）</h2>
      <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card p-0 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-sm mb-0 contract-confirm-table">
          <thead class="table-light">
            <tr>
              <th scope="col">順番</th>
              <th scope="col">区分</th>
              <th scope="col">氏名</th>
              <th scope="col">連絡先</th>
              <th scope="col">署名方法</th>
            </tr>
          </thead>
          <tbody>
            @foreach($instance->signers as $signer)
            <tr>
              <td>第{{ $signer->sign_order }}署名者</td>
              <td>{{ $signer->partyTypeLabel() }}</td>
              <td>
                {{ $signer->preset_name }}
                @if($signer->party_type === \App\Models\ContractInstanceSigner::PARTY_INTERNAL && filled($signer->department))
                  <span class="text-muted small">（{{ $signer->department }}）</span>
                @elseif($signer->party_type === \App\Models\ContractInstanceSigner::PARTY_COUNTERPARTY && filled($signer->organization_name))
                  <span class="text-muted small">（{{ $signer->organization_name }}）</span>
                @endif
              </td>
              <td class="text-break">{{ $signer->contact ?: '—' }}</td>
              <td>
                <span class="badge bg-light text-dark border">{{ $signer->signingMethodLabel() }}</span>
                @if(filled($signer->access_code))
                  <span class="badge bg-light text-dark border ms-1">アクセスコード</span>
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </section>

  @if($instance->internal_workflow_enabled && $instance->approvers->isNotEmpty())
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-check2-square me-2 text-info"></i>自社ワークフロー（{{ $instance->approvers->count() }}名）</h2>
      <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card p-0 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-sm mb-0 contract-confirm-table">
          <thead class="table-light">
            <tr>
              <th scope="col">承認順</th>
              <th scope="col">氏名</th>
              <th scope="col">メール</th>
              <th scope="col">所属</th>
            </tr>
          </thead>
          <tbody>
            @foreach($instance->approvers as $approver)
            <tr>
              <td>{{ $approver->approval_order }}</td>
              <td>{{ $approver->name }}</td>
              <td class="text-break">{{ $approver->email ?: '—' }}</td>
              <td>{{ $approver->department ?: '—' }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <p class="small text-muted mb-0 px-3 py-2 border-top">送付後は <strong>承認待ち</strong> になります（承認メール送信は未接続）。</p>
    </div>
  </section>
  @endif

  @if($instance->recipients_enabled && $instance->recipients->isNotEmpty())
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-inbox me-2 text-secondary"></i>受領者（{{ $instance->recipients->count() }}名）</h2>
      <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card p-0 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-sm mb-0 contract-confirm-table">
          <thead class="table-light">
            <tr>
              <th scope="col">氏名</th>
              <th scope="col">連絡先</th>
            </tr>
          </thead>
          <tbody>
            @foreach($instance->recipients as $recipient)
            <tr>
              <td>{{ $recipient->name }}</td>
              <td class="text-break">{{ $recipient->contact }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <p class="small text-muted mb-0 px-3 py-2 border-top">締結後の再確認送付用（送信処理は未接続）。</p>
    </div>
  </section>
  @endif

  {{-- 署名位置 --}}
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-bounding-box me-2 text-primary"></i>署名位置（{{ $placementTotal }}件）</h2>
      <a href="{{ route('contract.instances.sign-position', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card">
      @if($placementTotal > 0)
        <p class="small mb-2 text-muted">PDF 上に配置したパーツの合計です。詳細の変更は署名位置の設定画面から行えます。</p>
        <ul class="list-unstyled small mb-0">
          @foreach($instance->documents as $document)
            @php $summary = $placementsByDocument->get($document->id); @endphp
            <li class="mb-1">
              <strong>{{ $document->name }}</strong>：
              @if($summary)
                {{ $summary['total'] }} 件
              @else
                配置なし
              @endif
            </li>
          @endforeach
        </ul>
      @else
        <p class="small text-muted mb-0">署名枠の配置はありません（不可視署名として送付されます）。</p>
      @endif
    </div>
  </section>

  @if($instance->mergeFieldValues->isNotEmpty())
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-input-cursor-text me-2 text-secondary"></i>差込み項目</h2>
      <a href="{{ route('contract.instances.sign-request', $instance) }}" class="btn btn-sm btn-outline-secondary">編集</a>
    </div>
    <div class="contract-confirm-card">
      <dl class="row contract-confirm-dl mb-0">
        @foreach($instance->mergeFieldValues as $field)
        <dt class="col-sm-3">{{ $field->field_name }}@if($field->is_required)<span class="text-danger">*</span>@endif</dt>
        <dd class="col-sm-9">{{ filled($field->value) ? $field->value : '—' }}</dd>
        @endforeach
      </dl>
    </div>
  </section>
  @endif

  {{-- メールプレビュー --}}
  <section class="contract-confirm-section mb-4">
    <div class="contract-confirm-section-head">
      <h2 class="h6 fw-semibold mb-0"><i class="bi bi-envelope me-2 text-primary"></i>送付メール（プレビュー）</h2>
      <a href="{{ route('contract.settings.edit') }}" class="btn btn-sm btn-outline-secondary">テンプレート編集</a>
    </div>
    <div class="contract-confirm-card">
      <p class="small text-muted mb-3">
        署名者への送付メールの見え方です。
        @if(filled($previewSignerName))
          サンプル受信者：<strong>{{ $previewSignerName }}</strong>
        @endif
        置換文字はプレビュー用の値を表示しています。
      </p>
      <div class="contract-confirm-email-preview">
        <div class="contract-confirm-email-subject">
          <span class="text-muted small me-2">件名</span>{{ $emailSubjectPreview }}
        </div>
        <pre class="contract-confirm-email-body mb-0">{{ $emailBodyPreview }}</pre>
      </div>
    </div>
  </section>
</div>

<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 contract-sign-step-footer mt-4">
  <a href="{{ route('contract.instances.sign-position', $instance) }}" class="btn btn-outline-secondary px-4">戻る</a>
  <form method="POST"
    action="{{ route('contract.instances.send', $instance) }}"
    class="d-inline"
    onsubmit="return confirm('この内容で契約書を送付しますか？\n\n※メール送信・署名画面は未接続のため、ステータスのみ更新されます。');">
    @csrf
    <button type="submit" class="btn btn-gmo-next px-4">送付する</button>
  </form>
</div>

@include('contract.partials._document_preview_modal')
@include('contract.partials._sign_request_step_styles')
@endsection

@once
@push('styles')
<style>
.contract-confirm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.contract-confirm-card {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background: #fff;
  padding: 1.25rem 1.5rem;
}
.contract-confirm-dl dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
}
.contract-confirm-dl dd {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.contract-confirm-dl dd:last-child,
.contract-confirm-dl dt:last-of-type + dd {
  margin-bottom: 0;
}
.contract-confirm-detail-list li + li {
  margin-top: 0.2rem;
}
.contract-confirm-doc {
  width: 14rem;
  flex: 0 0 14rem;
}
.contract-confirm-doc-thumb {
  height: 18rem;
}
.contract-confirm-table th {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.contract-confirm-table td {
  font-size: 0.85rem;
  vertical-align: middle;
}
.contract-confirm-email-preview {
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  overflow: hidden;
}
.contract-confirm-email-subject {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.contract-confirm-email-body {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fff;
  font-family: inherit;
}
</style>
@endpush
@endonce