@extends("common.layout-popup")

@section("page-title", "상담 예약 관리")
@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")
    <input type="hidden" name="inquiry_id" id="inquiry_id" value="{{ $inquiry?->id }}" />
    <div>
        <form class="default" id="inquriy_user">
            <section>
                <header> 회원 정보 </header>
                <main class="split-form">
                    <div class="form-group">
                        <label class="required">이름</label>
                        <div class="right-col">
                            {{$inquiry?->name}}
                        </div>
                        <label class="required">
                            핸드폰
                        </label>
                        <div class="right-col">
                            {{$inquiry?->phone}}
                        </div>
                    </div>
                </main>
            </section>
        </form>
    </div>


    @if ($inquiry?->academyCounsel)

        <div class="">
                <div>
                    <section class="my-3" style="height: fit-content">
                        <header>
                            상담예약 내역
                            <button class="btn btn-danger" type="button" onclick="onRemoveAcademyCounsel()">선택 삭제</button>
                        </header>
                        <main>
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>번호</th>
                                    <th>상담 예약일</th>
                                    <th>상담 예약시간</th>
                                    <th>방문구분</th>
                                    <th>담당자</th>
                                    <th>상담 메모</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $details = $inquiry?->academyCounsel()->orderBy('created_at', 'desc')->get();
                                @endphp
                                @foreach ( $details as $item )
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="academy_counsel_id" value="{{ $item->id }}"
                                                   class="form-check-input academy_counsel_id" />
                                        </td>
                                        <td>{{ $item->id }}</td>
                                        <td><input type="date" name="contacted_date" class="form-control form-control-sm" id="contacted_date_{{ $item->id }}" value="{{ $item->contacted_date }}"  {{$item->is_completed == 1 ? "disabled" : ""}} /></td>
                                        <td><input type="time" name="contacted_time" class="form-control form-control-sm" id="contacted_time_{{ $item->id }}" value="{{ $item->contacted_time }}"  {{$item->is_completed == 1 ? "disabled" : ""}} /></td>
                                        <td>
                                            <select name="visited_type" id="visited_type_{{ $item->id }}" class="form-select visited_type" {{$item->is_completed == 1 ? "disabled" : "" }}>
                                                @foreach ( $visited as $key => $val )
                                                    <option value="{{ $key }}" @selected($key == $item->visited_type)>{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select"  id="charged_by_{{ $item->id }}" name="charged_by" {{$item->is_completed == 1 ? "disabled" : ""}}>
                                                <option value="0" @selected( (int)$item->charged_by === 0)>미정</option>
                                                @foreach ($admins  as $key => $admin)
                                                    <option value="{{ $admin->id }}"  @selected($admin->id == $item->charged_by)>{{ $admin->name }}</option>
                                                @endforeach

                                            </select>
                                        </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 onCounselModify" type="button">수정</button>
                                                <button class="btn btn-sm btn-success onComplete" type="button">상담완료</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </main>
                    </section>
                </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("완료", "저장되었습니다.", () => {
                            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') {
                                opener.location.reload();
                                location.reload();
                            }
                        });
                    } else {
                        alertify.alert("error", result.message);
                    }
                }, () => {});

            })
        })


        let isCheck = false;
        let checkInfo = { };
        function onRemoveAcademyCounsel() {
            if ($('.academy_counsel_id:checked').length == 0) {
                alertify.alert("알림", "삭제할 상담예약 내역을 선택하세요", () => {
                });
                return false;
            }

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

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

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

        }
    </script>
@endpush