@extends("common.layout")

@php
    $page_title = $pageServiceName . ' 기타상품 ' . ($etcProduct?->id ? '상세보기 ('.$etcProduct->id.')' : '등록');
@endphp

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

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

@section("content")

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

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

        <div class="fixed-btns btn-group">
            @if ($etcProduct?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="etcProductDelete({{ $etcProduct->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-etcProduct-{{ $etcProduct?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--상품 번호--}}
                @if ($etcProduct?->id)
                <div class="form-group">
                    <label>상품 번호</label>
                    <div>
                        {{ $etcProduct?->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(!$etcProduct || $etcProduct->activated == 1)>
                        </div>

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

                {{--항목구분: etc_product_type--}}
                <div class="form-group">
                    <label class="required">항목구분</label>
                    <div class="right-col">
                        <div class="d-flex">
                            <select name="etc_product_type" class="form-select">
                                @foreach ($etcProductTypes as $etcProductType)
                                <option value="{{ $etcProductType }}" @selected($etcProduct?->etc_product_type == $etcProductType)>{{ $etcProductType }}</option>
                                @endforeach
                            </select>
                            <input type="text" @class(['form-control ms-1', 'd-none' => $etcProduct?->etc_product_type != '기타']) name="etc_product_type_detail" value="{{ $etcProduct?->etc_type_detail ?? '' }}" placeholder="추가설명">
                        </div>
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                기본 정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-etcProduct-{{ $etcProduct?->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="{{ $etcProduct?->name }}" placeholder="상품명을 입력해 주세요." required>
                    </div>
                </div>

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

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

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

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

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

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

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

                    <div class="right-col">
                        <input type="number" class="form-control" id="sales_price" name="sales_price" placeholder="판매가를 입력해 주세요." value="{{ $etcProduct?->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-etcProduct-{{ $etcProduct?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

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

    @if ($etcProduct)
    <div class="layout-2-cols my-3">
        <section>
            <header>
                포함 상품
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-etcProduct-{{ $etcProduct?->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 ($etcProduct->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-etcProduct-{{ $etcProduct?->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 ($etcProduct->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];
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        addImageElement(file);
        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(etcProductId) {
        if (typeof etcProductId === 'number') {
            const $image = $('img[data-id="'+etcProductId+'"]');
            const targetUrl = '/api/products/etc-products/delete-thumbnail?id='+etcProductId;

            $.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 ($etcProduct)
    function etcProductDelete(etcProduct_id) {
        if (confirm('정말 삭제하시겠습니까?')) {
            $.ajax({
                type: "DELETE",
                url: '/api/products/etc-products/'+etcProduct_id,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
                },
                success: function(service) {
                    location.href = '/products/etc-products/list/{{ $service }}';
                },
                error: function(xhr, status, error) {
                    console.error("Error deleting etcProduct:", error);
                }
            });
        }
    }

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

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

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

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