@extends("common.layout")

@section("header")
{!! resource('js/components/tab.js') !!}
{!! resource('js/components/dropdown.js') !!}

@endsection

@section("content")
<div class="container-md">
    <div class="split">
        <h1>
            <a href="{{ route('term.detail' , $term->id) }}">약관상세</a>
        </h1>
    </div>
    <form method="post" class="default" id="term-form" action="{{ route("api.term.modify") }}">
        <input type="hidden" name="is_used"  id="is_used" value="{{ $isUsed ? 1 : 0 }}" />
        <input type="hidden" name="id"  id="id" value="{{ $term->id }}" />
        @csrf
        <div class="card">
            <div class="card-header">
                <div class="d-block align-right">
                    <button class="btn btn-secondary" type="button"  onclick="goList('{{ $term->category }}')" >목록</button>
                    <button class="btn btn-success" type="button" onclick="onSubmit(true)">신규버전생성</button>
                    <button class="btn btn-primary" type="button" onclick="onSubmit(false)">수정</button>
                </div>
            </div>
            <div class="card-body">
                @include("operation.layout.term-tab", ['categories' => $categories, "tabCategory" => $term->category, "type" => "detail"])

                <div class="row mb-3 align-items-center col-12 px-3">
                    <label class="col-1 col-form-label">약관버전</label>
                    <div class="col-9">
                        Ver {{ $term->version }}
                    </div>
                </div>
                <div class="row mb-3 align-items-center col-12 px-3">
                    <label class="col-1 col-form-label required">적용범위</label>
                    <div class="col-2 d-flex">

                        @if ( sizeof($locations) == 1 )
                            @foreach ($locations as $key => $val )
                                <input type="hidden" name="location" value="{{ $key }}" />
                                {{ $val }}
                            @endforeach
                        @else
                            @foreach ($locations as $key => $val )
                                <label class="form-check-label">
                                    <input type="checkbox" name="location" value="{{ $key }}" @checked( in_array($key , $term->location)) /> {{ $val }}
                                </label>
                            @endforeach
                        @endif
                    </div>
                    <div class="col-6 validation-wrap"><p class="m-0"></p></div>
                </div>
                <div class="row mb-3 align-items-center col-12 px-3">
                    <label class="col-1 col-form-label required">사용여부</label>
                    <div class="col-5 d-flex">
                        @foreach ($status as $key => $val )
                            <label class="form-check-label">
                                <input type="radio" name="status" value="{{ $key }}" @checked($key == $term->status) /> {{ $val }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="row mb-3 align-items-center col-12 px-3">
                    <label class="col-1 col-form-label required">약관 실행일</label>
                    <div class="col-2">
                        <input type="date" name="execute_date" id='execute_date' class="form-control" value="{{ $term->execute_date }}"/>
                    </div>
                    <div class="col-6 validation-wrap"><p class="m-0"></p></div>
                </div>
                @if ( $term->termsHistory->count() > 0 )
                <div class="row mb-3 align-items-start col-12 px-3">
                    <label class="col-1 col-form-label pt-0">변경사항</label>
                    <div class="col-11" id="read-history">
                        <div class="dropdown-wrap">
                            <ul class="dropdown-list">
                                @foreach ( $term->termsHistory as $history)
                                <li class="dropdown-item">
                                    <a href="javascript:onLoadContent('{{ $history->id }}')">[{{ date('Y-m-d', strtotime($history->created_at)) }}] {{ $history->comment }}</a>
                                    <div class="d-none" id="history_{{ $history->id }}" >{{ $history->content }}</div>
                                </li>
                                @endforeach
                            </ul>

                            <div class="btn-area">
                                @if ( $term->termsHistory->count() > 1 )
                                    <button class="btn btn-sm btn-secondary btn-dropdown" type="button">
                                        <i class="bi bi-caret-down-fill"></i>
                                    </button>
                                @endif
                                <button class="btn btn-sm btn-danger btn-reload" type="button" style="display: none">
                                    <i class="bi bi-arrow-clockwise"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
                @endif
                <div class="row mb-3 align-items-center col-12 px-3">
                    <div class="col-12 mb-2" id="edit-history">
                        <input type="text" name="comment" maxlength="100" value="{{ $term->comment }}" class="form-control"/>
                    </div>

                    <x-editor id='editor' height="545px" :content="$term->content"/>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

@push("script")
    <script>
        let editor = null;
        $(function() {
            editor = window.toastuiEditors['editor'];
        })


        const pageCategory = $('#category').val();
        if ($(".btn-reload").length > 0) {
            $(".btn-reload").on("click", function() {
                editor.setHTML(document.getElementById("original").textContent);
                $(this).hide();
            })
        }

        function onLoadContent(id) {
            editor.setHTML($("#history_" + id).text());
            $(".btn-reload").show();
        }

        $('#execute_date').on("change", function() {
            const now = new Date();
            now.setHours(0,0,0,0);

            const exe = new Date($(this).val());
            if ( exe.getTime() < now.getTime()) {
                alertify.alert("알림", "약관 실행일은 당일 이후로 설정해주세요");
                $(this).val("")
            }
        })

        function goList(category = null) {
            category = category ? category : pageCategory

            const onMove = (category) => {
                const link = "{{ route('term.list', ['category' => ':category']) }}";
                location.href = link.replace(":category", category.toLowerCase() );
            }
            if (pageCategory != category) {
                const message = "목록으로 이동하시겠습니까?";
                alertify.confirm("확인", message, () => { onMove(category) }, () => { } );
            } else {
                onMove(category);
            }
        }



        function onSubmit(type) {
            if (! validate()) {
                return false;
            }

            if (! editor.getHTML()) {
                alertify.alert("Error", "약관을 입력하세요");
                return false;
            }

            const useValue = $("input[name=status]:checked").val();
            const isUsed = $('#is_used').val();
            if (useValue == 0 && isUsed == 0) {
                alertify.alert("Error", "사용 상태인 약관이 없습니다.<br>다른 약관을 사용 상태로 변경하거나 현재 약관을 사용상태로 변경하셔야 저장이 가능합니다. ");
                return false;
            }

            const onSubmitAlert = (message) => {
                alertify.confirm("확인", message, () => { onSubmitData(type) }, () => { } );
            }

            let message = "약관을 수정하시겠습니까? ";
            if (type) {
                message = "신규 버전으로 생성하시겠습니까? ";
                if (useValue >= 1 && isUsed >= 1) {
                    alertify.confirm("확인", message, (e) => {
                        setTimeout(() => {
                            const addMessage = "기존에 사용중인 약관이 있습니다.<br>해당 약관으로 대체하시겠습니까?";
                            onSubmitAlert(addMessage);
                        }, 100);
                    }, () => { } );
                } else {
                    onSubmitAlert(message);
                }
            } else {
                onSubmitAlert(message);
            }
        }

        function validate() {
            $(".validation-wrap").hide()
            let validationWrap = null;
            resetValidationsForm();
            if ($('input[name=location]').length > 1) {
                if ($("input[name=location]:checked").length <= 0) {
                    validationWrap = displayValidationForm($('input[name=location]'), "적용범위가 선택되지 않았습니다.", 'div.row');
                }
            }

            if (! $('#execute_date').val()) {
                validationWrap = displayValidationForm($('#execute_date'), "날짜가 지정되지 않았습니다. ", 'div.row');
            }

            if (validationWrap)
                return false;
            else
                return true;
        }

        function onSubmitData(type) {
            const form = document.getElementById("term-form");
            const formData = new FormData(form);
            formData.append("content", editor.getHTML())
            formData.append("is_new", type ? 1 : 0);

            if ($('input[name=location]').length > 1) {
                const locations  = [];
                $.each($("input[name=location]:checked"), function() {
                    locations.push($(this).val())
                })
                formData.append("location", locations.join("|"));
            }

            $.ajax({
                url: form.getAttribute("action"),
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response, textStatus, jqXHR) {
                    if (jqXHR.status == 200 || jqXHR.status == 201) {
                        alertify.alert("알림", "완료되었습니다.", () => goList());
                    } else {
                        alertify.alert('Error', '오류가 발생했습니다.');
                    }
                }
            })
        }

    </script>

@endpush