@props([
    'pageTitle' => '콘텐츠 ' . (Route::is('admin.content.manage.edit') ? '수정' : '등록'),
    'action' => Route::is('admin.content.manage.edit') ? route('admin.content.manage.update', ['content' => $content] + Request::query()) : route('admin.content.manage.store', Request::query()),
])
<x-admin.layout.default-layout :pageTitle="$pageTitle">
    <div id="contentsWrite" class="contents-wrapper">

        <form name="formContent" action="{{ $action }}" onsubmit="return validateForm(this);"
            method="post" enctype="multipart/form-data">
            @csrf
            @method(Route::is('admin.content.manage.edit') ? 'PUT' : 'POST')

            <div class="form">

                <div class="form-item">
                    <div class="col">
                        <label for="id" class="item-label">코드<strong>(필수)</strong></label>
                    </div>
                    <div class="col">
                        <input type="text" id="id" name="id" value="{{ old('id', $content->id) }}" class="item-input" @required(!$content->id) @readonly($content->id)>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="title" class="item-label">제목<strong>(필수)</strong></label>
                    </div>
                    <div class="col">
                        <input type="text" id="title" name="title" value="{{ old('title', $content->title) }}" class="item-input" required>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="content" class="item-label">내용<strong>(필수)</strong></label>
                    </div>
                    <div class="col">
                        <x-editor content="{{ old('content', $content->content) }}" tagName="content"/>
                        {{-- <textarea id="content" name="content" required class="item-textarea" placeholder="">{{ old('content', $content->content) }}</textarea> --}}
                    </div>
                </div>

                <!-- #FRONT 대시보드에서 선택할 수 있게 -->
                <div class="form-item">
                    <div class="col">
                        <label for="layout" class="item-label">레이아웃 지정</label>
                    </div>
                    <div class="col">
                        <x-admin.forms.selectbox
                            id="layout"
                            name="layout"
                            :value="old('layout', $content->layout)"
                            :options="$layouts"
                        />
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div id="tab_layout_custom" class="toggle-contents">
                    <div class="form-item">
                        <div class="col">
                            <label for="header_layout" class="item-label">상단 레이아웃 경로<strong>(필수)</strong></label>
                        </div>
                        <div class="col">
                            <input type="text" id="header_layout" name="header_layout" value="{{ old('header_layout', $content->header_layout) }}" class="item-input">
                            <span class="item-msg item-msg-help"></span>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="col">
                            <label for="footer_layout" class="item-label">하단 레이아웃 경로<strong>(필수)</strong></label>
                        </div>
                        <div class="col">
                            <input type="text" id="footer_layout" name="footer_layout" value="{{ old('footer_layout', $content->footer_layout) }}" class="item-input">
                            <span class="item-msg item-msg-help"></span>
                        </div>
                    </div>
                </div>
                {{-- @todo 기획에 없어서 주석처리함, 확인 필요 --}}
                {{-- <div class="form-item">
                    <div class="col">
                        <label for="" class="item-label">첨부파일</label>
                    </div>

                    <div class="col">
                        <input type="file" id="">

                        <div class="form-checkbox">
                            <div class="inner">
                                <input type="checkbox" id="">
                                <label for="" tabindex="0">파일 삭제</label>
                            </div>
                        </div>

                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div> --}}
            </div>

            <div class="form-submit is-fixed">
                <button type="submit" class="btn btn-contained-primary">저장하기</button>
                <button type="button" class="btn btn-solid-secondary btn-cancel">취소</button>
            </div>

        </form>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 기본 레이아웃 설정
            const oldLayout = "{{ old('layout', $content->layout) }}";
            toggleLayout(oldLayout);

            // 레이아웃 지정
            const layout = document.querySelectorAll('input[type="radio"][name="layout"]');
            layout.forEach(function(radio) {
                radio.addEventListener('click', function() {
                    toggleLayout(radio.value);
                });
            });

            // 취소 버튼
            const btnCancel = document.querySelector('.btn-cancel');
            btnCancel.addEventListener('click', function() {
                window.location.href = '{{ route('admin.content.manage', Request::query()) }}';
            });
        });

        // 레이아웃 토글
        function toggleLayout(layoutValue) {
            const setLayout = document.querySelectorAll('.set-layout');
            setLayout.forEach(function(layout) {
                layout.classList.toggle('is-hidden', layoutValue !== 'custom');
            });
        }
    </script>
</x-admin.layout.default-layout>