@php
    $isAuth = Auth::user()->hasRole(['root', 'ielts-admin', 'academy-admin', 'hnd-admin']);
@endphp
<section x-data="memoPage" class="my-3" style="height: fit-content">
    <header>메모</header>
    <main>
        @if($isAuth)
        <div class="memo-form m-box">
            <div class="font-weight-600 mb-2">작성하기</div>
            <textarea class="form-control form-control-sm"  :class="{'danger' : validation.length > 0 }" id="text" rows="5" name="text" x-model="text" @input="onEventInput(-1)"></textarea>
            <div class="row mt-2">
                <div class="help-text danger mb-2" x-show="validation.length > 0">
                    * <span x-text="validation.join(', ')"></span>로 의심되는 텍스트가 입력되었습니다.
                </div>
                <div class="col-6 font-sm">
                    <span class="byteCnt">0</span>/2000 byte
                </div>
                <div class="col-6 align-right">
                    <button class="btn btn-sm btn-primary" type="button" @click="onCreateMemo()">등록</button>
                </div>
            </div>
        </div>
        @endif
        <div class="memo-wrap memo-flex">
            <div class="memo-box">
                <div class="font-weight-600 my-3 memo-flex">
                    <div>
                        <span x-text="data.name" class="mr-3"></span>
                        <span x-text="data.total" class="text-primary"></span> 건
                    </div>
                </div>
                <ul class="custom-scroll mt-3 limit-height">
                    <template x-for="(item, index) in data.list" :key="index">
                        <li class="memo-item m-box mb-3">
                            <div class="row mb-2 mt-0 mx-2 align-items-center">
                                <div class="col-6 memo-desc py-2 px-0">
                                    <div class="font-weight-600" x-text="item.name"></div>
                                    <div class="font-sm" x-text="item.date"></div>
                                </div>
                                @if($isAuth)
                                <div class="align-right px-0 col-6" x-show="item.is_mine">
                                    <button class="btn btn-xsm btn-primary" type="button" @click="onClickChangeMemo( index)">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button class="btn btn-xsm btn-danger" type="button" @click="onRemoveMemo( index)">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                                @endif
                            </div>

                            <div class="mb-2">
                                <textarea class="form-control form-control-sm"
                                    x-ref="textarea"
                                    x-model="item.memo" :disabled="! item.is_update"
                                    :class="{'danger' : item.validation.length > 0 }"
                                    @input="onEventInput(index)"
                                ></textarea>

                                <div class="help-text danger mt-2" x-show="item.validation.length > 0">
                                    * <span x-text="item.validation.join(', ')"></span>로 의심되는 텍스트가 입력되었습니다.
                                </div>
                                <div class="col-6 font-sm mt-2" x-show="item.is_update">
                                    <span class="byteCnt">0</span>/2000 byte
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </main>
</section>

{!! resource('js/common/memo.js') !!}
<script>

    function getId() {
        return $("#inquiry_id") ? $("#inquiry_id").val() : 0
    }


    async function getMemoList(inquiry_id) {

        const params = {"inquiry_id": inquiry_id}
        const result = await customFetch("{{ route('api.inquiry.memo.list') }}?" + $.param(params), {
            method: "GET",
            headers: { "Content-Type" : "application/json"}
        });

        if (result.status) {
            return result.data;
        }
    }

    async function createMemo(inquiry_id, title, text) {
        const result = await customFetch("{{ route('api.inquiry.memo.create') }}", {
            method: "POST",
            body: JSON.stringify({"inquiry_id": inquiry_id, "text" : text}),
            headers: { "Content-Type" : "application/json"}
        });

        return result;
    }

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

        return result.status;
    }

    async function removeMemo(id) {
        const result = await customFetch("{{ route('api.inquiry.memo.remove') }}", {
            method: "POST",
            body: JSON.stringify({"id" : id}),
            headers: { "Content-Type" : "application/json"}
        });

        return result.status;
    }
</script>