@extends("common.layout")


@section("header")

@endsection

@section("content")
<h1>
    <div>
        <a href="{{ route('notify.template.list', ['service' => $service, 'type' => $type]) }}"><i class="bi bi-arrow-left-circle"></i></a>
        {{ $service == 'ielts' ? "인강" : "어학원" }} {{ $type == 'sms' ? "문자" : "이메일" }} 템플릿 {{ $template ? "상세" : "등록" }}
    </div>
</h1>

@php
    $dispatch = $template?->smsDispatches;
@endphp

<form class="default" id="template_form" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="service" id="service" value="{{ $service }}" />
    <input type="hidden" name="type" id="type" value="{{ $type }}" />
    <input type="hidden" name="id" id="id" value="{{ $template?->id }}" />
    <div class="col-md-12 align-right mb-2 button-wrap">
        <button class="btn btn-primary" type="button" onclick="onCheckSubmit()">저장</button>
    </div>
    <div class="layout-2-cols lb-layout">
        <section>
            <header><h6>Message</h6></header>
            <main class="split-form">
                <x:notification.message-form :message="$template" isEdit="1" />
                <div class="validation-wrap"><p class="m-0"></p></div>
            </main>
        </section>
        <section>
            <header><h6>Content</h6></header>
            <main class="split-form">
                <ul class="list-item-none" id="sms_contents">
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">활성여부</label>
                        <div class="col-8">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="activated"name="activated" @checked($template?->activated == 1)>
                                <label class="form-check-label" for="activated">활성</label>
                            </div>
                        </div>
                    </li>
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">메세지 유형</label>

                        <div class="col-4">
                            <input type="hidden" name="dispatch_type" id="dispatch_type" value="text">
                            <div class="right-col row mt-0">
                                <div class="col-6">
                                    <input type="radio" name="message_type" value="talk" id="message_type_talk" class="form-check-input" @checked(empty($template) || $dispatch?->message_type == "talk")/>
                                    <label for="message_type_talk">알림톡</label>
                                </div>

                                <div class="col-6">
                                    <input type="radio" name="message_type" value="sms" id="message_type_sms" class="form-check-input" @checked($dispatch?->message_type == "sms")/>
                                    <label for="message_type_sms">SMS</label>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">템플릿 그룹</label>
                        <div class="col-8">
                            <select name="notification_category_id" id="" class="form-select ">
                                @foreach ($categories as $category)
                                    <option value={{ $category->id }} @selected($category->id == $template?->notification_category_id)>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </li>
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">템플릿 명</label>
                        <div class="col-8">
                            <input type="text" name="name" value="{{ $dispatch?->name }}" class="form-control" id="name" />
                            <div class="validation-wrap"><p class="m-0"></p></div>
                        </div>
                    </li>
                    <li class="message-type-talk mb-3 row mx-0 align-middle">
                        <label class="col-2">알림톡 코드</label>
                        <div class="col-8">
                            <input type="text" name="talk_code" value="{{ $template?->talk_code }}" class="form-control" id="talk_code" />
                            <div class="validation-wrap"><p class="m-0"></p></div>
                        </div>
                    </li>
                    <li class="message-type-talk mb-3 row mx-0 align-middle">
                        <label class="col-2">검수실패사유</label>
                        <div class="col-8">
                            <input type="text" name="fail_message" value="{{ $template?->fail_message }}" class="form-control" id="fail_message" />
                        </div>
                    </li>
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">
                            발신번호
                            <label class="message-type-sms" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="알림톡 발송 실패하는 경우 SMS로 대체되며, 이 경우 발송할 발신번호입니다." class="mx-1">
                                <i class="bi bi-info-circle"></i>
                            </label>
                        </label>
                        <div class="col-8">
                            <select class="form-select" name="send_number" id="send_number">
                                @foreach ($sendNumbers as $number => $text)
                                    <option value="{{ $number }}" @selected($number == $dispatch?->send_number )>{{ $number }} ({{ $text }})</option>
                                @endforeach
                            </select>
                        </div>
                    </li>
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-2">광고성 여부
                            <label class="message-type-sms" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="알림톡 발송 실패하는 경우 SMS로 대체되며, 이 경우 광고표기가 별도로 필요합니다. 광고성 메세지인 경우 반드시 체크 부탁드립니다." class="mx-1">
                                <i class="bi bi-info-circle"></i>
                            </label>
                        </label>
                        <div class="col-8">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="is_advertise" name="is_advertise" @checked($dispatch?->is_advertise == 1)>
                                <label class="form-check-label" for="is_advertise">광고</label>
                            </div>
                        </div>
                    </li>
                    <li class="message-type-talk mb-3 row mx-0">
                        <label class="col-2">버튼<br>
                            <button class="btn btn-sm btn-primary" type="button" onclick="onCreateNewButton()">추가</button>
                        </label>
                        <div class="col-10">
                            <div id="button-list">
                                <div id="default" class="col-12 row m-0 p-0 mb-2 align-end button-item" style="display: none">
                                    <div class="col-2">
                                        <label>버튼명</label>
                                        <input type="text" name="button_name[]" value="" class="form-control form-control-sm" />
                                    </div>
                                    <div class="col-4">
                                        <label>PC 링크</label>
                                        <input type="text" name="pc_link[]" value="" class="form-control form-control-sm" />
                                    </div>
                                    <div class="col-4">
                                        <label>모바일 링크</label>
                                        <input type="text" name="mob_link[]" value="" class="form-control form-control-sm" />
                                    </div>
                                    <div class="col-2">
                                        <button class="btn btn-sm btn-danger onRemoveButton" type="button" >삭제</button>
                                    </div>
                                </div>

                                @if($template)
                                    @foreach ($template?->smsTemplateButtons as $button)

                                        <div class="col-12 row m-0 p-0 mb-2 align-end button-item">
                                            <div class="col-2">
                                                <label>버튼명</label>
                                                <input type="text" name="button_name_{{ $button->id }}" value="{{ $button->name }}" class="form-control form-control-sm" />
                                            </div>
                                            <div class="col-4">
                                                <label>PC 링크</label>
                                                <input type="text" name="pc_link_{{ $button->id }}" value="{{ $button->pc_link }}" class="form-control form-control-sm" />
                                            </div>
                                            <div class="col-4">
                                                <label>모바일 링크</label>
                                                <input type="text" name="mob_link_{{ $button->id }}" value="{{ $button->mob_link }}" class="form-control form-control-sm" />
                                            </div>
                                            <div class="col-2">
                                                <button class="btn btn-sm btn-danger onRemoveButton" type="button" >삭제</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>

                            <div class="validation-wrap"><p class="m-0"></p></div>
                        </div>
                    </li>
                </ul>
            </main>
        </section>
    </div>

    <x-notification.variables :variables="$variables" :variableText="$variableText"></x-notification.variables>

</form>

@endsection
@push("script")
    <script>
        const maxBytes = 2000
        function onReplaceText(code) {
            $('#message').val($('#message').val() + code);
            onCheckDispatchType();
        }

        $(function() {
            onCheckDispatchType();
            $('#image').on("change", function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview_img').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(file);
                }

                onCheckDispatchType();
            });

            $(document).on('click', '.onRemoveButton', function() {
                $(this).closest('div.button-item').remove();
            });

            $(document).on("keydown", 'textarea', function() {

                let byteCnt = calculateBytes($(this).val());
                if (byteCnt > maxBytes) {
                    byteCnt = maxBytes;
                    $(this).val(truncateByBytes($(this).val(), maxBytes))
                }

                onCheckDispatchType(byteCnt);
            })

            $('input[name=message_type]').on("change", function() {
                onCheckDispatchType();
                const type = $('input[name=message_type]:checked').val();

            })
        })

        function onCheckDispatchType(byteCnt = 0) {
            const type = $('input[name=message_type]:checked').val();
            const isImage = $('#image').val() ? true : false;
            byteCnt = byteCnt == 0 ? calculateBytes($('#message').val()) : byteCnt;
            let dispatchType = "";
            let dispatchTypeName = "";
            if (type == 'talk') {
                if (isImage) {
                    dispatchTypeName = "강조-이미지형";
                    dispatchType = "image";
                } else {
                    dispatchTypeName = "텍스트형";
                    dispatchType = "text";
                }
            } else {
                if (isImage) {
                    dispatchType = "mms";
                } else {

                    if (byteCnt <= 90) {
                        dispatchType = "sms";
                    } else {
                        dispatchType = "lms";
                    }
                }

                dispatchTypeName = dispatchType.toUpperCase();
            }

            $('#dispatch_type').val(dispatchType);
            $('#type_text').text(dispatchTypeName);
            $('#byteCnt').text(byteCnt);

            $('[class^=message-type-]').hide();
            $('.message-type-' + type).show();
        }

        function onCreateNewButton() {
            if ($('#button-list div.button-item:not(#default)').length >= 5) {
                alertify.alert("Error", "버튼은 최대 5개까지만 등록가능합니다.");
                return false;
            }

            const clone = $('#button-list div#default').clone();
            clone.attr("id", "");
            clone.show();

            $('#button-list').append(clone);
        }

        function onCheckSubmit() {
            if (! onCheckValidation()) {
                return false;
            }

            const formData = new FormData();
            formData.append("message", $('#message').val());
            formData.append("image",  $('#image')[0].files[0] ? $('#image')[0].files[0] : null);
            formData.append("id",  $('#id').val());
            formData.append("type",  $('#type').val());
            formData.append("service",  $('#service').val());


            const type = $('input[name=message_type]:checked').val();

            $.each($('#sms_contents li'), function() {
                if ((type == "talk" && $(this).hasClass("message-type-sms")) || type == "sms" && $(this).hasClass("message-type-talk")) {
                    return true;
                }

                $.each($(this).find("input, select"), function() {
                    const name = $(this).attr("name");
                    if ($(this).attr("type") == 'checkbox' ) {
                        formData.append(name, $(this).is(":checked") ? 1 : 0 );
                    } else if ($(this).attr("type") == 'radio') {
                        if ($(this).is(":checked")) {
                            formData.append(name, $(this).val());
                        }
                    } else {
                        if (! $.isEmptyObject($(this).val())) {
                            formData.append(name, $(this).val());
                            if (name.indexOf("button_name_") > -1) {
                                formData.append("button_id[]", name.replace("button_name_", ""));
                            }
                        }
                    }
                })
            })

            alertify.confirm("알림", "템플릿을 저장하시겠습니까?" , async () => {
                const response = await onSubmit(formData);
                if (response.status) {
                    alertify.alert("성공", "저장되었습니다.", () => {
                        const href = "{{ route('notify.template.detail', ['service' => $service, 'type' => $type, 'id' => ':id']) }}";
                        location.href= href.replace(":id", response.id);
                    })
                }
            }, () => { })
        }
        async function onSubmit(formData) {
            const result = await customFetch("{{ route('api.notify.template.change') }}", {
                method: "POST",
                body: formData,
            });

            return result;
        }


        function onCheckValidation() {
            let isValid = true;
            if ($.isEmptyObject($('#message').val())) {
                displayValidationForm($('#message'), "문자 내용을 입력하세요", ".split-form");
                isValid = false;
            }

            if ($.isEmptyObject($("#name").val())) {
                displayValidationForm($('#name'), "템플릿 명을 입력하세요", "div");
                isValid = false;
            }

            const type = $('input[name=message_type]:checked').val();
            if (type == 'talk') {
                if ($.isEmptyObject($('#talk_code').val())) {
                    displayValidationForm($('#talk_code'), "알림톡 코드를 입력하세요", "div");
                    isValid = false;
                }

                if ($('#button-list li:not(#default)').length > 0) {
                    const buttons = $('#button-list li:not(#default)');
                    let isNotEmpty = true;
                    $.each(buttons.find("input[type=text]") , function() {
                        if ($.isEmptyObject($(this).val())) {
                            isNotEmpty = false;
                        }
                    })

                    if (! isNotEmpty) {
                        displayValidationForm($('#button-list'), "버튼 정보를 모두 입력하세요", "div");
                        isValid = false;
                    }
                }
            }

            return isValid;
        }
    </script>
@endpush