@extends("common.layout" . ($id > 0 ? "" : "-popup"))


@section("header")

@endsection

@section("page-title", ($service == 'ielts' ? "인강" : "어학원" ) . " 문자 발송")
@section("content")

    @php
        use Carbon\Carbon;
        $isModify = ($id == 0 || ($id > 0 && $data?->status == 'READY'));
    @endphp


    @if ($id > 0)
        <div>
            <h1><a href="">{{ $service == 'ielts' ? "인강" : "어학원" }} 발송 내역</a></h1>
        </div>
    @endif

<form class="default" id="send_form" method="POST" enctype="multipart/form-data" action="{{ route("notify.sms.send", ['service' =>  $service]) }}">
    @csrf
    <input type="hidden" name="service" id="service" value="{{ $service }}" />
    <input type="hidden" name="id" id="id" value="{{ $id }}" />
    <input type="hidden" name="dispatch_type" id="dispatch_type" value="{{ $data?->dispatch_type ?? "sms" }}" />
    @if ($isModify)
        <div class="col-md-12 align-right mb-2 button-wrap">
            <button class="btn btn-primary" type="button" onclick="onCheckSubmit()">발송</button>
            @if ($id > 0)
                <button class="btn btn-danger" type="button" onclick="">발송취소</button>
            @endif
        </div>
    @endif
    <div class="layout-2-cols lb-layout">
        <section>
            <header>
                <h6>Message</h6>
                @if ($isModify)
                    <div>
                        <button class="btn btn-sm btn-danger" type="button" onclick="onResetMessage()">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                        <button class="btn btn-sm btn-warning" type="button" onclick="onOpenSearchPopup()">템플릿 검색</button>
                    </div>
                @endif
            </header>
            <main class="split-form">
                <div id="message-box" style="min-height: 550px;">
                    @php
                        $message = $id == 0 ? null : ($data?->sms_template_id ? $data?->smsTemplate : $data);
                    @endphp
                    <x:notification.message-form isEdit=1 isSend=1 :message="$message"/>
                </div>
                <div class="validation-wrap"><p class="m-0"></p></div>
            </main>
        </section>
        <section>
            <header>
                <h6>Content</h6>
                @if ($isModify)
                    <button class="btn btn-sm btn-warning" type="button" onclick="onOpenSearchUserPopup()">회원 검색</button>
                @endif
            </header>
            <main class="split-form">
                <ul class="list-item-none">
                    @if ($id > 0)
                        <li class="mb-3 row mx-0 align-middle">
                            <label class="col-1">발송상태</label>
                            <div class="col-8">
                                <span style="color:{{ $data->sendStatus['color'] }}">{{ $data->sendStatus['text'] }}</span>
                            </div>
                        </li>
                    @endif
                    <li class="mb-3 row mx-0 align-middle">
                        <label class="col-1">발송시간</label>
                        <div class="col-8 row m-0 align-middle">
                            <div class="form-check col-2">
                                <input class="form-check-input" type="radio" id="is_reservation_0" name="is_reservation" value="0" @checked(empty($data) || $data?->is_reservation == 0)>
                                <label for="is_reservation_0">즉시발송</label>
                            </div>
                            <div class="form-check col-2">
                                <input class="form-check-input" type="radio" id="is_reservation_1" name="is_reservation" value="1" @checked($data?->is_reservation == 1)>
                                <label for="is_reservation_1">예약발송</label>
                            </div>
                            <div class="col-8 row m-0" id="send_reservation" style="{{ $data?->is_reservation == 0 ? 'display: none' : ""}}">
                                @php
                                    $date = $data?->reservation_at ? Carbon::parse($data?->reservation_at)->format("Y-m-d") : date('Y-m-d');
                                    $hour = $data?->reservation_at ? Carbon::parse($data?->reservation_at)->format("H:00") : date('H:00', strtotime(date("Y-m-d H:i:s") . "+ 1 HOUR"))
                                @endphp
                                <div class="col-6">
                                    <input type="date" name="reservation_date" id="reservation_date" value="{{ $date }}" class="form-control" />
                                </div>
                                <div class="col-6">
                                    <input type="time" name="reservation_time" id="reservation_time" value="{{ $hour }}" class="form-control" />
                                </div>
                                <div class="validation-wrap"><p class="m-0"> </p></div>
                            </div>
                        </div>

                    </li>
                </ul>
                <ul class="list-item-none" id="sms_form">
                    <li class="message-type-sms mb-3 row mx-0 align-middle">
                        <label class="col-1">발신번호</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 == $data?->send_number)>{{ $number }} ({{ $text }})</option>
                                @endforeach
                            </select>
                        </div>
                    </li>
                    <li class="message-type-sms mb-3 row mx-0 align-middle">
                        <label class="col-1">광고성 여부</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($data?->is_advertise == 1)>
                                <label class="form-check-label" for="is_advertise">광고</label>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="custom-scroll" style="max-height: 550px; overflow-y:scroll ">
                    <table class="table table-striped table-hover" id="user_list">
                        <colgroup>
                            <col width="30%">
                            <col width="30%">
                            <col width="30%">
                            <col width="10%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>회원명</th>
                                <th>이메일</th>
                                <th>연락처</th>
                                <th>관리</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($data?->smsRecipients)
                                @foreach ($data?->smsRecipients as $recipient)
                                    @php
                                        $user = $recipient->user_id > 0 ? $recipient->user->toArray() : [
                                            "name" => $recipient->name,
                                            "phone" => $recipient->phone,
                                            "email" => $recipient->email,
                                        ];

                                        $user['recipient_id'] = $recipient->id;
                                        $user['inflow_id'] = $recipient->inflowable_id;
                                        $user['res_code'] = $recipient->res_code;
                                        $user['res_message'] = $recipient->res_message;
                                    @endphp
                                    <x:notification.send-user :user="$user" isHeader="0" isModify="{{ $isModify }}" />
                                @endforeach
                            @elseif ($users)
                                @foreach ($users as $user)
                                    <x:notification.send-user :user="$user" isHeader="0" isModify="{{ $isModify }}" />
                                @endforeach
                            @endif

                        </tbody>
                    </table>
                    <div class="validation-wrap"><p></p></div>
                </div>
            </main>
        </section>
    </div>

    @if ($isModify)
        <x-notification.variables :variables="$variables" :variableText="$variableText"></x-notification.variables>
    @endif
</form>

<div style="display: none" id="def-message">
    <x:notification.message-form isEdit=1 isSend=1 :message="null"/>
</div>

@endsection

@push("script")
<script>

    function onReplaceText(code) {
        if ($.isEmptyObject($('#message-box #sms_template_id').val())) {
            $('#message-box #message').val($('#message-box #message').val() + code);
            onCheckDispatchType();
        }
    }

    function onOpenSearchPopup() {
        edmPopupOpen("{{ route('notify.template.list', ['service'=> $service, 'type' => 'sms']) }}?popup=1", '_blank', null, null, 'large')
    }

    function onOpenSearchUserPopup() {
        edmPopupOpen("{{ route('notify.user.list') }}", '_blank', null, null, 'large')
    }

    function onResetMessage() {
        const message = $('#def-message .template-box').clone();

        $('#message-box').empty();
        $('#message-box').append(message);

        $('#sms_form').show();

        $.each($('#sms_form select, #sms_form input'), function() {
            $(this).prop("disabled", false);
        })

        onCheckDispatchType();
    }
    const maxBytes = 2000;
    $(function() {
        onCheckDispatchType();

        $(document).on("change",'#message-box #image', 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("keydown", 'textarea', function() {

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

            onCheckDispatchType(byteCnt);
        })

        $('input[name=is_reservation]').on("change", function() {
            if ( $(this).val() == 0 ) {
                $('#send_reservation').hide()
            } else {
                $('#send_reservation').show()
            }
        })

        $(document).on("click", ".onRemove" ,function() {
            $(this).closest("tr").remove();
        })
    })
    function onCheckDispatchType(byteCnt = 0) {
        const type = $('input[name=message_type]').val();
        const isImage = $('#message-box #image').val() || ! $.isEmptyObject($('#preview_img').attr("src")) ? true : false;
        byteCnt = byteCnt == 0 ? calculateBytes($('#message').val()) : byteCnt;
        let dispatchType = "";
        let dispatchTypeName = "";

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

        dispatchTypeName = dispatchType.toUpperCase();

        $('#message-box #message_type').val("sms")
        $('#dispatch_type').val(dispatchType);
        $('#message-box #type_text').text(dispatchTypeName);
        $('#message-box #byteCnt').text(byteCnt);

    }

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

        if ($('input[name=is_reservation]:checked').val() == 1) {
            const reservationAt = new Date($('#reservation_date').val() + " " + $('#reservation_time').val())
            const now = new Date();
            if (now.getTime() > reservationAt.getTime()) {
                displayValidationForm($('#reservation_date'), "예약시간이 현재시간보다 작습니다.", "#send_reservation");
                isValid = false;
            }
        }

        if ($('#user_list tbody tr').length == 0) {
            displayValidationForm($('#user_list'), "문자를 발송할 회원을 등록해주세요", ".custom-scroll");
            isValid = false;
        }

        if (! isValid) return false;

        //todo 발송시 사용한 빌신번호 cache 저장 => 인입 시 cache 가 있으면 그 번호로 고정



        $('#send_form').submit();

    }
</script>
@endpush