@extends("common.layout")


@section("header")

@endsection

@section("content")

<h1>
    <a href="{{ route('menu.list') }}">사이트 메뉴 관리</a>
</h1>

<div class="layout-2-cols">
    <section>
        <header>
            <h6>메뉴목록</h6>
        </header>
        <main>
            <div class="treeWrap">
                @foreach ($menus as $menu)
                    @php
                        $child = $menu->child;
                    @endphp
                    <div class="treeBox depth1">
                        <div class="treeItem">
                            @if ($child->isNotEmpty())
                                <button class="btn btnView">
                                    <span></span>
                                    <span></span>
                                </button>
                            @endif
                            <label @class(['menuView', 'disabled' => $menu->activated == 0]) data-id="{{ $menu->id }}">

                                {{ $menu->title }}
                            </label>
                        </div>
                        @foreach ($child as $subMenu)
                            <div class="treeBox depth2">
                                @php
                                    $items = $subMenu->child;
                                @endphp
                                <div class="treeItem">
                                    @if ($items->isNotEmpty())
                                        <button class="btn btnView">
                                            <span></span>
                                            <span></span>
                                        </button>
                                    @endif
                                    <label @class(['menuView', 'disabled' => $subMenu->activated == 0]) data-id="{{ $subMenu->id }}">{{ $subMenu->title }}</label>
                                </div>
                                @if ($items->isNotEmpty())
                                    <div class="depth3 treeBox">
                                        @foreach ($items as $item)
                                        <div class="treeItem">
                                            <label @class(['menuView', 'disabled' => $item->activated == 0]) data-id="{{ $item->id }}">{{ $item->title }}</label>
                                        </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </main>

    </section>

    <section id="menuSetting"  style="display: none">
        <header>메뉴관리</header>
        <main>
            <div class="alert alert-info">
                * 캐시로 인해 변경사항이 바로 반영되지 않을 수 있습니다. 변경에 신중해주세요
            </div>
            <form class="default" id="seoForm" enctype="multipart/form-data">
                <div class="sub-title font-weight-600 font-lg seoArea mb3">Seo</div>
                <ul class="list-item-none seoArea">

                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지 명</label>
                        <div class="col-10">
                            <input type="text" name="mt_title" value="" class="form-control form-control-sm">
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지 설명</label>
                        <div class="col-10">
                            <input type="text" name="mt_description" value="" class="form-control form-control-sm">
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지키워드</label>
                        <div class="col-10">
                            <input type="text" name="mt_keywords" value="" class="form-control form-control-sm" placeholder=", 로 구분해주세요">
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">공유 페이지 명</label>
                        <div class="col-10">
                            <input type="text" name="og_title" value="" class="form-control form-control-sm">
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">공유 페이지 설명</label>
                        <div class="col-10">
                            <input type="text" name="og_description" value="" class="form-control form-control-sm">
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">공유이미지</label>
                        <div class="col-10">
                            <input type="file" name="image" value="" class="form-control form-control-sm">
                            <div id="preview" style="display: none">
                                <img src="" id="og_image" class="w-100 mt-2">
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="sub-title">페이지 정보(breadcrumb)</div>
                <ul class="list-item-none">
                    <input type="hidden" name="id" value="" />
                    <input type="hidden" name="parent_id" value="" />
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지 명</label>
                        <div class="col-10">
                            <input type="text" name="title" value="" class="form-control form-control-sm">
                            <div class="text-danger font-sm mt-1">* 브레드크럼에 노출되는 페이지명입니다. 메인 페이지는 아이콘으로 대체됩니다.</div>
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지 구분값</label>
                        <div class="col-10">
                            <input type="text" name="slug" value="" class="form-control form-control-sm" disabled>
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center">
                        <label class="col-2">페이지 패턴</label>
                        <div class="col-10">
                            <input type="text" name="route_name" value="" class="form-control form-control-sm" disabled>
                        </div>
                    </li>
                    <li class="row mb-3 mx-0 px-0 align-items-center b-b-1">
                        <label class="col-2">페이지 링크</label>
                        <div class="col-10">
                            <input type="text" name="url_pattern" value="" class="form-control form-control-sm" disabled>
                        </div>
                    </li>
                </ul>
            </form>
        </main>
        <footer class="align-right">
            <button class="btn btn-primary" type="button" onclick="onSubmit()">저장</button>
        </footer>
    </section>
</div>
@endsection

@push("script")
<script>
    $(function() {
        $('.btnView').on("click", function() {
            $(this).closest('.treeBox').toggleClass("active");
        })

        $('.menuView').on("click", async function(){
            if ($(this).hasClass("on")) {
                onResetData()
                $(this).removeClass("on");
                return false;
            }

            if ($('.menuView.on').length > 0) {
                onResetData()
                $('.menuView.on').removeClass("on");
            }

            const menuId = $(this).data('id');
            await onSetData(menuId);
            $(this).addClass("on");
            $('#menuSetting').show();

        })

        async function onSetData(menuId) {

            const href = "{{ route('api.menu.item', ['id' => ':id']) }}";
            const result = await customFetch( href.replace(":id", menuId), {
                method: "GET"
            });

            const data = result.data;
            $('#seoForm input').each(function() {
                const name = $(this).attr('name');
                $(this).val(data[name]);
            })

            if (! $.isEmptyObject(data['og_image'])) {
                $('#preview').show()
                $('#og_image').attr('src', data['og_image']);
            } else {
                $('#preview').hide()
            }

            $.isEmptyObject(data['route_name']) ? $('.seoArea').hide() : $('.seoArea').show();
        }

        function onResetData() {
            $('#seoForm input').each(function() {
                $(this).val('');
            })

            $('#menuSetting').hide();
        }



    })

    async function onSubmit() {
        const formData = new FormData();
        $('#seoForm input:not(:disabled)').each(function() {
            const name = $(this).attr('name');
            if ( name == 'image') {
                formData.append(name, $(this).get(0).files[0]);
            } else {
                formData.append(name, $(this).val());
            }

        })

        const href = "{{ route('api.menu.modify') }}";
        const result = await customFetch( href, {
            method: "POST",
            body: formData
        });

        if ( result.status ) {
            alertify.alert("알림", "변경되었습니다. 메뉴목록의 항목의 변경사항은 새로고침 후 확인하실 수 있습니다.", () => { })
        }

    }
</script>
@endpush