@php use App\Libraries\Number; @endphp
@php use App\Libraries\Icon; @endphp
<div class="border border-light rounded-2 p-4">
    <div class="row">
        <div class="col-6 mb-3">
            <label class="form-label fw-bolder">*加購</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="addOnCheck" wire:model.live="checkAddOnValue"
                       value="true"
                       name="addOn">
                <label class="form-check-label" for="addOnCheck">
                    是否為加購品
                </label>
            </div>
        </div>
    </div>


    @if(!$checkAddOnValue)
        <div class="row">
            <div class="col-6">
                <select class="form-select" wire:model="selectValue" aria-label="Default select example">
                    <option value="" selected>可選擇搭配的加購商品</option>
                    @if(isset($productsAddOn))
                        @foreach($productsAddOn as $productAddOn)
                            <option value="{{$productAddOn->id}}">{{$productAddOn->title}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-auto">
                <button type="button" wire:click="insertAddOn" class="btn btn-primary">加入</button>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">

                @if(isset($tableData))
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col" colspan="2">加購品</th>
                            <th scope="col">加購價</th>
                            <th scope="col"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @if($tableData != null)
                            @foreach($tableData as $index => $td)
                                <tr>
                                    <td>
                                        <img src="{{ $td['coverSrc'] }}" alt="加購品封面" style="object-fit: contain;
                                            width: 75px;
                                            height: 75px;
                                            background-color: #dedede;
                                            background-position: center;
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            border-radius: 0.3em;
                                            cursor: pointer;">
                                    </td>
                                    <td>
                                        <a href="{{ route("cms.product.edit", ['id' => $td['add_on_id']]) }}"
                                           target="_blank">
                                            {{ $td['title'] }}
                                        </a>
                                        <input type="hidden" name="addOnInput[]" value="{{$td['add_on_id']}}"/>

                                    </td>
                                    <td>
                                        <span>{!! Number::price($td['sale_price']) !!}</span>
                                    </td>
                                    <td>
                                        <button wire:click="delete({{$index}})" class="btn" type="button"
                                                value="{{$index}}">
                                            {!! Icon::delete() !!}
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                @endif
            </div>
        </div>

    @endif


</div>