@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.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>一覧</a>
  <form method="POST" action="{{ route('contract.instances.destroy', $instance) }}" onsubmit="return confirm('この下書きを削除しますか？')">
    @csrf @method('DELETE')
    <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
  </form>
</div>

@include('contract.partials._create_stepper', [
  'activeStep' => 1,
  'stepHint' => '1ページ目の内容を確認し、文書名を整えてから <strong>署名依頼情報の入力へ</strong> を押してください。（PDF 各10MB以下・最大20件・カードクリックで全文プレビュー）',
])

<form method="POST" action="{{ route('contract.instances.upload.update', $instance) }}" enctype="multipart/form-data" id="contract-upload-step-form" @if($businessSettings->isNotEmpty()) data-contract-company-modal="contract-upload-company-modal" data-contract-company-proceed="#contract-upload-proceed-btn" @if($instance->business_setting_id) data-contract-company-preset="{{ $instance->business_setting_id }}" @endif @endif>
  @csrf @method('PUT')

  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
      <div class="d-flex flex-wrap gap-3 align-items-stretch" id="contract-doc-grid">
        @foreach($instance->documents as $document)
          @php
            $pdfUrl = $document->publicUrl();
            $viewerUrl = $document->embedViewerUrl();
            $docName = old('document_names.'.$document->id, $document->name);
          @endphp
          <div class="contract-doc-thumb card border position-relative overflow-hidden 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" data-contract-doc-pdf-url="{{ $pdfUrl }}">
                <span class="contract-doc-thumb-loading">読み込み中…</span>
                <canvas aria-hidden="true"></canvas>
              </div>
            </button>
            <div class="contract-doc-thumb-name px-2 pb-2">
              <label class="form-label small mb-1" for="doc_name_{{ $document->id }}">文書名</label>
              <input type="text"
                name="document_names[{{ $document->id }}]"
                id="doc_name_{{ $document->id }}"
                class="form-control form-control-sm @error('document_names.'.$document->id) is-invalid @enderror"
                value="{{ $docName }}"
                maxlength="191"
                required>
              @error('document_names.'.$document->id)<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <button type="button"
              class="btn btn-sm btn-light border-0 position-absolute top-0 end-0 rounded-circle contract-doc-remove"
              title="この文書を外す"
              data-delete-form="doc-delete-{{ $document->id }}">
              <i class="bi bi-x-lg"></i>
            </button>
          </div>
        @endforeach

        <div class="contract-doc-add card border border-dashed bg-light">
          <label class="card-body d-flex flex-column align-items-center justify-content-center text-center mb-0 cursor-pointer contract-upload-add-zone" id="contract-upload-add-zone">
            <i class="bi bi-cloud-arrow-up text-primary fs-3 mb-2" aria-hidden="true"></i>
            <span class="small text-muted">ファイルをドロップ<br>または</span>
            <span class="btn btn-sm btn-primary mt-2">ファイルを選択</span>
            <input type="file" name="document_files[]" id="contract_upload_add_files" class="d-none" accept="application/pdf,.pdf" multiple>
          </label>
        </div>
      </div>

      <div class="mt-4 pt-3 border-top">
        <label class="form-label fw-semibold" for="upload_title">送付件名 <span class="badge bg-danger-subtle text-danger border border-danger-subtle">必須</span></label>
        <input type="text" name="title" id="upload_title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $instance->title) }}" maxlength="191" required>
        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">署名依頼で相手に伝わる一式の名称です。上のカードでは PDF ごとの文書名を編集できます。</div>
      </div>
    </div>
  </div>

  @if($businessSettings->isNotEmpty())
    <div class="alert alert-light border small mb-3">
      <strong>対応会社</strong>：
      @if($instance->businessSetting)
        {{ $instance->businessSetting->displayName() }}
        <span class="text-muted">（署名依頼情報の画面でも変更できます）</span>
      @else
        <span class="text-warning">未選択</span> — 「署名依頼情報の入力へ」を押すと会社を選ぶ画面が開きます。
      @endif
    </div>
  @endif

  <div class="d-flex flex-wrap justify-content-center gap-2">
    <a href="{{ route('contract.instances.index') }}" class="btn btn-outline-secondary">キャンセル</a>
    <button type="submit" class="btn btn-outline-primary" name="action" value="save">下書き保存</button>
    <button type="submit"
      class="btn btn-primary px-4"
      name="action"
      value="proceed"
      id="contract-upload-proceed-btn"
      @if($businessSettings->isNotEmpty() && ! $instance->business_setting_id) data-require-company-modal="1" @endif>
      署名依頼情報の入力へ
    </button>
  </div>
</form>

@if($businessSettings->isNotEmpty())
  @include('contract.partials._company_select_modal', [
    'modalId' => 'contract-upload-company-modal',
    'businessSettings' => $businessSettings,
    'confirmLabel' => 'この会社で署名依頼へ',
  ])
  @include('contract.partials._company_select_modal_script')
@endif

@foreach($instance->documents as $document)
<form id="doc-delete-{{ $document->id }}" method="POST" action="{{ route('contract.instances.documents.destroy', [$instance, $document]) }}" class="d-none">
  @csrf @method('DELETE')
</form>
@endforeach

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

@push('styles')
<style>
.contract-doc-thumb .contract-doc-remove { width: 1.75rem; height: 1.75rem; line-height: 1; padding: 0; z-index: 2; }
.contract-upload-add-zone { cursor: pointer; }
.contract-upload-add-zone.is-dragover { background: #f0f4ff; border-radius: 0.375rem; }
.cursor-pointer { cursor: pointer; }
.contract-doc-thumb-name .form-label { font-size: 0.7rem; color: #6c757d; }
</style>
@endpush

@push('scripts')
<script>
(function () {
  const addInput = document.getElementById('contract_upload_add_files');
  const addZone = document.getElementById('contract-upload-add-zone');
  const mainForm = document.getElementById('contract-upload-step-form');

  document.querySelectorAll('.contract-doc-remove').forEach(function (btn) {
    btn.addEventListener('click', function () {
      if (!confirm('この PDF を一覧から外しますか？')) return;
      const form = document.getElementById(btn.getAttribute('data-delete-form'));
      if (form) form.submit();
    });
  });

  if (addInput && mainForm) {
    addInput.addEventListener('change', function () {
      if (addInput.files && addInput.files.length > 0) {
        mainForm.submit();
      }
    });
  }

  if (addZone && addInput) {
    ['dragenter', 'dragover'].forEach(function (evt) {
      addZone.addEventListener(evt, function (e) {
        e.preventDefault();
        addZone.classList.add('is-dragover');
      });
    });
    ['dragleave', 'drop'].forEach(function (evt) {
      addZone.addEventListener(evt, function (e) {
        e.preventDefault();
        addZone.classList.remove('is-dragover');
      });
    });
    addZone.addEventListener('drop', function (e) {
      const files = e.dataTransfer && e.dataTransfer.files;
      if (!files || !files.length) return;
      const pdfs = Array.from(files).filter(function (f) { return f.type === 'application/pdf' || /\.pdf$/i.test(f.name); });
      if (!pdfs.length) return;
      const dt = new DataTransfer();
      pdfs.forEach(function (f) { dt.items.add(f); });
      addInput.files = dt.files;
      mainForm.submit();
    });
  }
})();
</script>
@endpush