@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'))

@section('subcontent')
    <div class="mypage-info-page">
        @include('web.partials.content-head', [
           'title' => '나의정보',
           'desc'  => '내 계정 정보를 확인하고 필요한 항목을 관리하세요.'
        ])

        <div class="row flex-row-reverse mt-3">
            <div class="mypage-gate-wrap">
                <div class="mypage-gate-card mypage-gate-card--compact">
                    <div class="mypage-gate-body">
                        <div class="mypage-gate-head">
                            <h3 class="mypage-gate-title">비밀번호 재확인</h3>
                            <p class="mypage-gate-desc">회원정보 변경을 위해 비밀번호를 한 번 더 확인합니다.</p>
                        </div>

                        <div class="mypage-gate-note">
                            인증 후 일정 시간 동안만 정보 변경이 가능합니다.
                            공용 PC에서는 사용 후 반드시 로그아웃하세요.
                        </div>

                        <form action="{{ route('web.mypage.info.verify') }}"
                              method="post"
                              id="mypageGateForm"
                              class="mypage-gate-form">
                            @csrf

                            <div class="mypage-gate-row">

                                <input
                                    type="password"
                                    name="password"
                                    id="password"
                                    class="form-control mypage-gate-input @error('password') is-invalid @enderror"
                                    placeholder="현재 비밀번호"
                                    autocomplete="current-password"
                                    required
                                >

                                <button type="submit"
                                        class="btn btn-mypage-primary mypage-gate-btn"
                                        id="btnGateSubmit">
                                    확인
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            {{-- ✅ 서브메뉴(사이드바) --}}
            <div class="col-lg-3 primary-sidebar sticky-sidebar">
                @include('web.partials.mypage-quick-actions')
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            (function () {
                const form = document.getElementById('mypageGateForm');
                if (!form) return;

                const pwEl = document.getElementById('password');
                const btn  = document.getElementById('btnGateSubmit');

                // ✅ 공통 레이어 알림(showMsg) 우선 사용
                async function alertMsg(msg, title = '오류') {
                    if (!msg) return;
                    if (typeof showMsg === 'function') {
                        await showMsg(msg, { type: 'alert', title });
                    } else if (typeof showAlert === 'function') {
                        await showAlert(msg, title);
                    } else {
                        alert(msg);
                    }
                }

                // ✅ 서버에서 내려온 에러를 레이어로 표시 (DOM 로드 후 1회)
                document.addEventListener('DOMContentLoaded', async () => {
                    const pwErr    = @json($errors->first('password'));
                    const loginErr = @json($errors->first('login')); // 혹시 login 키도 쓰는 경우 대비
                    const gateErr  = @json($errors->first('gate'));  // gate 키를 쓰면 여기에 걸림
                    const flashErr = @json(session('error') ?? '');

                    const msg = pwErr || gateErr || loginErr || flashErr;
                    if (msg) {
                        if (btn) btn.disabled = false; // ✅ 에러로 돌아온 경우 버튼 다시 활성화
                        await alertMsg(msg, '확인 실패');
                    }
                });

                // ✅ 제출 검증 + 버튼 잠금
                form.addEventListener('submit', async function (e) {
                    const pw = (pwEl?.value || '').trim();

                    if (!pw) {
                        e.preventDefault();
                        await alertMsg('비밀번호를 입력해 주세요.', '입력오류');
                        pwEl?.focus();
                        return;
                    }

                    if (btn) btn.disabled = true;
                });
            })();
        </script>
    @endpush

@endsection