@php
    $pageTitle = '1:1문의내역';
    $pageDesc  = '내가 남긴 질문과 답변을 모아 보고, 처리 상태를 확인하세요.';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '마이페이지', 'url' => url('/mypage/info')],
      ['label' => '1:1문의내역', 'url' => url()->current()],
    ];

    $mypageActive = 'qna';

    $stateMap = config('qna_state.state_map', []);
@endphp

@extends('web.layouts.subpage')

@section('title', '1:1문의내역 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 마이페이지 1:1문의내역 입니다. 문의 및 답변 내역을 확인하세요.')
@section('canonical', url('/mypage/qna'))

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/mypage_qna.css') }}?v={{ config('app.version', time()) }}">
@endpush

@section('subcontent')
    <div class="mypage-qna-page">

        @include('web.partials.content-head', [
           'title' => '1:1문의내역',
           'desc'  => '문의 처리 상태를 확인할 수 있습니다.'
        ])

        <div class="mq-topbar">
            <form method="GET" action="{{ route('web.mypage.qna.index') }}" class="mq-yearform">
                <select name="year" onchange="this.form.submit()" class="mq-yearselect" aria-label="연도 선택">
                    @foreach(($years ?? range(2018, (int)date('Y'))) as $y)
                        <option value="{{ $y }}" @selected((int)($year ?? date('Y')) === (int)$y)>
                            {{ $y }}년
                        </option>
                    @endforeach
                </select>
            </form>

            <a class="mq-btn" href="{{ route('web.cs.qna.index') }}">문의작성하기</a>
        </div>
        {{-- 상세 영역(선택된 글이 있을 때만) --}}
        @if($detail)
            @php
                $st = (string)($detail->state ?? 'a');
                [$stLabel, $stBadge] = $stateMap[$st] ?? ['접수', 'bg-primary'];
            @endphp

            <section class="mq-detail">
                <div class="mq-detail-title">문의내용</div>

                <div class="mq-detail-meta">
                    <div class="mq-meta-row">
                        <div class="mq-meta-th">문의분류</div>
                        <div class="mq-meta-th">처리상태</div>
                        <div class="mq-meta-th">등록일</div>
                    </div>
                    <div class="mq-meta-row mq-meta-row--val">
                        <div class="mq-meta-td">{{ $detail->enquiry_code_name ?? $detail->enquiry_code ?? '-' }}</div>
                        <div class="mq-meta-td">
                            <span class="badge {{ $stBadge }}">{{ $stLabel }}</span>
                        </div>
                        <div class="mq-meta-td">{{ $detail->regdate ? substr($detail->regdate, 0, 16) : '-' }} </div>
                    </div>
                </div>

                <div class="mq-cards">
                    <div class="mq-card">
                        <div class="mq-card-head">
                            제목 : {{ $detail->enquiry_title ?? '-' }}
                        </div>
                        <div class="mq-card-body">
                            {!! nl2br(e($detail->enquiry_content ?? '')) !!}
                        </div>
                    </div>

                    <div class="mq-card">
                        <div class="mq-card-head">관리자 답변</div>
                        <div class="mq-card-body">
                            @if(trim((string)($detail->answer_content ?? '')) !== '')
                                {!! nl2br(e($detail->answer_content)) !!}
                            @else
                                <span class="mq-muted">아직 답변이 등록되지 않았습니다.</span>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        @endif

        {{-- 리스트 --}}
        <section class="mq-list">
            {{--  데스크톱 테이블 --}}
            <div class="mq-table-wrap">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle text-center mb-0">
                        <thead class="table-light">
                        <tr>
                            <th style="width:90px;">NO.</th>
                            <th style="width:120px;">상태</th>
                            <th style="width:220px;">접수분류</th>
                            <th>제목</th>
                            <th style="width:180px;">접수시간</th>
                        </tr>
                        </thead>

                        <tbody>
                        @forelse($items as $row)
                            @php
                                $st = (string)($row->state ?? 'a');
                                [$stLabel, $stBadge] = $stateMap[$st] ?? ['접수', 'bg-primary'];
                                $no = ($items->total() - ($items->firstItem() + $loop->index) + 1);
                            @endphp
                            <tr class="{{ (int)($seq ?? 0) === (int)$row->seq ? 'mq-row-active' : '' }}">
                                <td>{{ $no }}</td>
                                <td><span class="badge {{ $stBadge }}">{{ $stLabel }}</span></td>
                                <td class="text-nowrap">{{ $row->enquiry_code_name ?? $row->enquiry_code ?? '-' }}</td>
                                <td class="text-start">
                                    <a class="mq-link"
                                       href="{{ route('web.mypage.qna.show', ['seq' => $row->seq]) }}?year={{ (int)($year ?? date('Y')) }}{{ request('page') ? '&page='.request('page') : '' }}">
                                        {{ $row->enquiry_title ?? '-' }}
                                    </a>
                                </td>
                                <td class="text-nowrap">{{ $row->regdate ? substr($row->regdate, 0, 16) : '-' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-5 text-muted">등록된 문의가 없습니다.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{--  모바일 카드 리스트 --}}
            <div class="mq-cards-mobile">
                @forelse($items as $row)
                    @php
                        $st = (string)($row->state ?? 'a');
                        [$stLabel, $stBadge] = $stateMap[$st] ?? ['접수', 'bg-primary'];
                        $no = ($items->total() - ($items->firstItem() + $loop->index) + 1);
                    @endphp

                    <a class="mq-mcard {{ (int)($seq ?? 0) === (int)$row->seq ? 'is-active' : '' }}"
                       href="{{ route('web.mypage.qna.show', ['seq' => $row->seq]) }}?year={{ (int)($year ?? date('Y')) }}{{ request('page') ? '&page='.request('page') : '' }}">

                        <div class="mq-mcard-top">
                            <span class="mq-mno">NO. {{ $no }}</span>
                            <span class="badge {{ $stBadge }}">{{ $stLabel }}</span>
                        </div>

                        <div class="mq-mtitle">
                            {{ $row->enquiry_title ?? '-' }}
                        </div>

                        <div class="mq-mmeta">
                            <div class="mq-mmeta-row">
                                <span class="mq-mmeta-k">접수분류</span>
                                <span class="mq-mmeta-v">{{ $row->enquiry_code_name ?? $row->enquiry_code ?? '-' }}</span>
                            </div>
                            <div class="mq-mmeta-row">
                                <span class="mq-mmeta-k">접수시간</span>
                                <span class="mq-mmeta-v">{{ $row->regdate ? substr($row->regdate, 0, 16) : '-' }}</span>
                            </div>
                        </div>
                    </a>

                @empty
                    <div class="mq-empty-mobile">
                        등록된 문의가 없습니다.
                    </div>
                @endforelse
            </div>

            @if($items->hasPages())
                <div class="mq-pager">
                    {{ $items->links('web.partials.pagination') }}
                </div>
            @endif
        </section>

        @include('web.partials.mypage-quick-actions')
    </div>
@endsection