@props([
    'index' => ':index',
    'detail' => [],
    'products' => [],
    'template' => empty($detail) ? 'data-template-' : '',
    'isFormCreate' => true,
    'hasReceived' => isset($detail['base_unit_fulfilled']) && ($detail['base_unit_fulfilled'] * 1),
    'isCanceled' => isset($detail['base_unit_canceled']) && ($detail['base_unit_canceled'] * 1),
])

<tr id="{{ !empty($detail) ? 'tr-detail-product' . $index : 'tr-detail-template-product' }}" class="p-0" data-index="{{ $index }}" data-from-old="{{ !empty($detail) ? 1 : 0 }}">
    <td class="row-number text-center py-1 align-middle"></td>
    <td class="p-0">
        <x-details.input-hidden :detail="$detail" :index="$index" name="id" />
        <x-details.input-group-product :detail="$detail" :index="$index" :products="$products" :readonly="$hasReceived" />
        <x-details.input-hidden :detail="$detail" :index="$index" name="is_stockable" />
    </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="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="unit_price"
            :readonly="$hasReceived"
            :value="$detail['unit_price'] ?? ''"
            class="form-control inputmask-decimal"
        />
    </td>
    <td class="p-0">
        <x-details.input-text
            :detail="$detail"
            :index="$index"
            name="discount"
            :value="$detail['discount'] ?? ''"
            class="inputmask-numeric"
            :readonly="$hasReceived"
        />
    </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="$hasReceived"
        />
    </td>
    @if(!$isFormCreate)
        <td class="p-0">
            @if(!empty($detail) && isset($detail['base_unit_fulfilled']))
                <div {{ $template }}id="div-details-fulfilled{{ $index }}" class="" style="min-width: 85px;">
                    <input type="text" class="form-control px-1 inputmask-decimal" {{ $template }}id="details-fulfilled{{ $index }}" value="{{ $detail['base_unit_fulfilled'] ?? '' }}" readonly tabindex="-1" data-index="{{ $index }}" placeholder="{{ __('Fulfilled') }}">
                    <x-details.input-hidden :detail="$detail" :index="$index" name="base_unit_fulfilled" :value="$detail['base_unit_fulfilled'] ?? ''" />
                    <x-details.input-hidden :detail="$detail" :index="$index" name="base_unit_outstanding" :value="$detail['base_unit_outstanding'] ?? ''" />
                    <x-details.input-hidden :detail="$detail" :index="$index" name="base_unit_canceled" :value="$detail['base_unit_canceled'] ?? ''" />
                    <x-details.input-hidden :detail="$detail" :index="$index" name="base_unit_quantity" :value="$detail['base_unit_quantity'] ?? ''" />
                </div>
            @endif
        </td>
    @endif
    <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">
        <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['base_unit_fulfilled']) || $detail['base_unit_fulfilled'] == 0)
                <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" @disabled($index === 1) 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>