@extends("common.layout")

@php
    $page_title = $pageServiceName . ' 첨삭이용권 ' . ($feedbackPass?->id ? '상세보기 ('.$feedbackPass->id.')' : '등록');
@endphp

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

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

@section("content")

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

    <h1>
        <div>
            <a href="{{ route('product.feedback-pass.list', $service) }}"><i class="bi bi-arrow-left-circle"></i></a>
            {{ $page_title }}
        </div>

        <div class="fixed-btns btn-group">
            @if ($feedbackPass?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="feedbackDelete({{ $feedbackPass->id }}, '{{ $service }}')">삭제</button>
                @endif
                <button class="btn btn-success" type="button" onclick="copyEtcProduct()">복제</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="layout-3-cols">
        <section>
            <header>
                첨삭 구분
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-pass-{{ $feedbackPass?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

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

                {{--활성 구분--}}
                <div class="form-group">
                    <label class="required">활성 구분</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(!$feedbackPass || $feedbackPass->activated == 1)>
                        </div>

                        @if ($feedbackPass?->activated === 0 && $feedbackPass?->deactivated_at)
                            ({{ explode(" ", $feedbackPass->deactivated_at)[0] }})
                        @endif
                    </div>
                </div>

                {{--첨삭유형: feedback_types--}}
                <div class="form-group">
                    <label class="required">첨삭유형</label>
                    <div class="right-col">
                        <select class="form-select" name="type" id="feedback_type" required>
                            <option value="" >전체</option>
                            @foreach ($feedbackTypes as $feedbackType)
                                <option value={{ $feedbackType }} @selected($feedbackPass?->type == $feedbackType)>{{ $feedbackType }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>이용제한 (기본값)</label>

                    <div class="right-col input-group">
                        <div class="cdt-pass-usage-limit">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">이용횟수</span>
                                <input type="number" min="0" class="form-control form-control-sm" name="total_use_count" value="{{ !empty($feedbackPass?->total_use_count) ? $feedbackPass->total_use_count : '' }}">
                            </div>

                            <div class="input-group input-group-sm">
                                <span class="input-group-text">미이용 차감일</span>
                                <input type="number" min="0" class="form-control form-control-sm" name="unused_deduction_day" value="{{ !empty($feedbackPass?->unused_deduction_day) ? $feedbackPass->unused_deduction_day : '' }}">
                            </div>

                            <div class="input-group input-group-sm">
                                <input type="number" min="0" class="form-control" name="limit_day" value="{{ !empty($feedbackPass?->limit_day) ? $feedbackPass->limit_day : '' }}">
                                <span class="input-group-text">일</span>
                                <input type="number" min="0" class="form-control" name="limit_count" value="{{ !empty($feedbackPass?->limit_count) ? $feedbackPass->limit_count : '' }}">
                                <span class="input-group-text">회</span>
                            </div>

                            <div class="alert alert-sm alert-info w-auto">이용횟수가 없으면 무제한</div>
                        </div>
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-pass-{{ $feedbackPass?->id }}-basic"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group">
                    <label class="required" for="name">첨삭명</label>

                    <div class="right-col">
                        <input type="text" class="form-control" name="name" id="name" value="{{ $feedbackPass?->name }}" placeholder="첨삭명을 입력해 주세요." required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="description">간략 소개</label>

                    <div class="right-col">
                        <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $feedbackPass?->description ?? '' }}">
                    </div>
                </div>

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

                    <div class="right-col">
                        <textarea name="content" id="content" class="form-control" cols="30" rows="10">{{ $feedbackPass?->content ?? '' }}</textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">소비자가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="consumer_price" name="consumer_price" placeholder="소비자가를 입력해 주세요." value="{{ $feedbackPass?->consumer_price }}" min="0">
                    </div>
                </div>

                <div class="form-group">
                    <label for="content">판매가</label>

                    <div class="right-col">
                        <input type="number" class="form-control" id="sales_price" name="sales_price" placeholder="판매가를 입력해 주세요." value="{{ $feedbackPass?->sales_price }}" min="0">
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                썸네일
                <div>
                    <button type="button" class="btn btn-info" onclick="$('#thumbnail').click();" id="thumbnail-find-btn">이미지 찾기</button>
                            <input class="d-none" type="file" id="thumbnail" name="thumbnail" accept="image/*" onchange="changeImage(event)"/>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-pass-{{ $feedbackPass?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

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

    @if ($feedbackPass)
    <div class="layout-2-cols my-3">
        <section>
            <header>
                포함 상품
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-pass-{{ $feedbackPass?->id }}-products"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <colgroup>
                        <col width="30">
                    </colgroup>
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th class="text-start">상품명</th>
                            <th>모듈</th>
                            <th>판매중</th>
                            <th>등록일</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($feedbackPass->products()->get() as $product)
                        <tr class="text-center">
                            <td>{{ $product->id }}</td>
                            <td class="text-start"><a href="{{ route('product.detail', ['id' => $product->id, 'service' => $product->service]) }}">{{ $product->name }}</a></td>
                            <td>{{ $product->module }}</td>
                            <td>{{ $product->is_sellable ? 'Y':'' }}</td>
                            <td>{{ explode(" ", $product->created_at)[0] }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </main>
        </section>

        <section>
            <header>
                <div>
                    변경 로그
                </div>
                <div>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-pass-{{ $feedbackPass?->id }}-log"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr class="text-center">
                            <th>번호</th>
                            <th>일시</th>
                            <th>활성 구분</th>
                            <th>첨삭명</th>
                            <th>썸네일</th>
                            <th>판매가</th>
                            <th>담당자</th>
                            <th>자세히 보기</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($feedbackPass->getParsingLogs() as $log)
                        <tr class="text-center">
                            <td>{{ $log->id }}</td>
                            <td>
                                @if (isset($log->created_at))
                                    {{ $log->created_at }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if ($log->activated == 1)
                                    활성
                                @else
                                    비활성
                                @endif
                            </td>

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

                            <td>
                                {{ !empty($log->s3_key) ? $log->s3_key:'' }}
                            </td>

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

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

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

@endsection

@push("script")
<script>
        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(feedback_pass_id) {
        if (typeof feedback_pass_id === 'number') {
            const $image = $('img[data-id="'+feedback_pass_id+'"]');
            const targetUrl = '/api/products/feedback-passes/delete-thumbnail?id='+feedback_pass_id;

            $.ajax({
                type: "DELETE",
                url: targetUrl,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                beforeSend: function() {
                    $("#loading-icon").show();
                },
                success: function(response) {
                    $("#loading-icon").hide();
                    alertify.alert("성공", "썸네일이 삭제되었습니다.");
                    $image.closest('.thumbnail-img-wrapper').remove();
                },
                error: function(xhr, status, error) {
                    $("#loading-icon").hide();
                    console.error("Error deleting image:", error);
                }
            });
        } else {
            $(courseId.target).parent().closest('.thumbnail-img-wrapper').remove();
        }
    }

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

    function copyEtcProduct()
    {
        if (confirm("썸네일을 제외한 모든 내용이 복제됩니다. 진행하시겠습니까?")) {
            $('#feedback-pass-form').append('<input type="hidden" name="copy" value="1">');
            var currentName = $('#name').val();
            var newName = '[복제] '+currentName;
            $('#name').val(newName);
            $('#feedback-pass-form').submit();
        }
    }
    @endif

    $(document).ready(function(){
        $("select[name='etc_product_type']").on("change", function(){
            const $val = $(this).val();
            const $feedbackTypeDetail = $("input[name='etc_product_type_detail']");

            if ($val == '기타') {
                $feedbackTypeDetail.removeClass("d-none");
            } else {
                $feedbackTypeDetail.val('').addClass("d-none");
            }
        });

        $('#feedback-pass-form').submit(function(e){
            e.preventDefault();
            $("#loading-icon").show();
            this.submit();
        });
    });
</script>
@endpush