@extends("common.layout")

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

@section("content")

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

                <div class="row mb-3 align-items-center col-12 px-3">
                    <label class="col-1 col-form-label">약관버전</label>
                    <div class="col-9">
                        <input type="hidden" name="version" value="{{ $version }}" />
                        Ver {{ $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 }}" /> {{ $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 == 1) /> {{ $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"/>
                    </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">변경사항</label>
                    <div class="col-11">
                        <input type="text" name="comment" maxlength="100" value="" class="form-control"/>
                    </div>
                </div>
                <div class="row mb-3 align-items-center col-12 px-3">
                    <x-editor id='tui-editor' height='545px' />
                </div>
            </div>

        </div>
    </form>
</div>
@endsection

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


        $('#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() {
            location.href = "{{ route('term.list', strtolower($category)) }}"
        }

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

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

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

            let message = "신규 버전으로 생성하시겠습니까? ";
            if (useValue == 1 && $('#is_used').val() == 1) {
                message = "기존에 사용중인 약관이 있습니다.<br>해당 약관으로 대체하시겠습니까?";
            }

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

        }

        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() {
            const form = document.getElementById("term-form");
            const formData = new FormData(form);

            formData.append("content", editor.getHTML())

            const location = document.querySelector('input[name=location]');
            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