@props([
    'title' => '1:1문의 > 환경설정',
    'sections' => ['category'=>'카테고리 설정', 'input'=>'입력 설정', 'notification'=>'알림/푸시 설정']
])
<x-admin.layout.default-layout :title="$title">
    <x-slot:css>
        <link rel="stylesheet" href="{{ asset('library/remodal/remodal.css') }}">
        <link rel="stylesheet" href="{{ asset('library/remodal/remodal-default-theme.css') }}">
    </x-slot>
    <x-slot:script>
        <script src="{{ asset('library/remodal/remodal.js') }}"></script>
    </x-slot:script>

    <section id="category">
        <h2 class="h2_frm">{{ $sections['category'] }}</h2>
        <x-admin.forms.anchor :sections="$sections" :selected="'category'" />
        
        <form name="form_quesition_category" id="form_quesition_category" action="{{ route('admin.qa.config.category.store') }}"
            method="post" onsubmit="return validate_form_category(this);" autocomplete="off">
            @csrf

            <div class="tbl_frm01 tbl_wrap">
                <table>
                    <caption>Q&A 카테고리</caption>
                    <colgroup>
                        <col class="grid_4">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <th scope="row">카테고리</th>
                            <td>
                                <input type="text" class="frm_input required" id="title" name="title" size="30" placeholder="카테고리 타이틀" required>
                                <button type="submit" id="btn_add_category" class="btn btn_01">추가</button>
                                <button type="button" id="btn_modal_basic_template" class="btn btn_03">기본서식</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>

        <div class="tbl_head01 tbl_wrap">
            <table>
                <caption>카테고리 목록</caption>
                <thead>
                    <tr>
                        <th scope="col">카테고리 타이틀</th>
                        <th scope="col">등록된 QA</th>
                        <th scope="col">관리</th>
                        <th scope="col">순서</th>
                    </tr>
                </thead>
                <tbody id="categoryList">
                    @foreach($categories as $category)
                    <tr class="bg{{ $loop->even }}">
                        <td>
                            <input type="text" name="title[{{ $category->id }}]" value="{{ $category->title }}" class="frm_input">
                        </td>
                        <td>
                            <a href="{{ route('admin.qa.manage', ['category' => $category->id]) }}" class="btn btn_03">{{ number_format($category->questions_count) }}건</a>
                        </td>
                        <td class="td_mng td_mng_l">
                            <button type="button" class="btn_update_category btn_03" data-id="{{ $category->id }}">수정</button>
                            <button type="button" class="btn_modal_template btn_03" data-id="{{ $category->id }}">서식</button>
                            <button type="button" class="btn_delete_category btn_02" data-id="{{ $category->id }}" data-title="{{ $category->title }}">삭제</button>
                        </td>
                        <td class="td_mng td_mng_l">
                            <button type="button" class="btn_del_menu btn_04">이동</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <form name="qa_config_form" id="qa_config_form" action="{{ route('admin.qa.config.update') }}"
        method="post" onsubmit="return validate_form(this);" autocomplete="off">
        @csrf

        <section id="input">
            <h2 class="h2_frm">{{ $sections['input'] }}</h2>
            <x-admin.forms.anchor :sections="$sections" :selected="'input'" />
            
            <div class="tbl_frm01 tbl_wrap">
                <table>
                    <caption>환경설정</caption>
                    <colgroup>
                        <col class="grid_4">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <th scope="row">이메일 입력</th>
                            <td>
                                <input type="checkbox" name="email_input_enabled" value="1" id="email_input_enabled" @checked(old('email_input_enabled', $configs->get('email_input_enabled')) == 1)>
                                <label for="email_input_enabled">입력</label>
                                <input type="checkbox" name="email_input_required" value="1" id="email_input_required" @checked(old('email_input_required', $configs->get('email_input_required')) == 1)>
                                <label for="email_input_required">필수입력</label>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">휴대폰 입력</th>
                            <td>
                                <input type="checkbox" name="hp_input_enabled" value="1" id="hp_input_enabled" @checked(old('hp_input_enabled', $configs->get('hp_input_enabled')) == 1)>
                                <label for="hp_input_enabled">입력</label>
                                <input type="checkbox" name="hp_input_required" value="1" id="hp_input_required" @checked(old('hp_input_required', $configs->get('hp_input_required')) == 1)>
                                <label for="hp_input_required">필수입력</label>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">DHTML 에디터 사용</th>
                            <td>
                                <label for="is_use_editor_1" class="rules_label">사용</label>
                                <input name="is_use_editor" id="is_use_editor_1" type="radio" value="1" @checked(old('is_use_editor', $configs->get('is_use_editor')) == 1)>
                                <label for="is_use_editor_0" class="rules_label">사용안함</label>
                                <input name="is_use_editor" id="is_use_editor_0" type="radio" value="0" @checked(old('is_use_editor', $configs->get('is_use_editor')) == 0)>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">파일 업로드</th>
                            <td>
                                <label for="is_use_upload_1" class="rules_label">사용</label>
                                <input name="is_use_upload" id="is_use_upload_1" type="radio" value="1" @checked(old('is_use_upload', $configs->get('is_use_upload')) == 1)>
                                <label for="is_use_upload_0" class="rules_label">사용안함</label>
                                <input name="is_use_upload" id="is_use_upload_0" type="radio" value="0" @checked(old('is_use_upload', $configs->get('is_use_upload')) == 0)>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="qa_upload_size">파일 업로드 용량 제한</label></th>
                            <td>
                                <span class="frm_info">최대 40M 이하 업로드 가능, 1 MB = 1,048,576 bytes</span> 업로드 파일 한개당
                                <input type="text" name="qa_upload_size" value="{{ old('qa_upload_size', $configs->get('qa_upload_size')) }}" id="qa_upload_size" class="numeric frm_input" size="10"> bytes 이하
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <div>
            <button type="button" class="btn btn_02">취소</button>
            <button type="submit" class="btn btn_submit" accesskey="s">확인</button>
        </div>

        <section id="notification">
            <h2 class="h2_frm">{{ $sections['notification'] }}</h2>
            <x-admin.forms.anchor :sections="$sections" :selected="'notification'" />
            
            <div class="tbl_frm01 tbl_wrap">
                <table>
                    <caption>환경설정</caption>
                    <colgroup>
                        <col class="grid_4">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <th scope="row">회원님에게 발송</th>
                            <td>
                                <select name="notification_user" id="notification_user">
                                    <option value="" @selected(!old('notification_user'))>발송안함</option>
                                    <option value="all" @selected(old('notification_user', $configs->get('notification_user')) == 'all')>문의&답변 등록 시</option>
                                    <option value="inquiry" @selected(old('notification_user', $configs->get('notification_user')) == 'inquiry')>문의 등록 시</option>
                                    <option value="response" @selected(old('notification_user', $configs->get('notification_user')) == 'response')>답변 등록 시</option>
                                </select>
                            </td>
                            <th scope="row">회원님에게 발송 유형</th>
                            <td>
                                @if (!$sms_enabled && !$alimtalk_enabled)
                                <x-admin.forms.info :string="'기본환경 > API 연동설정 > 메시지 설정을 완료하셔야 알림톡(SMS)을 선택하실 수 있어요.'" />
                                @elseif ($sms_enabled && !$alimtalk_enabled)
                                <x-admin.forms.info :string="'알림이 SMS로 발송됩니다.'" />
                                @elseif (!$sms_enabled && $alimtalk_enabled)
                                <x-admin.forms.info :string="'알림이 알림톡으로 발송됩니다. 회원이 알림톡 수신거부한 경우 SMS로 대체 발송됩니다.'" />
                                @endif
                                <select name="notification_user_type" id="notification_user_type">
                                    <option value="mail" @selected(old('notification_user_type', $configs->get('notification_user_type')) == 'mail')>메일</option>
                                    @if ($sms_enabled || $alimtalk_enabled)
                                    <option value="all" @selected(old('notification_user_type', $configs->get('notification_user_type')) == 'all')>메일+알림톡(SMS)</option>
                                    <option value="alimtalk" @selected(old('notification_user_type', $configs->get('notification_user_type')) == 'alimtalk')>알림톡(SMS)</option>
                                    @endif
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">문의 등록 알림 템플릿</th>
                            <td>
                                <x-admin.forms.info :string="'템플릿을 수정하시면 기본환경 > API연동 설정 > 알림톡 관리자에서 템플릿을 새로 등록하셔야 합니다.'" />
                                <textarea name="notification_user_question_preset" id="notification_user_question_preset" rows="5" class="frm_input">{{ old('notification_user_question_preset', $configs->get('notification_user_question_preset')) }}</textarea>
                                <button type="button" class="btn btn_03 btn_copy_preset">복사</button>
                            </td>
                            <th scope="row">답변 등록 알림 템플릿</th>
                            <td>
                                <x-admin.forms.info :string="'템플릿을 수정하시면 기본환경 > API연동 설정 > 알림톡 관리자에서 템플릿을 새로 등록하셔야 합니다.'" />
                                <textarea name="notification_user_answer_preset" id="notification_user_answer_preset" rows="5" class="frm_input">{{ old('notification_user_answer_preset', $configs->get('notification_user_answer_preset')) }}</textarea>
                                <button type="button" class="btn btn_03 btn_copy_preset">복사</button>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">운영진에게 발송</th>
                            <td>
                                <x-admin.forms.info :string="'설정된 운영진 모두에게 알림이 발송됩니다.'" />
                                <label for="notification_admin_1" class="rules_label">사용</label>
                                <input name="notification_admin" id="notification_admin_1" type="radio" value="1" @checked(old('notification_admin', $configs->get('notification_admin')) == 1)>
                                <label for="notification_admin_0" class="rules_label">사용안함</label>
                                <input name="notification_admin" id="notification_admin_0" type="radio" value="0" @checked(old('notification_admin', $configs->get('notification_admin')) == 0)>
                            </td>
                            <th scope="row">운영진에게 발송 유형</th>
                            <td>
                                @if (!$sms_enabled && !$alimtalk_enabled)
                                <x-admin.forms.info :string="'기본환경 > API 연동설정 > 메시지 설정을 완료하셔야 알림톡(SMS)을 선택하실 수 있어요.'" />
                                @elseif ($sms_enabled && !$alimtalk_enabled)
                                <x-admin.forms.info :string="'알림이 SMS로 발송됩니다.'" />
                                @elseif (!$sms_enabled && $alimtalk_enabled)
                                <x-admin.forms.info :string="'알림이 알림톡으로 발송됩니다. 회원이 알림톡 수신거부한 경우 SMS로 대체 발송됩니다.'" />
                                @endif
                                <select name="notification_admin_type" id="notification_admin_type">
                                    <option value="mail" @selected(old('notification_admin_type', $configs->get('notification_admin_type')) == 'mail')>메일</option>
                                    @if ($sms_enabled || $alimtalk_enabled)
                                    <option value="all" @selected(old('notification_admin_type', $configs->get('notification_admin_type')) == 'all')>메일+알림톡(SMS)</option>
                                    <option value="alimtalk" @selected(old('notification_admin_type', $configs->get('notification_admin_type')) == 'alimtalk')>알림톡(SMS)</option>
                                    @endif
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">문의 등록 알림 템플릿</th>
                            <td colspan="3">
                                <x-admin.forms.info :string="'템플릿을 수정하시면 기본환경 > API연동 설정 > 알림톡 관리자에서 템플릿을 새로 등록하셔야 합니다.'" />
                                <textarea name="notification_admin_question_preset" id="notification_admin_question_preset" rows="5" class="frm_input">{{ old('notification_admin_question_preset', $configs->get('notification_admin_question_preset')) }}</textarea>
                                <button type="button" class="btn btn_03 btn_copy_preset">복사</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <div>
            <button type="button" class="btn btn_02">취소</button>
            <button type="submit" class="btn btn_submit" accesskey="s">확인</button>
        </div>
    </form>

    <div class="is_rewrite remodal" data-remodal-id="modal_basic_template" role="dialog" aria-labelledby="modal" aria-describedby="modalDesc">
        <button type="button" class="connect-close" data-remodal-action="close">
            <i class="fa fa-close"></i>
            <span class="txt">닫기</span>
        </button>
        <form id="form_basic_template" name="form_basic_template" method="post" action="{{ route('admin.qa.config.template') }}">
            @csrf
            <h3>카테고리 기본 서식</h3>
            <textarea name="category_basic_template" rows="5" style="min-height:unset;">{{ old('category_basic_template', $configs->get('category_basic_template')) }}</textarea>
            <button type="button" id="btn_save_basic_template" class="btn btn_03">저장</button> 
        </form>
    </div>

    <div class="is_rewrite remodal" data-remodal-id="modal_template" role="dialog" aria-labelledby="modal" aria-describedby="modalDesc">
        <button type="button" class="connect-close" data-remodal-action="close">
            <i class="fa fa-close"></i>
            <span class="txt">닫기</span>
        </button>
        <form id="form_template" name="form_template" method="post">
            @csrf

            <h3>카테고리 내용 서식</h3>
            <textarea rows="5" name="template" style="min-height:unset;"></textarea>
            <button type="button" id="btn_load_basic_template" class="btn btn_02">기본서식 불러오기</button>
            <button type="button" id="btn_save_template" class="btn btn_03">저장</button>
        </form>
    </div>

    <script>
        const $modal_basic_template = $('[data-remodal-id="modal_basic_template"]');
        const $modal_template = $('[data-remodal-id="modal_template"]');
        const form_basic_template = document.getElementById('form_basic_template');
        const form_template = document.getElementById('form_template');
        
        document.addEventListener('DOMContentLoaded', function() {
            initCopyPresetButtons();

            // 카테고리 기본서식 모달 버튼
            const btn_modal_basic_template = document.getElementById('btn_modal_basic_template');
            btn_modal_basic_template.addEventListener('click', function() {
                $modal_basic_template.remodal().open();
            });

            // 카테고리 기본서식 저장 버튼
            const btn_save_basic_template = document.getElementById('btn_save_basic_template');
            btn_save_basic_template.addEventListener('click', function() {
                form_basic_template.submit();
            });

            // 카테고리 목록 > 서식 모달 버튼
            const btn_modal_template = document.querySelectorAll('.btn_modal_template');
            btn_modal_template.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    let id = this.dataset.id;
                    let url = "{{ route('admin.qa.config.category', ['category' => '__REPLACE_ID__']) }}";

                    fetch(url.replace('__REPLACE_ID__', id), {method: 'GET'})
                    .then(response => response.json())
                    .then(data => {
                        form_template.querySelector('textarea[name="template"]').value = data.template;
                        modal_template_open(id);
                    })
                    .catch(error => {
                        alert('서식을 불러오는 중 오류가 발생했습니다.');
                    });
                });
            });

            // 카테고리 목록 > 서식 모달 > 기본서식 불러오기 버튼
            const btn_load_basic_template = document.getElementById('btn_load_basic_template');
            btn_load_basic_template.addEventListener('click', function() {
                form_template.querySelector('textarea[name="template"]').value = form_basic_template.querySelector('textarea').value;
            });

            // 카테고리 목록 > 서식 모달 > 저장 버튼
            const btn_save_template = document.getElementById('btn_save_template');
            btn_save_template.addEventListener('click', function() {
                let data = {
                    template: form_template.querySelector('textarea[name="template"]').value
                }
                sendAjaxRequest(form_template.action, 'POST', data, {callback: function() {
                    $modal_template.remodal().close();
                }});
            });

            // 카테고리 목록 > 수정 버튼
            const btn_update_category = document.querySelectorAll('.btn_update_category');
            btn_update_category.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    let id = this.dataset.id;
                    let url = "{{ route('admin.qa.config.category.update', ['category' => '__REPLACE_ID__']) }}";
                    let data = {
                        title: document.getElementsByName(`title[${id}]`)[0].value
                    };
                    sendAjaxRequest(url.replace('__REPLACE_ID__', id), 'POST', data, {reload: true});
                });
            });

            // 카테고리 목록 > 삭제 버튼
            const btn_delete_category = document.querySelectorAll('.btn_delete_category');
            btn_delete_category.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const title = this.dataset.title;
                    let url = "{{ route('admin.qa.config.category.destroy', ['category' => '__REPLACE_ID__']) }}";
                    let message = `"${title}" 카테고리를 삭제하시겠습니까?`;

                    deleteConfirm(url.replace('__REPLACE_ID__', id), message);
                });
            });
        });

        // 카테고리 서식 모달 열기
        function modal_template_open(id) {
            let url = "{{ route('admin.qa.config.category.update', ['category' => '__REPLACE_ID__']) }}";
            form_template.action = url.replace('__REPLACE_ID__', id);

            $modal_template.remodal().open();
        }

        // 카테고리 추가 폼 유효성 검사
        function validate_form_category(f) {
            const title = f.title.value.trim();
            if (title == '') {
                alert('카테고리 타이틀을 입력해주세요.');
                f.title.focus();
                return false;
            }
            return true;
        }
    </script>
</x-admin.layout.default-layout>