@extends("common.layout")

@php
    $page_title = $pageServiceName . ' 쿠폰 ' . ($coupon?->id ? '상세보기 ('.$coupon->id.')' : '등록');
@endphp

@section('page-title', $page_title)

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
@endsection

@section("content")
<form id="coupon-form" action="{{ $coupon?->id ? route('api.promotion.coupon.set', ['id'=>$coupon->id]) : route('api.promotion.coupon.set') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="service" value="{{ $service }}">
    <input type="hidden" name="id" value="{{ $coupon?->id }}">

    <h1>
        <a href="{{ route('promotion.coupon.list', $service) }}">
            {{ $page_title }}
        </a>

        <div class="fixed-btns btn-group">
            @if ($coupon?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="couponDelete({{ $coupon->id }}, '{{ $service }}')">삭제</button>
                @endif
                <button class="btn btn-success" type="button" onclick="copyCoupon()">복제</button>
            @endif
            <button type="submit" class="btn btn-primary">저장</button>
            <button class="btn btn-warning" type="button" onclick="toggleOptions(this)"><i class="bi bi-chevron-up"></i></button>
        </div>
    </h1>

    <div class="coupon-detail-layout">
        {{-- 기본 정보 --}}
        <section class="left1">
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                @if ($coupon?->id)
                <div class="form-group">
                    <label>쿠폰 번호</label>
                    <div>
                        {{ $coupon?->id }}
                    </div>
                </div>
                @endif

                <div class="form-group">
                    <label class="required" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="미사용 시 쿠폰의 사용 기간과 무관하게 사용이 불가합니다.">쿠폰사용 <i class="bi bi-info-circle"></i></label>

                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked(!$coupon || $coupon->activated == 1)>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">쿠폰명</label>
                    <div class="right-col">
                        <input type="text" maxlength="30" class="form-control" id="name" name="name" value="{{ $coupon?->name }}" style="max-width: 450px">
                    </div>
                </div>
            </main>
        </section>

        {{-- 발행 옵션 --}}
        @php
            $issue_disabled = false;
            if (!empty($coupon) && $coupon->issue_start_date < now()->toDateString()) $issue_disabled = true;
        @endphp

        <section class="left2">
            <header>
                <div>발행 옵션</div>
                <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-3"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group">
                    <label class="required">발행 기간</label>
                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto">
                            <input class="form-control" type="date" id="issue_start_date" name="issue_start_date" value="{{ $coupon?->issue_start_date }}">
                            <input class="form-control" type="date" id="issue_end_date" name="issue_end_date" value="{{ $coupon?->issue_end_date }}" @disabled(!$coupon || $coupon?->is_issue_end_date_disabled)>
                        </div>
                        <div class="form-check ms-2">
                            <input type="checkbox" id="is_issue_end_date_disabled" name="is_issue_end_date_disabled" class="form-check-input" value="1" onchange="disabledChange(event)" @checked(!$coupon || $coupon?->is_issue_end_date_disabled == 1)>
                            <label class="form-check-label" for="is_issue_end_date_disabled">종료일 없음</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">발행 유형</label>
                    <div class="right-col">
                        @if (!empty($coupon->issue_type))
                            {{ $coupon->issue_type }}
                        @else
                            @foreach ($couponIssueTypes as $issueType)
                            <div class="form-check">
                                <input type="radio" id="issue_type{{ $issueType }}" name="issue_type" class="form-check-input" value="{{ $issueType }}" @checked($issueType == $coupon?->issue_type)>
                                <label class="form-check-label" for="issue_type{{ $issueType }}">{{ $issueType }}</label>
                            </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">발행 매수</label>
                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto me-3">
                            @if ($coupon?->is_unlimited)
                                <input type="hidden" name="is_unlimited" value="1">무제한
                            @else
                                <input class="form-control form-control-sm" type="number" id="issue_max" name="issue_max" style="width: 60px" min="{{ $coupon?->issue_max ?? 0 }}" value="{{ $coupon?->issue_max }}">

                                @if (empty($coupon?->issue_max))
                                <div class="input-group-text">
                                    <input type="checkbox" id="is_unlimited" name="is_unlimited" class="form-check-input mt-0 me-1" value="1" onchange="disabledChange(event)" @checked($coupon?->is_unlimited)>
                                    <label class="form-check-label" for="is_unlimited">무제한</label>
                                </div>
                                @endif
                            @endif
                        </div>

                        @if ($coupon && !$coupon->is_unlimited && $coupon->issue_type == "직접지급")
                            <div class="input-group input-group-sm w-auto">
                                <button type="button" id="issueBtn" class="btn btn-sm btn-warning" onclick="issueCoupons()" @disabled($coupon->issued_count > 0 && $coupon->issued_count == $coupon->issue_max)>쿠폰 발행</button>
                                {{--<span class="input-group-text"><input type="checkbox" class="form-check me-1" id="unactivated" name="unactivated" value="1"><label class="form-check-label" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="이벤트 등에 의해 사용자가 직접 쿠폰을 활성화합니다">비활성상태 발행 <i class="bi bi-info-circle"></i></label></span>--}}
                            </div>

                            <div id="issued_count_wrapper" class="ms-2" style="font-size: 0.9em">발행완료 <span id="issued_count" class="text-danger mx-1" style="font-weight: 900">{{ $coupon->issued_count }}</span> 매</div>
                        @endif
                    </div>
                </div>

                <div class="form-group">
                    <label data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="코드를 지정하지 않을 경우, 자동으로 랜덤 코드가 발행됩니다">쿠폰 코드 <i class="bi bi-info-circle"></i></label>
                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto">
                            <input type="text" class="form-control form-control-sm w-auto" id="code" name="code" value="{{ $coupon?->code }}">
                            <button type="button" id="randomCodeBtn" class="btn btn-secondary" onclick="setRandomCode()">랜덤코드생성</button>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>ID 당 1회 발급</label>
                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="is_single_use_per_id" name="is_single_use_per_id" value="1" @checked($coupon?->is_single_use_per_id == 1)>
                        </div>
                    </div>
                </div>
            </main>
        </section>

        {{-- 사용 옵션 --}}
        @php
            $use_disabled = false;
            if (!empty($coupon) && $coupon->use_start_date < now()->toDateString()) $use_disabled = true;
        @endphp

        <section class="left3">
            <header>
                <div>사용 옵션</div>
                <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-4"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group">
                    <label class="required">사용 기간</label>
                    <div class="right-col">
                        <div class="input-group input-group-sm w-auto">
                            <input class="form-control" type="date" id="use_start_date" name="use_start_date" value="{{ explode(' ', $coupon?->use_start_date ?? ' ')[0] }}">
                            <input class="form-control" type="date" id="use_end_date" name="use_end_date" value="{{ explode(' ', $coupon?->use_end_date ?? ' ')[0] }}" @disabled(!$coupon || $coupon?->is_use_end_date_disabled)>
                        </div>
                        <div class="form-check ms-2">
                            <input type="checkbox" id="is_use_end_date_disabled" name="is_use_end_date_disabled" class="form-check-input" value="1" onchange="disabledChange(event)" @checked(!$coupon || $coupon?->is_use_end_date_disabled)>
                            <label class="form-check-label" for="is_use_end_date_disabled">종료일 없음</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required">할인 방식</label>
                    <div class="right-col">
                        <div class="d-flex me-4 my-1">
                            <div class="form-check">
                                <input type="radio" id="discount_type_id_amount" name="discount_type" class="form-check-input" value="정액" onchange="disabledChange(event)"
                                @checked($coupon?->discount_type == "정액" || !$coupon) @disabled($coupon?->discount_type == "정률" || $use_disabled)>
                                <label class="form-check-label" for="discount_type_id_amount">정액</label>
                            </div>
                            <div class="input-group input-group-sm w-auto">
                                <input class="form-control" type="number" id="discount_value_amount" name="discount_value" placeholder="소수점 입력 불가" min="0" step="1" style="width: 120px"
                                value="{{ $coupon?->discount_type == "정액" ? $coupon?->discount_value : '' }}" @disabled($use_disabled)>
                                <span class="input-group-text">원</span>
                            </div>
                        </div>

                        <div class="d-flex">
                            <div class="form-check">
                                <input type="radio" id="discount_type_id_percentage" name="discount_type" class="form-check-input" value="정률" onchange="disabledChange(event)"
                                @checked($coupon?->discount_type == "정률") @disabled($use_disabled)>
                                <label class="form-check-label" for="discount_type_id_percentage">정률</label>
                            </div>
                            <div class="input-group input-group-sm w-auto">
                                <input class="form-control" type="number" id="discount_value_percentage" name="discount_value" placeholder="소수점 입력 불가" min="0" step="1" style="width: 50px"
                                value="{{ $coupon?->discount_type == "정률" ? $coupon?->discount_value : '' }}" @disabled($coupon?->discount_type == "정액" || !$coupon || $use_disabled)>
                                <span class="input-group-text">%</span>
                            </div>
                            <div class="input-group input-group-sm w-auto ms-2">
                                <span class="input-group-text">최대 할인 금액</span>
                                <input class="form-control" type="number" id="discount_max" name="discount_max" placeholder="소수점 입력 불가" value="{{ $coupon?->discount_max }}" min="0" step="1" style="width: 120px" @disabled($coupon?->discount_type == "정액" || !$coupon || $use_disabled)>
                                <span class="input-group-text">원</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>중복 사용</label>
                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="is_combinable" name="is_combinable" value="1" @checked(!$coupon || $coupon->is_combinable == 1)>
                            <label class="form-check-label">다른 쿠폰과 함께 사용</label>
                        </div>
                    </div>
                </div>
            </main>
        </section>

        {{-- 쿠폰 이미지 --}}
        <section class="right-col">
            <header>
                <div>쿠폰 이미지</div>
                <div class="d-flex">
                    <button type="button" class="btn btn-info" onclick="$('#thumbnail').click();" id="thumbnail-find-btn">이미지 찾기</button>
                    <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-2"><i class="bi bi-chevron-up"></i></button>
                    <input class="d-none" type="file" id="thumbnail" name="thumbnail" accept="image/*" onchange="changeImage(event)"/>
                </div>
            </header>

            <main>
                <div id="thumbnail-wrapper">
                    @if ($coupon?->s3_key)
                        <div class="thumbnail-img-wrapper">
                            <button class="btn-delete" type="button" onclick="deleteImage({{ $coupon->id }})"><i class="bi bi-x-circle-fill"></i></button>
                            <img name="thumbnail" data-id="{{ $coupon->id }}" alt="" src="{{ Cache::remember("coupon-thumbnail-".$coupon->id, 3600, fn () => app(\S3Helper::class)->getPublicUrl($coupon->s3_key)) }}">
                        </div>
                    @endif
                </div>
            </main>

            <footer>
                * 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344
            </footer>
        </section>
    </div>

    @if ($coupon)
        {{-- 사용 가능 상품 옵션 --}}
        <section class="mt-3">
            <header>
                <div>
                    사용 가능 상품 옵션 <span class="text-info">(추가된 상품이 없는 경우 쿠폰은 사용할 수 없습니다.)</span>
                </div>

                <div>
                    <button type="button" class="btn btn-success" onclick="popupSelector('product-option', { service: '{{ $service }}', targetId: {{ $coupon->id }}, gridType: 'productOption', couponId: {{ $coupon->id }} })"><i class="bi bi-plus-circle-dotted"></i></button>

                    <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-5"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">번호</th>
                            <th>상품 구분</th>
                            <th>카테고리</th>
                            <th>모듈</th>
                            <th>상품/옵션명</th>
                            <th class="text-center">강의수</th>
                            <th class="text-center">구성교재</th>
                            <th class="price">판매가</th>
                            <th class="price">할인가</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody id="productOption-grid{{ $coupon->id }}">
                        @foreach ($coupon?->productOptions as $productOption)
                        <tr>
                            <td class="number text-center">
                                {{ $productOption->id }} <input type="hidden" name="productOptions[]" value="{{ $productOption->id }}">
                            </td>

                            <td>
                                {{ $productOption->product->sales_type }}
                            </td>

                            <td>
                                {{ $productOption->product->productCategories->implode("name", ",") }}
                            </td>

                            <td>
                                {{ $productOption->product->module }}
                            </td>

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

                            <td class="number text-center">{{ $productOption->courses->map(fn ($item) => $item->lectures)->count() }}</td>

                            <td class="number text-center">{{ count($productOption->textbooks) }}</td>

                            <td class="number price">{{ number_format($productOption->sales_price) }}</td>

                            <td class="number price">{{ number_format($productOption->discount_price) }}</td>

                            <td class="text-center">
                                <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>
            </main>
        </section>

        {{-- 발행 완료 및 사용 내역 --}}
        @if (count($coupon->issuedCoupons))
        <section class="mt-3">
            <header>
                <div>
                    발행 완료 및 사용 내역 <span class="text-info">(발행 완료일은 사용자가 쿠폰을 등록한 날짜로 표기됩니다.)</span>
                </div>

                <div>
                    <button type="button" class="btn btn-info" onclick="distributeCoupons({{ $coupon->id }})">쿠폰 지급</button>
                    <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-6"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <colgroup>
                        <col width="30">
                        <col />
                        <col width="80">
                        <col width="80">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th class="text-start">쿠폰코드</th>
                            <th>활성</th>
                            <th>사용일</th>
                            <th>상품옵션명</th>
                            <th>사용금액</th>
                            <th>결제금액</th>
                            <th class="text-start">사용자 (전화번호뒷자리)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($coupon->issuedCoupons as $ic)
                            <tr class="text-center">
                                <td>{{ $ic->id }}</td>
                                <td class="text-start">{{ $ic->code }}</td>
                                <td>{{ $ic->activated ? 'Y':'' }}</td>
                                <td>{{ $ic->used_at }}</td>
                                <td>
                                    {{ $ic->product_option_id }}
                                </td>
                                <td>{{ $ic->discount_price }}</td>
                                <td>{{ $ic->payment_id }}</td>
                                <td class="text-start">{{ $ic->user ? $ic->user->name .' ('. substr($ic->user->phone, -4) .')':'' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
        @endif

        {{-- 로그 --}}
        <section class="mt-3">
            <header>
                <div>
                    로그 <i class="bi bi-sort-numeric-down"></i>
                </div>

                <div>
                    <button class="ms-1 btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-coupon-{{ $coupon?->id }}-7"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                @php
                    $logs = $coupon->getParsingLogs() ?? [];
                @endphp

                <table class="table table-sm table-striped table-hover">
                    <colgroup>
                        <col width="30">
                        <col width="90">
                        <col />
                        <col width="30">
                        <col width="90">
                        <col width="90">
                        <col width="50">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th>로그생성</th>
                            <th class="text-start">쿠폰명</th>
                            <th>사용</th>
                            <th>발행기간</th>
                            <th>사용기간</th>
                            <th>발행매수</th>
                            <th>쿠폰코드</th>
                            <th>할인방식</th>
                            <th>할인액/률</th>
                            <th>최대할인액</th>
                            <th>중복사용</th>
                            <th>발행제한</th>
                            <th>상품옵션</th>
                            <th>이미지</th>
                            <th>담당자명</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $key => $log)
                        <tr class="text-center">
                            <td>{{ $log->row_number }}</td>

                            <td>{{ $log->created_at }}</td>

                            <td class="text-start">
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->name != $log->name)
                                        <span class="text-info">{{ $log->name }}</span>
                                    @else
                                    {{ $log->name }}
                                    @endif
                                @else
                                    {{ $log->name }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->activated != $log->activated)
                                    <span class="text-info">{{ $log->activated ? 'Y':'' }}</span>
                                    @else
                                    {{ $log->activated ? 'Y':'' }}
                                    @endif
                                @else
                                    {{ $log->activated ? 'Y':'' }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->issue_start_date != $log->issue_start_date)
                                    <span class="text-info">{{ $log->issue_start_date }}</span>
                                    @else
                                    {{ $log->issue_start_date }}
                                    @endif
                                @else
                                    {{ $log->issue_start_date }}
                                @endif

                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->issue_end_date != $log->issue_end_date)
                                    <span class="text-info">{!! $log->is_issue_end_date_disabled ? '' : '<br>'.$log->issue_end_date !!}</span>
                                    @else
                                    {!! $log->is_issue_end_date_disabled ? '' : '<br>'.$log->issue_end_date !!}
                                    @endif
                                @else
                                    {!! $log->is_issue_end_date_disabled ? '' : '<br>'.$log->issue_end_date !!}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->use_start_date != $log->use_start_date)
                                    <span class="text-info">{{ $log->use_start_date }}</span>
                                    @else
                                    {{ $log->use_start_date }}
                                    @endif
                                @else
                                    {{ $log->use_start_date }}
                                @endif

                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->use_end_date != $log->use_end_date)
                                    <span class="text-info">{!! $log->is_use_end_date_disabled ? '' : '<br>'.$log->use_end_date !!}</span>
                                    @else
                                    {!! $log->is_use_end_date_disabled ? '' : '<br>'.$log->use_end_date !!}
                                    @endif
                                @else
                                    {!! $log->is_use_end_date_disabled ? '' : '<br>'.$log->use_end_date !!}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->is_unlimited != $log->is_unlimited || $logs[$key - 1]->issued_count != $log->issued_count)
                                    <span class="text-info">{{ $log->is_unlimited ? '무제한' : $log->issued_count }}</span>
                                    @else
                                    {{ $log->is_unlimited ? '무제한' : $log->issued_count }}
                                    @endif
                                @else
                                {{ $log->is_unlimited ? '무제한' : $log->issued_count }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->code != $log->code)
                                    <span class="text-info">{{ $log->code }}</span>
                                    @else
                                    {{ $log->code }}
                                    @endif
                                @else
                                    {{ $log->code }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->discount_type != $log->discount_type)
                                    <span class="text-info">{{ $log->discount_type }}</span>
                                    @else
                                    {{ $log->discount_type }}
                                    @endif
                                @else
                                    {{ $log->discount_type }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->discount_value != $log->discount_value)
                                    <span class="text-info">{{ $log->discount_value }}</span>
                                    @else
                                    {{ $log->discount_value }}
                                    @endif
                                @else
                                    {{ $log->discount_value }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->discount_max != $log->discount_max)
                                    <span class="text-info">{{ $log->discount_max }}</span>
                                    @else
                                    {{ $log->discount_max }}
                                    @endif
                                @else
                                    {{ $log->discount_max }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->is_combinable != $log->is_combinable)
                                    <span class="text-info">{{ $log->is_combinable ? 'Y':'' }}</span>
                                    @else
                                    {{ $log->is_combinable ? 'Y':'' }}
                                    @endif
                                @else
                                    {{ $log->is_combinable ? 'Y':'' }}
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->is_single_use_per_id != $log->is_single_use_per_id)
                                    <span class="text-info">{{ $log->is_single_use_per_id ? 'Y':'' }}</span>
                                    @else
                                    {{ $log->is_single_use_per_id ? 'Y':'' }}
                                    @endif
                                @else
                                    {{ $log->is_single_use_per_id ? 'Y':'' }}
                                @endif
                            </td>

                            <td>
                                @if (isset($log->product_options))
                                    {{ count($log->product_options) }}
                                @endif
                            </td>

                            <td class="text-left">
                                @if ($log->s3_key)
                                    {{ last(explode('/', $log->s3_key ?? '')) }}
                                @else
                                -
                                @endif
                            </td>

                            <td>
                                @if (isset($logs[$key - 1]))
                                    @if ($logs[$key - 1]->created_by != $log->created_by)
                                    <span class="text-info">{{ $log->created_by }}</span>
                                    @else
                                    {{ $log->created_by }}
                                    @endif
                                @else
                                    {{ $log->created_by }}
                                @endif
                            </td>

                            <td class="text-start">
                                <x-log id="{{ $log->row_number }}" :log="$log" />
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>
    @endif
</form>
@endsection

@push("script")
<script>
    @if ($coupon)
    function couponDelete(coupon_id) {
        if (confirm('정말 삭제하시겠습니까?')) {
            $.ajax({
                type: "DELETE",
                url: '/api/promotions/coupons/'+coupon_id,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                success: function(service) {
                    location.href = '/promotions/coupons/list/'+service;
                },
                error: function(xhr, status, error) {
                    console.error("Error deleting coupon:", error);
                }
            });
        }
    }

    function copyCoupon() {

    }
    @endif
    function changeImage(e) {
        let file = e.target.files[0];

        // 새로운 DataTransfer 객체 생성
        const dataTransfer = new DataTransfer();

        // 파일을 DataTransfer에 추가
        dataTransfer.items.add(file);

        // 이미지를 추가하는 함수 호출
        addImageElement(file);

        // Input의 파일 목록을 새롭게 설정
        e.target.files = dataTransfer.files;
    }

    function addImageElement(file) {
        const $thumbnailDiv = $("<div>").addClass("thumbnail-img-wrapper");

        const $deleteBtn = $("<button>")
            .addClass("btn-delete")
            .attr("type", "button")
            .html('<i class="bi bi-x-circle-fill"></i>')
            .on("click", deleteImage);

        const imageSource = URL.createObjectURL(file);
        const $thumbnailImg = $("<img>")
            .attr("src", imageSource)
            .attr("name", "thumbnail")
            .data("file", file);


        // 요소들을 썸네일 래퍼에 추가
        $thumbnailDiv.append($deleteBtn, $thumbnailImg);

        const $parent = $("#thumbnail-wrapper");
        $parent.html($thumbnailDiv);

        URL.revokeObjectURL(file);
    }

    function deleteImage(couponId) {
        if (typeof couponId === 'number') {
            const $image = $('img[data-id="'+couponId+'"]');
            const targetUrl = '/api/promotions/coupons/delete-thumbnail/'+couponId;

            $.ajax({
                type: "DELETE",
                url: targetUrl,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                success: function(response) {
                    //location.reload();
                    $image.closest('.thumbnail-img-wrapper').remove();
                },
                error: function(xhr, status, error) {
                    console.error("Error deleting image:", error);
                }
            });
        } else {
            $(couponId.target).parent().closest('.thumbnail-img-wrapper').remove();
        }
    }

    function disabledChange(e) {
        const isChecked = e.target.checked;

        switch (e.target.name) {
            case "is_issue_end_date_disabled":
                $("#issue_end_date").prop("disabled", isChecked);

                if (isChecked) $("#issue_end_date").val('');
                break;

            case "is_use_end_date_disabled":
                $("#use_end_date").prop("disabled", isChecked);

                if (isChecked) $("#use_end_date").val('');
                break;

            case "is_unlimited":
                $("#issue_max").prop("disabled", isChecked);

                if (isChecked) {
                    $("#issue_max").val('');
                    $('#issueBtn').prop("disabled", true);
                    //$('#issued_count_wrapper').addClass('d-none');
                } else {
                    //$('#issued_count_wrapper').removeClass('d-none');
                }
                break;

            case "discount_type":
                if (e.target.value == '정액') {
                    $('#discount_value_percentage, #discount_max').prop("disabled", true).val('');
                    $('#discount_value_amount').prop("disabled", false);
                } else if (e.target.value == '정률') {
                    $('#discount_value_percentage, #discount_max').prop("disabled", false);
                    $('#discount_value_amount').prop("disabled", true).val('');
                }
                break;
        }
    }

    function setRandomCode() {
        $.ajax({
            type: "GET",
            url: '/api/promotions/coupons/get-random-code',
            success: function(code) {
                $('#code').val(code);
            },
            error: function(xhr, status, error) {
                console.error("Error deleting image:", error);
            }
        });
    }

    function distributeCoupons(coupon_id) {
        edmPopupOpen('/promotions/coupons/popup/distribute-coupons?coupon_id='+coupon_id, 'distributeCoupons'+coupon_id);
    }

    function issueCoupons() {
        $.ajax({
            type: "POST",
            url: "/api/promotions/coupons/issue-coupons",
            data: {id: $('input[name="id"]').val(), issue_max: $('#issue_max').val()/*, unactivated: $('#unactivated').prop('checked')*/},
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#issueBtn').prop('disabled', true);
                alertify.alert('success', '쿠폰이 발행되었습니다.').set('onok', function(){
                    location.reload();
                });
            },
            error: function(xhr, status, error) {
                console.error("Error deleting image:", error);
            }
        });
    }

    function validateForm()
    {
        var errors = [];

        validateInput('#name', "쿠폰명을 입력하세요.", errors);
        validateInput('#issue_start_date', "발행시작일을 입력하세요.", errors);

        if (!$('#is_issue_end_date_disabled').prop('checked')) {
            validateInput('#issue_end_date', "발행종료일을 입력하세요.", errors);
        }

        validateInput('#use_start_date', "사용시작일을 입력하세요.", errors);

        if (!$('#is_use_end_date_disabled').prop('checked')) {
            validateInput('#use_end_date', "사용종료일을 입력하세요.", errors);
        }

        if ($('input[name="issue_type"]').length > 0) {
            validateInput('input[name="issue_type"]', "발행 유형을 선택하세요.", errors);
        }

        if (!$('#is_unlimited').prop('checked') && ($('#issue_max').val() == 0 || $('#issue_max').val() == '')) {
            errors.push({
                message: '발행 매수를 입력하세요.',
                element: $('#issue_max')
            });
        }

        if ($('input[name="discount_type"]:checked').val() == '정액') {
            if ($('#discount_value_amount').val() == '') {
                errors.push({
                    message: '할인 금액을 입력하세요.',
                    element: $('#discount_value_amount').first()
                });
            }
        } else if ($('input[name="discount_type"]:checked').val() == '정률') {
            if ($('#discount_value_percentage').val() == '') {
                errors.push({
                    message: '할인률을 입력하세요.',
                    element: $('#discount_value_percentage').first()
                });
            }

            if ($('#discount_max').val() == '') {
                errors.push({
                    message: '최대 할인 금액을 입력하세요.',
                    element: $('#discount_max').first()
                });
            }
        }

        $('.tooltip').remove();

        if (errors.length > 0) {
            generateErrors(errors, 1);

            if (errors[0].element) {
                const $element = $(errors[0].element);

                if ($element.length > 0) {
                    $('html, body').animate({
                        scrollTop: $element.offset().top - 100
                    }, 500);

                    $element.focus();
                }
            }

            return false;
        }

        return true;
    }

    $(document).ready(function(){
        $('#issue_max').on('change', function(){
            const $min = $(this).attr('min');

            if ($(this).val() > 0) {
                if ($(this).val() == $min) $('#issueBtn').prop("disabled", true);
                else $('#issueBtn').prop("disabled", false);
            } else $('#issueBtn').prop("disabled", true);

            if ($(this).val() < 1) $(this).val(0);
        });

        $('input[name="issue_type"]').on('click', function(){
            const anyChecked = $('input[name="issue_type"]').is(':checked');

            if (anyChecked) {
                $('#code, #randomCodeBtn').prop('disabled', false);
            } else {
                $('#code, #randomCodeBtn').prop('disabled', true);
            }
        });

        $('#issue_end_date').on('change', function(){
            const $issue_start_date = $('#issue_start_date').val();
            if ($(this).val() < $issue_start_date) {
                alertify.alert('error', '종료일이 시작일보다 커야 합니다.');
                $(this).val('').focus();
            }
        });

        $('#use_end_date').on('change', function(){
            const $use_start_date = $('#use_start_date').val();
            if ($(this).val() < $use_start_date) {
                alertify.alert('error', '종료일이 시작일보다 커야 합니다.');
                $(this).val('').focus();
            }
        });

        $('#use_start_date').on('change', function(){
            const $issue_start_date = $('#issue_start_date').val();
            if ($(this).val() < $issue_start_date) {
                alertify.alert('error', '사용 사작일이 발행 시작일보다 커야 합니다.');
                $(this).val('').focus();
            }
        });

        $('#coupon-form').submit(function(e){
            e.preventDefault();

            if (!validateForm()) return;

            $("#loading-icon").show();

            $(this).find('input[role="switch"]').each( function () {
                var checkbox = $(this);
                if( checkbox.is(':checked')) {
                    checkbox.attr('value','1');
                } else {
                    checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
                    checkbox.prop('disabled', true);
                }
            });

            // 폼 제출
            this.submit();
        });
    });

</script>
@endpush