@extends('layouts.app-sub')

@section('title', '회원정보 수정 - GLOBEAU')
@section('header-title', '회원정보 수정')

@section('content')
<div class="mypage-dashboard">

    <!-- 유효성 검사 에러 및 세션 알림 컴포넌트 -->
    <x-user-alerts-display />

    <!-- ========================================================
         1. [섹션 1] 기본 개인정보 및 마케팅 수신동의 설정
         ======================================================== -->
    <div class="card card-premium shadow-sm mb-4 p-4 p-md-4">
        <div class="card-body p-0">
            <div class="d-flex align-items-center justify-content-between border-bottom pb-2 mb-4">
                <h5 class="fw-bold mb-0 text-dark">
                    <i class="fas fa-user-edit me-2 text-brand"></i>기본 회원정보
                </h5>
                @if($isSocialUser)
                <span class="badge badge-soft-primary px-3 py-1 fs-xs">
                    <i class="fas fa-link me-1"></i>소셜 연동 계정
                </span>
                @endif
            </div>

            <form id="profileUpdateForm" method="POST" action="{{ route('mypage.profile.update') }}">
                @csrf
                @method('PATCH')

                <!-- 계정 이메일 (식별키 / 읽기 전용) -->
                <div class="mb-3">
                    <label class="form-label fw-semibold text-secondary small">이메일 계정 (ID)</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                        <input type="email"
                            class="form-control bg-light text-muted"
                            value="{{ $user->email }}"
                            disabled
                            readonly>
                    </div>
                    <div class="form-text text-muted mt-1 small">
                        <i class="fas fa-info-circle me-1"></i>로그인 계정 고유 식별키이므로 직접 변경할 수 없습니다.
                    </div>
                </div>

                <!-- 이름 & 성별 한 줄 배치 -->
                <div class="row">
                    <!-- 이름 -->
                    <div class="col-12 col-md-6 mb-3">
                        <label for="name" class="form-label fw-semibold text-secondary small">
                            이름(실명) <span class="text-danger">*</span>
                        </label>
                        <input type="text"
                            class="form-control @error('name') is-invalid @enderror"
                            id="name"
                            name="name"
                            value="{{ old('name', $user->name) }}"
                            placeholder="이름을 입력하세요"
                            required>
                        @error('name')
                        <div class="invalid-feedback small">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- 성별 -->
                    <div class="col-12 col-md-6 mb-3">
                        <label for="gender" class="form-label fw-semibold text-secondary small">성별</label>
                        <select class="form-select @error('gender') is-invalid @enderror"
                            id="gender"
                            name="gender">
                            <option value="U" @selected(old('gender', $user->gender) === 'U')>선택안함</option>
                            <option value="F" @selected(old('gender', $user->gender) === 'F')>여성 (Female)</option>
                            <option value="M" @selected(old('gender', $user->gender) === 'M')>남성 (Male)</option>
                        </select>
                        @error('gender')
                        <div class="invalid-feedback small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- 휴대전화번호 & 생년월일 한 줄 배치 -->
                <div class="row">
                    <!-- 휴대전화번호 -->
                    <div class="col-12 col-md-6 mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label for="phone" class="form-label fw-semibold text-secondary small mb-0">
                                휴대전화번호
                                @if($user->is_phone_verified)
                                <span class="badge badge-state-success ms-1" id="phone-verified-badge">
                                    <i class="fas fa-check-circle me-1"></i>인증완료
                                </span>
                                @endif
                            </label>
                            <span class="text-muted small">예약 알림 수신용</span>
                        </div>
                        <div id="sms-send-section" data-sms-role="send-area">
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-mobile-alt"></i></span>
                                <input type="text"
                                    class="form-control input-phone @error('phone') is-invalid @enderror"
                                    id="phone"
                                    name="phone"
                                    value="{{ old('phone', $user->phone) }}"
                                    data-sms-role="phone"
                                    placeholder="01012345678"
                                    maxlength="13">
                                <button type="button" class="btn btn-premium px-3 px-sm-4" id="btn-send-sms" data-sms-role="send-btn">
                                    <span class="btn-text">인증번호 전송</span>
                                    <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                            <div id="sms-message" class="form-text d-none fw-medium small" data-sms-role="message-box"></div>
                            @error('phone')
                            <div class="invalid-feedback d-block small">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- 2단계: 인증번호 확인 영역 (처음엔 숨김) -->
                        <div class="d-none p-3 bg-light rounded-3 border border-brand mt-2" id="sms-verify-area" data-sms-role="verify-area">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label for="sms_code" class="form-label fw-semibold text-secondary small mb-0">인증번호 6자리 입력</label>
                                <span id="auth-timer" class="text-danger small fw-bold">3:00</span>
                            </div>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                                <input type="text"
                                    class="form-control fs-5 fw-bold text-center"
                                    id="sms_code"
                                    name="sms_code"
                                    data-sms-role="code-input"
                                    placeholder="000000"
                                    maxlength="6">
                                <button type="button" class="btn btn-premium px-3 px-sm-4" id="btn-verify-sms" data-sms-role="verify-btn">
                                    <span class="btn-text">인증 확인</span>
                                    <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                            <div id="sms-verify-message" class="form-text mt-2 d-none fw-medium small"></div>

                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <span class="text-muted small">발송된 6자리 번호를 입력해 주세요.</span>
                                <button type="button" id="btn-resend" data-sms-role="resend-btn" class="btn btn-link btn-sm text-decoration-none text-secondary p-0 small">
                                    번호 재입력
                                </button>
                            </div>
                        </div>

                        <!-- 본인인증 완료 상태 플래그 -->
                        <input type="hidden"
                            id="is_phone_verified"
                            name="is_phone_verified"
                            data-sms-role="verified-flag"
                            value="{{ old('is_phone_verified', $user->is_phone_verified ? 'true' : 'false') }}">
                    </div>

                    <!-- 생년월일 -->
                    <div class="col-12 col-md-6 mb-3">
                        <label for="birth_date" class="form-label fw-semibold text-secondary small mb-1">생년월일</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            <input type="text" 
                                   class="form-control bg-white border-start-0 flatpickr-birth @error('birth_date') is-invalid @enderror" 
                                   id="birth_date" 
                                   name="birth_date" 
                                   value="{{ old('birth_date', $user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->format('Y-m-d') : '') }}"
                                   placeholder="생년월일 선택 (YYYY-MM-DD)" 
                                   readonly>
                        </div>
                        @error('birth_date')
                        <div class="invalid-feedback d-block small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- 기본 배송지 / 주소 정보 (인라인 레이어 검색 방식) -->
                <div class="mb-3">
                    <label class="form-label fw-semibold text-secondary small">기본 주소 (배송지)</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                        <input type="text"
                            class="form-control bg-light"
                            id="zipcode"
                            name="zipcode"
                            value="{{ old('zipcode', $user->zipcode) }}"
                            placeholder="우편번호"
                            readonly>
                        <button type="button" class="btn btn-outline-premium px-4" id="btn-address">우편번호 찾기</button>
                    </div>

                    <!-- Daum 우편번호 인라인 레이어 박스 (#wrap) -->
                    <div id="wrap" style="display:none; border:1px solid var(--border-default); width:100%; height:300px; margin:5px 0; position:relative; border-radius: 6px;">
                        <button type="button" id="btnFoldWrap" class="btn bg-white position-absolute shadow-sm" style="z-index: 10; top:3px; right: -18px;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>

                    <input type="text"
                        class="form-control mb-2 bg-light"
                        id="address1"
                        name="address1"
                        value="{{ old('address1', $user->address1) }}"
                        placeholder="기본 주소"
                        readonly>
                    <input type="text"
                        class="form-control"
                        id="address2"
                        name="address2"
                        value="{{ old('address2', $user->address2) }}"
                        placeholder="상세 주소를 입력해주세요">

                    <!-- LBS 지오코딩 히든 필드 슬롯 -->
                    <input type="hidden" name="region_sido" id="region_sido" value="{{ old('region_sido', $user->region_sido ?? '') }}">
                    <input type="hidden" name="region_sigungu" id="region_sigungu" value="{{ old('region_sigungu', $user->region_sigungu ?? '') }}">
                    <input type="hidden" name="region_category" id="region_category" value="{{ old('region_category', $user->region_category ?? '') }}">
                    <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $user->latitude ?? '') }}">
                    <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $user->longitude ?? '') }}">
                    <input type="hidden" name="location_coords" id="location_coords" value="{{ old('location_coords', $user->location_coords ?? '') }}">
                </div>

                <!-- 마케팅 및 알림 수신 동의 -->
                <div class="p-3 mb-4 text-secondary rounded-2 shadow-sm bg-light border-start border-4 border-brand">
                    <div class="fw-bold text-dark mb-2 small">
                        <i class="fas fa-bell me-1 text-brand"></i>혜택 및 시술 예약 알림 수신 동의
                    </div>
                    <div class="d-flex flex-wrap gap-4">
                        <div class="form-check">
                            <input class="form-check-input"
                                type="checkbox"
                                name="agrees_to_sms"
                                id="agrees_to_sms"
                                value="1"
                                @checked(old('agrees_to_sms', $user->agrees_to_sms))>
                            <label class="form-check-label small text-secondary" for="agrees_to_sms">
                                SMS / 카카오 알림톡 수신 동의
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input"
                                type="checkbox"
                                name="agrees_to_email"
                                id="agrees_to_email"
                                value="1"
                                @checked(old('agrees_to_email', $user->agrees_to_email))>
                            <label class="form-check-label small text-secondary" for="agrees_to_email">
                                이메일 소식지 수신 동의
                            </label>
                        </div>
                    </div>
                    <div class="text-muted mt-2 fs-xs">
                        ※ 예약 확정, 티켓 발권, 결제 안내 등 필수 서비스 정보는 수신 동의 여부와 무관하게 발송됩니다.
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-premium py-3 fw-bold fs-6">
                        기본 정보 저장
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ========================================================
         2. [섹션 2] 비밀번호 관리 (신규 등록 및 변경 분기)
         ======================================================== -->
    <div class="card card-premium shadow-sm mb-4 p-4 p-md-4">
        <div class="card-body p-0">
            <h5 class="fw-bold pb-2 mb-4 text-dark border-bottom">
                <i class="fas fa-shield-alt me-2 text-brand"></i>
                {{ $isSocialUser ? '자체 비밀번호 등록' : '비밀번호 변경' }}
            </h5>

            <form id="passwordUpdateForm" method="POST" action="{{ route('mypage.profile.password.update') }}">
                @csrf
                @method('PUT')

                @if(!$isSocialUser)
                <div class="mb-3">
                    <label for="current_password" class="form-label fw-semibold text-secondary small">
                        현재 비밀번호 <span class="text-danger">*</span>
                    </label>
                    <input type="password"
                        class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
                        id="current_password"
                        name="current_password"
                        placeholder="현재 사용 중인 비밀번호를 입력하세요"
                        autocomplete="current-password">
                    @error('current_password', 'updatePassword')
                    <div class="invalid-feedback small">{{ $message }}</div>
                    @enderror
                </div>
                @endif

                <div class="row">
                    <!-- 새 비밀번호 -->
                    <div class="col-12 col-md-6 mb-3">
                        <label for="password" class="form-label fw-semibold text-secondary small">
                            {{ $isSocialUser ? '등록할 비밀번호' : '새 비밀번호' }} <span class="text-danger">*</span>
                        </label>
                        <input type="password"
                            class="form-control @error('password', 'updatePassword') is-invalid @enderror"
                            id="password"
                            name="password"
                            placeholder="8자 이상 영문, 숫자, 특수문자 조합"
                            autocomplete="new-password">
                        @error('password', 'updatePassword')
                        <div class="invalid-feedback small">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- 새 비밀번호 확인 -->
                    <div class="col-12 col-md-6 mb-3">
                        <label for="password_confirmation" class="form-label fw-semibold text-secondary small">
                            비밀번호 확인 <span class="text-danger">*</span>
                        </label>
                        <input type="password"
                            class="form-control"
                            id="password_confirmation"
                            name="password_confirmation"
                            placeholder="동일한 비밀번호를 다시 입력하세요"
                            autocomplete="new-password">
                    </div>
                </div>

                <div class="d-grid mt-2">
                    <button type="submit" class="btn btn-outline-premium py-3 fw-bold fs-6">
                        {{ $isSocialUser ? '비밀번호 등록하기' : '비밀번호 변경하기' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection

@push('styles')
<!-- Flatpickr 기본 CSS 및 글로뷰 커스텀 테마 연동 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="{{ asset('css/mypage/user_mypage.css') }}">
<style>
    /* Daum 인라인 레이어 반응형 박스 클래스 */
    .wrap-box {
        height: 320px;
        border-color: var(--border-default) !important;
    }
    .fold-btn {
        z-index: 10;
        top: 6px;
        right: 6px;
        border: 1px solid var(--border-default);
    }

    /* Flatpickr 글로뷰 브론즈 테마 커스텀 */
    .flatpickr-calendar {
        border-radius: var(--radius-fixed) !important;
        border: 1px solid var(--primary-border) !important;
        box-shadow: 0 10px 25px rgba(177, 137, 119, 0.15) !important;
        font-family: var(--font-primary) !important;
    }
    .flatpickr-day.selected, 
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        font-weight: 700 !important;
    }
    .flatpickr-day:hover {
        background: var(--primary-light) !important;
        border-color: var(--primary-border) !important;
        color: var(--primary-dark) !important;
    }
    .flatpickr-months .flatpickr-month {
        color: var(--color-text-main) !important;
        fill: var(--primary-color) !important;
    }
    .flatpickr-current-month .numInputWrapper span.arrowUp:after {
        border-bottom-color: var(--primary-color) !important;
    }
    .flatpickr-current-month .numInputWrapper span.arrowDown:after {
        border-top-color: var(--primary-color) !important;
    }
</style>
@endpush

@push('scripts')
<!-- Daum 우편번호 서비스 CDN -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- 카카오 지도 Web API (Geocoder 라이브러리 포함) -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{ env('KAKAO_MAP_API_KEY') }}&libraries=services"></script>
<!-- 주소 검색 및 지역 히든 필드 자동 생성 전용 스크립트 -->
<script src="{{ asset('js/address_search.js') }}"></script>

<!-- 공용 SMS 인증 모듈 연동 -->
<script src="{{ asset('js/sms_auth.js') }}"></script>

<!-- 날짜 모듈 연동 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>

<!-- 폼 전송 전 검증 및 피드백 스크립트 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {

        // 1. Flatpickr 생년월일 피커 초기화 실행
        if (typeof flatpickr !== 'undefined') {
            flatpickr(".flatpickr-birth", {
                locale: "ko",
                dateFormat: "Y-m-d",
                maxDate: "today",
                disableMobile: true,
                monthSelectorType: "dropdown"
            });
        }

        const profileForm = document.getElementById('profileUpdateForm');
        const passwordForm = document.getElementById('passwordUpdateForm');
        const alertTitle = "필수 입력 확인";
        const alertIcon = "warning";

        // =========================================================================
        // 2. 기본 정보 수정 폼 유효성 검사 (showSwalAlert 연동)
        // =========================================================================
        if (profileForm) {
            profileForm.addEventListener('submit', function(e) {
                // 이름 필수 검증
                const nameInput = document.getElementById('name');
                if (!nameInput.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('이름(실명)을 입력해 주세요.', nameInput, null, alertIcon, alertTitle);
                    return false;
                }

                // 전화번호가 입력되어 있으나 미인증 상태일 때 검증
                const phoneInput = document.getElementById('phone');
                const isPhoneVerified = document.getElementById('is_phone_verified')?.value;
                if (phoneInput.value.trim() && isPhoneVerified !== 'true') {
                    e.preventDefault();
                    showSwalAlert('휴대전화 인증을 완료해 주시거나 번호를 다시 확인해 주세요.', phoneInput, null, alertIcon, '본인인증 확인');
                    return false;
                }

                // 중복 클릭 방지 처리
                const submitBtn = profileForm.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>저장 중...';
                }
            });
        }

        // =========================================================================
        // 3. 비밀번호 변경/등록 폼 유효성 검사
        // =========================================================================
        if (passwordForm) {
            passwordForm.addEventListener('submit', function(e) {
                const currentPw = document.getElementById('current_password');
                const newPw = document.getElementById('password');
                const confirmPw = document.getElementById('password_confirmation');

                if (currentPw && !currentPw.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('현재 비밀번호를 입력해 주세요.', currentPw, null, alertIcon, alertTitle);
                    return false;
                }

                if (!newPw.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('새로 설정할 비밀번호를 입력해 주세요.', newPw, null, alertIcon, alertTitle);
                    return false;
                }

                if (newPw.value.length < 8) {
                    e.preventDefault();
                    showSwalAlert('비밀번호는 최소 8자 이상이어야 합니다.', newPw, null, alertIcon, alertTitle);
                    return false;
                }

                if (newPw.value !== confirmPw.value) {
                    e.preventDefault();
                    showSwalAlert('비밀번호 확인이 일치하지 않습니다.', confirmPw, null, alertIcon, '비밀번호 불일치');
                    return false;
                }

                // 중복 클릭 방지 처리
                const submitBtn = passwordForm.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
                }
            });
        }

        // =========================================================================
        // 4. 세션 피드백 토스트 알림
        // =========================================================================
        @if(session('status') === 'profile-updated')
        if (typeof showToast === 'function') {
            showToast('회원 정보가 성공적으로 수정되었습니다.', 'success');
        }
        @elseif(session('status') === 'password-updated')
        if (typeof showToast === 'function') {
            showToast('비밀번호가 성공적으로 등록/변경되었습니다.', 'success');
        }
        @endif
    });
</script>
@endpush