@extends('web.layouts.subpage')

@php
    $pageTitle = '1:1 문의';
    $pageDesc  = '결제·발송·코드 확인 등 상세 문의는 접수 후 순차적으로 답변드려요.';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '고객센터', 'url' => url('/cs/notice')],
      ['label' => '1:1 문의', 'url' => url()->current()],
    ];

    // 고객센터 탭
    $subnavItems = collect(config('web.cs_tabs', []))->map(fn($t) => [
        'label' => $t['label'],
        'url'   => route($t['route']),
        'key'   => $t['key'],
    ])->all();
    $subnavActive = 'qna';

    // 문의 분류 (FAQ 카테고리와 맞춰 통일)
    $enquiryCategories = config('cs_faq.categories', [
        ['key' => 'signup', 'label' => '회원가입 문의'],
        ['key' => 'login',  'label' => '로그인 문의'],
        ['key' => 'pay',    'label' => '결제 문의'],
        ['key' => 'code',   'label' => '상품권 코드 문의'],
        ['key' => 'event',  'label' => '이벤트 문의'],
        ['key' => 'etc',    'label' => '기타문의'],
    ]);
@endphp

@section('title', '1:1 문의 | PIN FOR YOU')
@section('meta_description', '핀포유 1:1 문의 페이지입니다. 결제/발송/코드 확인 등 상세 문의를 접수하면 순차적으로 답변드립니다.')
@section('canonical', url('/cs/qna'))

@section('subcontent')
    @include('web.partials.content-head', [
        'title' => '1:1 문의 접수',
        'desc'  => '정확한 처리를 위해 주문 정보와 상황을 구체적으로 작성해 주세요.'
    ])

    <section class="qna" aria-label="1:1 문의 폼">

        {{-- Top actions --}}
        <div class="qna-top">
            <div class="qna-top__hint">
                <span class="qna-pill">안내</span>
                운영시간 평일 09:00~18:00 · 점심 12:00~13:00 · 주말/공휴일 휴무
            </div>

            <div class="qna-top__actions">
                <a class="qna-btn qna-btn--ghost" href="#" aria-disabled="true" onclick="return false;">
                    내 문의내용 확인 (준비중)
                </a>
            </div>
        </div>

        {{-- Form card --}}
        <div class="qna-card">
            <div class="qna-card__head">
                <h2 class="qna-card__title">내용 작성</h2>
                <p class="qna-card__desc">답변 속도를 높이려면 “주문시각/결제수단/금액/오류문구”를 같이 적어주세요.</p>
            </div>

            <form class="qna-form" id="qnaForm" action="#" method="post" enctype="multipart/form-data" novalidate>
                @csrf

                {{-- Subject row --}}
                <div class="qna-grid">
                    <div class="qna-field">
                        <label class="qna-label" for="enquiry_code">문의분류 <span class="qna-req">*</span></label>
                        <select class="qna-input" id="enquiry_code" name="enquiry_code" required>
                            <option value="">문의분류선택</option>
                            @foreach($enquiryCategories as $c)
                                <option value="{{ $c['key'] }}">{{ $c['label'] }}</option>
                            @endforeach
                        </select>
                        <div class="qna-help">가장 가까운 분류를 선택해 주세요.</div>
                    </div>

                    <div class="qna-field">
                        <label class="qna-label" for="enquiry_title">문의 제목 <span class="qna-req">*</span></label>
                        <input class="qna-input" type="text" id="enquiry_title" name="enquiry_title"
                               maxlength="60" placeholder="예) 결제는 완료됐는데 코드가 안 보여요" required>
                        <div class="qna-help">제목은 60자 이내로 작성해 주세요.</div>
                    </div>
                </div>

                {{-- Content --}}
                <div class="qna-field qna-field--mt">
                    <label class="qna-label" for="enquiry_content">문의 내용 <span class="qna-req">*</span></label>
                    <textarea class="qna-textarea" id="enquiry_content" name="enquiry_content"
                              placeholder="문제 상황을 자세히 적어주세요.&#10;예) 주문시각/결제수단/금액/오류메시지/상품명"
                              required></textarea>
                    <div class="qna-help">
                        정확한 안내를 위해 개인정보(주민번호/전체 카드번호 등)는 작성하지 마세요.
                    </div>
                </div>

                {{-- Upload --}}
                <div class="qna-field qna-field--mt">
                    <label class="qna-label" for="screenshots">스크린샷 <span class="qna-sub">(최대 4장)</span></label>
                    <input class="qna-file" type="file" id="screenshots" name="screenshots[]"
                           accept=".png,.jpeg,.jpg,.gif" multiple>
                    <div class="qna-help">
                        업로드 가능 확장자: .png, .jpeg, .jpg, .gif · 용량이 큰 파일은 업로드에 시간이 걸릴 수 있어요.
                    </div>
                    <div class="qna-filelist" id="fileList" aria-live="polite"></div>
                </div>

                {{-- Reply options --}}
                <div class="qna-field qna-field--mt">
                    <div class="qna-label">추가회신</div>
                    <div class="qna-choice">
                        <label class="qna-check">
                            <input type="checkbox" checked disabled>
                            <span>웹답변</span>
                        </label>

                        <label class="qna-radio">
                            <input type="radio" name="return_type" value="sms">
                            <span>SMS 알림</span>
                        </label>

                        <label class="qna-radio">
                            <input type="radio" name="return_type" value="email">
                            <span>이메일 답변</span>
                        </label>
                    </div>
                    <div class="qna-help">현재는 UI만 제공되며, 실제 알림 연동은 추후 적용됩니다.</div>
                </div>

                {{-- Recaptcha placeholder --}}
                <div class="qna-field qna-field--mt">
                    <div class="qna-recap">
                        <div class="qna-recap__badge">reCAPTCHA</div>
                        <div class="qna-recap__text">스팸 방지 기능은 추후 적용 예정입니다.</div>
                    </div>
                </div>

                {{-- Submit --}}
                <div class="qna-actions">
                    <button class="qna-btn qna-btn--primary" type="submit">문의등록</button>
                    <div class="qna-actions__note">현재는 저장 기능이 준비 중입니다. (UI 확인용)</div>
                </div>
            </form>
        </div>
        @include('web.partials.cs-quick-actions')
    </section>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.getElementById('qnaForm');
            const fileInput = document.getElementById('screenshots');
            const fileList = document.getElementById('fileList');

            // 파일 리스트 표시(최대 4장)
            const renderFiles = () => {
                if (!fileList || !fileInput) return;
                const files = Array.from(fileInput.files || []);
                fileList.innerHTML = '';

                const shown = files.slice(0, 4);
                if (files.length > 4) {
                    fileList.innerHTML = '<div class="qna-filelist__warn">최대 4장까지만 업로드할 수 있어요. 처음 4장만 표시됩니다.</div>';
                }

                shown.forEach(f => {
                    const el = document.createElement('div');
                    el.className = 'qna-filelist__item';
                    el.textContent = `• ${f.name}`;
                    fileList.appendChild(el);
                });
            };

            fileInput?.addEventListener('change', renderFiles);

            // 임시 submit(저장 기능 추후)
            form?.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('현재는 문의 저장 기능이 준비 중입니다.\nUI/디자인 확인용으로 폼만 제공됩니다.');
            });
        })();
    </script>
@endpush