@props([
    'detail' => [],
    'index' => ':index',
    'relation' => 'details',
    'readonly' => false,
    'template' => empty($detail) ? 'data-template-' : '',
    'canEdit' => true,
])
<div class="position-relative">
    <label {{ $template }}id="{{ $relation }}-label-discount{{ $index }}" class="position-absolute top-0 end-0 fs-xs text-primary me-2" style="z-index: 6;"></label>
    <div class="input-group" style="min-width: 150px;">
        @if (!$readonly && $canEdit)
            <button type="button" class="btn btn-info btn-popover" {{ $template }}id="btn-popover-discount{{ $index }}" data-index="{{ $index }}" data-bs-toggle="popover">
                <i class="fa fa-percentage fa-lg"></i>
            </button>
        @endif
        <input type="text" class="form-control inputmask-numeric px-1" {{ $template }}id="{{ $relation }}-discount-total-amount{{ $index }}" {{ $template }}name="{{ $relation }}[{{ $index }}][discount_total_amount]" value="{{ $detail['discount_total_amount'] ?? '0' }}" readonly tabindex="-1" data-index="{{ $index }}">
    </div>
</div>
<div class="d-none" {{ $template }}id="popover-container-discount{{ $index }}" data-index="{{ $index }}">
    <div {{ $template }}id="popover-content-discount{{ $index }}" data-index="{{ $index }}">
        <div class="d-flex">
            <div class="form-floating" style="width: 120px;">
                <input type="text" {{ $template }}id="{{ $relation }}-discount1-text{{ $index }}" {{ $template }}name="{{ $relation }}[{{ $index }}][discount1_text]" class="form-control inputmask-discount-text" value="{{ $detail['discount1_text'] ?? '' }}" data-index="{{ $index }}">
                <label class="form-label">{{ __('validation.attributes.discount1_text') }}</label>
            </div>
            <input type="hidden" {{ $template }}id="{{ $relation }}-discount1-rate{{ $index }}" {{ $template }}name="{{ $relation }}[{{ $index }}][discount1_rate]" value="{{ $detail['discount1_rate'] ?? '' }}" data-index="{{ $index }}">
            <div class="form-floating" style="width: 120px;">
                <input type="text" {{ $template }}id="{{ $relation }}-discount1-amount{{ $index }}" {{ $template }}name="{{ $relation }}[{{ $index }}][discount1_amount]" class="form-control inputmask-numeric px-1" value="{{ $detail['discount1_amount'] ?? '0' }}" readonly tabindex="-1" data-index="{{ $index }}">
                <label class="form-label">{{ __('validation.attributes.amount') }}</label>
            </div>
            <div class="form-floating" style="width: 120px;">
                <input type="text" {{ $template }}id="{{ $relation }}-discount2-amount{{ $index }}" {{ $template }}name="{{ $relation }}[{{ $index }}][discount2_amount]" class="form-control inputmask-numeric px-1" value="{{ $detail['discount2_amount'] ?? '0' }}" data-index="{{ $index }}">
                <label class="form-label">{{ __('validation.attributes.discount2_amount') }}</label>
            </div>
        </div>
    </div>
</div>