@extends("common.layout")


@section("header")

@endsection

@section("content")

    <h1>
        <a href="{{ route('site-content.list') }}">사이트 컨텐츠 관리</a>
    </h1>

    <div>
        @foreach($contents as $content)
        <section>
            <header>
                <h6>{{$content->description}}</h6>
                <button class="btn btn-primary btn-sm" type="button" onclick="onSave(this)">수정</button>
            </header>

            <main>
                <div class="row g-2 mt-0">
                    <div class="col">
                        <div>
                            <input type="hidden" name="key" value="{{$content->key}}">
                            <input type="hidden" name="id" value="{{$content->id}}">
                            <input type="text" class="form-control form-control-sm" name="value" value="{{$content->value}}" maxlength="30">
                        </div>
                    </div>
                </div>
            </main>
        </section>
        @endforeach
    </div>
@endsection

@push("script")
    <script>
        function onSave(element) {
            console.log( $(element).parent());
            const id = $(element).parents('section').find("input[name='id']").val();
            const key = $(element).parents('section').find("input[name='key']").val();
            const value = $(element).parents('section').find("input[name='value']").val();
            console.log(id);
            console.log(key);
            console.log(value);
            alertify.confirm("확인", "텍스트를 수정하시겠습니까?", async () => {
                const href = "{{route('api.site-content.modify')}}";
                const result = await customFetch(href, {
                    method: "POST",
                    body : JSON.stringify({"id" : id,"key" : key, 'value' : value}) ,
                    headers: { "Content-Type" : "application/json"}
                });

                if (result.status) {
                    alertify.alert("완료", "변경되었습니다.", () => { });
                } else {
                    alertify.alert("error", result.message);
                }
            }, () => {} )
        }
    </script>
@endpush