@extends("common.layout")


@section("header")
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer=""></script>
{!! resource('css/form.css') !!}
@endsection

@section("content")

<h1>
    <div>
        <a href="{{ route('inquiry.list', $service) }}"><i class="bi bi-arrow-left-circle"></i></a>
        {{ $service == "ielts" ? "인강 " : "어학원 " }}인쿼리 {{ $inquiry ? "상세" : "등록" }}
    </div>
</h1>
@php
 $isRegister = ($inquiry?->user_id > 0 && $inquiry?->user);
@endphp
<input type="hidden" name="inquiry_id" id="inquiry_id" value="{{ $inquiry?->id }}" />
<input type="hidden" name="service" id="service" value="{{ $service }}" />
<div class="layout-2-cols">
    <form class="default" id="inquriy_user">
        <section>
            <header> 회원 정보 </header>
            <main class="split-form">
                @if ($isRegister)
                    <div class="form-group">
                        <label class="required">이메일</label>
                        <div class="right-col">{{ $inquiry?->user?->email }}</div>
                    </div>
                    <div class="form-group">
                        <label class="required">가입일</label>
                        <div class="right-col">{{ $inquiry?->user?->created_at }}</div>
                        <label class="required">결제건수</label>
                        <div class="right-col">{{ $inquiry?->user?->payment?->count() ?? 0 }}</div>
                    </div>
                @endif
                <div class="form-group">
                    <label class="required">이름</label>
                    <div class="right-col">
                        <input type="text" name="name" value="{{ $isRegister ? $inquiry?->user->name : $inquiry?->name }}" id="name" class="form-control" @disabled($isRegister) />
                        <div class="validation-wrap"><p class="m-0"></p></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="required">
                        핸드폰
                        @if ( ! $isRegister && ! $inquiry)
                            <br>
                            <button class="btn btn-sm btn-warning" id="btnOverlay" type="button" onclick="onInquiryOverlay()">중복체크</button>
                        @endif
                    </label>
                    <div class="right-col">
                        <input type="text" name="phone" value="{{ $isRegister ? $inquiry?->user?->phone : $inquiry?->phone }}" id="phone" class="form-control number-only" maxlength="12" @disabled($isRegister)  />
                        <div class="validation-wrap"><p class="m-0"></p></div>
                    </div>
                </div>
                @if ($isRegister)
                <div class="form-group">
                    <label class="required">마케팅 수신동의</label>
                    <div class="right-col">
                        <div class="col-2">
                            <input type="checkbox" name="is_accepted_phone" value="1" id="is_accepted_phone" class="form-check-input" @checked( $inquiry->user?->is_accepted_phone == 1  ) @disabled(true)/>
                            <label for="is_accepted_sms">문자</label>
                        </div>
                        <div class="col-2">
                            <input type="checkbox" name="is_accepted_email" value="1" id="is_accepted_email" class="form-check-input" @checked( $inquiry->user?->is_accepted_email == 1  ) @disabled(true)/>
                            <label for="is_accepted_email">이메일</label>
                        </div>
                    </div>
                </div>
                @endif

                <div class="form-group " @style(['display: none' => $service == 'ielts'])>
                    <label class="required">CS 상태</label>
                    <div class="right-col">
                        <select class="form-select" name="status">
                            @foreach ( $status as $key => $item )
                                <option value="{{ $key }}" @selected($inquiry?->status == $key)>{{ $item['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group" @style(['display: none' => $service == 'ielts'])>
                    <label class="required">담당자</label>
                    <div class="right-col">
                        <select class="form-select" name="charged_by">
                            @if(!$inquiry?->charged_by)
                                <option value="" @selected(!$inquiry?->charged_by)>미정</option>
                            @endif
                            @foreach ( $admins as $admin )
                                <option value="{{ $admin->id }}" @selected($inquiry?->charged_by == $admin->id)>{{ $admin->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                    <div class="form-group" @style(['display: none' => $service == 'ielts'])>
                        <label class="required">등급</label>
                        <div class="right-col">
                            <select class="form-select" name="possibility">
                                @foreach ( $possibility as $item )
                                    <option value="{{ $item }}" @selected($inquiry?->possibility == $item)>{{ $item }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

            </main>
            @if ($inquiry)
                <footer class="align-right">
                    <button class="btn btn-primary" type="button" onclick="onChangeInquiryUser()">저장</button>
                </footer>
            @endif
        </section>
    </form>
    <form  class="default" id="inquriy_inflow">
        <section>
            <header>인쿼리 등록</header>
            <main class="split-form">
                <div class="form-group">
                    <label class="required">고객 유입 경로</label>
                    <div class="right-col">
                        <select class="form-select" name="inflow_path">
                            @foreach ( $inflow as $key => $item )
                                @if (strpos($item['type'], 'manual') !== false)
                                    <option value="{{ $key }}" >{{ $item['name'] }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>약관동의여부</label>
                    <div class="right-col">
                        <div class="col-4">
                            <label class="input-group-check">
                                <input type="checkbox" value="1" name="is_marketing" class="form-check-input"> 마케팅 이용동의 <a href="javascript:onViewTerm('is_marketing')">보기</a>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>{{($service === 'ielts') ? '상담' : '인쿼리'}}메모</label>
                    <div class="right-col">
                        <textarea class="form-control form-control-sm" rows="5" name="memo" id="memo"></textarea>
                    </div>
                </div>
            </main>
            <footer class="align-right">
                <button class="btn btn-primary" type="button" onclick="onCreateInquriy()">등록</button>
            </footer>
        </section>
    </form>
</div>


@if ($inquiry?->inquiryDetails)


<section class="my-3" style="height: fit-content">
    <header>
        인쿼리 내역
        <button class="btn btn-danger" type="button" onclick="onRemoveInquiryDetail()">선택 삭제</button>
    </header>
    <main>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th></th>
                    <th>번호</th>
                    <th>접수일시</th>
                    <th>유입경로</th>
                    <th>{{($service === 'ielts') ? '상담' : '인쿼리'}} 메모</th>
                    <th>관리</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $details = $inquiry?->inquiryDetails()->orderBy('created_at', 'desc')->get();
                @endphp
                @foreach ( $details as $item )
                <tr>
                    <td>
                        <input type="checkbox" name="inquiry_detail_id" value="{{ $item->id }}" class="form-check-input inquriy_detail_id"/>
                    </td>
                    <td>{{ $item->id }}</td>
                    <td>{{ date('Y-m-d H:i', strtotime($item->created_at)) }}</td>
                    <td>{{ $inflow[$item->inflow_path]['name'] }}</td>
                    <td>
                        <textarea class="form-control form-control-sm" col="3" name="memo">{{ $item->memo }}</textarea>
                    </td>
                    <td class="align-right">
                        @if ($item->is_completed == 0)
                        <button class="btn btn-sm btn-primary onModify" type="button">수정</button>
                        @endif

                        @php
                                $histories = json_decode($item->term_history, 1);
                            @endphp
                        @if ( ! empty($histories) && sizeof($histories) > 0 )
                        <button class="btn btn-sm btn-warning onHistoryView" type="button">약관동의</button>
                        <ul class="list-item-none" style="display: none">
                            <li class="row mx-0 mb-2 font-weight-600 pb-2 align-center" style="border-bottom: 2px solid #333">
                                <div class="col-6">약관명</div>
                                <div class="col-6">동의일시</div>
                            </li>

                            @foreach ($histories as $h)
                            <li class="row mx-0 mb-2 align-center">
                                <div class="col-6">{{ $h['title'] }}</div>
                                <div class="col-6">{{ date('Y-m-d H:i', strtotime($h['terms_at'])) }}</div>
                            </li>
                            @endforeach
                        </ul>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </main>
</section>
<div class="term-wrap">
    <div  id="is_marketing">
        <div class="term-box">
            <div class="title">1. 개인정보 수집목적 및 항목  </div>
            <div>edm교육그룹(주)이디엠글로벌캠퍼스의 학습상담, 유학상담, 문의응대, 각종 이벤트 등 최신정보 제공 및 홍보성 정보 제공</div>
            <div>수집 항목 : 이름, 휴대전화번호, 주소</div>
            <div class="title">2. 개인정보 보유 및 이용기간</div>
            <div>이용목적 달성 또는 신청자의 삭제요청 시까지</div>
            <div class="title">3. 신청자는 개인정보 수집/이용 동의를 거부하실 수 있습니다.</div>
            <div>단, 동의 거부 시 학습상담 및 관련 서비스 이용에 제한이 있을 수 있습니다.</div>
        </div>
    </div>
</div>
@endif
@endsection


@push("script")
<script>
    function onViewTerm(id)  {
        $('#' + id).clone();
        alertify.alert("약관", $('#' + id).html(), () => { })
    }
    $(function() {
        $('#name, #phone').on("keyup", function() {
            if ( $('#inquiry_id').val() == 0 && ! $.isEmptyObject(checkInfo)) {
                let isRecheck = true;
                $.each($('#name, #phone'), function() {
                    isRecheck = checkInfo[$(this).attr('name')] == $(this).val() ? isRecheck : false;
                })

                if ( isRecheck ) {
                    isCheck = true
                    $('#btnOverlay').addClass("btn-success").removeClass("btn-warning");
                } else {
                    isCheck = false
                    $('#btnOverlay').removeClass("btn-success").addClass("btn-warning");
                }
            }
        });

        $('input[type=radio].is_reservation').on('change', function() {
            if ($(this).val() == 0) {
                $('.set_reservation').hide();
            } else {
                $('.set_reservation').show();
            }
        });

        $('select.is_reservation').on('change', function() {
            const target = $(this).closest('tr');
            const is_reservation = $(this).val();
            $.each(target.find("input, select.visited_type"), function() {
                $(this).prop("disabled", is_reservation == 0)
            })
            onLoadDatePicker();
            onLoadTimePicker();

        });

        $('.onModify').on("click", function() {
            const target = $(this).closest('tr');
            let targetField = "input, select, textarea";
            const data = {};
            let text = "저장하시겠습니까?";


            $.each(target.find(targetField), function() {
                const name = $(this).attr('name');
                data[name] = $(this).val();
            })

            alertify.confirm("확인", text , async () => {
            const result = await customFetch("{{ route('api.inquiry.detail.modify') }}", {
                method: "POST",
                body : JSON.stringify(data) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "저장되었습니다.", () => {
                    opener.location.reload();
                    if (data['type'] == 'complete') {
                        location.reload();
                    }
                 });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {});

        })

        $('.onCounselModify, .onComplete').on("click", function() {
            const target = $(this).closest('tr');
            let targetField = "input, select, textarea";
            const data = {};
            let text;
            if ($(this).hasClass("onCounselModify")) {
                if (target.find('.is_reservation').length > 0 && target.find('.is_reservation:checked').val() > 1) {
                    if ($.isEmptyObject(target.find('#contacted_date').val()) || $.isEmptyObject(target.find('#contacted_time').val())) {
                        alertify.alert("Error", '예약일시를 입력하세요', () => { });
                        return false;
                    }
                }
                text = "저장하시겠습니까?";
            } else if ($(this).hasClass('onComplete')) {
                data['type'] = 'complete';
                targetField = "input[type=checkbox], textarea";
                text = "상담을 완료하시겠습니까?";
            }


            $.each(target.find(targetField), function() {
                const name = $(this).attr('name');
                data[name] = $(this).val();
            })

            alertify.confirm("확인", text , async () => {
                const result = await customFetch("{{ route('api.inquiry.counsel.modify') }}", {
                    method: "POST",
                    body : JSON.stringify(data) ,
                    headers: { "Content-Type" : "application/json"}
                });

                if (result.status) {
                    alertify.alert("완료", "저장되었습니다.", () => {
                        if (data['type'] == 'complete') {
                            location.reload();
                        }
                    });
                } else {
                    alertify.alert("error", result.message);
                }
            }, () => {});

        })



        $('.onHistoryView').on("click", function() {
            const history = $(this).next().clone().show().html();
            console.log(history)
            alertify.alert("약관동의 이력", history, () => {})
        })
    })

    function validationInquiryUser() {
        let isValid = true;
        if ($.isEmptyObject($('#name').val())) {
            displayValidationForm($('#name'), "이름을 입력하세요", ".right-col")
            isValid = false;
        }

        if ($.isEmptyObject($('#phone').val())) {
            displayValidationForm($('#phone'), "핸드폰 번호를 입력하세요", ".right-col")
            isValid = false;
        }

        if (! isValid) {
            return false;
        }
        return $('#inquriy_user').serializeArray();

    }

    function onChangeInquiryUser() {
        const params = validationInquiryUser();
        if ( ! params) {
            return false;
        }
        let data = {};
        $.each(params , function(index) {
            const param = params[index];
            data[param['name']] = param['value'];
        })
        data['inquiry_id'] = $('#inquiry_id').val()

        alertify.confirm("확인", "저장하시겠습니까?", async () => {
            const result = await customFetch("{{ route('api.inquiry.modify') }}", {
                method: "POST",
                body : JSON.stringify(data) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "저장되었습니다.", () => {
                    onPageDetail(result.inquiry_id);
                });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {});
    }

    let isCheck = false;
    let checkInfo = { };
    function onCreateInquriy() {
        let params = null;
        let isValid = true;
        if ($('#inquiry_id').val() == 0) {
            if (! isCheck) {
                alertify.alert("알림", "중복체크를 먼저 진행해주세요", () => {});
                return false;
            }
            const user = validationInquiryUser();
            if ( ! user) {
                isValid = false;
            } else {
                params = user;
            }
        }


        if ($('.is_reservation').length > 0 && $('.is_reservation:checked').val() == 1) {
            if ($.isEmptyObject($('#contacted_date').val()) || $.isEmptyObject($('#contacted_time').val())) {
                displayValidationForm($('#contacted_date'), "예약일시를 입력하세요", ".right-col")
                isValid = false;
            }
        }

        if (! isValid) {
            return false;
        }

        const inflow = $('#inquriy_inflow').serializeArray();
        params = params == null ? inflow : params.concat(inflow);

        let data = {};
        $.each(params , function(index) {
            const param = params[index];
            data[param['name']] = param['value'];
        })

        data['service'] = $('#service').val()
        data['inquiry_id'] = $('#inquiry_id').val()

        alertify.confirm("확인", "저장하시겠습니까?", async () => {
            const result = await customFetch("{{ route('api.inquiry.create') }}", {
                method: "POST",
                body : JSON.stringify(data) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "저장되었습니다.", () => {
                    opener.location.reload();
                    onPageDetail(result.inquiry_id);
                });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {});

    }

    function onRemoveInquiryDetail() {
        if ($('.inquriy_detail_id:checked').length == 0) {
            alertify.alert("알림", "삭제할 인쿼리를 선택하세요", () => {});
            return false;
        }

        const data = [];
        $.each($('.inquriy_detail_id:checked'), function() {
            data.push($(this).val());
        })

        alertify.confirm("확인", "삭제하시겠습니까?", async () => {
            const result = await customFetch("{{ route('api.inquiry.detail.remove') }}", {
                method: "POST",
                body : JSON.stringify({ "detail_ids" : data }) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "삭제되었습니다.", () => {
                    opener.location.reload();
                    onPageDetail($('#inquiry_id').val());
                });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {});
    }

    function onPageDetail(id = 0) {
        let href = "{{ route('inquiry.detail', [':service', ':id']) }}";
        href = href.replace(":service", $('#service').val())
        href = href.replace(":id", id == 0? "" : id);

        location.href = href;
    }

    function onCounselAdd(){
        const params = {
            "type" : 'create'
        }
        onOpenCounselPopup($('#service').val(), $('#inquiry_id').val(), params)
    }


    async function onInquiryOverlay() {
        const user = validationInquiryUser();
        if ( ! user) {
            alertify.alert("알림", "이름과 핸드폰을 입력하세요");
            return false
        }

        let data = {};
        $.each(user , function(index) {
            const info = user[index];
            data[info['name']] = info['value'];
        })

        data['service'] = $('#service').val();

        const result = await customFetch("{{ route('api.inquiry.overlay') }}", {
            method: "POST",
            body : JSON.stringify(data) ,
            headers: { "Content-Type" : "application/json"}
        });

        if ( result.isOverlay ) {
            alertify.alert("알림", "기존에 인입된 인쿼리 내역이 있습니다.<br>새탭으로 이동됩니다.", () => {
                let href = "{{ route('inquiry.detail', [':service', ':id']) }}";
                href = href.replace(":service", $('#service').val())
                href = href.replace(":id", result.inquiry_id);

                location.href = href;
            })
        } else {
            isCheck = true
            $('#btnOverlay').addClass("btn-success").removeClass("btn-warning");
            checkInfo = data;
        }
    }
</script>
@endpush