@php
    if (isset($option)) {
        $optionId = $option->id;
        $coupons = $option->coupons()->withinUseDateRange()->get();
        $additionalPurchaseOption = $option->additional_purchase_option;
    } else {
        $optionId = -1 * (int) str_replace('.', '', microtime(true));
        $coupons = null;
        $additionalPurchaseOption = null;
    }
@endphp
<section class="mb-3" id="option-{{ $optionId }}">
    <header>
        <div class="title">
            <i class="bi bi-list handle text-danger"></i> <span class="badge text-bg-success">{{ $optionId > 0 ? $optionId : 'new' }}</span> {{ $option?->name }}
        </div>

        <div>
            <button class="btn btn-danger" type="button" onclick="$('#option-{{ $optionId }}').remove();"><i class="bi bi-trash"></i></button>
            <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-o{{ $optionId }}"><i class="bi bi-chevron-up"></i></button>
        </div>
    </header>

    <main class="split-form">
        <input type="hidden" name="option_sort[]" value="{{ $optionId }}">

        <div class="row mt-0">
            <div class="col-5 option-detail-colomn">
                <div class="form-group">
                    <label class="required">옵션명</label>

                    <div class="right-col">
                        <input type="text" class="form-control" name="option_name[{{ $optionId }}]" placeholder="최대 20자까지 입력 가능합니다" maxlength="20" value="{{ $option?->name }}" required>
                    </div>
                </div>

                <div class="form-group">
                    <label>설명글</label>

                    <div class="right-col">
                        <input type="text" class="form-control form-control-sm" name="option_description[{{ $optionId }}]" value="{{ $option?->description }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">수강기간</label>

                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto">
                            <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control" name="option_period[{{ $optionId }}]" size="2" value="{{ $option?->period }}" required>
                            <span class="input-group-text">일</span>
                        </div>

                        @if ($service == 'ielts')
                        <div class="input-group input-group-sm w-auto ms-2">
                                <span class="input-group-text">수강시작일</span>
                                <select name="enrollment_start_day[{{ $optionId }}]" class="form-select form-select-sm w-auto" style="flex: 0 1 auto">
                                    @foreach ($enrollmentStartDays as $k => $item)
                                        <option value="{{ $k }}" @selected(isset($option) && $k == $option->enrollment_start_day)>{{ $item }}</option>
                                    @endforeach
                                </select>
                        </div>
                        @endif

                        @if ($option?->product->is_refundable || (isset($is_refundable) && $is_refundable))
                        <div class="input-group input-group-sm w-auto ms-2">
                            <span class="input-group-text">환급인정기간</span>
                            <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control" name="refund_recognition_period[{{ $optionId }}]" size="2" value="{{ $option?->refund_recognition_period }}" required>
                            <span class="input-group-text">일</span>
                        </div>
                        @endif
                    </div>
                </div>

                <div @class(['price-wrapper mt-3', 'd-none' => $option && $option?->product->sales_type == '지급'])>
                    <div class="form-group">
                        <label class="required">가격</label>

                        <div class="right-col justify-content-between">
                            <div class="d-flex flex-column">
                                <div class="input-group input-group-sm w-auto mb-1">
                                    <span class="input-group-text" style="width: 90px">소비자가</span>
                                    <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control w-auto flex-grow-0 price" name="consumer_price[{{ $optionId }}]" size="7" value="{{ $option?->consumer_price }}">
                                    <span class="input-group-text">원</span>
                                </div>

                                <div class="input-group input-group-sm w-auto">
                                    <span class="input-group-text" style="width: 90px" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="사용자들이 실제로 결제할 금액입니다. 할인 적용 시 할인가로 노출됩니다.">판매가 <i class="bi bi-info-circle ms-1"></i></span>
                                    <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control w-auto flex-grow-0 price" name="sales_price[{{ $optionId }}]" size="7" value="{{ $option?->sales_price }}">
                                    <span class="input-group-text">원</span>
                                </div>
                            </div>

                            @php
                                $drates = explode("|", $option?->discount_rate);
                                $drate1 = !empty($drates[0]) ? round($drates[0], 2):null;
                                $drate2 = !empty($drates[1]) ? round($drates[1], 2):null;
                            @endphp

                            <div class="drate">
                                <input type="text" class="discount_rate w-auto price" size="4" name="discount_rate1[{{ $optionId }}]" value="{{ $drate1 }}" readonly>%
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>할인</label>

                        <div class="right-col discount-inputs">
                            <div class="d-flex align-items-center w-100 justify-content-between mt-1">
                                <div class="d-flex flex-column">
                                    <div class="input-group input-group-sm w-auto flex-nowrap mb-1">
                                        <span class="input-group-text" style="width: 90px">할인</span>

                                        <select class="form-select form-select-sm w-auto flex-grow-0 discount_type" name="discount_type[{{ $optionId }}]" onchange="getDiscountTypeDetail(this, {{ $optionId }}, '{{ $service }}')">
                                            <option value="">없음</option>
                                            
                                            @foreach ($discountTypes as $discountType)
                                                @if (!empty($discountType))
                                                <option value="{{ $discountType['name'] }}" data-type="{{ $discountType['type'] }}" @selected($discountType['name'] == $option?->discount_type)>{{ $discountType['name'] }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="dynamic-input input-group input-group-sm w-auto">
                                        @if ($option?->discount_type)
                                            @php
                                                $discountType = null;
                                                foreach ($discountTypes as $type) {
                                                    if ($type['name'] == $option?->discount_type) {
                                                        $discountType = $type;
                                                        break;
                                                    }
                                                }
                                            @endphp

                                            @if (isset($discountType['type']) && $discountType['type'] == "select")
                                            <select name="discount_type_detail_value_1[{{ $optionId }}]" class="form-select reset-width">
                                                @foreach ($discountType['options'] as $k => $option_name)
                                                    <option value="{{ $k }}" @selected($k == $option?->discount_type_detail_value_1)>{{ $option_name }}</option>
                                                @endforeach
                                            </select>
                                            <select name="discount_type_detail_value_2[{{ $optionId }}]" class="form-select reset-width">
                                                @foreach ($discountType['options'] as $k => $option_name)
                                                    <option value="{{ $k }}" @selected($k == $option?->discount_type_detail_value_2)>{{ $option_name }}</option>
                                                @endforeach
                                            </select>
                                            @endif

                                            @if (isset($discountType['type']) && $discountType['type'] == "date")
                                            <input type="date" name="discount_type_detail_value_1[{{ $optionId }}]" class="form-control" value="{{ $option?->discount_type_detail_value_1 }}">
                                            <input type="date" name="discount_type_detail_value_2[{{ $optionId }}]" class="form-control" value="{{ $option?->discount_type_detail_value_2 }}">
                                            @endif

                                            <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control w-auto flex-grow-0 price text-end" name="discount_price[{{ $optionId }}]" size="7" value="{{ $option?->discount_price }}" placeholder="할인가" @disabled(!$option?->discount_type)>
                                            <span class="input-group-text">원</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="drate">
                                    <input type="text" class="discount_rate w-auto price" size="4" name="discount_rate2[{{ $optionId }}]" value="{{ $drate2 }}" readonly>%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($service == 'ielts')
                <div class="form-group">
                    <label>배송비</label>

                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto me-2">
                            <input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" class="form-control w-auto flex-grow-0 price" name="delivery_price[{{ $optionId }}]" size="7" value="{{ $option?->delivery_price }}">
                            <span class="input-group-text">원</span>
                        </div>

                        <div class="form-check">
                            <input type="checkbox" name="is_delivery_price_displayed[{{ $optionId }}]" class="form-check-input" value="1" @checked($option?->is_delivery_price_displayed)>
                            <label class="form-check-label">배송비 표기 하지 않음</label>
                        </div>

                        <div class="form-check">
                            <input type="checkbox" name="is_oversea_delivery_possible[{{ $optionId }}]" class="form-check-input" value="1" @checked($option?->is_oversea_delivery_possible)>
                            <label class="form-check-label">해외 배송 가능</label>
                        </div>
                    </div>
                </div>
                @endif

                <div class="form-group">
                    <label>구매혜택(비매품)</label>
                
                    <div class="right-col">
                        @php
                            if ($option?->bonus_items) {
                                $bonus_items = explode("|", $option->bonus_items);
                                // 사전 정의된 항목 키와 일치하지 않는 것은 커스텀 항목으로 간주
                                $predefined_keys = array_keys(config('system.bonus_items')[$service] ?? []);
                                $custom_items = array_filter($bonus_items, function($item) use ($predefined_keys) {
                                    return !in_array($item, $predefined_keys);
                                });
                            } else {
                                $bonus_items = [];
                                $custom_items = [];
                            }
                        @endphp
                        
                        <!-- 사전 정의된 혜택 항목 -->
                        @foreach (config('system.bonus_items')[$service] as $key => $bonus)
                        <div class="form-check">
                            <input type="checkbox" id="bonus_item{{ $optionId }}{{ $key }}" name="bonus_items[{{ $optionId }}][]" class="form-check-input" value="{{ $key }}" @checked(in_array($key, $bonus_items))>
                            <label class="form-check-label" for="bonus_item{{ $optionId }}{{ $key }}"><img src="{{ app(\S3Helper::class)->getPublicUrl($bonus['icon']) }}">{{ $bonus['title'] }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="form-group">
                    <label>
                        <a href="javascript:;" onclick="addCustomBonus({{ $optionId }})">구매혜택 추가 <i class="bi bi-plus-circle"></i></a>
                    </label>
                    <div class="right-col" id="custom-bonus-items-{{ $optionId }}">
                        @foreach($custom_items as $index => $custom_item)
                        <div class="custom-bonus-item input-group input-group-sm reset-width">
                            <input type="text" class="form-control form-control-sm" name="bonus_items[{{ $optionId }}][]" value="{{ $custom_item }}">
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeCustomBonus(this)">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        @endforeach
                    </div>
                </div>

                @if ($coupons)
                <div class="option-colspan">
                    <label>사용 가능 쿠폰 (사용 기간 내)</label>
                    
                    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('coupon', {
                        service: '{{ $service }}', targetId: {{ $optionId }}, gridType: 'coupon',
                        removeIds: $('input[name^=coupons]').map(function() { return $(this).val(); }).get()
                        })">쿠폰추가</button>

                    {{ now() }}
                </div>

                <table @class(['table table-sm table-striped table-bordered mt-2', 'd-none' => $coupons?->isEmpty()])>
                    <colgroup>
                        <col>
                        <col>
                        <col>
                        <col width="100">
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="text-center">번호</th>
                            <th>쿠폰명</th>
                            <th class="text-center">잔여매수</th>
                            <th>사용기간</th>
                            <th class="align-right">할인율(금액)</th>
                            <th class="align-right">최대할인금액</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="coupon-grid{{ $optionId }}">
                    @foreach ($coupons as $coupon)
                    <tr>
                        <td class="number text-center">{{ $coupon->id }}<input type="hidden" name="coupons[{{ $optionId }}][]" value="{{ $coupon->id }}"></td>
                        <td><a href="{{ route('promotion.coupon.detail', ['id' => $coupon->id]) }}">{{ $coupon->name }}</a></td>
                        <td class="number text-center">{{ $coupon->remaining_count }}</td>
                        <td class="number-sm">{{ date('Y-m-d', strtotime($coupon->use_start_date)) }} {{ $coupon->use_end_date ? date('Y-m-d', strtotime($coupon->use_end_date)) : '' }}</td>
                        <td class="number-sm align-right">{{ $coupon->discount_type == '정액' ? number_format($coupon->discount_value) : $coupon->discount_value.'%' }}</td>
                        <td class="number-sm align-right">{{ number_format($coupon->discount_max) }}</td>
                        <td><a href="javascript:void(0);" class="delete px-2" onclick="$(this).closest('tr').remove()"><i class="bi bi-trash"></i></a></td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
                @endif

                <div class="additional-purchase-products">
                    <label>
                        추가 구매 상품
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" name="use_additional_purchase[{{ $optionId }}]" data-id="{{ $optionId }}" value="1" @checked($additionalPurchaseOption)>사용유무
                        </div>
                    </label>

                    <div @class(['d-none' => !$additionalPurchaseOption]) id="additional-purchase-option{{ $optionId }}">
                        <div class="apOptions">
                            @if($additionalPurchaseOption)
                                @foreach ($additionalPurchaseOption['sales_price'] ?? [] as $index => $salesPrice)
                                <div class="apOptionItem">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">판매가</span>
                                        <input type="text" name="additional_purchase_option[{{ $optionId }}][sales_price][]" class="form-control" value="{{ $salesPrice }}">
                                    </div>
                    
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">수강기간</span>
                                        <input type="text" name="additional_purchase_option[{{ $optionId }}][period][]" class="form-control" value="{{ $additionalPurchaseOption['period'][$index] ?? '' }}">
                                    </div>
                    
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">첨삭 이용일</span>
                                        <input type="number" name="additional_purchase_option[{{ $optionId }}][feedback_total_day_count][]" class="form-control" value="{{ $additionalPurchaseOption['feedback_total_day_count'][$index] ?? '' }}">
                                    </div>
                    
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">첨삭 이용횟수</span>
                                        <input type="number" name="additional_purchase_option[{{ $optionId }}][feedback_total_use_count][]" class="form-control" value="{{ $additionalPurchaseOption['feedback_total_use_count'][$index] ?? '' }}">
                                    </div>
                    
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">CDT 이용일</span>
                                        <input type="number" name="additional_purchase_option[{{ $optionId }}][cdt_total_day_count][]" class="form-control" value="{{ $additionalPurchaseOption['cdt_total_day_count'][$index] ?? '' }}">
                                    </div>
                    
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">CDT 이용횟수</span>
                                        <input type="number" name="additional_purchase_option[{{ $optionId }}][cdt_total_use_count][]" class="form-control" value="{{ $additionalPurchaseOption['cdt_total_use_count'][$index] ?? '' }}">
                                    </div>
                    
                                    <div class="form-check form-switch">
                                        <input class="form-check-input me-1" type="checkbox" role="switch" name="additional_purchase_option[{{ $optionId }}][textbook][]" value="1" @checked(!empty($additionalPurchaseOption['textbook'][$index]))>
                                        <label>교재사용</label>
                                    </div>
                    
                                    <div class="form-check form-switch">
                                        <input class="form-check-input me-1" type="checkbox" role="switch" name="additional_purchase_option[{{ $optionId }}][etc][]" value="1" @checked(!empty($additionalPurchaseOption['etc'][$index]))>
                                        <label>기타사용</label>
                    
                                        <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="$(this).closest('.apOptionItem').remove()"><i class="bi bi-trash"></i></button>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                    
                        <button type="button" class="btn btn-sm btn-dark" onclick="addApOption({{ $optionId }})">추가 구매옵션 <i class="bi bi-plus-circle-dotted"></i></button>
                    </div>
                </div>
            </div>

            <div class="col-7 option-type-column">
                @php
                    $courseCount = $option?->courses->where('service', $service)->count();
                    $feedbackCount = $option?->feedbackPasses->where('service', $service)->count();
                    $cdtCount = $option?->cdtPasses->where('service', $service)->count();
                    $textbookCount = $option?->textbooks->where('service', $service)->count();
                    $etcCount = $option?->etcProducts->where('service', $service)->count();

                    $activeTab = $optionTypes[0];
                @endphp
                <ul class="nav nav-tabs option-type">
                    <li class="nav-item">
                        <a @class(['nav-link', 'disabled' => !in_array("course", $optionTypes), 'active' => $activeTab == 'course']) href="course" id="option-type-course{{ $optionId }}">강좌 @if ($courseCount)<sup>{{ $courseCount }}</sup>@endif</a>
                    </li>
                    <li class="nav-item">
                        <a @class(['nav-link', 'disabled' => !in_array("feedback", $optionTypes), 'active' => $activeTab == 'feedback']) href="feedback" id="option-type-feedback{{ $optionId }}">첨삭 @if ($feedbackCount)<sup>{{ $feedbackCount }}</sup>@endif</a>
                    </li>
                    <li class="nav-item">
                        <a @class(['nav-link', 'disabled' => !in_array("cdt", $optionTypes), 'active' => $activeTab == 'cdt']) href="cdt" id="option-type-cdt{{ $optionId }}">CDT @if ($cdtCount)<sup>{{ $cdtCount }}</sup>@endif</a>
                    </li>
                    <li class="nav-item">
                        <a @class(['nav-link', 'disabled' => !in_array("textbook", $optionTypes), 'active' => $activeTab == 'textbook']) href="textbook" id="option-type-textbook{{ $optionId }}">교재 @if ($textbookCount)<sup>{{ $textbookCount }}</sup>@endif</a>
                    </li>
                    <li class="nav-item">
                        <a @class(['nav-link', 'disabled' => !in_array("etc", $optionTypes), 'active' => $activeTab == 'etc']) href="etc" id="option-type-etc{{ $optionId }}">기타 @if ($etcCount)<sup>{{ $etcCount }}</sup>@endif</a>
                    </li>
                </ul>

                <ul class="option-type-wrapper">
                    @if(in_array("course", $optionTypes))
                    <li @class(['option-course', 'active' => $activeTab == 'course'])>
                        <x-product.course service="{{ $service }}" sortable="1" optionId="{{ $optionId }}" addable="1" :option="$option" />
                    </li>
                    @endif

                    @if(in_array("feedback", $optionTypes))
                    <li @class(['option-feedback', 'active' => $activeTab == 'feedback'])>
                        <x-product.feedback-pass service="{{ $service }}" sortable="1" optionId="{{ $optionId }}" addable="1" :option="$option" />
                    </li>
                    @endif

                    @if(in_array("cdt", $optionTypes))
                    <li @class(['option-cdt', 'active' => $activeTab == 'cdt'])>
                        <x-product.cdt-pass service="{{ $service }}" sortable="1" optionId="{{ $optionId }}" addable="1" :option="$option" />
                    </li>
                    @endif

                    @if(in_array("textbook", $optionTypes))
                    <li @class(['option-textbook', 'active' => $activeTab == 'textbook'])>
                        <x-product.textbook service="{{ $service }}" sortable="1" optionId="{{ $optionId }}" addable="1" :option="$option" />
                    </li>
                    @endif

                    @if(in_array("etc", $optionTypes))
                    <li @class(['option-etc', 'active' => $activeTab == 'etc'])>
                        <x-product.etc-product service="{{ $service }}" sortable="1" optionId="{{ $optionId }}" addable="1" :option="$option" />
                    </li>
                    @endif
                </ul>

                <h5>예전 수강데이터 매칭</h5>
                <div class="old-enrollment-data">
                    @php
                        $oldEnrollmentIds = $option?->old_enrollment_ids ? explode('|', trim($option->old_enrollment_ids, '|')) : [];
                    @endphp
                    
                    <div id="old-enrollment-container-{{ $optionId }}" class="old-enrollment-container">
                        @if(count($oldEnrollmentIds) > 0)
                            @foreach($oldEnrollmentIds as $oldEnrollmentId)
                                <div class="input-group input-group-sm mb-2">
                                    <input type="text" class="form-control" name="old_enrollment_ids[{{ $optionId }}][]" value="{{ $oldEnrollmentId }}" placeholder="수강 ID 입력">
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeOldEnrollment(this)">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <div class="input-group input-group-sm mb-2">
                                <input type="text" class="form-control" name="old_enrollment_ids[{{ $optionId }}][]" placeholder="수강 ID 입력">
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeOldEnrollment(this)">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        @endif
                    </div>

                    <button type="button" class="btn btn-sm btn-primary" onclick="addOldEnrollment({{ $optionId }})">
                        <i class="bi bi-plus-circle"></i> 수강 데이터 추가
                    </button>
                </div>
                
            </div>
        </div>

    </main>
</section>