@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>
    <input type="hidden" name="inquiry_id" id="inquiry_id" value="{{ $inquiry?->id }}" />
    {!! resource('css/form.css') !!}
@endsection

@section("content")
<input type="hidden" name="inquiry_id" id="inquiry_id" value="{{ $inquiry?->id }}" />
<input type="hidden" name="service" id="service" value="{{ $service }}" />
<div>
    <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>
</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>
@endif
@endsection


@push("script")
<script>
    function onViewTerm(id)  {
        $('#' + id).clone();
        alertify.alert("약관", $('#' + id).html(), () => { })
    }
    $(function() {
        $('.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);
            }
        }, () => {});

        })
    })
    let isCheck = false;
    let checkInfo = { };
    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("완료", "삭제되었습니다.", () => {
                    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;
    }
</script>
@endpush