@props([
    'index' => ':index',
    'detail' => [],
    'products' => [],
    'template' => empty($detail) ? 'data-template-' : '',
    'isFormCreate' => true,
    'purchaseOrderDetail' => null,
])

<tr id="{{ !empty($detail) ? 'tr-detail-product' . $index : 'tr-detail-template-product' }}" class="p-0" data-index="{{ $index }}" data-purchase-order-detail="{{ json_encode($purchaseOrderDetail) }}" data-from-old="{{ !empty($detail) ? 1 : 0 }}">
    <td class="row-number text-center py-1 align-middle"></td>
    <td class="p-0 text-nowrap align-middle">
        <x-details.input-hidden :detail="$detail" :index="$index" name="id" />
        <div class="px-2" {{ $template }}id="div-purchase-order-form-number{{ $index }}" data-index="{{ $index }}">{{ $purchaseOrderDetail->purchaseOrder->form_number ?? '' }}</div>
        <x-details.input-hidden :detail="$detail" :index="$index" name="purchase_order_detail_id" />
    </td>

    <td class="p-0">
        <x-details.input-group-product :detail="$detail" :index="$index" :products="$products" :readonly="!empty($purchaseOrderDetail)" />
    </td>
    <td class="p-0">
        <x-details.input-hidden :detail="$detail" :index="$index" name="product_id" :value="$detail['product_id'] ?? ''" />
        <div {{ $template }}id="div-placeholder-product{{ $index }}" data-index="{{ $index }}"></div>
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="base_unit_price"
            :value="$detail['base_unit_price'] ?? ''"
            class="inputmask-decimal"
            :readonly="$hasReceived"
            :readonly="true"
        />
    </td>
    <td class="p-0">
        <div {{ $template }}id="div-placeholder-product{{ $index }}" data-index="{{ $index }}"></div>
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="unit_price"
            :value="$detail['unit_price'] ?? ''"
            class="inputmask-decimal"
            :readonly="!empty($purchaseOrderDetail)"
        />
    </td>
    <td class="p-0">
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="discount"
            :value="$detail['discount'] ?? ''"
            class="inputmask-numeric"
            :readonly="!empty($purchaseOrderDetail)"
        />
    </td>
    <td class="p-0">
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="quantity"
            :value="$detail['quantity'] ?? 1"
            class="inputmask-decimal"
            width="85px;"
            :readonly="!empty($purchaseOrderDetail)"
        />
    </td>
    <td class="p-0">
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="total_unit_price"
            :value="$detail['total_unit_price'] ?? ''"
            class="inputmask-decimal"
            :readonly="true"
        />
    </td>
    <td class="p-0">
        <div {{ $template }}id="div-container-unit-price{{ $index }}" data-index="{{ $index }}"></div>
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="subtotal"
            :value="$detail['subtotal'] ?? ''"
            class="form-control inputmask-decimal subtotal"
            :readonly="true"
        />
    </td>
    <td class="p-1">
        @if(!empty($detail))
            @if(!isset($detail['purchase_order_detail_id']) || empty($detail['purchase_order_detail_id']))
                <button type="button" class="btn btn-danger btn-sm" {{ $template }}id="btn-remove-detail{{ $index }}" data-index="{{ $index }}">
                    <i class="fa fa-trash"></i>
                </button>
            @endif
        @else
            <button type="button" class="btn btn-danger btn-sm" {{ $template }}id="btn-remove-detail{{ $index }}" data-index="{{ $index }}">
                <i class="fa fa-trash"></i>
            </button>
        @endif
    </td>
</tr>