{{-- ★明細行を編集｜##TODO:0805%003 --}}
{{-- ★入金額・理由種別・コメントは、チェックボックスのON／OFFによって編集／表示を切り替える --}}
@php($edit = Enum::match('Flag.On', $row->edit))
@php($onValue = Enum::value('Flag.On'))
@php($offValue = Enum::value('Flag.Off'))
<tr x-data='{
    edit: {{ $row->edit === $onValue ? "true" : "false" }},
    paymentAmount: "{{ $row->payment_amount ?? "" }}",
    discrepancyAmount: "{{ $row->discrepancy_amount ?? "" }}",
    refAmount: "{{ num_unformat($row->ref_amount ?? 0) }}",
    toggleEdit() {
        this.edit = !this.edit;
    },
    calculateDiscrepancy() {
        const payment = parseFloat(this.paymentAmount.replace(/,/g, "")) || 0;
        const amount = parseFloat(this.refAmount) || 0;
        const discrepancy = amount - payment;
        this.discrepancyAmount = discrepancy.toLocaleString("ja-JP");
    }
}'>
    <td class="text-center">
        <input type="hidden" name="seq[]" value="{{$index}}" />
        <input type="hidden" name="%id[]" value="{{$row->id ?? ''}}" />
        {{-- 実際にPOSTされる値 --}}
        <input type="hidden" name="%edit[]" x-bind:value="edit ? '{{$onValue}}' : '{{$offValue}}'" />
        {{-- 表示用チェックボックス（別名） --}}
        <input type="checkbox"
            :checked="edit"
            @change="toggleEdit()"
            class="form-checkbox h-4 w-4 text-primary-600" />
        <input type="hidden" name="%serialize[]" value="{{$row->serialize}}" />
    </td>
    {{-- 伝票No --}}
    <td class="readonly text-center">
        {{$row->ref_slip_number}}
    </td>
    {{-- 明細No. --}}
    <td class="readonly text-center">
        {{$row->ref_line_no}}
    </td>
    {{-- 売上日	. --}}
    <td class="readonly text-center">
        {{$row->ref_sales_date}}
    </td>
    {{-- 商品コード --}}
    <td class="readonly text-center">
        {{$row->ref_product_code}}
    </td>
    {{-- 商品名 --}}
    <td class="readonly">
        {{$row->ref_product_name}}
    </td>
    {{-- 売上額 --}}
    <td class="readonly text-right">
        <x-input.row-item name="%ref_amount[]" 
            value="{{num_format($row->ref_amount)}}" 
            class="w-full text-right"/>
    </td>
    {{-- 入金額 --}}
    <td>
        <div x-show="edit">
            <x-input.number name="%payment_amount[]"
                x-model="paymentAmount"
                @input="calculateDiscrepancy()"
                class="w-full text-right"/>
            <x-input.error item="%payment_amount.{{$index}}" />
        </div>
    </td>
    {{-- 差額 --}}
    <td class="readonly">
        <x-input.text name="%discrepancy_amount[]"
            x-bind:value="discrepancyAmount"
            class="w-full text-right"
            x-bind:class="!edit ? 'hidden' : ''"
            readonly />
    </td>
    {{-- 理由種別 --}}
    <td>
        <div x-show="edit">
            <x-input.enum-select key="ReasonType" class="w-full"
                name="%reason_type[]"
                value="{{$row->reason_type}}" required />
            <x-input.error item="%reason_type.{{$index}}" />
        </div>
    </td>
    {{-- コメント --}}
    <td>
        <div x-show="edit">
            <x-input.text name="%reason_note[]"
                value="{{$row->reason_note}}" class="w-full"/>
            <x-input.error item="%reason_note.{{$index}}" />
        </div>
    </td>
    <td>
        {{$row->ref_sales_rep_name}}
    </td>
</tr>