@php
    $pageTitle = '나의정보';
    $pageDesc  = '계정 정보 관리';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '마이페이지', 'url' => url('/mypage/info')],
      ['label' => '나의정보 변경', 'url' => url()->current()],
    ];
    $mypageActive = 'info';
@endphp

@extends('web.layouts.subpage')

@section('title', '나의정보 변경 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 나의정보 변경 페이지입니다.')
@section('canonical', url('/mypage/info_renew'))

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

        @include('web.partials.content-head', [
           'title' => '나의정보 변경',
           'desc'  => '계정 보안과 개인정보를 안전하게 관리하세요.'
        ])

        {{-- ✅ 상단 상태 카드 --}}
        <div class="mypage-hero mt-3">
            <div class="mypage-hero__inner mypage-hero__inner--stack">

                <!-- ✅ 헤더: 100% -->
                <div class="mypage-hero__head">
                    <div class="mypage-hero__kicker">ACCOUNT SETTINGS</div>
                    <div class="mypage-hero__title">내 정보 관리</div>
                </div>

                <!-- ✅ 바디: 좌/우 2컬럼 -->
                <div class="mypage-hero__body">
                    <div class="mypage-hero__left">
                        <div class="mypage-hero__me">
                            <div class="mypage-hero__me-row">
                                <span class="k">성명</span>
                                <span class="v">{{ $memberName ?: '-' }}</span>
                            </div>
                            <div class="mypage-hero__me-row">
                                <span class="k">이메일</span>
                                <span class="v">{{ $memberEmail ?: '-' }}</span>
                            </div>
                            <div class="mypage-hero__me-row">
                                <span class="k">휴대폰</span>
                                <span class="v">{{ $memberPhone ?: '-' }}</span>
                            </div>
                            @if(!empty($outAccount))
                                <div class="mypage-hero__me-row">
                                    <span class="k">출금계좌</span>
                                    <span class="v">
                                        {{ $outAccount['bank_name'] ?? '' }}
                                                                {{ $outAccount['bank_act_num'] ?? '' }}
                                        ({{ $outAccount['bank_act_name'] ?? '' }})
                                    </span>
                                </div>
                                <div class="mypage-hero__me-row">
                                    <span class="k">계좌인증일</span>
                                    <span class="v">{{ $outAccount['act_date'] ?? '' }}</span>
                                </div>
                            @endif
                            <div class="mypage-hero__me-row">
                                <span class="k">가입일</span>
                                <span class="v">{{ $memberDtReg ?: '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mypage-hero__right">
                        <div class="mypage-hero__spacer" aria-hidden="true"></div>
                        <div class="mypage-hero__desc">
                            연락처·비밀번호·보안 설정을 한 곳에서 관리합니다.
                            변경 작업은 보안을 위해 제한된 시간 동안만 가능합니다.
                        </div>
                        <div class="mypage-reauth mypage-reauth--countdown"
                             data-expire="{{ (int)$expireTs }}"
                             data-remain="{{ (int)$remainSec }}">
                            <div class="mypage-reauth__one">
                                <span class="mypage-reauth__label">인증 허용 잔여시간</span>
                                <span class="mypage-reauth__value">
                                <b id="reauthCountdown">
                                    {{ sprintf('%02d:%02d', intdiv((int)$remainSec, 60), (int)$remainSec % 60) }}
                                </b>
                            </span>
                            </div>
                        </div>

                        <div class="mypage-hero__actions">
                            <a href="{{ route('web.mypage.info.gate_reset') }}" class="btn btn-mypage-primary">
                                인증 다시 하기
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ✅ 설정 카드 그리드 --}}
        <div class="mypage-grid mt-3">
            <button type="button"
                    class="mypage-card mypage-card--btn"
                    data-action="phone-change"
                    data-ready-url="{{ route('web.mypage.info.pass.ready') }}">
                <div class="mypage-card__icon">📱</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">연락처 변경</div>
                    <div class="mypage-card__desc">PASS 인증 후 휴대폰 번호를 변경합니다.</div>
                    <div class="mypage-card__meta">PASS 인증 필요</div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </button>

            <a class="mypage-card" href="javascript:void(0)" aria-label="비밀번호 변경 (준비중)" data-action="pw-change">
                <div class="mypage-card__icon">🔒</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">비밀번호 변경</div>
                    <div class="mypage-card__desc">보안을 위해 주기적으로 변경을 권장해요</div>
                    <div class="mypage-card__meta">변경</div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </a>

            <button type="button"
                    class="mypage-card mypage-card--btn"
                    data-action="pw2-change"
                    aria-label="2차 비밀번호 변경">
                <div class="mypage-card__icon">🔐</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">2차비밀번호 변경</div>
                    <div class="mypage-card__desc">민감 기능 이용 시 추가로 확인하는 비밀번호</div>
                    <div class="mypage-card__meta">변경</div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </button>
         <button type="button"
                    class="mypage-card mypage-card--btn"
                    aria-label="출금계좌번호 {{ $outAccount ? '수정' : '등록' }}"
                    data-action="withdraw-account">
                <div class="mypage-card__icon">🏦</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">출금계좌번호</div>
                    <div class="mypage-card__desc">
                        {{ $outAccount ? '등록된 출금계좌 정보를 수정합니다.' : '출금계좌를 등록해 주세요.' }}
                    </div>
                    <div class="mypage-card__meta">
                        {{ $outAccount ? '수정' : '등록' }}
                    </div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </button>

            <button type="button" class="mypage-card mypage-card--btn" data-action="consent-edit">
                <div class="mypage-card__icon">📩</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">수신 동의</div>
                    <div class="mypage-card__desc">마케팅 정보 수신 여부를 설정합니다.</div>
                    <div class="mypage-card__meta">
                        이메일: {{ ($agreeEmail === 'y' || $agreeEmail === '1') ? '동의' : '미동의' }}
                        · SMS: {{ ($agreeSms === 'y' || $agreeSms === '1') ? '동의' : '미동의' }}
                    </div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </button>

            <button type="button" id="btnOpenWithdraw" class="mypage-card mypage-card--btn mypage-card--danger" data-action="withdraw-member">
                <div class="mypage-card__icon">⚠️</div>
                <div class="mypage-card__body">
                    <div class="mypage-card__title">회원탈퇴</div>
                    <div class="mypage-card__desc">계정을 삭제합니다. 진행 전 주의사항을 확인해 주세요.</div>
                    <div class="mypage-card__meta">주의 필요</div>
                </div>
                <div class="mypage-card__arrow">›</div>
            </button>
            @include('web.mypage.info._withdraw_dialog')

        </div>

        {{-- ✅ 안내/주의사항 --}}
        <div class="mypage-note mt-3">
            <div class="mypage-note__title">안내</div>
            <ul class="mypage-note__list">
                <li>개인정보 변경은 보안을 위해 <b>재인증 후 일정 시간</b> 동안만 가능합니다.</li>
                <li>예상치 못한 오류가 발생하면, 새로고침 후 다시 시도해 주세요.</li>
                <li>기능은 다음 단계에서 실제 처리(저장/검증/로그)를 연결합니다.</li>
            </ul>
        </div>
    </div>

    <form id="mypageDanalStartForm" method="post" action="{{ route('web.mypage.info.danal.start') }}" style="display:none;">
        @csrf
        <input type="hidden" name="platform" id="mypagePlatform" value="web">
        <input type="hidden" name="fields" id="mypagePassFields" value="">
    </form>

    @push('styles')
        <link rel="stylesheet" href="{{ asset('assets/css/mypage_renew.css') }}?v={{ config('app.version', time()) }}">
    @endpush
    @push('scripts')
        <script>
            (function () {
                const prev = window.mypageRenew || {};

                window.mypageRenew = Object.assign({}, prev, {
                    memberName: @json($memberName),
                    bankGroups: @json(config('bank_code.groups')),
                    bankFlat: @json(config('bank_code.flat')),
                    bankGroupLabels: {
                        bank_1st: '메이저 1금융권',
                        bank_2nd: '2금융권/협동조합/서민금융',
                        global: '글로벌/외국계 은행',
                        securities: '증권사',
                        others: '기타/유관기관',
                    },
                    urls: Object.assign({}, (prev.urls || {}), {
                        gateReset: @json(route('web.mypage.info.gate_reset')),
                        passReady: @json(route('web.mypage.info.pass.ready')),
                        danalStart: @json(route('web.mypage.info.danal.start')),
                        passwordUpdate: @json(route('web.mypage.info.password.update')),
                        pin2Update: @json(route('web.mypage.info.pin2.update')),
                        withdrawVerifyOut: @json(route('web.mypage.info.withdraw.verify_out')),
                        marketingConsentUpdate: @json(route('web.mypage.info.marketing.update')),
                    }),
                    consent: {
                        email: @json(($agreeEmail === '1') ? 'y' : $agreeEmail),
                        sms:   @json(($agreeSms === '1') ? 'y' : $agreeSms),
                    },
                });
            })();

            // dialog에 action/csrf 주입
            (function(){
                var dlg = document.getElementById('withdrawDialog');
                if(!dlg) return;
                dlg.dataset.action = "{{ route('web.mypage.info.withdraw') }}";
                dlg.dataset.csrf   = "{{ csrf_token() }}";
            })();
        </script>
        <script src="{{ asset('assets/js/mypage_renew.js') }}" defer></script>
    @endpush

@endsection