@extends('ielts.layout')

@section('gnb', view('gnb', ['service'=>'ielts']))

@section('subgnb', view('ielts.gnb'))

@section('ielts-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
@endsection

@section("progress")
    @include('progress')
@endsection

@section("ielts-content")
    <div id="wrap" class="boardPage inquiry-group">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>B2B 및 단체 수강 문의</h1>
            </div>

            <div class="board-view">
                <div class="wrap wrap1">
                    <div class="titleWrap customLine">
                        <p class="sub">대학, 기업, 공공기관 등</p>
                        <p class="title">10인 이상 단체 수강 시 <br class="mo_tab-br">특별 할인 혜택을 제공해 드립니다.</p>
                    </div>
                    <div class="boxWrap">
                        <div class="box">
                            <figure class="img1"></figure>
                            <div class="text">
                                <p class="sub">edm어학원 강사진이 직접 강의합니다.</p>
                                <b>아이엘츠 전문 강사 직강</b>
                            </div>
                        </div>
                        <div class="box">
                            <figure class="img2"></figure>
                            <div class="text">
                                <b>단기간 목표 점수 <br class="pc-br">도달을 위한 단독 특별반 개설</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap wrap2">
                    <div class="titleWrap customLine">
                        <p class="title">단체 수강 고객을 위한 특별 혜택</p>
                    </div>
                    <div class="boxWrap">
                        <div class="box">
                            <figure class="img1"></figure>
                            <div class="text">
                                <b><em>최대 20%</em> 특별 가격 혜택</b>
                                <p>단체 규모와 수강 과목에 따라 <br>맞춤 혜택가를 제공합니다.</p>
                            </div>
                        </div>
                        <div class="box">
                            <figure class="img2"></figure>
                            <div class="text">
                                <b>무료 학습 컨설팅 제공</b>
                                <p>단기간 목표 점수 달성을 위한 <br>단체별 맞춤 학습 컨설팅을 제공합니다.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap contact">
                    <div class="titleWrap customLine">
                        <p class="title">단체 수강은 이렇게 진행됩니다</p>
                    </div>
                    <ul class="stepList flex">
                        <li class="step">단체 문의 <br class="mo_tab-br">접수</li>
                        <li class="step">문의내용 <br class="mo_tab-br">상담</li>
                        <li class="step">단체수강 <br class="mo_tab-br">특별혜택 제공</li>
                    </ul>

                    <form method="POST" id="applyForm">
                        <div class="formTopArea">
                            <!-- note 게시판 카테고리 -->
                            <div class="categoryWrap">
                                <div class="flex">
                                    <a href="" class="active">문의 등록</a>
                                    <a href="" class="">문의내역 조회</a>
                                </div>
                            </div>

                            <div class="formArea">
                                <div class="formWrap applyForm">
                                    <div class="input">
                                        <p class="tit">기업/기관명<i></i></p>
                                        <div class="inputBox">
                                            <input type="text" name="company" id="company" placeholder="입력" autocomplete="off" required>
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">담당자명<i></i></p>
                                        <div class="inputBox">
                                            <input type="text" name="name" id="name" placeholder="입력" autocomplete="off"  value="{{ Auth::user()->name ?? ""}}" required>
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">연락처<i></i></p>
                                        <div class="inputBox">
                                            <input type="tel" name="phone" id="phone" value="{{ Auth::user()->phone ?? ""}}" placeholder="전화번호 (‘-’는 제외하고 입력해 주세요.)" autocomplete="off" maxlength="13"  required>
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">이메일<i></i></p>
                                        <div class="inputBox">
                                            <input type="email" name="email" id="email" placeholder="이메일을 입력해 주세요." autocomplete="off" maxlength="50"  required>
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">문의종류<i></i></p>
                                        <div class="inputBox">
                                            <div class="dropDownMenu type2 d-40">
                                                <div class="selectBox">
                                                    <input type="hidden" name="type" value="ielts.group_study">
                                                    <button type="button" class="label selected" data-selected="ielts.group_study" data-default="ielts.group_study">인강 단체수강</button>
                                                    <div class="optionListWrap">
                                                        <div class="scrollWidth">
                                                            <ul class="optionList scrollWrap">
                                                                <!-- 활성화 메뉴 active class 추가 -->
                                                                <li class="optionItem selected"><button type="button" data-account="ielts.group_study">인강 단체수강</button></li>
                                                                <li class="optionItem"><button type="button" data-account="academy.group_study">어학원 출강문의</button></li>
                                                                <li class="optionItem"><button type="button" data-account="academy.group_lecture">어학원 단체수강</button></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input text">
                                        <p class="tit">내용<i></i></p>
                                        <div class="inputBox">
                                            <textarea name="content" id="content" placeholder="내용을 입력해 주세요." autocomplete="off"></textarea>
                                        </div>
                                    </div>
                                    <div class="agreementWrap">
                                        <div class="terms-wrap">
                                            <button type="button" class="toggle-btn"><span class="false">보기</span><span class="true">접기</span></button>
                                            <label>
                                                <input type="checkbox" name="is_private" id="is_private">
                                                <span>개인정보 수집 및 이용동의(필수)</span>
                                            </label>
                                            <div class="terms-detail">
                                                <div class="terms-viewer">
                                                    <p>1. 개인정보 수집목적 및 항목</p>
                                                    <p class="dotTxt">edm교육그룹㈜이디엠글로벌캠퍼스의 학습상담, 유학상담, 문의응대, 각종 이벤트 등 최신정보 제공 및 홍보성 정보 제공</p>
                                                    <p class="dotTxt">수집 항목 : 이름, 휴대전화번호, 주소</p>
                                                    <p>2. 개인정보 보유 및 이용기간</p>
                                                    <p class="dotTxt">이용목적 달성 또는 신청자의 삭제요청 시까지</p>
                                                    <p>3. 신청자는 개인정보 수집/이용 동의를 거부하실 수 있습니다.</p>
                                                    <span>*단, 동의 거부 시 학습상담 및 관련 서비스 이용에 제한이 있을 수 있습니다.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- todo 문의내역 조회 -->
                                <div class="formWrap searchForm" style="display: none;">
                                    <!-- todo 조회 화면 -->
                                    <div id="findWriting" class="findWriting">
                                        <div class="messageBox">
                                            <figure></figure><em>문의내역 조회를 위해 등록하신 연락처와 이메일 주소를 입력해 주세요.</em>
                                        </div>
                                        <div class="input">
                                            <p class="tit">연락처<i></i></p>
                                            <div class="inputBox">
                                                <input id="search_phone" name="search_phone" type="tel" placeholder="전화번호 (‘-’는 제외하고 입력해 주세요.)" required autocomplete="off" maxlength="13">
                                            </div>
                                        </div>
                                        <div class="input">
                                            <p class="tit">이메일<i></i></p>
                                            <div class="inputBox">
                                                <input id="search_email" name="search_email" type="email" placeholder="이메일을 입력해 주세요." required autocomplete="off" maxlength="50">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="myWriting" class="myWriting" style="display: none;">
                                        <div class="textWrap date">
                                            <b>등록일자</b>
                                            <div class="text">
                                                <div class="dropDownMenu type2 d-24">
                                                    <div class="selectBox">
                                                        <input type="hidden" name="inquiryId" value="">
                                                        <button type="button" class="label" data-selected="" data-default="2025.05.08 00:00">2025.05.08 00:00</button>
                                                        <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                <ul class="optionList scrollWrap">
                                                                    <!-- 활성화 메뉴 active class 추가 -->
                                                                    <li class="optionItem"><button type="button" data-account="2025.05.08 00:00">2025.05.08 00:00</button></li>
                                                                    <li class="optionItem"><button type="button" data-account="2025.05.08 00:01">2025.05.08 00:01</button></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="textWrap content">
                                            <b>내용</b>
                                            <div id="search_content" class="text">사용자 입력 내용이 노출 됩니다. 200프로 환급반 신청</div>
                                        </div>
                                    </div>
                                    <div id="noData" style="display: none !important;">
                                        <div class="flex"><p>등록된 문의 내역이 없어요.</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <!-- 문의 등록 -->
                            <button type="submit" id="btnApply" class="apply submitBtn">문의 남기기</button>
                            <button style="display:none;" type="button" id="btnSearch" class="search submitBtn">조회</button>
                            <button style="display:none;" type="button" id="btnDelete" class="search submitBtn">삭제</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ielts-script')
    <script>
        let isApplyProcessing = false;

        $(function () {
            // 입력 이벤트: 신청폼 유효성 검사 및 숫자만 허용
            $('#name, #phone, #email, #content').on("keyup", function () {
                onApplyCheckValidation();
                if ($(this).attr('id') === 'phone') {
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                }
            });

            // 전화번호 입력 제한: 숫자만, 최대 11자리
            $('#phone').on('input', function () {
                let sanitized = $(this).val().replace(/\D/g, '').substring(0, 11);
                $(this).val(sanitized);
            });

            // 개인정보 동의 체크 시 유효성 검사
            $('input[name=is_private]').on("click", onApplyCheckValidation);

            // 신청 버튼 클릭 이벤트
            $('#btnApply').on('click', async function (e) {
                e.preventDefault();
                if (!$(this).hasClass('active') || isApplyProcessing) return;

                isApplyProcessing = true;

                try {
                    const service = getServiceFromPath();
                    const data = $('.applyForm').find(':input').serialize();

                    const result = await useFetch(`/api/${service}/group-study/apply`, {
                        method: 'POST',
                        body: data,
                    });

                    if (result.message) {
                        alertPopup(result.message, {
                            onConfirm: () => location.reload(),
                            onClose: () => location.reload(),
                        });
                    }
                } catch (error) {
                    console.error(error);
                } finally {
                    isApplyProcessing = false;
                }
            });

            // 검색 조건 입력 시 유효성 검사
            $('#search_email, #search_phone').on("keyup", function () {
                onSearchCheckValidation();
                if ($(this).attr('id') === 'search_phone') {
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                }
            });

            // 검색 버튼 클릭 이벤트
            $('#btnSearch').on('click', async function (e) {
                e.preventDefault();
                if (!$(this).hasClass('active') || isApplyProcessing) return;

                isApplyProcessing = true;

                try {
                    const service = getServiceFromPath();
                    const formData = $('.searchForm').find(':input').serialize();

                    const result = await useFetch(`/api/${service}/group-study/search`, {
                        method: 'POST',
                        body: formData,
                    });

                    if (!result.data || result.data.length === 0) {
                        alertPopup("입력하신 정보로 등록된 문의가 없어요.<br>정보를 다시 입력해 주세요.");
                        return;
                    }

                    updateUIWithResults(result.data);
                    $("#btnSearch").remove();
                    $("#btnDelete").addClass('active').show();
                } catch (error) {
                    console.error("검색 오류:", error);
                } finally {
                    isApplyProcessing = false;
                }
            });


            $("#btnDelete").on('click', function (e) {

                alertPopup("문의내용을 삭제 하시겠습니까?", {
                    onConfirm: () => {applyDelete()},
                });
            });


            // 탭 클릭: 카테고리별 폼 토글
            $('.categoryWrap a').on('click', function (e) {
                e.preventDefault();
                $(this).addClass('active').siblings().removeClass('active');
                $('.board-view .formWrap').eq($(this).index()).show().siblings().hide();
                $('.button-wrap button').eq($(this).index()).show().siblings().hide();
            });

            // 개인정보 수집 동의 펼치기/접기
            $('.board-view .agreementWrap .toggle-btn').on('click', function () {
                $(this).toggleClass('open')
                    .closest('.terms-wrap')
                    .find('.terms-detail')
                    .stop().slideToggle(300);
            });
        });

        // 신청 유효성 검사
        function onApplyCheckValidation() {
            const isChecked = $("input[name=is_private]:checked").length > 0;
            const requiredFields = ['#name', '#phone', '#email', '#content'];
            const areFilled = requiredFields.every(selector => $.trim($(selector).val()).length > 0);
            $('#btnApply').toggleClass("active", isChecked && areFilled);
        }

        // 검색 유효성 검사
        function onSearchCheckValidation() {
            const fields = ['#search_phone', '#search_email'];
            const areFilled = fields.every(selector => $.trim($(selector).val()).length > 0);
            $('#btnSearch').toggleClass("active", areFilled);
        }

        // 서비스명 추출
        function getServiceFromPath() {
            const segments = window.location.pathname.split("/").filter(Boolean);
            return segments.length > 0 ? segments[0] : "ielts";
        }

        // 검색 결과 UI 처리
        function updateUIWithResults(data) {
            $('#findWriting').hide();
            $('#myWriting').show();

            const $optionList = $('#myWriting .optionList');
            $optionList.empty();

            data.forEach((item , index)=> {
                const $li = $('<li>', { class: 'optionItem' });
                const $btn = $('<button>', {
                    type: 'button',
                    text: item.created_at,
                    'data-account': item.id,
                    'data-content': item.content
                });

                $btn.on('click', function () {
                    $('#search_content').html(item.content.replace(/(?:\r\n|\r|\n)/g, '<br />'));
                });

                $li.append($btn);
                $optionList.append($li);
            });
            $optionList.find('button').first().trigger('click');

        }

        async function applyDelete() {
            if (isApplyProcessing) return;
            isApplyProcessing = true;
            try {
                let id = $('input[name=inquiryId]').val();
                const service = getServiceFromPath();
                const formData = $('.searchForm').find(':input').serialize();


                const result = await useFetch(`/api/${service}/group-study/delete`, {
                    method: 'POST',
                    body: {
                        id: id,
                    }
                });


                const search = await useFetch(`/api/${service}/group-study/search`, {
                    method: 'POST',
                    body: formData,
                });

                if (!search.data || search.data.length === 0) {
                    $("#myWriting, #btnDelete").hide();
                    $("#noData").show();

                    return;
                }

                updateUIWithResults(search.data);
                if (result.message) {
                    alertPopup(result.message);
                }
            } catch (error) {
                console.error("검색 오류:", error);
            } finally {
                isApplyProcessing = false;
            }

        }

    </script>
@endsection