@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.upload', $instance) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>文書のアップロードへ戻る</a>
  <button type="submit" form="contract-sign-request-form" name="action" value="save" class="btn btn-sm btn-outline-primary">下書き保存</button>
</div>

@include('contract.partials._create_stepper', ['activeStep' => 2])

<form method="POST" action="{{ route('contract.instances.sign-request.update', $instance) }}" id="contract-sign-request-form">
  @csrf @method('PUT')

  <div class="contract-sign-request-card p-4 mb-4">
    @if($businessSettings->isNotEmpty())
    <div class="mb-4 pb-3 border-bottom">
      <label class="form-label" for="sign_request_business_setting_id">
        対応会社
        <span class="badge bg-danger badge-required">必須</span>
      </label>
      <select name="business_setting_id"
        id="sign_request_business_setting_id"
        class="form-select @error('business_setting_id') is-invalid @enderror"
        required>
        <option value="">選択してください</option>
        @foreach($businessSettings as $business)
          <option value="{{ $business->id }}"
            data-company-name="{{ $business->displayName() }}"
            @selected((string) old('business_setting_id', $matchedBusinessId ?? '') === (string) $business->id)>
            {{ $business->displayName() }}{{ $business->is_default ? '（既定）' : '' }}
          </option>
        @endforeach
      </select>
      @error('business_setting_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <div class="form-text">この契約書を送付する会社です。送信担当者名にも反映されます。<a href="{{ route('setting.business') }}">会社情報</a>で登録内容を変更できます。</div>
    </div>
    @endif

    <div class="mb-3">
      <label class="form-label" for="sign_request_title">
        封筒名
        <span class="badge bg-danger badge-required">必須</span>
      </label>
      <input type="text"
        name="title"
        id="sign_request_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>

    <div class="row g-3 mb-3">
      <div class="col-md-6">
        <label class="form-label" for="sign_request_sender">
          送信担当者
          <span class="badge bg-danger badge-required">必須</span>
        </label>
        @php
          $senderValue = old('sender_name', $instance->custom_field_1 ?: $defaultSenderName);
        @endphp
        @if($businessSettings->isNotEmpty())
        <div class="input-group contract-sender-combo @error('sender_name') is-invalid @enderror">
          <select class="form-select contract-sender-pick" id="sign_request_sender_pick" aria-label="会社情報から選択" style="max-width:10.5rem; flex:0 0 10.5rem">
            <option value="">選択…</option>
            @foreach($businessSettings as $business)
              <option value="{{ $business->displayName() }}" data-business-id="{{ $business->id }}" @selected((string) old('sender_business_id', $matchedBusinessId ?? '') === (string) $business->id || ($senderValue !== '' && $senderValue === $business->displayName()))>
                {{ $business->displayName() }}
              </option>
            @endforeach
            <option value="__manual__" @selected(! $matchedBusinessId && $senderValue !== '' && ! $businessSettings->contains(fn ($b) => $b->displayName() === $senderValue))>手入力</option>
          </select>
          <input type="text"
            name="sender_name"
            id="sign_request_sender"
            class="form-control @error('sender_name') is-invalid @enderror"
            value="{{ $senderValue }}"
            maxlength="191"
            required
            autocomplete="off"
            placeholder="選択または入力">
        </div>
        @else
        <input type="text"
          name="sender_name"
          id="sign_request_sender"
          class="form-control @error('sender_name') is-invalid @enderror"
          value="{{ $senderValue }}"
          maxlength="191"
          required
          autocomplete="off"
          placeholder="送信担当者名を入力">
        @endif
        @error('sender_name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      </div>
      <div class="col-md-6">
        <label class="form-label" for="sign_request_department">所属</label>
        <input type="text"
          name="department"
          id="sign_request_department"
          class="form-control @error('department') is-invalid @enderror"
          value="{{ old('department', $instance->custom_field_2) }}"
          maxlength="191">
        @error('department')<div class="invalid-feedback">{{ $message }}</div>@enderror
      </div>
    </div>

    <div class="mb-3">
      <label class="form-label" for="sign_request_storage_folder">保管先フォルダ</label>
      <div class="d-flex gap-2">
        <select name="contract_storage_folder_id" id="sign_request_storage_folder" class="form-select @error('contract_storage_folder_id') is-invalid @enderror">
          <option value="">未選択</option>
          @foreach($storageFolders as $folder)
            <option value="{{ $folder->id }}" @selected((string) old('contract_storage_folder_id', $instance->contract_storage_folder_id) === (string) $folder->id)>{{ $folder->name }}</option>
          @endforeach
        </select>
        <a href="{{ route('contract.folders.index') }}" class="btn btn-outline-primary flex-shrink-0" title="フォルダ管理">
          <i class="bi bi-folder-plus" aria-hidden="true"></i>
        </a>
      </div>
      @error('contract_storage_folder_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
      @if($storageFolders->isEmpty())
        <div class="form-text"><a href="{{ route('contract.folders.index') }}">フォルダ管理</a>で登録するとここから選べます。</div>
      @endif
    </div>

    @php
      $detailPanelOpen = ($detailPanelOpen ?? false)
        || filled(old('contract_date'))
        || filled(old('contract_expires_at'))
        || filled(old('amount'))
        || filled(old('detail_storage_place'))
        || filled(old('note1'))
        || filled(old('note2'))
        || filled(old('note3'))
        || $errors->hasAny(['contract_date', 'contract_expires_at', 'amount', 'amount_currency', 'detail_storage_place', 'note1', 'note2', 'note3']);
    @endphp
    @include('contract.partials._sign_request_detail_panel', [
      'instance' => $instance,
      'detailPanelOpen' => $detailPanelOpen,
    ])
  </div>

  @include('contract.partials._sign_request_workflow_band', [
    'instance' => $instance,
    'workflowOperators' => $workflowOperators,
  ])

  <div class="contract-sign-band">
    <div class="contract-sign-band-head">
      <div class="flex-grow-1">
        <div class="contract-sign-band-title">
          署名者
          <span class="badge bg-danger badge-required">必須</span>
        </div>
        <p class="contract-sign-band-desc">指定の宛先へ署名依頼を送信します</p>
      </div>
      <div class="contract-sign-band-action">
        <button type="button" class="btn btn-primary btn-icon-circle" data-bs-toggle="modal" data-bs-target="#contractAddSignerModal" title="署名者を追加">
          <i class="bi bi-person-plus fs-5" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    @error('signers')<div class="px-3 pt-2"><div class="alert alert-danger py-2 mb-0 small">{{ $message }}</div></div>@enderror
    <div class="contract-sign-band-body" id="contract-signer-body">
      <div id="contract-signer-list">
        @php
          $oldSigners = old('signers');
        @endphp
        @if(is_array($oldSigners) && count($oldSigners) > 0)
          @foreach($oldSigners as $index => $signerRow)
            @include('contract.partials._sign_request_signer_row', [
              'index' => $index,
              'signerRow' => $signerRow,
            ])
          @endforeach
        @elseif($instance->signers->isNotEmpty())
          @foreach($instance->signers as $signer)
            @include('contract.partials._sign_request_signer_row', [
              'index' => $loop->index,
              'signerRow' => [
                'id' => $signer->id,
                'sign_order' => $signer->sign_order,
                'party_type' => $signer->party_type ?: ($signer->requestee === '自社署名者' ? \App\Models\ContractInstanceSigner::PARTY_INTERNAL : \App\Models\ContractInstanceSigner::PARTY_COUNTERPARTY),
                'signing_method' => $signer->signing_method === 'electronic' ? \App\Models\ContractInstanceSigner::SIGNING_METHOD_CONTRACT_SEAL : $signer->signing_method,
                'department' => $signer->department,
                'organization_name' => $signer->organization_name,
                'preset_name' => $signer->preset_name,
                'contact' => $signer->contact,
                'access_code' => $signer->access_code,
                'allow_signer_change' => $signer->allow_signer_change,
                'sign_deadline' => $signer->sign_deadline?->format('Y-m-d'),
                'comment' => $signer->comment,
                'email_language' => $signer->email_language ?: 'ja',
                'add_to_address_book' => $signer->add_to_address_book,
                'document_actions' => $signer->document_actions ?? [],
              ],
            ])
          @endforeach
        @endif
      </div>
      <p class="small text-muted mb-0 @if($instance->signers->isNotEmpty() || is_array(old('signers'))) d-none @endif" id="contract-signer-empty">署名者がまだありません。<strong>＋</strong> から追加するか、テンプレートから作成すると署名者がコピーされます。</p>
    </div>
  </div>

  @include('contract.partials._sign_request_recipient_band', [
    'instance' => $instance,
    'workflowOperators' => $workflowOperators,
  ])

  @if($instance->mergeFieldValues->isNotEmpty())
  <details class="card border-0 shadow-sm mb-4">
    <summary class="card-header bg-white fw-semibold" style="cursor:pointer;">差込み項目（{{ $instance->mergeFieldValues->count() }}件）</summary>
    <div class="card-body">
      @foreach($instance->mergeFieldValues as $field)
      <div class="mb-3">
        <label class="form-label fw-semibold">{{ $field->field_name }} @if($field->is_required)<span class="text-danger">*</span>@endif</label>
        <input type="hidden" name="merge_fields[{{ $loop->index }}][id]" value="{{ $field->id }}">
        <input type="text" name="merge_fields[{{ $loop->index }}][value]" class="form-control" value="{{ old('merge_fields.'.$loop->index.'.value', $field->value) }}">
      </div>
      @endforeach
    </div>
  </details>
  @endif

  <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.upload', $instance) }}" class="btn btn-outline-secondary px-4">戻る</a>
    <div class="d-flex flex-wrap gap-2">
      <button type="submit" name="action" value="save" class="btn btn-outline-primary px-4">下書き保存</button>
      <button type="submit" name="action" value="proceed" class="btn btn-gmo-next" id="sign-request-proceed-btn">署名位置の設定へ</button>
    </div>
  </div>
</form>

@include('contract.partials._sign_request_workflow_approver_modal', [
  'workflowOperators' => $workflowOperators,
])
@include('contract.partials._sign_request_recipient_modal', [
  'workflowOperators' => $workflowOperators,
])
@include('contract.partials._sign_request_signer_modal', [
  'instance' => $instance,
  'businessSettings' => $businessSettings,
])

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

@push('scripts')
<script>
(function () {
  const businessSelect = document.getElementById('sign_request_business_setting_id');
  const senderPick = document.getElementById('sign_request_sender_pick');
  const senderInput = document.getElementById('sign_request_sender');
  if (businessSelect && senderInput) {
    businessSelect.addEventListener('change', function () {
      const opt = businessSelect.options[businessSelect.selectedIndex];
      const name = opt ? opt.getAttribute('data-company-name') : '';
      if (name) {
        senderInput.value = name;
        if (senderPick) {
          senderPick.value = name;
        }
      }
    });
  }
  if (senderPick && senderInput) {
    function syncSenderPickFromInput() {
      const value = (senderInput.value || '').trim();
      let matched = false;
      Array.from(senderPick.options).forEach(function (opt) {
        if (opt.value && opt.value !== '__manual__' && opt.value === value) {
          senderPick.value = opt.value;
          matched = true;
        }
      });
      if (!matched) {
        senderPick.value = value === '' ? '' : '__manual__';
      }
    }
    senderPick.addEventListener('change', function () {
      const picked = senderPick.value;
      if (picked === '') return;
      if (picked === '__manual__') {
        senderInput.value = '';
        senderInput.focus();
        return;
      }
      senderInput.value = picked;
      const opt = senderPick.options[senderPick.selectedIndex];
      const businessId = opt ? opt.getAttribute('data-business-id') : '';
      if (businessSelect && businessId) {
        businessSelect.value = businessId;
      }
    });
    senderInput.addEventListener('input', syncSenderPickFromInput);
    syncSenderPickFromInput();
  }

  const detailPanel = document.getElementById('sign-request-detail-panel');
  const detailOpen = document.getElementById('contract-detail-open');
  const detailClose = document.getElementById('contract-detail-close');
  if (detailPanel && detailOpen) {
    detailPanel.addEventListener('show.bs.collapse', function () {
      detailOpen.classList.add('d-none');
    });
    detailPanel.addEventListener('hidden.bs.collapse', function () {
      detailOpen.classList.remove('d-none');
    });
    if (detailClose) {
      detailClose.addEventListener('click', function () {
        detailOpen.classList.remove('d-none');
      });
    }
  }

  const workflowToggle = document.getElementById('enable_internal_workflow');
  const workflowBody = document.getElementById('workflow-approver-body');
  const workflowAddWrap = document.getElementById('workflow-add-wrap');
  const workflowSetupBtn = document.querySelector('.contract-workflow-setup-btn');
  const workflowList = document.getElementById('workflow-approver-list');
  const workflowEmpty = document.getElementById('workflow-approver-empty');
  const approverModal = document.getElementById('contractApproverModal');
  const approverSave = document.getElementById('approver_modal_save');
  const approverEditIndex = document.getElementById('approver_edit_index');
  const approverOrder = document.getElementById('approver_modal_order');
  const approverDepartment = document.getElementById('approver_modal_department');
  const approverName = document.getElementById('approver_modal_name');
  const approverEmail = document.getElementById('approver_modal_email');
  const approverOperatorPick = document.getElementById('approver_modal_operator_pick');
  const rowTemplate = document.getElementById('workflow-approver-row-template');

  function syncWorkflowVisibility() {
    const on = !!(workflowToggle && workflowToggle.checked);
    if (workflowBody) workflowBody.classList.toggle('d-none', !on);
    if (workflowAddWrap) workflowAddWrap.classList.toggle('d-none', !on);
    if (workflowSetupBtn) workflowSetupBtn.classList.toggle('is-active', on);
    if (workflowList) {
      workflowList.querySelectorAll('input[type="hidden"]').forEach(function (input) {
        input.disabled = !on;
      });
    }
  }

  function refreshWorkflowEmpty() {
    if (!workflowEmpty || !workflowList) return;
    const count = workflowList.querySelectorAll('.contract-workflow-approver-item').length;
    workflowEmpty.classList.toggle('d-none', count > 0);
  }

  function nextApprovalOrder() {
    if (!workflowList) return 1;
    let max = 0;
    workflowList.querySelectorAll('[data-field="approval_order"]').forEach(function (input) {
      max = Math.max(max, parseInt(input.value, 10) || 0);
    });
    return max + 1;
  }

  function reindexApproverList() {
    if (!workflowList) return;
    workflowList.querySelectorAll('.contract-workflow-approver-item').forEach(function (item, index) {
      item.dataset.approverIndex = String(index);
      const orderInput = item.querySelector('[data-field="approval_order"]');
      const order = orderInput ? orderInput.value : (index + 1);
      const head = item.querySelector('.contract-workflow-approver-head');
      if (head) head.textContent = '第' + order + '承認者';
      item.querySelectorAll('input[type="hidden"]').forEach(function (input) {
        const field = input.getAttribute('data-field');
        if (field) {
          input.name = 'approvers[' + index + '][' + field + ']';
        } else if (input.name && input.name.includes('[id]')) {
          input.name = 'approvers[' + index + '][id]';
        }
      });
    });
    refreshWorkflowEmpty();
  }

  function buildApproverRow(index, data) {
    if (!rowTemplate) return null;
    let html = rowTemplate.innerHTML.replace(/__INDEX__/g, String(index)).replace(/__ORDER__/g, String(data.approval_order || 1));
    const wrap = document.createElement('div');
    wrap.innerHTML = html.trim();
    const item = wrap.firstElementChild;
    if (!item) return null;
    item.querySelector('[data-field="approval_order"]').value = data.approval_order || 1;
    item.querySelector('[data-field="department"]').value = data.department || '';
    item.querySelector('[data-field="name"]').value = data.name || '';
    item.querySelector('[data-field="email"]').value = data.email || '';
    const nameEl = item.querySelector('.contract-workflow-approver-name');
    if (nameEl) {
      nameEl.innerHTML = '<i class="bi bi-person text-muted me-1" aria-hidden="true"></i>' + escapeHtml(data.name || '');
      if (data.department) {
        nameEl.innerHTML += '<span class="text-muted fw-normal small">（' + escapeHtml(data.department) + '）</span>';
      }
    }
    const emailWrap = item.querySelector('.contract-workflow-approver-email');
    const emailText = item.querySelector('.contract-workflow-approver-email-text');
    if (emailWrap && emailText) {
      if (data.email) {
        emailText.textContent = data.email;
        emailWrap.classList.remove('d-none');
      } else {
        emailText.textContent = '';
        emailWrap.classList.add('d-none');
      }
    }
    const head = item.querySelector('.contract-workflow-approver-head');
    if (head) head.textContent = '第' + (data.approval_order || 1) + '承認者';
    return item;
  }

  function escapeHtml(text) {
    return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function resetApproverModal() {
    if (approverEditIndex) approverEditIndex.value = '';
    if (approverOrder) approverOrder.value = String(nextApprovalOrder());
    if (approverDepartment) approverDepartment.value = '';
    if (approverName) approverName.value = '';
    if (approverEmail) approverEmail.value = '';
    if (approverOperatorPick) approverOperatorPick.value = '';
  }

  function fillApproverModalFromItem(item) {
    if (!item) return;
    if (approverEditIndex) approverEditIndex.value = item.dataset.approverIndex || '';
    if (approverOrder) approverOrder.value = item.querySelector('[data-field="approval_order"]')?.value || '1';
    if (approverDepartment) approverDepartment.value = item.querySelector('[data-field="department"]')?.value || '';
    if (approverName) approverName.value = item.querySelector('[data-field="name"]')?.value || '';
    if (approverEmail) approverEmail.value = item.querySelector('[data-field="email"]')?.value || '';
  }

  if (workflowToggle) {
    workflowToggle.addEventListener('change', syncWorkflowVisibility);
    syncWorkflowVisibility();
  }

  if (approverOperatorPick && approverName) {
    approverOperatorPick.addEventListener('change', function () {
      const picked = approverOperatorPick.value;
      if (picked === '' || picked === '__manual__') {
        if (picked === '__manual__') {
          approverName.value = '';
          if (approverEmail) approverEmail.value = '';
          approverName.focus();
        }
        return;
      }
      const opt = approverOperatorPick.selectedOptions[0];
      if (!opt) return;
      approverName.value = opt.getAttribute('data-name') || '';
      if (approverEmail) approverEmail.value = opt.getAttribute('data-email') || '';
    });
  }

  if (approverModal) {
    approverModal.addEventListener('show.bs.modal', function (event) {
      const trigger = event.relatedTarget;
      const editBtn = trigger && trigger.classList && trigger.classList.contains('contract-workflow-edit') ? trigger : null;
      if (editBtn) {
        fillApproverModalFromItem(editBtn.closest('.contract-workflow-approver-item'));
      } else {
        resetApproverModal();
      }
    });
  }

  if (approverSave && workflowList) {
    approverSave.addEventListener('click', function () {
      const name = (approverName?.value || '').trim();
      if (!name) {
        approverName?.focus();
        return;
      }
      const data = {
        approval_order: parseInt(approverOrder?.value, 10) || 1,
        department: (approverDepartment?.value || '').trim(),
        name: name,
        email: (approverEmail?.value || '').trim(),
      };
      const editIdx = approverEditIndex?.value;
      if (editIdx !== '' && editIdx != null) {
        const existing = workflowList.querySelector('[data-approver-index="' + editIdx + '"]');
        if (existing) {
          const replacement = buildApproverRow(parseInt(editIdx, 10), data);
          if (replacement) existing.replaceWith(replacement);
        }
      } else {
        const index = workflowList.querySelectorAll('.contract-workflow-approver-item').length;
        const row = buildApproverRow(index, data);
        if (row) workflowList.appendChild(row);
      }
      reindexApproverList();
      if (approverModal && window.bootstrap) bootstrap.Modal.getInstance(approverModal)?.hide();
    });
  }

  if (workflowList) {
    workflowList.addEventListener('click', function (event) {
      const removeBtn = event.target.closest('.contract-workflow-remove');
      if (removeBtn) {
        removeBtn.closest('.contract-workflow-approver-item')?.remove();
        reindexApproverList();
        return;
      }
      const editBtn = event.target.closest('.contract-workflow-edit');
      if (editBtn && approverModal && window.bootstrap) {
        fillApproverModalFromItem(editBtn.closest('.contract-workflow-approver-item'));
        bootstrap.Modal.getOrCreateInstance(approverModal).show();
      }
    });
    reindexApproverList();
  }

  const signerModal = document.getElementById('contractAddSignerModal');
  const signerSave = document.getElementById('signer_modal_save');
  const signerList = document.getElementById('contract-signer-list');
  const signerEmpty = document.getElementById('contract-signer-empty');
  const signerEditIndex = document.getElementById('signer_edit_index');
  const signerOrder = document.getElementById('signer_modal_order');
  const signerPartyInternal = document.getElementById('signer_party_internal');
  const signerPartyCounterparty = document.getElementById('signer_party_counterparty');
  const signerFieldsInternal = document.getElementById('signer-fields-internal');
  const signerFieldsCounterparty = document.getElementById('signer-fields-counterparty');
  const signerFieldsEmailLanguage = document.getElementById('signer-fields-email-language');
  const signerFieldsAddressBook = document.getElementById('signer-fields-address-book');
  const signerDepartment = document.getElementById('signer_modal_department');
  const signerNameInternal = document.getElementById('signer_modal_name_internal');
  const signerEmailInternal = document.getElementById('signer_modal_email_internal');
  const signerOperatorPick = document.getElementById('signer_modal_representative_pick');
  const signerOrganization = document.getElementById('signer_modal_organization');
  const signerNameCounterparty = document.getElementById('signer_modal_name_counterparty');
  const signerEmailCounterparty = document.getElementById('signer_modal_email_counterparty');
  const signerAccessNone = document.getElementById('signer_access_none');
  const signerAccessCustom = document.getElementById('signer_access_custom');
  const signerAccessCode = document.getElementById('signer_modal_access_code');
  const signerAllowChange = document.getElementById('signer_modal_allow_change');
  const signerDeadline = document.getElementById('signer_modal_deadline');
  const signerComment = document.getElementById('signer_modal_comment');
  const signerEmailLanguage = document.getElementById('signer_modal_email_language');
  const signerAddressBook = document.getElementById('signer_modal_address_book');
  const signerRowTemplate = document.getElementById('signer-row-template');

  function currentPartyType() {
    return signerPartyInternal?.checked ? 'internal' : 'counterparty';
  }

  function syncSignerPartyFields() {
    const internal = currentPartyType() === 'internal';
    if (signerFieldsInternal) signerFieldsInternal.classList.toggle('d-none', !internal);
    if (signerFieldsCounterparty) signerFieldsCounterparty.classList.toggle('d-none', internal);
    if (signerFieldsEmailLanguage) signerFieldsEmailLanguage.classList.toggle('d-none', internal);
    if (signerFieldsAddressBook) signerFieldsAddressBook.classList.toggle('d-none', internal);
  }

  function syncSignerAccessCodeField() {
    const custom = !!(signerAccessCustom && signerAccessCustom.checked);
    if (signerAccessCode) {
      signerAccessCode.classList.toggle('d-none', !custom);
      if (!custom) signerAccessCode.value = '';
    }
  }

  function nextSignerOrder() {
    if (!signerList) return 1;
    let max = 0;
    signerList.querySelectorAll('[data-field="sign_order"]').forEach(function (input) {
      max = Math.max(max, parseInt(input.value, 10) || 0);
    });
    return max + 1;
  }

  function refreshSignerEmpty() {
    if (!signerEmpty || !signerList) return;
    const count = signerList.querySelectorAll('.contract-signer-item').length;
    signerEmpty.classList.toggle('d-none', count > 0);
  }

  function collectDocumentActions() {
    const actions = {};
    document.querySelectorAll('.contract-signer-doc-row').forEach(function (row) {
      const docId = row.getAttribute('data-document-id');
      const checked = row.querySelector('.signer-doc-action:checked');
      if (docId && checked) actions[docId] = checked.value;
    });
    return actions;
  }

  function applyDocumentActions(actions) {
    if (!actions || typeof actions !== 'object') return;
    Object.keys(actions).forEach(function (docId) {
      const input = document.getElementById('signer_doc_' + docId + '_' + actions[docId]);
      if (input) input.checked = true;
    });
  }

  function reindexSignerList() {
    if (!signerList) return;
    signerList.querySelectorAll('.contract-signer-item').forEach(function (item, index) {
      item.dataset.signerIndex = String(index);
      const orderInput = item.querySelector('[data-field="sign_order"]');
      const order = orderInput ? orderInput.value : (index + 1);
      const head = item.querySelector('.contract-signer-item-head');
      const partyType = item.querySelector('[data-field="party_type"]')?.value || 'counterparty';
      const partyLabel = partyType === 'internal' ? '自社署名者' : '送信先';
      if (head) {
        head.innerHTML = '第' + order + '署名者 <span class="badge bg-light text-dark border ms-1">' + partyLabel + '</span>';
      }
      item.querySelectorAll('input[type="hidden"]').forEach(function (input) {
        const field = input.getAttribute('data-field');
        if (field) {
          input.name = 'signers[' + index + '][' + field + ']';
        } else if (input.name && input.name.includes('[id]')) {
          input.name = 'signers[' + index + '][id]';
        }
      });
    });
    refreshSignerEmpty();
  }

  function buildSignerRow(index, data) {
    if (!signerRowTemplate) return null;
    let html = signerRowTemplate.innerHTML
      .replace(/__INDEX__/g, String(index))
      .replace(/__ORDER__/g, String(data.sign_order || 1))
      .replace(/__PARTY__/g, data.party_type || 'counterparty');
    const wrap = document.createElement('div');
    wrap.innerHTML = html.trim();
    const item = wrap.firstElementChild;
    if (!item) return null;
    item.dataset.partyType = data.party_type || 'counterparty';
    const fields = {
      sign_order: data.sign_order || 1,
      party_type: data.party_type || 'counterparty',
      signing_method: 'contract_seal',
      department: data.department || '',
      organization_name: data.organization_name || '',
      preset_name: data.preset_name || '',
      contact: data.contact || '',
      access_code: data.access_code || '',
      allow_signer_change: data.allow_signer_change ? '1' : '0',
      sign_deadline: data.sign_deadline || '',
      comment: data.comment || '',
      email_language: data.email_language || 'ja',
      add_to_address_book: data.add_to_address_book ? '1' : '0',
      document_actions_json: JSON.stringify(data.document_actions || {}),
    };
    Object.keys(fields).forEach(function (key) {
      const input = item.querySelector('[data-field="' + key + '"]');
      if (input) input.value = fields[key];
    });
    const partyLabel = fields.party_type === 'internal' ? '自社署名者' : '送信先';
    const nameEl = item.querySelector('.contract-signer-display-name');
    if (nameEl) {
      let suffix = '';
      if (fields.party_type === 'internal' && fields.department) {
        suffix = '<span class="text-muted fw-normal small">（' + escapeHtml(fields.department) + '）</span>';
      } else if (fields.organization_name) {
        suffix = '<span class="text-muted fw-normal small">（' + escapeHtml(fields.organization_name) + '）</span>';
      }
      nameEl.innerHTML = '<i class="bi bi-pen text-muted me-1" aria-hidden="true"></i>' + escapeHtml(fields.preset_name) + suffix;
    }
    const metaEl = item.querySelector('.contract-signer-display-meta');
    if (metaEl) {
      let meta = '<span class="badge bg-light text-dark border">契約印タイプ</span>';
      if (fields.contact) meta += '<span class="ms-2"><i class="bi bi-envelope me-1" aria-hidden="true"></i>' + escapeHtml(fields.contact) + '</span>';
      if (fields.access_code) meta += '<span class="ms-2"><i class="bi bi-shield-lock me-1" aria-hidden="true"></i>アクセスコードあり</span>';
      if (fields.allow_signer_change === '1') meta += '<span class="ms-2">署名者変更可</span>';
      metaEl.innerHTML = meta;
    }
    const head = item.querySelector('.contract-signer-item-head');
    if (head) head.innerHTML = '第' + fields.sign_order + '署名者 <span class="badge bg-light text-dark border ms-1">' + partyLabel + '</span>';
    return item;
  }

  function applyDefaultInternalSignerFromBusiness() {
    if (!businessSelect || !signerOperatorPick || !signerNameInternal) return;
    const businessId = businessSelect.value;
    if (!businessId) return;
    const opt = Array.from(signerOperatorPick.options).find(function (o) {
      return o.value === businessId;
    });
    if (!opt) return;
    signerOperatorPick.value = businessId;
    signerNameInternal.value = opt.getAttribute('data-name') || '';
    if (signerEmailInternal) {
      signerEmailInternal.value = opt.getAttribute('data-email') || '';
    }
  }

  function syncSignerRepresentativePickFromName() {
    if (!signerOperatorPick || !signerNameInternal) return;
    const value = (signerNameInternal.value || '').trim();
    let matched = false;
    Array.from(signerOperatorPick.options).forEach(function (opt) {
      if (opt.value && opt.value !== '__manual__' && (opt.getAttribute('data-name') || '') === value) {
        signerOperatorPick.value = opt.value;
        matched = true;
      }
    });
    if (!matched) {
      signerOperatorPick.value = value === '' ? '' : '__manual__';
    }
  }

  function resetSignerModal() {
    if (signerEditIndex) signerEditIndex.value = '';
    if (signerOrder) signerOrder.value = String(nextSignerOrder());
    if (signerPartyInternal) signerPartyInternal.checked = true;
    if (signerPartyCounterparty) signerPartyCounterparty.checked = false;
    if (signerDepartment) signerDepartment.value = '';
    if (signerNameInternal) signerNameInternal.value = '';
    if (signerEmailInternal) signerEmailInternal.value = '';
    if (signerOperatorPick) signerOperatorPick.value = '';
    if (signerOrganization) signerOrganization.value = '';
    if (signerNameCounterparty) signerNameCounterparty.value = '';
    if (signerEmailCounterparty) signerEmailCounterparty.value = '';
    if (signerAccessNone) signerAccessNone.checked = true;
    if (signerAccessCode) signerAccessCode.value = '';
    if (signerAllowChange) signerAllowChange.checked = false;
    if (signerDeadline) signerDeadline.value = '';
    if (signerComment) signerComment.value = '';
    if (signerEmailLanguage) signerEmailLanguage.value = 'ja';
    if (signerAddressBook) signerAddressBook.checked = false;
    document.querySelectorAll('.contract-signer-doc-row .signer-doc-action[value="sign"]').forEach(function (input) {
      input.checked = true;
    });
    syncSignerPartyFields();
    syncSignerAccessCodeField();
    applyDefaultInternalSignerFromBusiness();
  }

  function fillSignerModalFromItem(item) {
    if (!item) return;
    if (signerEditIndex) signerEditIndex.value = item.dataset.signerIndex || '';
    if (signerOrder) signerOrder.value = item.querySelector('[data-field="sign_order"]')?.value || '1';
    const partyType = item.querySelector('[data-field="party_type"]')?.value || 'counterparty';
    if (partyType === 'internal' && signerPartyInternal) signerPartyInternal.checked = true;
    else if (signerPartyCounterparty) signerPartyCounterparty.checked = true;
    syncSignerPartyFields();
    if (signerDepartment) signerDepartment.value = item.querySelector('[data-field="department"]')?.value || '';
    if (signerNameInternal) signerNameInternal.value = partyType === 'internal' ? (item.querySelector('[data-field="preset_name"]')?.value || '') : '';
    if (signerEmailInternal) signerEmailInternal.value = partyType === 'internal' ? (item.querySelector('[data-field="contact"]')?.value || '') : '';
    if (signerOrganization) signerOrganization.value = item.querySelector('[data-field="organization_name"]')?.value || '';
    if (signerNameCounterparty) signerNameCounterparty.value = partyType === 'counterparty' ? (item.querySelector('[data-field="preset_name"]')?.value || '') : '';
    if (signerEmailCounterparty) signerEmailCounterparty.value = partyType === 'counterparty' ? (item.querySelector('[data-field="contact"]')?.value || '') : '';
    const accessCode = item.querySelector('[data-field="access_code"]')?.value || '';
    if (accessCode && signerAccessCustom && signerAccessCode) {
      signerAccessCustom.checked = true;
      signerAccessCode.value = accessCode;
    } else if (signerAccessNone) {
      signerAccessNone.checked = true;
      if (signerAccessCode) signerAccessCode.value = '';
    }
    syncSignerAccessCodeField();
    if (signerAllowChange) signerAllowChange.checked = item.querySelector('[data-field="allow_signer_change"]')?.value === '1';
    if (signerDeadline) signerDeadline.value = item.querySelector('[data-field="sign_deadline"]')?.value || '';
    if (signerComment) signerComment.value = item.querySelector('[data-field="comment"]')?.value || '';
    if (signerEmailLanguage) signerEmailLanguage.value = item.querySelector('[data-field="email_language"]')?.value || 'ja';
    if (signerAddressBook) signerAddressBook.checked = item.querySelector('[data-field="add_to_address_book"]')?.value === '1';
    try {
      const docJson = item.querySelector('[data-field="document_actions_json"]')?.value || '{}';
      applyDocumentActions(JSON.parse(docJson));
    } catch (e) {
      applyDocumentActions({});
    }
    if (partyType === 'internal') {
      syncSignerRepresentativePickFromName();
    }
  }

  if (signerPartyInternal) signerPartyInternal.addEventListener('change', syncSignerPartyFields);
  if (signerPartyCounterparty) signerPartyCounterparty.addEventListener('change', syncSignerPartyFields);
  if (signerAccessNone) signerAccessNone.addEventListener('change', syncSignerAccessCodeField);
  if (signerAccessCustom) signerAccessCustom.addEventListener('change', syncSignerAccessCodeField);

  if (signerOperatorPick && signerNameInternal) {
    signerOperatorPick.addEventListener('change', function () {
      const picked = signerOperatorPick.value;
      if (picked === '' || picked === '__manual__') {
        if (picked === '__manual__') {
          signerNameInternal.value = '';
          if (signerEmailInternal) signerEmailInternal.value = '';
          signerNameInternal.focus();
        }
        return;
      }
      const opt = signerOperatorPick.selectedOptions[0];
      if (!opt) return;
      signerNameInternal.value = opt.getAttribute('data-name') || '';
      if (signerEmailInternal) signerEmailInternal.value = opt.getAttribute('data-email') || '';
    });
  }

  if (signerModal) {
    signerModal.addEventListener('show.bs.modal', function (event) {
      const trigger = event.relatedTarget;
      const editBtn = trigger && trigger.classList && trigger.classList.contains('contract-signer-edit') ? trigger : null;
      if (editBtn) {
        fillSignerModalFromItem(editBtn.closest('.contract-signer-item'));
      } else {
        resetSignerModal();
      }
      if (window.bootstrap) {
        signerModal.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
          bootstrap.Tooltip.getOrCreateInstance(el);
        });
      }
    });
  }

  if (signerSave && signerList) {
    signerSave.addEventListener('click', function () {
      const partyType = currentPartyType();
      let name = '';
      let contact = '';
      if (partyType === 'internal') {
        name = (signerNameInternal?.value || '').trim();
        contact = (signerEmailInternal?.value || '').trim();
        if (!name) {
          signerNameInternal?.focus();
          return;
        }
      } else {
        name = (signerNameCounterparty?.value || '').trim();
        contact = (signerEmailCounterparty?.value || '').trim();
        if (!name) {
          signerNameCounterparty?.focus();
          return;
        }
        if (!contact) {
          signerEmailCounterparty?.focus();
          return;
        }
      }
      const accessCustom = !!(signerAccessCustom && signerAccessCustom.checked);
      const accessCode = accessCustom ? (signerAccessCode?.value || '').trim() : '';
      if (accessCustom && !accessCode) {
        signerAccessCode?.focus();
        return;
      }
      const data = {
        sign_order: parseInt(signerOrder?.value, 10) || 1,
        party_type: partyType,
        department: partyType === 'internal' ? (signerDepartment?.value || '').trim() : '',
        organization_name: partyType === 'counterparty' ? (signerOrganization?.value || '').trim() : '',
        preset_name: name,
        contact: contact,
        access_code: accessCode,
        allow_signer_change: !!(signerAllowChange && signerAllowChange.checked),
        sign_deadline: signerDeadline?.value || '',
        comment: (signerComment?.value || '').trim(),
        email_language: signerEmailLanguage?.value || 'ja',
        add_to_address_book: !!(signerAddressBook && signerAddressBook.checked),
        document_actions: collectDocumentActions(),
      };
      const editIdx = signerEditIndex?.value;
      if (editIdx !== '' && editIdx != null) {
        const existing = signerList.querySelector('[data-signer-index="' + editIdx + '"]');
        const rowIdInput = existing?.querySelector('input[name*="[id]"]');
        if (rowIdInput) data.id = rowIdInput.value;
        if (existing) {
          const replacement = buildSignerRow(parseInt(editIdx, 10), data);
          if (replacement) {
            if (rowIdInput && data.id) {
              const hiddenId = document.createElement('input');
              hiddenId.type = 'hidden';
              hiddenId.name = 'signers[' + editIdx + '][id]';
              hiddenId.value = data.id;
              replacement.querySelector('.flex-grow-1')?.appendChild(hiddenId);
            }
            existing.replaceWith(replacement);
          }
        }
      } else {
        const index = signerList.querySelectorAll('.contract-signer-item').length;
        const row = buildSignerRow(index, data);
        if (row) signerList.appendChild(row);
      }
      reindexSignerList();
      if (signerModal && window.bootstrap) bootstrap.Modal.getInstance(signerModal)?.hide();
    });
  }

  if (signerList) {
    signerList.addEventListener('click', function (event) {
      const removeBtn = event.target.closest('.contract-signer-remove');
      if (removeBtn) {
        removeBtn.closest('.contract-signer-item')?.remove();
        reindexSignerList();
        return;
      }
      const editBtn = event.target.closest('.contract-signer-edit');
      if (editBtn && signerModal && window.bootstrap) {
        fillSignerModalFromItem(editBtn.closest('.contract-signer-item'));
        bootstrap.Modal.getOrCreateInstance(signerModal).show();
      }
    });
    reindexSignerList();
  }

  syncSignerPartyFields();
  syncSignerAccessCodeField();

  const signRequestForm = document.getElementById('contract-sign-request-form');
  const proceedBtn = document.getElementById('sign-request-proceed-btn');
  if (signRequestForm && proceedBtn) {
    signRequestForm.addEventListener('submit', function (event) {
      const submitter = event.submitter;
      if (!submitter || submitter.getAttribute('name') !== 'action' || submitter.value !== 'proceed') {
        return;
      }
      const signerCount = signerList ? signerList.querySelectorAll('.contract-signer-item').length : 0;
      if (signerCount === 0) {
        event.preventDefault();
        alert('署名者を1名以上追加してください。＋ から追加し、モーダルで「保存」を押してから次へ進んでください。');
        document.getElementById('contract-signer-body')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  }

  const recipientToggle = document.getElementById('enable_recipient');
  const recipientBody = document.getElementById('contract-recipient-body');
  const recipientAddWrap = document.getElementById('recipient-add-wrap');
  const recipientSetupBtn = document.querySelector('.contract-recipient-band .contract-workflow-setup-btn');
  const recipientList = document.getElementById('contract-recipient-list');
  const recipientEmpty = document.getElementById('contract-recipient-empty');
  const recipientModal = document.getElementById('contractRecipientModal');
  const recipientSave = document.getElementById('recipient_modal_save');
  const recipientEditIndex = document.getElementById('recipient_edit_index');
  const recipientName = document.getElementById('recipient_modal_name');
  const recipientContact = document.getElementById('recipient_modal_contact');
  const recipientOperatorPick = document.getElementById('recipient_modal_operator_pick');
  const recipientRowTemplate = document.getElementById('recipient-row-template');

  function syncRecipientVisibility() {
    const on = !!(recipientToggle && recipientToggle.checked);
    if (recipientBody) recipientBody.classList.toggle('d-none', !on);
    if (recipientAddWrap) recipientAddWrap.classList.toggle('d-none', !on);
    if (recipientSetupBtn) recipientSetupBtn.classList.toggle('is-active', on);
    if (recipientList) {
      recipientList.querySelectorAll('input[type="hidden"]').forEach(function (input) {
        input.disabled = !on;
      });
    }
  }

  function refreshRecipientEmpty() {
    if (!recipientEmpty || !recipientList) return;
    const count = recipientList.querySelectorAll('.contract-recipient-item').length;
    recipientEmpty.classList.toggle('d-none', count > 0);
  }

  function reindexRecipientList() {
    if (!recipientList) return;
    recipientList.querySelectorAll('.contract-recipient-item').forEach(function (item, index) {
      item.dataset.recipientIndex = String(index);
      item.querySelectorAll('input[type="hidden"]').forEach(function (input) {
        const field = input.getAttribute('data-field');
        if (field) {
          input.name = 'recipients[' + index + '][' + field + ']';
        } else if (input.name && input.name.includes('[id]')) {
          input.name = 'recipients[' + index + '][id]';
        }
      });
    });
    refreshRecipientEmpty();
  }

  function buildRecipientRow(index, data) {
    if (!recipientRowTemplate) return null;
    let html = recipientRowTemplate.innerHTML.replace(/__INDEX__/g, String(index));
    const wrap = document.createElement('div');
    wrap.innerHTML = html.trim();
    const item = wrap.firstElementChild;
    if (!item) return null;
    item.querySelector('[data-field="name"]').value = data.name || '';
    item.querySelector('[data-field="contact"]').value = data.contact || '';
    const nameEl = item.querySelector('.contract-recipient-name');
    if (nameEl) {
      nameEl.innerHTML = '<i class="bi bi-person text-muted me-1" aria-hidden="true"></i>' + escapeHtml(data.name || '');
    }
    const contactWrap = item.querySelector('.contract-recipient-contact');
    const contactText = item.querySelector('.contract-recipient-contact-text');
    if (contactWrap && contactText) {
      if (data.contact) {
        contactText.textContent = data.contact;
        contactWrap.classList.remove('d-none');
      } else {
        contactText.textContent = '';
        contactWrap.classList.add('d-none');
      }
    }
    return item;
  }

  function resetRecipientModal() {
    if (recipientEditIndex) recipientEditIndex.value = '';
    if (recipientName) recipientName.value = '';
    if (recipientContact) recipientContact.value = '';
    if (recipientOperatorPick) recipientOperatorPick.value = '';
  }

  function fillRecipientModalFromItem(item) {
    if (!item) return;
    if (recipientEditIndex) recipientEditIndex.value = item.dataset.recipientIndex || '';
    if (recipientName) recipientName.value = item.querySelector('[data-field="name"]')?.value || '';
    if (recipientContact) recipientContact.value = item.querySelector('[data-field="contact"]')?.value || '';
  }

  if (recipientToggle) {
    recipientToggle.addEventListener('change', syncRecipientVisibility);
    syncRecipientVisibility();
  }

  if (recipientOperatorPick && recipientName) {
    recipientOperatorPick.addEventListener('change', function () {
      const picked = recipientOperatorPick.value;
      if (picked === '' || picked === '__manual__') {
        if (picked === '__manual__') {
          recipientName.value = '';
          if (recipientContact) recipientContact.value = '';
          recipientName.focus();
        }
        return;
      }
      const opt = recipientOperatorPick.selectedOptions[0];
      if (!opt) return;
      recipientName.value = opt.getAttribute('data-name') || '';
      if (recipientContact) recipientContact.value = opt.getAttribute('data-email') || '';
    });
  }

  if (recipientModal) {
    recipientModal.addEventListener('show.bs.modal', function (event) {
      const trigger = event.relatedTarget;
      const editBtn = trigger && trigger.classList && trigger.classList.contains('contract-recipient-edit') ? trigger : null;
      if (editBtn) {
        fillRecipientModalFromItem(editBtn.closest('.contract-recipient-item'));
      } else {
        resetRecipientModal();
      }
    });
  }

  if (recipientSave && recipientList) {
    recipientSave.addEventListener('click', function () {
      const name = (recipientName?.value || '').trim();
      const contact = (recipientContact?.value || '').trim();
      if (!name) {
        recipientName?.focus();
        return;
      }
      if (!contact) {
        recipientContact?.focus();
        return;
      }
      const data = { name: name, contact: contact };
      const editIdx = recipientEditIndex?.value;
      if (editIdx !== '' && editIdx != null) {
        const existing = recipientList.querySelector('[data-recipient-index="' + editIdx + '"]');
        const rowIdInput = existing?.querySelector('input[name*="[id]"]');
        if (rowIdInput) data.id = rowIdInput.value;
        if (existing) {
          const replacement = buildRecipientRow(parseInt(editIdx, 10), data);
          if (replacement) {
            if (rowIdInput && data.id) {
              const hiddenId = document.createElement('input');
              hiddenId.type = 'hidden';
              hiddenId.name = 'recipients[' + editIdx + '][id]';
              hiddenId.value = data.id;
              replacement.querySelector('.flex-grow-1')?.appendChild(hiddenId);
            }
            existing.replaceWith(replacement);
          }
        }
      } else {
        const index = recipientList.querySelectorAll('.contract-recipient-item').length;
        const row = buildRecipientRow(index, data);
        if (row) recipientList.appendChild(row);
      }
      reindexRecipientList();
      if (recipientModal && window.bootstrap) bootstrap.Modal.getInstance(recipientModal)?.hide();
    });
  }

  if (recipientList) {
    recipientList.addEventListener('click', function (event) {
      const removeBtn = event.target.closest('.contract-recipient-remove');
      if (removeBtn) {
        removeBtn.closest('.contract-recipient-item')?.remove();
        reindexRecipientList();
        return;
      }
      const editBtn = event.target.closest('.contract-recipient-edit');
      if (editBtn && recipientModal && window.bootstrap) {
        fillRecipientModalFromItem(editBtn.closest('.contract-recipient-item'));
        bootstrap.Modal.getOrCreateInstance(recipientModal).show();
      }
    });
    reindexRecipientList();
  }
})();
</script>
@endpush