<?php
/**
 * member_profile.php — PHP 8.4 compatible
 *
 * Security hardening (all original fixes preserved):
 *  - password_hash(PASSWORD_BCRYPT) + password_verify() — no md5()
 *  - Prepared statements on every DB query — no SQLi
 *  - $memberid cast to (int) — no type-juggling attacks
 *  - All echoed variables wrapped in h() — no XSS
 *  - $_SERVER['PHP_SELF'] escaped in form action
 *  - Passwords never echoed back into <input> fields
 *  - Minimum 8-char password validation
 *  - IDOR guard: POSTed memberid must match session
 */

session_start(['gc_maxlifetime' => 14400, 'cookie_httponly' => true]);
include('member_session.php');
include('../coach/functions.php');
include('../coach/objects/class.member.php');

// ── XSS-safe output helper ────────────────────────────────────────────────────
function h(mixed $value): string {
    return htmlspecialchars((string)($value ?? ''), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

// ── Determine action ──────────────────────────────────────────────────────────
$page_action      = $_POST['action'] ?? 'edit';
$session_memberid = (int)($_SESSION['memberid'] ?? 0);

if (in_array($page_action, ['update', 'change_password'], true)) {
    $memberid = (int)($_POST['memberid'] ?? 0);
    if ($memberid !== $session_memberid) {
        http_response_code(403);
        exit('Access denied.');
    }
} else {
    $memberid    = $session_memberid;
    $page_action = 'edit';
}

$msg     = 'My Profile';
$error   = '';
$success = '';

// ══════════════════════════════════════════════════════════════════════════════
// ACTION: edit — load profile from DB
// ══════════════════════════════════════════════════════════════════════════════
if ($page_action === 'edit') {
    $member_object = new Member();
    $member        = $member_object->Get($memberid);

    $member_fname    = $member->member_fname    ?? '';
    $member_lname    = $member->member_lname    ?? '';
    $member_dob      = $member->member_dob      ?? '';
    $member_address1 = $member->member_address1 ?? '';
    $member_address2 = $member->member_address2 ?? '';
    $member_city     = $member->member_city     ?? '';
    $member_state    = $member->member_state    ?? '';
    $member_zip      = $member->member_zip      ?? '';
    $member_phone    = $member->member_phone    ?? '';
    $member_email    = $member->member_email    ?? '';
}

// ══════════════════════════════════════════════════════════════════════════════
// ACTION: update — save profile fields (NOT password)
// ══════════════════════════════════════════════════════════════════════════════
elseif ($page_action === 'update') {
    $member_fname    = test_input($_POST['member_fname']    ?? '');
    $member_lname    = test_input($_POST['member_lname']    ?? '');
    $member_dob      = test_input($_POST['member_dob']      ?? '');
    $member_address1 = test_input($_POST['member_address1'] ?? '');
    $member_address2 = test_input($_POST['member_address2'] ?? '');
    $member_city     = test_input($_POST['member_city']     ?? '');
    $member_state    = test_input($_POST['member_state']    ?? '');
    $member_zip      = test_input($_POST['member_zip']      ?? '');
    $member_phone    = test_input($_POST['member_phone']    ?? '');
    $member_email    = test_input($_POST['member_email']    ?? '');

    // Duplicate-email check — prepared statement (original used direct interpolation)
    $stmt = mysqli_prepare(
        $connection,
        "SELECT COUNT(*) AS cnt FROM member WHERE member_email = ? AND memberid != ?"
    );
    mysqli_stmt_bind_param($stmt, 'si', $member_email, $memberid);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $row    = mysqli_fetch_assoc($result);
    mysqli_stmt_close($stmt);

    if (($row['cnt'] ?? 0) >= 1) {
        $error = 'A member already exists with that email address. Change the email and try again.';
    } else {
        $member_object = new Member();
        $member        = $member_object->Get($memberid);

        $member->member_fname    = $member_fname;
        $member->member_lname    = $member_lname;
        $member->member_dob      = $member_dob;
        $member->member_address1 = $member_address1;
        $member->member_address2 = $member_address2;
        $member->member_city     = $member_city;
        $member->member_state    = $member_state;
        $member->member_zip      = $member_zip;
        $member->member_phone    = $member_phone;
        $member->member_email    = $member_email;
        // Password intentionally not updated here — use change_password action.

        if ($member->Save() !== false) {
            $success = success_text();
        } else {
            $error = 'Unable to save. Please try again.';
        }
    }
}

// ══════════════════════════════════════════════════════════════════════════════
// ACTION: change_password
// ══════════════════════════════════════════════════════════════════════════════
elseif ($page_action === 'change_password') {
    $member_object = new Member();
    $member        = $member_object->Get($memberid);

    $member_fname    = $member->member_fname    ?? '';
    $member_lname    = $member->member_lname    ?? '';
    $member_dob      = $member->member_dob      ?? '';
    $member_address1 = $member->member_address1 ?? '';
    $member_address2 = $member->member_address2 ?? '';
    $member_city     = $member->member_city     ?? '';
    $member_state    = $member->member_state    ?? '';
    $member_zip      = $member->member_zip      ?? '';
    $member_phone    = $member->member_phone    ?? '';
    $member_email    = $member->member_email    ?? '';

    $current_password = $_POST['current_password'] ?? '';
    $new_password     = $_POST['new_password']     ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';

    if (!$current_password) {
        $error = 'The current password should not be blank.';
    } elseif (!$new_password) {
        $error = 'The new password should not be blank.';
    } elseif (strlen($new_password) < 8) {
        $error = 'The new password must be at least 8 characters.';
    } elseif ($new_password !== $confirm_password) {
        $error = 'The new password and confirm password do not match.';
    } else {
        // Fetch stored hash — prepared statement (original used md5 in SQL)
        $stmt = mysqli_prepare(
            $connection,
            "SELECT member_password FROM member WHERE memberid = ? LIMIT 1"
        );
        mysqli_stmt_bind_param($stmt, 'i', $memberid);
        mysqli_stmt_execute($stmt);
        $result      = mysqli_stmt_get_result($stmt);
        $pw_row      = mysqli_fetch_assoc($result);
        mysqli_stmt_close($stmt);

        $stored_hash = $pw_row['member_password'] ?? '';

        if (!password_verify($current_password, $stored_hash)) {
            $error = 'The current password is invalid.';
        } else {
            // bcrypt hash — original used md5()
            $member->member_password = password_hash($new_password, PASSWORD_BCRYPT);
            if ($member->Save() !== false) {
                $success = success_text();
                $current_password = $new_password = $confirm_password = '';
            } else {
                $error = 'Unable to save. Please try again.';
            }
        }
    }
}

// ── Safe form action ──────────────────────────────────────────────────────────
$safe_self = h($_SERVER['PHP_SELF']);

// ── DOB formatting for date picker ───────────────────────────────────────────
$dob_ts  = strtotime($member_dob ?? '');
$dob_val = ($dob_ts !== false) ? date('Y-m-d', $dob_ts) : '';

// ── US state list ─────────────────────────────────────────────────────────────
$us_states = [
    'AL'=>'Alabama','AK'=>'Alaska','AZ'=>'Arizona','AR'=>'Arkansas',
    'CA'=>'California','CO'=>'Colorado','CT'=>'Connecticut','DE'=>'Delaware',
    'FL'=>'Florida','GA'=>'Georgia','HI'=>'Hawaii','ID'=>'Idaho',
    'IL'=>'Illinois','IN'=>'Indiana','IA'=>'Iowa','KS'=>'Kansas',
    'KY'=>'Kentucky','LA'=>'Louisiana','ME'=>'Maine','MD'=>'Maryland',
    'MA'=>'Massachusetts','MI'=>'Michigan','MN'=>'Minnesota','MS'=>'Mississippi',
    'MO'=>'Missouri','MT'=>'Montana','NE'=>'Nebraska','NV'=>'Nevada',
    'NH'=>'New Hampshire','NJ'=>'New Jersey','NM'=>'New Mexico','NY'=>'New York',
    'NC'=>'North Carolina','ND'=>'North Dakota','OH'=>'Ohio','OK'=>'Oklahoma',
    'OR'=>'Oregon','PA'=>'Pennsylvania','RI'=>'Rhode Island','SC'=>'South Carolina',
    'SD'=>'South Dakota','TN'=>'Tennessee','TX'=>'Texas','UT'=>'Utah',
    'VT'=>'Vermont','VA'=>'Virginia','WA'=>'Washington','WV'=>'West Virginia',
    'WI'=>'Wisconsin','WY'=>'Wyoming',
];

include('member-header.php');
?>

<!-- ── Bootstrap 5 + Icons ────────────────────────────────────────────────── -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<!-- ── Page Styles ────────────────────────────────────────────────────────── -->
<style>
.app-layout {
width: 100%;
}
.page-header-title, .page-header-subtitle{
padding: 0;
}
.profile-section-title {
background-color: transparent;
text-align: left;
border-radius: 0;
margin: 0;
padding: 0;
}
.profile-form-divider {
display: none;
}
.profile-input, .profile-select, .profile-date-picker-wrapper {
width: 100%!important;
height: 68px;
padding: 20px 22px!important;
background-color: var(--inputBackground, #FCFCFC)!important;
border: 1px solid var(--inputBorder, #E4E3EB)!important;
border-radius: var(--radius-sm, 8px)!important;
font-size: 16px!important;
line-height: 20px!important;
color: var(--textPrimary, #000000)!important;
transition: border-color 0.15s ease, box-shadow 0.15s ease!important;
margin-top: 0!important;
font-family: inherit!important;
}
.profile-input:focus {
outline: none;
border-color: var(--accent, #5A83D3)!important;
box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.profile-select-wrap::after {
content: none;
}
button.toggle-pw-btn i {
color: #6B7280;
}
@media (max-width: 767px) {
.profile-form-divider {
display:block;
}
.profile-input, .profile-select, .profile-date-picker-wrapper {
height: 52px;
padding: 13px 22px!important;
}
}
    /* ── Layout ─────────────────────────────────────────────────────────── */
    /*.app-layout   { display:flex; min-height:100vh; }*/
    /*.main-content { flex:1; display:flex; flex-direction:column; min-width:0; background:#f8f9fa; }*/

    /* ── Page header ─────────────────────────────────────────────────────── */
    /*.page-header          { background:#fff; border-bottom:1px solid #e5e7eb; padding:1.25rem 1.5rem; }*/
    /*.page-header-meta     { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }*/
    /*.page-header-title    { font-size:1.4rem; font-weight:700; margin:0; line-height:1.2; }*/
    /*.page-header-subtitle { font-size:.875rem; color:#6b7280; margin:0; }*/

    /* ── Body ────────────────────────────────────────────────────────────── */
    /*.body-content { padding:1.5rem; flex:1; }*/
    /*.profile-body { display:flex; flex-direction:column; gap:1.5rem; }*/

    /* ── Profile card ────────────────────────────────────────────────────── */
    /*.profile-card {*/
    /*    background:#fff; border:1px solid #e5e7eb;*/
    /*    border-radius:.75rem; padding:1.5rem;*/
    /*}*/

    /* ── Section head ────────────────────────────────────────────────────── */
    /*.profile-section-head {*/
    /*    display:flex; align-items:center; gap:.625rem; margin-bottom:.375rem;*/
    /*}*/
    /*.profile-section-title    { font-size:1.1rem; font-weight:700; margin:0; }*/
    /*.profile-section-subtitle { font-size:.875rem; color:#6b7280; margin:0 0 1.25rem; }*/
    /*.profile-form-divider     { border-top:1px solid #e5e7eb; margin-bottom:1.25rem; }*/

    /* ── Form fields ─────────────────────────────────────────────────────── */
    /*.profile-field  { display:flex; flex-direction:column; gap:.375rem; }*/
    /*.profile-label  { font-size:.875rem; font-weight:600; color:#374151; margin:0; }*/
    /*.profile-input,*/
    /*.profile-select {*/
    /*    width:100%; padding:.5rem .75rem;*/
    /*    border:1.5px solid #d1d5db; border-radius:.5rem;*/
    /*    font-size:.9rem; color:#111827; background:#fff;*/
    /*    transition:border-color .15s;*/
    /*    appearance:none; -webkit-appearance:none;*/
    /*}*/
    /*.profile-input:focus,*/
    /*.profile-select:focus  { outline:none; border-color:#111; }*/
    /*.profile-input::placeholder { color:#9ca3af; }*/

    /* State select arrow */
    /*.profile-select-wrap { position:relative; }*/
    /*.profile-select-wrap::after {*/
    /*    content:'';*/
    /*    pointer-events:none;*/
    /*    position:absolute; right:.75rem; top:50%; transform:translateY(-50%);*/
    /*    border:5px solid transparent; border-top-color:#6b7280; margin-top:3px;*/
    /*}*/

    /* ── Date picker ─────────────────────────────────────────────────────── */
    /*.profile-date-picker-wrapper {*/
    /*    display:flex; align-items:center; justify-content:space-between;*/
    /*    padding:.5rem .75rem; border:1.5px solid #d1d5db; border-radius:.5rem;*/
    /*    background:#fff; cursor:pointer; position:relative;*/
    /*    transition:border-color .15s; user-select:none;*/
    /*}*/
    /*.profile-date-picker-wrapper:hover,*/
    /*.profile-date-picker-wrapper.picker-open { border-color:#111; }*/
    /*.profile-date-picker-wrapper span { font-size:.9rem; color:#111827; }*/
    /*.placeholder-color  { color:#9ca3af !important; }*/
    /*.date-picker-input  {*/
    /*    position:absolute; inset:0; opacity:0;*/
    /*    width:100%; height:100%; cursor:pointer; border:none;*/
    /*}*/
    /*.profile-date-picker-icon { display:flex; align-items:center; }*/

    /* ── Password field ──────────────────────────────────────────────────── */
    /*.profile-pass-field      { gap:.5rem; }*/
    /*.profile-pass-label-wrap { display:flex; align-items:center; gap:.4rem; }*/
    /*.profile-pass-icon       { flex-shrink:0; }*/
    /*.profile-pass-wrap       { position:relative; }*/
    .toggle-pw-btn {
        position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
        background:none; border:none; padding:0; cursor:pointer; color:#6b7280;
        display:flex; align-items:center;
    }
    .toggle-pw-btn:hover { color:#111; }

    /* ── Alert banners ───────────────────────────────────────────────────── */
    /*.alert-ds {*/
    /*    border-radius:.5rem; padding:.75rem 1rem;*/
    /*    font-size:.875rem; font-weight:600; margin-bottom:1rem;*/
    /*}*/
    /*.alert-ds-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }*/
    /*.alert-ds-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }*/

    /* ── Save / submit button ────────────────────────────────────────────── */
    /*.btn-ds-primary {*/
    /*    margin-top:1.25rem;*/
    /*    background:#111; color:#fff; border:none;*/
    /*    border-radius:.5rem; padding:.625rem 1.5rem;*/
    /*    font-size:.9rem; font-weight:600; cursor:pointer;*/
    /*    transition:background .15s; display:inline-block;*/
    /*}*/
    /*.btn-ds-primary:hover { background:#333; }*/

    /*@media (max-width:768px) {*/
    /*    .body-content { padding:1rem; }*/
    /*    .page-header  { padding:1rem; }*/
    /*    .profile-card { padding:1rem; }*/
    /*}*/
</style>



<div class="app-layout">
    <?php include('sidebar.php'); ?>
<main class="main-content">

    <!-- ── Page Header ──────────────────────────────────────────────────────── -->
    <header class="page-header">
        <div class="page-header-meta">
            <div>
                <h1 class="page-header-title">My Profile</h1>
                <p class="page-header-subtitle">Manage your account information and security</p>
            </div>
        </div>
    </header>

    <!-- ── Body ─────────────────────────────────────────────────────────────── -->
    <div class="body-content">
        <div class="profile-body">

            <?php /* ── Global alert (shown above both cards) ───────────────── */
            if ($error): ?>
                <div class="alert-ds alert-ds-error"><?= h($error) ?></div>
            <?php endif; ?>
            <?php if ($success): ?>
                <div class="alert-ds alert-ds-success"><?= h($success) ?></div>
            <?php endif; ?>

            <!-- ════════════════════════════════════════════════════════════════
                 CARD 1 — MY PROFILE
                 Form name/ids from original preserved: member_fname, member_lname,
                 member_dob, member_address1, member_address2, member_city,
                 member_state, member_zip, member_phone, member_email.
                 Hidden inputs: action=update, memberid.
                 ════════════════════════════════════════════════════════════════ -->
            <div class="profile-card">
                <div class="profile-section-head">
                    <!-- person-edit icon -->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 20.9999C1.99986 19.7061 2.31352 18.4316 2.91408 17.2856C3.51464 16.1396 4.38419 15.1564 5.44815 14.4202C6.51212 13.6841 7.73876 13.2169 9.02288 13.0589C10.307 12.9009 11.6103 13.0567 12.821 13.5129" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M21.378 16.6261C21.7763 16.2278 22.0001 15.6875 22.0001 15.1241C22.0001 14.5608 21.7763 14.0205 21.378 13.6221C20.9796 13.2238 20.4393 13 19.876 13C19.3126 13 18.7723 13.2238 18.374 13.6221L14.364 17.6341C14.1262 17.8718 13.9522 18.1655 13.858 18.4881L13.021 21.3581C12.9959 21.4442 12.9944 21.5354 13.0166 21.6222C13.0389 21.7091 13.084 21.7883 13.1474 21.8517C13.2108 21.9151 13.2901 21.9603 13.3769 21.9825C13.4637 22.0048 13.5549 22.0032 13.641 21.9781L16.511 21.1411C16.8336 21.0469 17.1274 20.8729 17.365 20.6351L21.378 16.6261Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M10 13C12.7614 13 15 10.7614 15 8C15 5.23858 12.7614 3 10 3C7.23858 3 5 5.23858 5 8C5 10.7614 7.23858 13 10 13Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <h2 class="profile-section-title">My Profile</h2>
                </div>
                <p class="profile-section-subtitle">Manage Your Account Information.</p>

                <form class="profile-form profile-info-form"
                      method="POST"
                      name="member"
                      action="<?= $safe_self ?>">

                    <div class="profile-form-divider"></div>
                    <div class="row g-3">

                        <!-- First Name -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_fname">First Name</label>
                                <input type="text"
                                       id="member_fname" name="member_fname"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter first name"
                                       value="<?= h($member_fname ?? '') ?>">
                            </div>
                        </div>

                        <!-- Last Name -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_lname">Last Name</label>
                                <input type="text"
                                       id="member_lname" name="member_lname"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter last name"
                                       value="<?= h($member_lname ?? '') ?>">
                            </div>
                        </div>

                        <!-- DOB — new date-picker widget; hidden input carries value for POST -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="dobInput">DOB</label>
                                <div class="profile-date-wrap">
                                    <div class="profile-date-picker-wrapper" id="dobPickerWrapper">
                                        <span id="dobDisplay" class="<?= $dob_val ? '' : 'placeholder-color' ?>">
                                            <?= $dob_val ? date('F d, Y', strtotime($dob_val)) : 'Select date' ?>
                                        </span>
                                        <div class="profile-date-picker-icon">
                                            <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M7.39624 2L7.39624 6" stroke="#6B7280" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M14.7925 2L14.7925 6" stroke="#6B7280" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M17.566 4L4.62262 4C3.60141 4 2.77356 4.89543 2.77356 6L2.77356 20C2.77356 21.1046 3.60141 22 4.62262 22L17.566 22C18.5872 22 19.4151 21.1046 19.4151 20L19.4151 6C19.4151 4.89543 18.5872 4 17.566 4Z" stroke="#6B7280" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M2.77356 10L19.4151 10" stroke="#6B7280" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </div>
                                        <!--
                                            id="dobInput" + name="member_dob" — replaces the old
                                            #date input that used dropdown-datepicker.min.js.
                                            The original field was type="text" with data-field="datetime";
                                            now it is type="date" feeding the same POST key member_dob.
                                        -->
                                        <input type="date"
                                               class="date-picker-input"
                                               id="dobInput"
                                               name="member_dob"
                                               value="<?= h($dob_val) ?>"
                                               aria-label="Select date of birth">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_email">Email</label>
                                <input type="email"
                                       id="member_email" name="member_email"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter email address"
                                       value="<?= h($member_email ?? '') ?>">
                            </div>
                        </div>

                        <!-- Address 1 -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_address1">Address 1</label>
                                <input type="text"
                                       id="member_address1" name="member_address1"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter address line 1"
                                       value="<?= h($member_address1 ?? '') ?>">
                            </div>
                        </div>

                        <!-- Address 2 -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_address2">Address 2</label>
                                <input type="text"
                                       id="member_address2" name="member_address2"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter address line 2"
                                       value="<?= h($member_address2 ?? '') ?>">
                            </div>
                        </div>

                        <!-- City -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_city">City</label>
                                <input type="text"
                                       id="member_city" name="member_city"
                                       class="profile-input"
                                       maxlength="50"
                                       placeholder="Enter city"
                                       value="<?= h($member_city ?? '') ?>">
                            </div>
                        </div>

                        <!-- State — new design uses full dropdown; PHP pre-selects saved value -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_state">State</label>
                                <div class="profile-select-wrap">
                                    <select class="profile-select"
                                            id="member_state" name="member_state">
                                        <option value="" disabled <?= ($member_state ?? '') === '' ? 'selected' : '' ?>>Select state</option>
                                        <?php foreach ($us_states as $abbr => $name): ?>
                                            <option value="<?= h($abbr) ?>"
                                                <?= (($member_state ?? '') === $abbr) ? 'selected' : '' ?>>
                                                <?= h($name) ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Zip -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_zip">Zip Code</label>
                                <input type="text"
                                       id="member_zip" name="member_zip"
                                       class="profile-input"
                                       size="5" maxlength="5"
                                       placeholder="Enter zip code"
                                       value="<?= h($member_zip ?? '') ?>">
                            </div>
                        </div>

                        <!-- Phone -->
                        <div class="col-12 col-md-6">
                            <div class="profile-field">
                                <label class="profile-label" for="member_phone">Phone</label>
                                <input type="tel"
                                       id="member_phone" name="member_phone"
                                       class="profile-input"
                                       maxlength="10"
                                       placeholder="Enter phone number"
                                       value="<?= h($member_phone ?? '') ?>">
                            </div>
                        </div>

                    </div><!-- /.row -->

                    <!-- Hidden inputs (identical to original) -->
                    <input type="hidden" name="action"   value="update">
                    <input type="hidden" name="memberid" value="<?= h($memberid) ?>">

                    <button type="submit" class="btn-ds-primary">Save Changes</button>
                </form>
            </div><!-- /.profile-card (My Profile) -->

            <!-- ════════════════════════════════════════════════════════════════
                 CARD 2 — CHANGE PASSWORD
                 Form names from original preserved: current_password,
                 new_password, confirm_password.
                 Hidden inputs: action=change_password, memberid.
                 Passwords are never echoed back (security rule unchanged).
                 ════════════════════════════════════════════════════════════════ -->
            <div class="profile-card">
                <div class="profile-section-head">
                    <!-- shield-check icon -->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13C20 18 16.5 20.5 12.34 21.95C12.1222 22.0238 11.8855 22.0202 11.67 21.94C7.5 20.5 4 18 4 13V5.99996C4 5.73474 4.10536 5.48039 4.29289 5.29285C4.48043 5.10532 4.73478 4.99996 5 4.99996C7 4.99996 9.5 3.79996 11.24 2.27996C11.4519 2.09896 11.7214 1.99951 12 1.99951C12.2786 1.99951 12.5481 2.09896 12.76 2.27996C14.51 3.80996 17 4.99996 19 4.99996C19.2652 4.99996 19.5196 5.10532 19.7071 5.29285C19.8946 5.48039 20 5.73474 20 5.99996V13Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M9 12L11 14L15 10" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <h2 class="profile-section-title">Change Password</h2>
                </div>
                <p class="profile-section-subtitle">Update Your Password To Stay Secure</p>

                <form class="profile-form password-form"
                      method="POST"
                      name="change_password"
                      action="<?= $safe_self ?>">

                    <div class="row g-3">

                        <!-- Current Password -->
                        <div class="col-12">
                            <div class="profile-field profile-pass-field">
                                <div class="profile-pass-label-wrap">
                                    <svg class="profile-pass-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.8333 9.1665H4.16667C3.24619 9.1665 2.5 9.9127 2.5 10.8332V16.6665C2.5 17.587 3.24619 18.3332 4.16667 18.3332H15.8333C16.7538 18.3332 17.5 17.587 17.5 16.6665V10.8332C17.5 9.9127 16.7538 9.1665 15.8333 9.1665Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.83337 9.1665V5.83317C5.83337 4.7281 6.27236 3.66829 7.05376 2.88689C7.83516 2.10549 8.89497 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V9.1665" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <label class="profile-label" for="current_password">Current Password</label>
                                </div>
                                <div class="profile-pass-wrap">
                                    <!--
                                        Original echoed $current_password back into value — security risk.
                                        Password inputs always have value="" (never echoed back).
                                    -->
                                    <input type="password"
                                           id="current_password" name="current_password"
                                           class="profile-input"
                                           maxlength="50"
                                           placeholder="Enter current password"
                                           value="">
                                    <button type="button" class="toggle-pw-btn" data-target="current_password" aria-label="Show/hide password">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- New Password -->
                        <div class="col-12">
                            <div class="profile-field profile-pass-field">
                                <div class="profile-pass-label-wrap">
                                    <svg class="profile-pass-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.8333 9.1665H4.16667C3.24619 9.1665 2.5 9.9127 2.5 10.8332V16.6665C2.5 17.587 3.24619 18.3332 4.16667 18.3332H15.8333C16.7538 18.3332 17.5 17.587 17.5 16.6665V10.8332C17.5 9.9127 16.7538 9.1665 15.8333 9.1665Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.83337 9.1665V5.83317C5.83337 4.7281 6.27236 3.66829 7.05376 2.88689C7.83516 2.10549 8.89497 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V9.1665" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <label class="profile-label" for="new_password">New Password</label>
                                </div>
                                <div class="profile-pass-wrap">
                                    <input type="password"
                                           id="new_password" name="new_password"
                                           class="profile-input"
                                           maxlength="50"
                                           placeholder="Enter new password"
                                           value="">
                                    <button type="button" class="toggle-pw-btn" data-target="new_password" aria-label="Show/hide password">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Confirm Password -->
                        <div class="col-12">
                            <div class="profile-field profile-pass-field">
                                <div class="profile-pass-label-wrap">
                                    <svg class="profile-pass-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.8333 9.1665H4.16667C3.24619 9.1665 2.5 9.9127 2.5 10.8332V16.6665C2.5 17.587 3.24619 18.3332 4.16667 18.3332H15.8333C16.7538 18.3332 17.5 17.587 17.5 16.6665V10.8332C17.5 9.9127 16.7538 9.1665 15.8333 9.1665Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.83337 9.1665V5.83317C5.83337 4.7281 6.27236 3.66829 7.05376 2.88689C7.83516 2.10549 8.89497 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V9.1665" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <label class="profile-label" for="confirm_password">Confirm Password</label>
                                </div>
                                <div class="profile-pass-wrap">
                                    <input type="password"
                                           id="confirm_password" name="confirm_password"
                                           class="profile-input"
                                           maxlength="50"
                                           placeholder="Confirm new password"
                                           value="">
                                    <button type="button" class="toggle-pw-btn" data-target="confirm_password" aria-label="Show/hide password">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div><!-- /.row -->

                    <!-- Hidden inputs (identical to original) -->
                    <input type="hidden" name="action"   value="change_password">
                    <input type="hidden" name="memberid" value="<?= h($memberid) ?>">

                    <button type="submit" class="btn-ds-primary">Update Password</button>
                </form>
            </div><!-- /.profile-card (Change Password) -->

        </div><!-- /.profile-body -->
    </div><!-- /.body-content -->

</main>
</div><!-- /.app-layout -->


<!-- ── Scripts ─────────────────────────────────────────────────────────────── -->
<script src="../coach/js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
// ================================================================
// 1. DOB DATE PICKER
//    Replaces the old #date + dropdown-datepicker.min.js widget.
//    New: native <input type="date"> overlaid on the styled wrapper.
//    POST key is still name="member_dob" (unchanged).
// ================================================================
(function () {
    var dateInput   = document.getElementById('dobInput');
    var dateDisplay = document.getElementById('dobDisplay');
    var wrapper     = document.getElementById('dobPickerWrapper');

    function formatDate(val) {
        if (!val) return '';
        return new Date(val + 'T00:00:00').toLocaleDateString('en-US', {
            year: 'numeric', month: 'long', day: '2-digit'
        });
    }

    wrapper.addEventListener('click', function () {
        wrapper.classList.add('picker-open');
        try { dateInput.showPicker(); } catch (e) {}
    });

    dateInput.addEventListener('change', function () {
        if (this.value) {
            dateDisplay.textContent = formatDate(this.value);
            dateDisplay.classList.remove('placeholder-color');
        } else {
            dateDisplay.textContent = 'Select date';
            dateDisplay.classList.add('placeholder-color');
        }
        wrapper.classList.remove('picker-open');
    });

    dateInput.addEventListener('blur', function () {
        wrapper.classList.remove('picker-open');
    });
})();

// ================================================================
// 2. PASSWORD SHOW / HIDE TOGGLE
//    Each .toggle-pw-btn has data-target="<input id>".
//    Toggles type="password" ↔ type="text" and swaps the eye icon.
// ================================================================
document.querySelectorAll('.toggle-pw-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var targetId = this.getAttribute('data-target');
        var input    = document.getElementById(targetId);
        var icon     = this.querySelector('i');
        if (!input) return;
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('bi-eye', 'bi-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('bi-eye-slash', 'bi-eye');
        }
    });
});

// ================================================================
// 3. CLIENT-SIDE PASSWORD VALIDATION
//    Mirrors the PHP-side rules (min 8 chars, confirm match)
//    so the user gets instant feedback before submission.
// ================================================================
document.querySelector('.password-form').addEventListener('submit', function (e) {
    var np  = document.getElementById('new_password').value;
    var cp  = document.getElementById('confirm_password').value;
    var cur = document.getElementById('current_password').value;

    if (!cur) {
        e.preventDefault();
        alert('Please enter your current password.');
        return;
    }
    if (!np) {
        e.preventDefault();
        alert('Please enter a new password.');
        return;
    }
    if (np.length < 8) {
        e.preventDefault();
        alert('The new password must be at least 8 characters.');
        return;
    }
    if (np !== cp) {
        e.preventDefault();
        alert('New password and confirm password do not match.');
        return;
    }
});
</script>

<?php include('member-footer.php'); ?>