@if($advanceMode ?? false)
{{-- 前渡金モード用テーブル（チェックボックス列なし） --}}
<table id="detail" class="entry-slip-detail-table-row">
    <colgroup>
        <col class="w-32"> <!-- 仕入先コード -->
        <col class="w-48"> <!-- 仕入先名 -->
        <col class="w-28"> <!-- 通貨 -->
        <col class="w-20"> <!-- レート -->
        <col class="w-32"> <!-- 今回支払金額(外貨) -->
        <col class="w-32"> <!-- 今回支払金額 -->
        <col class="min-w-40"> <!-- メモ -->
    </colgroup>
    <thead>
        <tr>
            <th>仕入先コード</th>
            <th>仕入先名</th>
            <th>通貨</th>
            <th>レート</th>
            <th>今回支払金額(外貨)</th>
            <th>今回支払金額</th>
            <th>メモ</th>
        </tr>
    </thead>
    <tbody>
        @foreach($rows as $row)
            @include('user.payment-disbursement.partials.entry-detail-row-advance',
                ['index'=>$loop->index, 'row'=>(object)$row])
        @endforeach
    </tbody>
</table>
@else
{{-- 通常支払モード用テーブル --}}
<table id="detail" class="entry-slip-detail-table-row">
    <colgroup>
        @if ($mode!="edit")
        <col class="w-10"> <!-- 選択 -->
        @endif
        <col class="w-24"> <!-- 入荷日 -->
        <col class="w-32"> <!-- 伝票No. -->
        <col class="w-24"> <!-- INVOICE No. -->
        <col class="w-28"> <!-- 通貨 -->
        <col class="w-20"> <!-- レート -->
        <col class="w-28"> <!-- 仕入金額(外貨) -->
        <col class="w-28"> <!-- 仕入金額 -->
        <col class="w-28"> <!-- 支払済金額(外貨) -->
        <col class="w-28"> <!-- 支払済金額 -->
        <col class="w-28"> <!-- 残高(外貨) -->
        <col class="w-28"> <!-- 残高 -->
        <col class="w-32"> <!-- 今回支払金額(外貨) -->
        <col class="w-32"> <!-- 今回支払金額 -->
        <col class="min-w-40"> <!-- メモ -->
    </colgroup>
    <thead>
        <tr>
            @if ($mode!="edit")
            <th><i class="fa-solid fa-pen text-secondary-500"></i></th>
            @endif
            <th>入荷日</th>
            <th>伝票No.</th>
            <th>INVOICE No.</th>
            <th>通貨</th>
            <th>レート</th>
            <th>仕入金額(外貨)</th>
            <th>仕入金額</th>
            <th>支払済金額(外貨)</th>
            <th>支払済金額</th>
            <th>残高(外貨)</th>
            <th>残高</th>
            <th>今回支払金額(外貨)</th>
            <th>今回支払金額</th>
            <th>メモ</th>
        </tr>
    </thead>
    <tbody>
        @foreach($rows as $row)
            @include('user.payment-disbursement.partials.entry-detail-row',
                ['index'=>$loop->index, 'row'=>(object)$row])
        @endforeach
    </tbody>
</table>
@endif

<script>
function updateExchangeRate(index, value) {
    console.log(`updateExchangeRate呼び出し: index=${index}, value=${value}`);
    // LivewireコンポーネントのupdateExchangeRateメソッドを呼び出し
    window.Livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id')).call('updateExchangeRate', index, value)
    .then(() => {
        console.log('updateExchangeRate完了後にapplyDigitsToAllRows実行');
        setTimeout(() => applyDigitsToAllRows(), 100);
    })
    .catch(error => {
        console.error('updateExchangeRateエラー:', error);
    });
}


  // 通貨変更時に桁数を更新する関数
  function updateCurrencyDigits(index, digits) {
      // 必要なオブジェクトの存在確認
      if (typeof Action === 'undefined' || typeof Alpine === 'undefined') {
          return;
      }
      
      // レート入力フィールドの桁数を更新
      const exchangeRateSelector = `#exchange_rate_${index}`;
      const exchangeRateElement = document.querySelector(exchangeRateSelector);
      
      if (exchangeRateElement) {
          try {
              const xdataObj = Action.xdata(exchangeRateSelector);
              
              // 桁数が同じでも強制実行してフィールドを再初期化
              xdataObj.setDigit(digits,false);
              
              /*
              // 現在の値を新しい桁数で再フォーマット
              const currentDisplayValue = exchangeRateElement.value || xdataObj.value || '';
              if (currentDisplayValue && currentDisplayValue !== '') {
                  const currentValue = parseFloat(currentDisplayValue.replace(/,/g, ''));
                  if (!isNaN(currentValue)) {
                      const formattedValue = currentValue.toFixed(digits);
                      exchangeRateElement.value = formattedValue;
                      if (xdataObj.value !== undefined) {
                          xdataObj.value = formattedValue;
                      }
                      // Livewireモデルの値も確実に更新
                      if (exchangeRateElement._x_model) {
                          exchangeRateElement._x_model.set(formattedValue);
                      }
                      exchangeRateElement.dispatchEvent(new Event('input', { bubbles: true }));
                  }
              }
              */
          } catch (error) {
              console.error('レート桁数変更エラー:', error);
          }
      }

      // 今回支払金額(外貨)入力フィールドの桁数を更新
      const paymentAmountSelector = `#payment_amount_${index}`;
      const paymentAmountElement = document.querySelector(paymentAmountSelector);
      
      if (paymentAmountElement) {
          try {
              const xdataObj = Action.xdata(paymentAmountSelector);
              
              // 桁数が同じでも強制実行してフィールドを再初期化
              xdataObj.setDigit(digits,false);
              /*
              // 現在の値を新しい桁数で再フォーマット
              const currentDisplayValue = paymentAmountElement.value || xdataObj.value || '';
              if (currentDisplayValue && currentDisplayValue !== '') {
                  const currentValue = parseFloat(currentDisplayValue.replace(/,/g, ''));
                  if (!isNaN(currentValue)) {
                      const formattedValue = currentValue.toFixed(digits);
                      paymentAmountElement.value = formattedValue;
                      if (xdataObj.value !== undefined) {
                          xdataObj.value = formattedValue;
                      }
                      // Livewireモデルの値も確実に更新
                      if (paymentAmountElement._x_model) {
                          paymentAmountElement._x_model.set(formattedValue);
                      }
                      paymentAmountElement.dispatchEvent(new Event('input', { bubbles: true }));
                  }
              }
              */
          } catch (error) {
              console.error('支払金額(外貨)桁数変更エラー:', error);
          }
      }
  }

  // 全行の桁数を適用する関数
  function applyDigitsToAllRows() {
      // Livewireコンポーネントから桁数情報を取得
      console.log("applyDigitsToAllRows実行");
      const component = window.Livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id'));
      if (!component) {
          return;
      }
      
      const rows = component.get('rows');
      if (!rows) {
          return;
      }
      
      rows.forEach((row, index) => {
          const digits = rows[index]["decimal_digits"];

          // レート入力フィールドの桁数を適用
          const exchangeRateSelector = `#exchange_rate_${index}`;
          const exchangeRateElement = document.querySelector(exchangeRateSelector);
          if (exchangeRateElement && typeof Action !== 'undefined') {
              try {
                  const xdataObj = Action.xdata(exchangeRateSelector);
                  // [DEBUG] applyDigitsToAllRows - exchange_rate処理前
                  console.log(`[DEBUG applyDigitsToAllRows] index=${index}, digits=${digits}`);
                  console.log(`[DEBUG applyDigitsToAllRows] BEFORE: element.value="${exchangeRateElement.value}", xdataObj.value="${xdataObj.value}"`);
                  // 桁数が同じでも強制実行
                  xdataObj.setDigit(digits,false);
                  // [DEBUG] applyDigitsToAllRows - exchange_rate処理後
                  console.log(`[DEBUG applyDigitsToAllRows] AFTER: element.value="${exchangeRateElement.value}", xdataObj.value="${xdataObj.value}"`);
                  /*
                  // 既存値を新しい桁数で再フォーマット
                  const currentValue = exchangeRateElement.value || xdataObj.value || '';
                  if (currentValue && currentValue !== '') {
                      const numericValue = parseFloat(currentValue.replace(/,/g, ''));
                      if (!isNaN(numericValue)) {
                          const formattedValue = numericValue.toFixed(digits);
                          exchangeRateElement.value = formattedValue;
                          if (xdataObj.value !== undefined) {
                              xdataObj.value = formattedValue;
                          }
                          if (exchangeRateElement._x_model) {
                              exchangeRateElement._x_model.set(formattedValue);
                          }
                          exchangeRateElement.dispatchEvent(new Event('input', { bubbles: true }));
                      }
                  }
                  */
              } catch (error) {
                  // エラーは無視
              }
          }
          
          // 今回支払金額(外貨)入力フィールドの桁数を適用
          const paymentAmountSelector = `#payment_amount_${index}`;
          const paymentAmountElement = document.querySelector(paymentAmountSelector);
          if (paymentAmountElement && typeof Action !== 'undefined') {
              try {
                  const xdataObj = Action.xdata(paymentAmountSelector);
                  // console.log("setDigit実行_4");
                  // 桁数が同じでも強制実行
                  xdataObj.setDigit(digits,false);
                  /*
                  // 既存値を新しい桁数で再フォーマット
                  const currentValue = paymentAmountElement.value || xdataObj.value || '';
                  if (currentValue && currentValue !== '') {
                      const numericValue = parseFloat(currentValue.replace(/,/g, ''));
                      if (!isNaN(numericValue)) {
                          const formattedValue = numericValue.toFixed(digits);
                          paymentAmountElement.value = formattedValue;
                          if (xdataObj.value !== undefined) {
                              xdataObj.value = formattedValue;
                          }
                          if (paymentAmountElement._x_model) {
                              paymentAmountElement._x_model.set(formattedValue);
                          }
                          paymentAmountElement.dispatchEvent(new Event('input', { bubbles: true }));
                      }
                  }
                  */
              } catch (error) {
                  // エラーは無視
              }
          }
      });
  }


  
  // PHP側から直接渡されたデータでフィールドを更新する関数
  function processFieldUpdatesWithData(updateData) {
      const { rows } = updateData;
      if (!rows) {
          return;
      }
      
      processFieldUpdates(rows);
  }

  // フィールド更新処理を分離
  function processFieldUpdates(rows) {
      console.log('[DEBUG processFieldUpdates] 開始');
      rows.forEach((row, index) => {
          const digits = rows[index]["decimal_digits"];

          // レート入力フィールドを新しいデータで更新
          const exchangeRateSelector = `#exchange_rate_${index}`;
          const exchangeRateElement = document.querySelector(exchangeRateSelector);
          if (exchangeRateElement && typeof Action !== 'undefined') {
              try {
                  const xdataObj = Action.xdata(exchangeRateSelector);
                  // [DEBUG] processFieldUpdates - 処理前の値をログ
                  console.log(`[DEBUG processFieldUpdates] index=${index}, digits=${digits}`);
                  console.log(`[DEBUG processFieldUpdates] row.exchange_rate="${row.exchange_rate}" (type: ${typeof row.exchange_rate})`);
                  console.log(`[DEBUG processFieldUpdates] BEFORE: element.value="${exchangeRateElement.value}", xdataObj.value="${xdataObj.value}"`);

                  const newValue = parseFloat(row.exchange_rate || 0).toFixed(digits);
                  console.log(`[DEBUG processFieldUpdates] newValue after toFixed(${digits})="${newValue}"`);

                  // 桁数設定（既にnewValueでフォーマット済みなので、再フォーマットしない）
                  xdataObj.setDigit(digits, false);
                  console.log(`[DEBUG processFieldUpdates] AFTER setDigit: element.value="${exchangeRateElement.value}", xdataObj.value="${xdataObj.value}"`);

                  // 現在の値をクリアして新しい値を設定
                  exchangeRateElement.value = '';
                  if (xdataObj.value !== undefined) {
                      xdataObj.value = '';
                  }

                  // 新しい値を設定
                  exchangeRateElement.value = newValue;
                  if (xdataObj.value !== undefined) {
                      xdataObj.value = newValue;
                  }
                  console.log(`[DEBUG processFieldUpdates] AFTER value set: element.value="${exchangeRateElement.value}", xdataObj.value="${xdataObj.value}"`);

                  // Livewireモデルを確実に更新
                  if (exchangeRateElement._x_model) {
                      exchangeRateElement._x_model.set(newValue);
                  }

                  // イベントを発火して変更を通知
                  exchangeRateElement.dispatchEvent(new Event('input', { bubbles: true }));
                  exchangeRateElement.dispatchEvent(new Event('change', { bubbles: true }));
                  console.log(`[DEBUG processFieldUpdates] イベント発火後: element.value="${exchangeRateElement.value}"`);
                  
                  
              } catch (error) {
                  console.error(`レート更新エラー(${index}):`, error);
              }
          }
          
          // 今回支払金額(外貨)入力フィールドを新しいデータで更新（0.00）
          const paymentAmountSelector = `#payment_amount_${index}`;
          const paymentAmountElement = document.querySelector(paymentAmountSelector);
          if (paymentAmountElement && typeof Action !== 'undefined') {
              try {
                  const xdataObj = Action.xdata(paymentAmountSelector);
                  const newValue = parseFloat(row.payment_amount || 0).toFixed(digits);

                  // 桁数設定（既にnewValueでフォーマット済みなので、再フォーマットしない）
                  xdataObj.setDigit(digits, false);
                  
                  // 現在の値をクリアして新しい値を設定
                  paymentAmountElement.value = '';
                  if (xdataObj.value !== undefined) {
                      xdataObj.value = '';
                  }
                  
                  // 新しい値を設定
                  paymentAmountElement.value = newValue;
                  if (xdataObj.value !== undefined) {
                      xdataObj.value = newValue;
                  }
                  
                  // Livewireモデルを確実に更新
                  if (paymentAmountElement._x_model) {
                      paymentAmountElement._x_model.set(newValue);
                  }
                  
                  // イベントを発火して変更を通知
                  paymentAmountElement.dispatchEvent(new Event('input', { bubbles: true }));
                  paymentAmountElement.dispatchEvent(new Event('change', { bubbles: true }));
                  
                  
              } catch (error) {
                  console.error(`支払金額更新エラー(${index}):`, error);
              }
          }
      });
      
  }

  // Livewireイベントリスナー
  document.addEventListener('DOMContentLoaded', function () {
      console.log('DOMContentLoaded');
      // Livewireの各種イベントで桁数を適用
      document.addEventListener('livewire:updated', function (event) {
          // [DEBUG] livewire:updated時のexchange_rate値をログ
          const exchangeRateEl = document.querySelector('#exchange_rate_0');
          console.log('[DEBUG livewire:updated] exchange_rate_0 element.value=', exchangeRateEl ? exchangeRateEl.value : 'not found');
          console.log('document livewire:updated発火', event);
          setTimeout(() => applyDigitsToAllRows(), 50);
      });

      document.addEventListener('livewire:init', function (event) {
          console.log('livewire:init発火', event);
          setTimeout(() => applyDigitsToAllRows(), 500);
      });

      document.addEventListener('livewire:load', function (event) {
          console.log('livewire:load発火', event);
          setTimeout(() => applyDigitsToAllRows(), 500);
      });

      // windowレベルでもリッスン
      window.addEventListener('livewire:updated', function (event) {
          // [DEBUG] livewire:updated時のexchange_rate値をログ
          const exchangeRateEl = document.querySelector('#exchange_rate_0');
          console.log('[DEBUG window livewire:updated] exchange_rate_0 element.value=', exchangeRateEl ? exchangeRateEl.value : 'not found');
          console.log('window livewire:updated発火', event);
          setTimeout(() => applyDigitsToAllRows(), 50);
      });

      // MutationObserverで DOM変更を監視（フォールバック）
      const observer = new MutationObserver(function(mutations) {
          // [DEBUG] MutationObserver時のexchange_rate値をログ
          const exchangeRateEl = document.querySelector('#exchange_rate_0');
          console.log('[DEBUG MutationObserver] exchange_rate_0 element.value=', exchangeRateEl ? exchangeRateEl.value : 'not found');
          console.log('MutationObserver');
          applyDigitsToAllRows();
      });


      // 監視対象の要素が存在するまで待つ
      setTimeout(() => {
          const targetElement = document.querySelector('#detail');
          if (targetElement) {
              observer.observe(targetElement, { 
                  childList: true, 
                  subtree: true,
                  attributes: true,
                  attributeFilter: ['wire:model', 'value']
              });
          }
      }, 1000);
      
      // 初回読み込み時も適用
      setTimeout(() => {
          applyDigitsToAllRows();
      }, 2000);

      // 補助的なイベントリスナー
      if (typeof Livewire !== 'undefined') {
          Livewire.on('currency-digits-updated', (event) => {
              if (event && typeof event === 'object') {
                  console.log('currency-digits-updated_1');
                  updateCurrencyDigits(event.index, event.digits);
              }
          });
      }

      // 古いLivewire構文サポート
      if (typeof window.livewire !== 'undefined') {
          window.livewire.on('currency-digits-updated', function (data) {
              console.log('currency-digits-updated_2');
              updateCurrencyDigits(data.index, data.digits);
          });
      }


  });



</script>