@php
    if (isset($option)) {
        $etcProducts = $option->etcProducts ? $option->etcProducts->where('service', $service) : [];
        $optionId = $option->id;
    } else if (!isset($optionId)) {
        $optionId = null;
    }
@endphp

@if (isset($addable))
<div class="form-group mb-3 ms-2 justify-content-end">
    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('etc', {
        service: '{{ $service }}', targetId: {{ $optionId }}, gridType: 'etc',
        removeIds: $(this).closest('.option-etc').find('input[name^=etcProducts]').map(function() { return $(this).val(); }).get()
        })">기타항목추가</button>
</div>
@endif

<table class="table table-striped table-hover">
    <colgroup>
        @if (isset($sortable))<col width="30">@endif
        @if (isset($checkable))<col width="30">@endif
        <col width="30">
        <col width="100">
        <col>
        <col width="120">
        @if (isset($addable))
        <col width="80">
        <col width="80">
        <col width="30">
        @endif
    </colgroup>
    <thead>
        <tr class="text-center">
            @if (isset($sortable))<th>정렬</th>@endif
            @if (isset($checkable))<th></th>@endif

            @if (isset($sortable))
                <th class="text-end">번호</th>
                <th>항목구분</th>
                <th class="text-start">항목명</th>
                <th class="text-end">판매가</th>
            @else
                {!! \BaseHelper::sortHead('번호', 'id', 'text-end') !!}
                <th>항목구분</th>
                {!! \BaseHelper::sortHead('항목명', 'name', 'text-start') !!}
                {!! \BaseHelper::sortHead('판매가', 'sales_price', 'text-end') !!}
            @endif

            @if (isset($addable))
                <th>이용횟수</th>
                <th>미이용 차감일</th>
                <th></th>
            @endif
        </tr>
    </thead>

    @if (isset($optionId))<tbody class="grid-sortable" id="etc-grid{{ $optionId }}">
        @elseif (isset($sortable)) <tbody id="sortable">
        @else <tbody>
        @endif

    @if (isset($etcProducts))
        @foreach ($etcProducts as $etc)
            <tr @class(['text-center', 'hidden' => empty($etc->activated)])>
                @if (isset($sortable))
                    <td class="handle"><i class="bi bi-list"></i></td>
                @endif

                @if (isset($checkable))
                    <td><input type="checkbox" value="{{ $etc->id }}" onclick="checkSelected(this)"></td>
                @endif

                <td class="number">
                    {{ $etc->id }}
                    @if(isset($option))
                        <input type="hidden" name="etcProducts[{{ $optionId }}][]" value="{{ $etc->id }}">
                    @endif
                </td>

                <td>{{ $etc->etc_product_type }}</td>

                <td class="text-start">
                    <a href="{{ route('product.etc-product.detail', ['id' => $etc->id, 'service' => $service]) }}">{{ $etc->name }}</a>
                </td>

                <td class="number text-end">{{ number_format($etc->sales_price) }}</td>

                @if (isset($option))
                    @php
                        $usage = $etc->usageLimit()->where('product_option_id', $optionId)->first();
                    @endphp

                    <td>
                        <input type="number" min="0" class="form-control form-control-sm" name="etc_total_use_count[{{ $optionId }}][{{ $usage?->option_type_id }}]" value="{{ !empty($usage?->total_use_count) ? $usage?->total_use_count : '' }}" placeholder="이용횟수">
                    </td>

                    <td>
                        <input type="number" min="0" class="form-control form-control-sm" name="etc_unused_deduction_day[{{ $optionId }}][{{ $usage?->option_type_id }}]" value="{{ !empty($usage?->unused_deduction_day) ? $usage?->unused_deduction_day : '' }}" placeholder="미이용 차감일">
                    </td>

                    <td>
                        <a href="javascript:void(0);" class="delete px-2" onclick="$(this).closest('tr').remove()"><i class="bi bi-trash"></i></a>
                    </td>
                @endif
            </tr>
        @endforeach
    @endif
    </tbody>
</table>