
<div id="member-renewal-form-container">
    <form id="form-membership-renewal" method="post">
        <div class="row">
            <div class="col-lg-6 pt-4 mb-3">
                <div class="row">
                    <div class="col-lg-6">
                        <h4>會籍類別:</h4>
                    </div>
                    <div class="col-lg-6 text-lg-end">
                        *必須填寫                    </div>
                </div>

                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">類別<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <div class="d-block">
                            <div class="form-check d-inline-block ps-0">
                                <input type="radio" name="rdo_type" class="rdo_type" value="renew" id="rdo_type_renew" checked="">
                                <label class="form-check-label" for="rdo_hk_address_yes">續會</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">會員編號.</label></div>
                    <div class="col-lg-8">
                        <input type="text" name="txt_member_no" class="form-control" value="" placeholder="" />
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">會籍類別<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <div class="d-block">
                            <div class="form-check d-inline-block ps-0">
                                <input type="radio" name="rdo_member_type" class="rdo_member_type" value="annual" id="rdo_member_type_annual" checked >
                                <label class="form-check-label" for="rdo_member_type_annual">成年會員</label>
                            </div>
                            <div class="form-check d-inline-block ps-3">
                                <input type="radio" name="rdo_member_type" class="rdo_member_type" value="family" id="rdo_member_type_family"   >
                                <label class="form-check-label" for="rdo_member_type_family">家庭會籍</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">選擇會籍年期<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <select name="sel_plan" class="sel_plan form-control" required>
                        </select>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-lg-12">
                        <h4>個人資料:</h4>
                    </div>
                </div>

                <div class="accordion" id="accordionMembers">
                    <div class="accordion-item main-row">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse0" aria-expanded="true" aria-controls="collapseOne">
                                個人資料:
                            </button>
                        </h2>
                        <div id="collapse0" class="accordion-collapse collapse show" data-bs-parent="#accordionMembers">
                            <div class="accordion-body">
                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">全名<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <select name="sel_title[0]" class="form-control" required>
                                            <option value="mr" selected>先生</option>
                                            <option value="mrs">太太</option>
                                            <option value="ms">小姐</option>
                                            <option value="dr">博士</option>
                                            <option value="prof">教授</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <input type="text" name="txt_surname[0]" class="form-control" value="" placeholder="姓氏" required>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <input type="text" name="txt_given_name[0]" class="form-control" value=""  placeholder="名字" required>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">中文姓名</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_chi_name[0]" class="form-control" value="" placeholder="(如適用)">
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">證件類型<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <div class="d-block">
                                            <div class="form-check d-inline-block ps-0">
                                                <input type="radio" name="rdo_id_type[0]" class="rdo_id_type" value="hkid" checked="">
                                                <label class="form-check-label" for="rdo_hk_address_yes">香港身份證號碼</label>
                                            </div>
                                            <div class="form-check d-inline-block ps-3">
                                                <input type="radio" name="rdo_id_type[0]" class="rdo_id_type" value="passport" >
                                                <label class="form-check-label" for="rdo_hk_address_no">護照</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2 hkid-row">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">香港身份證號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_hkid[0]" class="txt_hkid form-control" placeholder="" required>
                                        <div class="form-text">香港身份證首四個字符（包括字母）例如 : A345</div>
                                    </div>
                                </div>

                                <div class="row g-2 passport-row" style="display: none;" >
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">護照號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_passport[0]" class="txt_passport form-control" placeholder="" disabled required>
                                        <div class="form-text">護照號碼首四個字</div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">出生日期<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 align-self-center mb-3">
                                        <div class="row g-2">
                                            <div class="col-lg-4">
                                                <select name="sel_dob_day[0]" class="form-control" required>
                                                    <option value="">--日--</option>
                                                    <option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option><option value='29'>29</option><option value='30'>30</option><option value='31'>31</option>                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <select name="sel_dob_month[0]" class="form-control" required>
                                                    <option value="">--月--</option>
                                                    <option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <select name="sel_dob_year[0]" class="form-control" required>
                                                    <option value="">--年--</option>
                                                    <option value='2010'>2010</option><option value='2009'>2009</option><option value='2008'>2008</option><option value='2007'>2007</option><option value='2006'>2006</option><option value='2005'>2005</option><option value='2004'>2004</option><option value='2003'>2003</option><option value='2002'>2002</option><option value='2001'>2001</option><option value='2000'>2000</option><option value='1999'>1999</option><option value='1998'>1998</option><option value='1997'>1997</option><option value='1996'>1996</option><option value='1995'>1995</option><option value='1994'>1994</option><option value='1993'>1993</option><option value='1992'>1992</option><option value='1991'>1991</option><option value='1990'>1990</option><option value='1989'>1989</option><option value='1988'>1988</option><option value='1987'>1987</option><option value='1986'>1986</option><option value='1985'>1985</option><option value='1984'>1984</option><option value='1983'>1983</option><option value='1982'>1982</option><option value='1981'>1981</option><option value='1980'>1980</option><option value='1979'>1979</option><option value='1978'>1978</option><option value='1977'>1977</option><option value='1976'>1976</option><option value='1975'>1975</option><option value='1974'>1974</option><option value='1973'>1973</option><option value='1972'>1972</option><option value='1971'>1971</option><option value='1970'>1970</option><option value='1969'>1969</option><option value='1968'>1968</option><option value='1967'>1967</option><option value='1966'>1966</option><option value='1965'>1965</option><option value='1964'>1964</option><option value='1963'>1963</option><option value='1962'>1962</option><option value='1961'>1961</option><option value='1960'>1960</option><option value='1959'>1959</option><option value='1958'>1958</option><option value='1957'>1957</option><option value='1956'>1956</option><option value='1955'>1955</option><option value='1954'>1954</option><option value='1953'>1953</option><option value='1952'>1952</option><option value='1951'>1951</option><option value='1950'>1950</option><option value='1949'>1949</option><option value='1948'>1948</option><option value='1947'>1947</option><option value='1946'>1946</option><option value='1945'>1945</option><option value='1944'>1944</option><option value='1943'>1943</option><option value='1942'>1942</option><option value='1941'>1941</option><option value='1940'>1940</option><option value='1939'>1939</option><option value='1938'>1938</option><option value='1937'>1937</option><option value='1936'>1936</option><option value='1935'>1935</option><option value='1934'>1934</option><option value='1933'>1933</option><option value='1932'>1932</option><option value='1931'>1931</option><option value='1930'>1930</option>                                                </select>
                                            </div>
                                            <div class="form-text">只允許16歲或以上的人加入</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">聯絡地址</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <div class="row g-2">
                                            <div class="col-lg-4"><input type="text" name="txt_unit" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-4"><input type="text" name="txt_floor" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-4"><input type="text" name="txt_block" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-12"><input type="text" name="txt_address_1" class="form-control mb-2" placeholder="大廈名稱"></div>
                                            <div class="col-lg-12"><input type="text" name="txt_address_2" class="form-control mb-2" placeholder="街道/ 屋邨/ 鄉村名稱及門牌號數"></div>
                                            <div class="col-lg-12">
                                                <select name="sel_district" class="form-control">
                                                    <option value="" selected>請選擇</option>
                                                    <option value="中西區">中西區</option>
                                                    <option value="東區">東區</option>
                                                    <option value="離島區">離島區</option>
                                                    <option value="九龍城區">九龍城區</option>
                                                    <option value="葵青區">葵青區</option>
                                                    <option value="觀塘區">觀塘區</option>
                                                    <option value="北區">北區</option>
                                                    <option value="西貢區">西貢區</option>
                                                    <option value="沙田區">沙田區</option>
                                                    <option value="深水埗區">深水埗區</option>
                                                    <option value="南區">南區</option>
                                                    <option value="大埔區">大埔區</option>
                                                    <option value="荃灣區">荃灣區</option>
                                                    <option value="屯門區">屯門區</option>
                                                    <option value="灣仔區">灣仔區</option>
                                                    <option value="黃大仙區">黃大仙區</option>
                                                    <option value="油尖旺區">油尖旺區</option>
                                                    <option value="元朗區">元朗區</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">海外地址</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_oversea_address" id="txt_oversea_address" class="form-control" value="" />
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">手提電話號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-2 mb-3">
                                        <select name="tel_code_mobile[0]" class="tel_code_mobile form-control" data-row-index="0" required>
                                            <option value="">請選擇</option>
                                            <option value='852'>香港 (852)</option><option value='86'>中國 (86)</option><option value='886'>臺灣(台灣) (886)</option><option value='853'>澳門 (853)</option><option value='65'>新加坡 (65)</option><option value='81'>日本 (81)</option><option value='66'>泰國 (66)</option><option value='60'>馬來西亞 (60)</option><option value='63'>菲律賓 (63)</option><option value='61'>澳大利亞(澳洲) (61)</option><option value='53'>聖誕島 (53)</option><option value='-830'>科科斯（基林）群島 (-830)</option><option value='1'>加拿大 (1)</option><option value='44'>英國 (44)</option><option value='1'>美國 (1)</option><option value='244'>安哥拉 (244)</option><option value='93'>阿富汗 (93)</option><option value='355'>阿爾巴尼亞 (355)</option><option value='213'>阿爾及利亞 (213)</option><option value='376'>安道爾 (376)</option><option value='-263'>安圭拉 / 安吉拉 (-263)</option><option value='-267'>安提瓜和巴布達 / 安地卡及巴布達 (-267)</option><option value='54'>阿根廷 (54)</option><option value='374'>亞美尼亞 (374)</option><option value='247'>阿森松島 / 亞森欣島 (247)</option><option value='43'>奧地利 (43)</option><option value='994'>阿塞拜疆 / 亞塞拜然 (994)</option><option value='-241'>巴哈馬 (-241)</option><option value='973'>巴林 (973)</option><option value='880'>孟加拉 (880)</option><option value='-245'>巴巴多斯 / 巴貝多 (-245)</option><option value='501'>伯利兹 / 貝里斯 (501)</option><option value='229'>貝寧 / 貝南 (229)</option><option value='-440'>百慕達 (-440)</option><option value='591'>玻利維亞 (591)</option><option value='267'>博茨瓦納 / 波札那 (267)</option><option value='55'>巴西 (55)</option><option value='673'>汶萊 (673)</option><option value='359'>保加利亞 (359)</option><option value='226'>布基納法索 / 布吉納法索 (226)</option><option value='95'>緬甸 (95)</option><option value='257'>布隆迪 / 蒲隆地 (257)</option><option value='237'>喀麥隆 (237)</option><option value='-344'>開曼群島 (-344)</option><option value='236'>中非共和國 (236)</option><option value='235'>乍得 / 查德 (235)</option><option value='56'>智利 (56)</option><option value='57'>哥倫比亞 (57)</option><option value='242'>民主剛果 (242)</option><option value='682'>庫克群島 (682)</option><option value='506'>哥斯達黎加 / 哥斯大黎加 (506)</option><option value='357'>塞浦路斯 / 賽普勒斯 (357)</option><option value='420'>捷克 (420)</option><option value='45'>丹麥 (45)</option><option value='253'>吉布提 / 吉布地 (253)</option><option value='-808'>多明尼加 / 多米尼加 (-808)</option><option value='593'>厄瓜多爾 / 厄瓜多 (593)</option><option value='20'>埃及 (20)</option><option value='503'>薩爾瓦多 (503)</option><option value='372'>愛沙尼亞 (372)</option><option value='251'>埃塞俄比亞 / 衣索比亞 (251)</option><option value='679'>斐濟 (679)</option><option value='358'>芬蘭 (358)</option><option value='33'>法國 (33)</option><option value='594'>法屬圭亞那 (594)</option><option value='241'>加蓬 / 加彭 (241)</option><option value='220'>岡比亞 / 甘比亞 (220)</option><option value='995'>喬治亞 / 格魯吉亞 (995)</option><option value='49'>德國 (49)</option><option value='233'>加納 / 迦納 (233)</option><option value='350'>直布羅陀 (350)</option><option value='30'>希臘 (30)</option><option value='-472'>格林納達 / 格瑞那達 (-472)</option><option value='-670'>關島 (-670)</option><option value='502'>危地馬拉 / 瓜地馬拉 (502)</option><option value='224'>畿內亞 / 幾內亞 (224)</option><option value='592'>圭亞那 / 蓋亞那 (592)</option><option value='509'>海地 (509)</option><option value='504'>洪都拉斯 / 宏都拉斯 (504)</option><option value='36'>匈牙利 (36)</option><option value='354'>冰島 (354)</option><option value='91'>印度 (91)</option><option value='62'>印度尼西亞(印尼) (62)</option><option value='964'>伊拉克 (964)</option><option value='353'>愛爾蘭 (353)</option><option value='972'>以色列 (972)</option><option value='39'>意大利 / 義大利 (39)</option><option value='225'>象牙海岸 / 科特迪瓦 (225)</option><option value='-875'>牙買加 (-875)</option><option value='962'>約旦 (962)</option><option value='855'>民主柬埔寨 / 柬埔寨 (855)</option><option value='7'>哈薩克 / 哈薩克斯坦 (7)</option><option value='254'>肯雅 / 肯亞 (254)</option><option value='82'>大韓民國(韓國/南韓) (82)</option><option value='47'>挪威 (47)</option><option value='968'>阿曼 (968)</option><option value='92'>巴基斯坦 (92)</option><option value='507'>巴拿馬 (507)</option><option value='675'>巴布亞新畿內亞 / 巴布亞紐幾內亞 (675)</option><option value='595'>巴拉圭 (595)</option><option value='51'>秘魯 (51)</option><option value='48'>波蘭 (48)</option><option value='689'>法屬波利尼西亞 / 法屬玻里尼西亞 (689)</option><option value='351'>葡萄牙 (351)</option><option value='-786'>波多黎各 (-786)</option><option value='974'>卡塔爾 / 卡達 (974)</option><option value='262'>留尼旺 (262)</option><option value='40'>羅馬尼亞 (40)</option><option value='32'>比利時 (32)</option><option value='965'>科威特 (965)</option><option value='996'>吉爾吉斯 (996)</option><option value='856'>寮國 / 老撾 (856)</option><option value='371'>拉脫維亞 (371)</option><option value='961'>黎巴嫩 (961)</option><option value='266'>萊索托 / 賴索托 (266)</option><option value='231'>利比里亞 / 賴比瑞亞 (231)</option><option value='218'>利比亞 (218)</option><option value='423'>列支敦斯登 (423)</option><option value='370'>立陶宛 (370)</option><option value='352'>盧森堡 (352)</option><option value='261'>馬達加斯加 (261)</option><option value='265'>馬拉維 / 馬拉威 (265)</option><option value='960'>馬爾代夫 / 馬爾地夫 (960)</option><option value='223'>馬里 / 馬利 (223)</option><option value='356'>馬爾他 / 馬耳他 (356)</option><option value='-669'>北馬利安納群島 / 北馬里亞納群島 (-669)</option><option value='596'>馬提尼克 / 馬丁尼克 (596)</option><option value='230'>毛里裘斯 / 模里西斯 (230)</option><option value='52'>墨西哥 (52)</option><option value='373'>摩爾多瓦 (373)</option><option value='377'>摩納哥 (377)</option><option value='212'>摩洛哥 (212)</option><option value='976'>蒙古 (976)</option><option value='-663'>蒙塞拉特島 / 蒙哲臘 (-663)</option><option value='258'>莫桑比克 / 莫三比克 (258)</option><option value='264'>納米比亞 (264)</option><option value='674'>瑙魯 / 諾魯 (674)</option><option value='977'>尼泊爾 (977)</option><option value='599'>荷屬安的列斯 / 荷屬安地列斯 (599)</option><option value='31'>荷蘭 (31)</option><option value='64'>紐西蘭 / 新西蘭 (64)</option><option value='505'>尼加拉瓜 (505)</option><option value='227'>尼日爾 / 尼日 (227)</option><option value='234'>尼日利亞 / 奈及利亞 (234)</option><option value='-757'>聖盧西亞 / 聖露西亞 (-757)</option><option value='-783'>聖文森特和格林納丁斯 (-783)</option><option value='-683'>美屬薩摩亞 / 東薩摩亞 (-683)</option><option value='685'>薩摩亞 (685)</option><option value='378'>聖馬利諾 (378)</option><option value='239'>聖多美及普林西比 (239)</option><option value='966'>沙特阿拉伯 / 沙烏地阿拉伯 (966)</option><option value='221'>塞內加爾 (221)</option><option value='248'>塞舌爾 / 塞席爾 (248)</option><option value='232'>塞拉利昂 / 獅子山 (232)</option><option value='421'>斯洛伐克 (421)</option><option value='386'>斯洛文尼亞 / 斯洛維尼亞 (386)</option><option value='677'>所羅門群島 / 索羅門群島 (677)</option><option value='252'>索馬里 / 索馬利亞 (252)</option><option value='27'>南非 (27)</option><option value='34'>西班牙 (34)</option><option value='94'>斯里蘭卡 (94)</option><option value='249'>蘇丹 (249)</option><option value='597'>蘇利南 (597)</option><option value='268'>斯威士蘭 / 史瓦濟蘭 (268)</option><option value='46'>瑞典 (46)</option><option value='41'>瑞士 (41)</option><option value='992'>塔吉克 (992)</option><option value='255'>坦桑尼亞 / 坦尚尼亞 (255)</option><option value='228'>多哥 (228)</option><option value='676'>湯加 / 東加 (676)</option><option value='-867'>千里達及多巴哥 / 千里達及托巴哥 (-867)</option><option value='216'>突尼斯 / 突尼西亞 (216)</option><option value='90'>土耳其 (90)</option><option value='993'>土庫曼斯坦 (993)</option><option value='256'>烏干達 (256)</option><option value='971'>阿拉伯聯合酋長國 (971)</option><option value='598'>烏拉圭 (598)</option><option value='998'>烏茲別克 / 烏茲別克斯坦 (998)</option><option value='84'>越南 (84)</option><option value='967'>也門 / 葉門 (967)</option><option value='38'>南斯拉夫社會主義聯邦共和國 (38)</option><option value='263'>津巴布韋 / 辛巴威 (263)</option><option value='243'>扎伊爾 / 薩伊 (243)</option><option value='243'>剛果 (243)</option><option value='260'>贊比亞 / 尚比亞 (260)</option><option value='44'>澤西 (44)</option><option value='-1437'>根西 (-1437)</option><option value='-1580'>萌島 / 曼島 (-1580)</option><option value='358'>奧蘭 / 阿赫韋南馬 (358)</option><option value='47'>斯瓦巴和揚馬延 (47)</option><option value='262'>馬約特 (262)</option><option value='-766'>多米尼克 (-766)</option><option value='382'>黑山 / 蒙特內哥羅 (382)</option><option value='-283'>英屬處女群島 / 英屬維京群島 (-283)</option><option value='-720'>荷屬聖馬丁 (-720)</option><option value='-868'>聖基茨和尼維斯 (-868)</option><option value='-648'>特克斯和凱科斯群島 / 土克凱可群島 (-648)</option><option value='-339'>美屬處女群島 / 美屬維京群島 (-339)</option><option value='211'>南蘇丹 (211)</option><option value='222'>毛里塔尼亞 / 茅利塔尼亞 (222)</option><option value='238'>維德角 (238)</option><option value='240'>赤道幾內亞 (240)</option><option value='245'>幾內亞比索 / 畿內亞比紹 (245)</option><option value='269'>科摩羅 / 葛摩 (269)</option><option value='290'>聖赫勒拿 / 聖赫倫那 (290)</option><option value='291'>厄立特里亞 / 厄利垂亞 (291)</option><option value='297'>阿魯巴 (297)</option><option value='298'>法羅群島 (298)</option><option value='299'>格陵蘭 (299)</option><option value='385'>克羅地亞 / 克羅埃西亞 (385)</option><option value='387'>波斯尼亞和黑塞哥維那(波黑) (387)</option><option value='389'>北馬其頓共和國 (389)</option><option value='508'>聖皮埃爾和密克隆群島 (508)</option><option value='590'>瓜德羅普 / 瓜地洛普 (590)</option><option value='590'>聖馬丁島 (590)</option><option value='590'>聖巴泰勒米 / 聖巴瑟米 (590)</option><option value='596'>聖尤斯特歇斯 / 聖佑達修斯 (596)</option><option value='595'>薩巴 / 荷屬沙巴 (595)</option><option value='592'>波奈 / 博奈爾 (592)</option><option value='590'>庫拉索 / 古拉索 (590)</option><option value='670'>東帝汶 (670)</option><option value='680'>帛琉 (680)</option><option value='681'>瓦利斯和富圖納 (681)</option><option value='683'>紐埃 (683)</option><option value='686'>基里巴斯 / 吉里巴斯 (686)</option><option value='687'>新喀里多尼亞 (687)</option><option value='688'>圖瓦盧 / 吐瓦魯 (688)</option><option value='690'>托克勞 (690)</option><option value='691'>密克羅尼西亞聯邦 (691)</option><option value='692'>馬紹爾群島 (692)</option><option value='975'>不丹 (975)</option><option value='381'>塞爾維亞共和國 (381)</option><option value='678'>瓦努阿圖 / 萬那杜 (678)</option><option value='500'>福克蘭群島（馬爾維納斯群島） (500)</option><option value='250'>盧安達（盧旺達） (250)</option><option value='379'>梵蒂岡 (379)</option>                                        </select>
                                    </div>
                                    <div class="col-lg-7 mb-3">
                                        <input type="tel" name="tel_mobile[0]" class="tel_mobile form-control" pattern="[0-9]*" value="" placeholder="" required>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">家庭電話號碼</label>
                                    </div>
                                    <div class="col-lg-2 mb-3">
                                        <select name="tel_code_home" class="tel_code_home form-control">
                                            <option value="">請選擇</option>
                                            <option value='852'>香港 (852)</option><option value='86'>中國 (86)</option><option value='886'>臺灣(台灣) (886)</option><option value='853'>澳門 (853)</option><option value='65'>新加坡 (65)</option><option value='81'>日本 (81)</option><option value='66'>泰國 (66)</option><option value='60'>馬來西亞 (60)</option><option value='63'>菲律賓 (63)</option><option value='61'>澳大利亞(澳洲) (61)</option><option value='53'>聖誕島 (53)</option><option value='-830'>科科斯（基林）群島 (-830)</option><option value='1'>加拿大 (1)</option><option value='44'>英國 (44)</option><option value='1'>美國 (1)</option><option value='244'>安哥拉 (244)</option><option value='93'>阿富汗 (93)</option><option value='355'>阿爾巴尼亞 (355)</option><option value='213'>阿爾及利亞 (213)</option><option value='376'>安道爾 (376)</option><option value='-263'>安圭拉 / 安吉拉 (-263)</option><option value='-267'>安提瓜和巴布達 / 安地卡及巴布達 (-267)</option><option value='54'>阿根廷 (54)</option><option value='374'>亞美尼亞 (374)</option><option value='247'>阿森松島 / 亞森欣島 (247)</option><option value='43'>奧地利 (43)</option><option value='994'>阿塞拜疆 / 亞塞拜然 (994)</option><option value='-241'>巴哈馬 (-241)</option><option value='973'>巴林 (973)</option><option value='880'>孟加拉 (880)</option><option value='-245'>巴巴多斯 / 巴貝多 (-245)</option><option value='501'>伯利兹 / 貝里斯 (501)</option><option value='229'>貝寧 / 貝南 (229)</option><option value='-440'>百慕達 (-440)</option><option value='591'>玻利維亞 (591)</option><option value='267'>博茨瓦納 / 波札那 (267)</option><option value='55'>巴西 (55)</option><option value='673'>汶萊 (673)</option><option value='359'>保加利亞 (359)</option><option value='226'>布基納法索 / 布吉納法索 (226)</option><option value='95'>緬甸 (95)</option><option value='257'>布隆迪 / 蒲隆地 (257)</option><option value='237'>喀麥隆 (237)</option><option value='-344'>開曼群島 (-344)</option><option value='236'>中非共和國 (236)</option><option value='235'>乍得 / 查德 (235)</option><option value='56'>智利 (56)</option><option value='57'>哥倫比亞 (57)</option><option value='242'>民主剛果 (242)</option><option value='682'>庫克群島 (682)</option><option value='506'>哥斯達黎加 / 哥斯大黎加 (506)</option><option value='357'>塞浦路斯 / 賽普勒斯 (357)</option><option value='420'>捷克 (420)</option><option value='45'>丹麥 (45)</option><option value='253'>吉布提 / 吉布地 (253)</option><option value='-808'>多明尼加 / 多米尼加 (-808)</option><option value='593'>厄瓜多爾 / 厄瓜多 (593)</option><option value='20'>埃及 (20)</option><option value='503'>薩爾瓦多 (503)</option><option value='372'>愛沙尼亞 (372)</option><option value='251'>埃塞俄比亞 / 衣索比亞 (251)</option><option value='679'>斐濟 (679)</option><option value='358'>芬蘭 (358)</option><option value='33'>法國 (33)</option><option value='594'>法屬圭亞那 (594)</option><option value='241'>加蓬 / 加彭 (241)</option><option value='220'>岡比亞 / 甘比亞 (220)</option><option value='995'>喬治亞 / 格魯吉亞 (995)</option><option value='49'>德國 (49)</option><option value='233'>加納 / 迦納 (233)</option><option value='350'>直布羅陀 (350)</option><option value='30'>希臘 (30)</option><option value='-472'>格林納達 / 格瑞那達 (-472)</option><option value='-670'>關島 (-670)</option><option value='502'>危地馬拉 / 瓜地馬拉 (502)</option><option value='224'>畿內亞 / 幾內亞 (224)</option><option value='592'>圭亞那 / 蓋亞那 (592)</option><option value='509'>海地 (509)</option><option value='504'>洪都拉斯 / 宏都拉斯 (504)</option><option value='36'>匈牙利 (36)</option><option value='354'>冰島 (354)</option><option value='91'>印度 (91)</option><option value='62'>印度尼西亞(印尼) (62)</option><option value='964'>伊拉克 (964)</option><option value='353'>愛爾蘭 (353)</option><option value='972'>以色列 (972)</option><option value='39'>意大利 / 義大利 (39)</option><option value='225'>象牙海岸 / 科特迪瓦 (225)</option><option value='-875'>牙買加 (-875)</option><option value='962'>約旦 (962)</option><option value='855'>民主柬埔寨 / 柬埔寨 (855)</option><option value='7'>哈薩克 / 哈薩克斯坦 (7)</option><option value='254'>肯雅 / 肯亞 (254)</option><option value='82'>大韓民國(韓國/南韓) (82)</option><option value='47'>挪威 (47)</option><option value='968'>阿曼 (968)</option><option value='92'>巴基斯坦 (92)</option><option value='507'>巴拿馬 (507)</option><option value='675'>巴布亞新畿內亞 / 巴布亞紐幾內亞 (675)</option><option value='595'>巴拉圭 (595)</option><option value='51'>秘魯 (51)</option><option value='48'>波蘭 (48)</option><option value='689'>法屬波利尼西亞 / 法屬玻里尼西亞 (689)</option><option value='351'>葡萄牙 (351)</option><option value='-786'>波多黎各 (-786)</option><option value='974'>卡塔爾 / 卡達 (974)</option><option value='262'>留尼旺 (262)</option><option value='40'>羅馬尼亞 (40)</option><option value='32'>比利時 (32)</option><option value='965'>科威特 (965)</option><option value='996'>吉爾吉斯 (996)</option><option value='856'>寮國 / 老撾 (856)</option><option value='371'>拉脫維亞 (371)</option><option value='961'>黎巴嫩 (961)</option><option value='266'>萊索托 / 賴索托 (266)</option><option value='231'>利比里亞 / 賴比瑞亞 (231)</option><option value='218'>利比亞 (218)</option><option value='423'>列支敦斯登 (423)</option><option value='370'>立陶宛 (370)</option><option value='352'>盧森堡 (352)</option><option value='261'>馬達加斯加 (261)</option><option value='265'>馬拉維 / 馬拉威 (265)</option><option value='960'>馬爾代夫 / 馬爾地夫 (960)</option><option value='223'>馬里 / 馬利 (223)</option><option value='356'>馬爾他 / 馬耳他 (356)</option><option value='-669'>北馬利安納群島 / 北馬里亞納群島 (-669)</option><option value='596'>馬提尼克 / 馬丁尼克 (596)</option><option value='230'>毛里裘斯 / 模里西斯 (230)</option><option value='52'>墨西哥 (52)</option><option value='373'>摩爾多瓦 (373)</option><option value='377'>摩納哥 (377)</option><option value='212'>摩洛哥 (212)</option><option value='976'>蒙古 (976)</option><option value='-663'>蒙塞拉特島 / 蒙哲臘 (-663)</option><option value='258'>莫桑比克 / 莫三比克 (258)</option><option value='264'>納米比亞 (264)</option><option value='674'>瑙魯 / 諾魯 (674)</option><option value='977'>尼泊爾 (977)</option><option value='599'>荷屬安的列斯 / 荷屬安地列斯 (599)</option><option value='31'>荷蘭 (31)</option><option value='64'>紐西蘭 / 新西蘭 (64)</option><option value='505'>尼加拉瓜 (505)</option><option value='227'>尼日爾 / 尼日 (227)</option><option value='234'>尼日利亞 / 奈及利亞 (234)</option><option value='-757'>聖盧西亞 / 聖露西亞 (-757)</option><option value='-783'>聖文森特和格林納丁斯 (-783)</option><option value='-683'>美屬薩摩亞 / 東薩摩亞 (-683)</option><option value='685'>薩摩亞 (685)</option><option value='378'>聖馬利諾 (378)</option><option value='239'>聖多美及普林西比 (239)</option><option value='966'>沙特阿拉伯 / 沙烏地阿拉伯 (966)</option><option value='221'>塞內加爾 (221)</option><option value='248'>塞舌爾 / 塞席爾 (248)</option><option value='232'>塞拉利昂 / 獅子山 (232)</option><option value='421'>斯洛伐克 (421)</option><option value='386'>斯洛文尼亞 / 斯洛維尼亞 (386)</option><option value='677'>所羅門群島 / 索羅門群島 (677)</option><option value='252'>索馬里 / 索馬利亞 (252)</option><option value='27'>南非 (27)</option><option value='34'>西班牙 (34)</option><option value='94'>斯里蘭卡 (94)</option><option value='249'>蘇丹 (249)</option><option value='597'>蘇利南 (597)</option><option value='268'>斯威士蘭 / 史瓦濟蘭 (268)</option><option value='46'>瑞典 (46)</option><option value='41'>瑞士 (41)</option><option value='992'>塔吉克 (992)</option><option value='255'>坦桑尼亞 / 坦尚尼亞 (255)</option><option value='228'>多哥 (228)</option><option value='676'>湯加 / 東加 (676)</option><option value='-867'>千里達及多巴哥 / 千里達及托巴哥 (-867)</option><option value='216'>突尼斯 / 突尼西亞 (216)</option><option value='90'>土耳其 (90)</option><option value='993'>土庫曼斯坦 (993)</option><option value='256'>烏干達 (256)</option><option value='971'>阿拉伯聯合酋長國 (971)</option><option value='598'>烏拉圭 (598)</option><option value='998'>烏茲別克 / 烏茲別克斯坦 (998)</option><option value='84'>越南 (84)</option><option value='967'>也門 / 葉門 (967)</option><option value='38'>南斯拉夫社會主義聯邦共和國 (38)</option><option value='263'>津巴布韋 / 辛巴威 (263)</option><option value='243'>扎伊爾 / 薩伊 (243)</option><option value='243'>剛果 (243)</option><option value='260'>贊比亞 / 尚比亞 (260)</option><option value='44'>澤西 (44)</option><option value='-1437'>根西 (-1437)</option><option value='-1580'>萌島 / 曼島 (-1580)</option><option value='358'>奧蘭 / 阿赫韋南馬 (358)</option><option value='47'>斯瓦巴和揚馬延 (47)</option><option value='262'>馬約特 (262)</option><option value='-766'>多米尼克 (-766)</option><option value='382'>黑山 / 蒙特內哥羅 (382)</option><option value='-283'>英屬處女群島 / 英屬維京群島 (-283)</option><option value='-720'>荷屬聖馬丁 (-720)</option><option value='-868'>聖基茨和尼維斯 (-868)</option><option value='-648'>特克斯和凱科斯群島 / 土克凱可群島 (-648)</option><option value='-339'>美屬處女群島 / 美屬維京群島 (-339)</option><option value='211'>南蘇丹 (211)</option><option value='222'>毛里塔尼亞 / 茅利塔尼亞 (222)</option><option value='238'>維德角 (238)</option><option value='240'>赤道幾內亞 (240)</option><option value='245'>幾內亞比索 / 畿內亞比紹 (245)</option><option value='269'>科摩羅 / 葛摩 (269)</option><option value='290'>聖赫勒拿 / 聖赫倫那 (290)</option><option value='291'>厄立特里亞 / 厄利垂亞 (291)</option><option value='297'>阿魯巴 (297)</option><option value='298'>法羅群島 (298)</option><option value='299'>格陵蘭 (299)</option><option value='385'>克羅地亞 / 克羅埃西亞 (385)</option><option value='387'>波斯尼亞和黑塞哥維那(波黑) (387)</option><option value='389'>北馬其頓共和國 (389)</option><option value='508'>聖皮埃爾和密克隆群島 (508)</option><option value='590'>瓜德羅普 / 瓜地洛普 (590)</option><option value='590'>聖馬丁島 (590)</option><option value='590'>聖巴泰勒米 / 聖巴瑟米 (590)</option><option value='596'>聖尤斯特歇斯 / 聖佑達修斯 (596)</option><option value='595'>薩巴 / 荷屬沙巴 (595)</option><option value='592'>波奈 / 博奈爾 (592)</option><option value='590'>庫拉索 / 古拉索 (590)</option><option value='670'>東帝汶 (670)</option><option value='680'>帛琉 (680)</option><option value='681'>瓦利斯和富圖納 (681)</option><option value='683'>紐埃 (683)</option><option value='686'>基里巴斯 / 吉里巴斯 (686)</option><option value='687'>新喀里多尼亞 (687)</option><option value='688'>圖瓦盧 / 吐瓦魯 (688)</option><option value='690'>托克勞 (690)</option><option value='691'>密克羅尼西亞聯邦 (691)</option><option value='692'>馬紹爾群島 (692)</option><option value='975'>不丹 (975)</option><option value='381'>塞爾維亞共和國 (381)</option><option value='678'>瓦努阿圖 / 萬那杜 (678)</option><option value='500'>福克蘭群島（馬爾維納斯群島） (500)</option><option value='250'>盧安達（盧旺達） (250)</option><option value='379'>梵蒂岡 (379)</option>                                        </select>
                                    </div>
                                    <div class="col-lg-7 mb-3">
                                        <input type="tel" name="tel_home" class="tel_home form-control" pattern="[0-9]*" value="" placeholder="">
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">電郵地址<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="email" name="email[0]" class="form-control" value="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <button type="button" class="btn btn-primary btn-add-member mt-4">添加家庭成員</button>

            </div>

            <div class="col-lg-6 mb-3">
                <div class="bg-blue px-3 py-4">

                    <div class="row">
                        <div class="col-lg-12">
                            <h4>其他資料:</h4>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-3 mb-3">
                            <label class="form-label">您加入愛護動物協會的主要原因？</label>
                        </div>
                        <div class="col-lg-9 mb-3">
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="animal_adoption"> 領養動物</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="veterinary"> 獸醫服務(非緊急）</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="emergency_veterinary"> 24小時緊急獸醫服務</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="spay_neuter"> 為寵物絕育</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="members_benefits"> 使用協會會員優惠</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="support_mission"> 支持協會</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="learn_more"> 了解更多關於SPCA</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="become_volunteer"> 有興趣成為義工</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="participate_fundraising"> 有興趣參與協會籌款活動</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="participate_educational"> 有興趣參與協會所舉辦的教育活動及講座</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="training_course"> 參與協會所舉辦的動物行為訓練班</div>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-3 mb-3">
                            <label class="form-label">您現時飼養了多少頭寵物？</label>
                        </div>
                        <div class="col-lg-9 mb-3">
                            <div class="row g-2">
                                <div class="col-lg-4">
                                    狗                                    <input type="number" name="num_dogs" class="form-control" value="0" step="1" min="0" />
                                </div>
                                <div class="col-lg-4">
                                    貓                                    <input type="number" name="num_cats" class="form-control" value="0" step="1" min="0" />
                                </div>
                                <div class="col-lg-4">
                                    其他                                    <input type="number" name="num_others" class="form-control" value="0" step="1" min="0" / >
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <h4>聲明</h4>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-12 mb-3">
                            <ol>
                                <li>本人/我們確認就有關本表格提供之資料均屬真實和完整。</li>
                                <li>本人/我們已閱讀及理解愛護動物協會有關<< 個人資料(私隱)條例>>(<a href="https://www.spca.org.hk/ch/privacy-policy" target="_blank">https://www.spca.org.hk/ch/privacy-policy</a>) 的收集個人資料聲明之內容, 並謹此同意愛護動物協會可根據其所述的用途及方式取得、處理、使用、披露及/或轉移 本人的個人資料。</li>
                                <li>本人/我們已閱讀、明白及同意遵守愛護動物協會會籍的守則及條款 (<a href="www.bit.ly/3WR8dYk" target="_blank">www.bit.ly/3WR8dYk</a>)，並申請成為協會會員。</li>
                            </ol>

                            <div class="form-check d-inline-block ps-0">
                                <input type="checkbox" name="ck_agree" class="ck_agree" value="1" id="ck_agree" required>
                                <label class="form-check-label" for="ck_agree">同意</label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-12 mb-3">
                <div class="d-block">
                    *請選擇通訊語言:
                    <div class="form-check d-inline-block ps-3">
                        <input type="radio" name="rdo_lang" id="rdo_lang_chi" value="chi">
                        <label class="form-check-label" for="rdo_lang_chi">中文</label>
                    </div>
                    <div class="form-check d-inline-block ps-3">
                        <input type="radio" name="rdo_lang" id="rdo_lang_eng" value="eng" checked>
                        <label class="form-check-label" for="rdo_lang_eng">英文</label>
                    </div>
                </div>
                <div class="d-block">
                    <input type="checkbox" name="ck_promo" value="1" checked />  本人願意收取愛護動物協會的直接行銷通訊（如最新推廣優惠及活動等）                </div>
            </div>
            <div class="col-lg-12 text-center">
                <input type="hidden" name="action" value="ajax_submit_membership_renewal"/>
                <button type="submit" class="btn btn-submit px-5">支付</button>
            </div>
        </div>
    </form>
</div>

<script>
    (function($) {
        var rowNum = 0;
        var memberType = 'annual';

        $(".rdo_member_type").click(function(){
            memberType = $(this).val();
            console.log('memberType: ' + memberType);
            updatePlan();
        });

        function updatePlan() {
            if (memberType == 'annual') {
                rowNum = 0;
                $(".member-row").remove();
                $(".btn-add-member").hide();
                $(".sel_plan").html('<option value="">Please select</option> <option value="1">1 Year ($250)</option> <option value="2">2 Years ($520)</option> <option value="3">3 Years ($700)</option>');
                setTimeout(function(){
                    $(".accordion-button[data-bs-target='#collapse0']").trigger("click");
                    console.log('#collapse0: Click');
                }, 2000);

            }else{
                $(".btn-add-member").show();
                $(".sel_plan").html('<option value="">Please select</option> <option value="1">1 Year ($400)</option> <option value="2">2 Years ($800)</option> <option value="3">3 Years ($1050)</option>');
            }
        }

        $(".btn-add-member").click(function(){
            if (rowNum < 3) {
                rowNum++;
                addMemberRow(rowNum);
            }else{
                alert('Only 4 members only. \n最多只可以4位會員。')
            }
        });

        function addMemberRow(rowNum) {
            console.log('addMemberRow : ' + rowNum);
            $.ajax({
                async: false,
                type: "POST",
                url: "/no-admin-ajax/",
                data: {
                    'action': 'ajax_add_member_row',
                    'row': rowNum,
                },
                success: function(data){
                    //console.log(data);
                    $("#accordionMembers").append(data);
                }
            });
        }

        updatePlan();

        /*-------------------*/
        // // Function to calculate age based on DOB
        // function calculateAge(day, month, year) {
        //     var today = new Date(); // Use current date dynamically
        //     var birthDate = new Date(year, month - 1, day);
        //     var age = today.getFullYear() - birthDate.getFullYear();
        //     var monthDiff = today.getMonth() - birthDate.getMonth();
        //
        //     // Adjust age if birthday hasn't occurred this year
        //     if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        //         age--;
        //     }
        //     return age;
        // }
        //
        // // Function to validate a single DOB set
        // function validateDOBSet($daySelect, $monthSelect, $yearSelect, index) {
        //     var day = $daySelect.val();
        //     var month = $monthSelect.val();
        //     var year = $yearSelect.val();
        //
        //     // Only validate if all fields are selected
        //     if (day && month && year) {
        //         var age = calculateAge(parseInt(day), parseInt(month), parseInt(year));
        //         if (age < 16) {
        //             // Reset the select fields
        //             $daySelect.val('');
        //             $monthSelect.val('');
        //             $yearSelect.val('');
        //             // Show alert
        //             alert('只允許16歲或以上的人加入\nOnly allow 16 years old or above people to join');
        //         }
        //     }
        // }
        //
        // function attachValidation(index) {
        //     var $daySelect = $(this).find('select[name="sel_dob_day[' + index + ']"]');
        //     var $monthSelect = $(this).find('select[name="sel_dob_month[' + index + ']"]');
        //     var $yearSelect = $(this).find('select[name="sel_dob_year[' + index + ']"]');
        //
        //     // Validate on change of any select field
        //     $daySelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        //     $monthSelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        //     $yearSelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        // }
        //
        // attachValidation(0);

        // Function to validate age for a specific DOB group
        function validateAge($daySelect, $monthSelect, $yearSelect) {
            var day = $daySelect.val();
            var month = $monthSelect.val();
            var year = $yearSelect.val();

            // Check if all fields are filled
            if (day && month && year) {
                var today = new Date(); // Current date as per requirement
                var birthDate = new Date(year, month - 1, day); // Month is 0-indexed in JS
                var age = today.getFullYear() - birthDate.getFullYear();
                var monthDiff = today.getMonth() - birthDate.getMonth();

                // Adjust age if birthday hasn't occurred this year
                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                    age--;
                }

                // Check if age is less than 16
                if (age < 16) {
                    alert('只允許16歲或以上的人加入\nOnly allow 16 years old or above people to join');
                    // Reset the select fields
                    $daySelect.val('');
                    $monthSelect.val('');
                    $yearSelect.val('');
                }
            }
        }

        // Event delegation for dynamically added DOB fields
        $(document).on('change', 'select[name^="sel_dob_day"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1]; // Extract index from name
            var $daySelect = $(this);
            var $monthSelect = $('select[name="sel_dob_month[' + index + ']"]');
            var $yearSelect = $('select[name="sel_dob_year[' + index + ']"]');
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

        $(document).on('change', 'select[name^="sel_dob_month"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1];
            var $daySelect = $('select[name="sel_dob_day[' + index + ']"]');
            var $monthSelect = $(this);
            var $yearSelect = $('select[name="sel_dob_year[' + index + ']"]');
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

        $(document).on('change', 'select[name^="sel_dob_year"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1];
            var $daySelect = $('select[name="sel_dob_day[' + index + ']"]');
            var $monthSelect = $('select[name="sel_dob_month[' + index + ']"]');
            var $yearSelect = $(this);
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

    })( jQuery );
</script>
<div id="member-renewal-form-container">
    <form id="form-membership-renewal" method="post">
        <div class="row">
            <div class="col-lg-6 pt-4 mb-3">
                <div class="row">
                    <div class="col-lg-6">
                        <h4>會籍類別:</h4>
                    </div>
                    <div class="col-lg-6 text-lg-end">
                        *必須填寫                    </div>
                </div>

                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">類別<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <div class="d-block">
                            <div class="form-check d-inline-block ps-0">
                                <input type="radio" name="rdo_type" class="rdo_type" value="renew" id="rdo_type_renew" checked="">
                                <label class="form-check-label" for="rdo_hk_address_yes">續會</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">會員編號.</label></div>
                    <div class="col-lg-8">
                        <input type="text" name="txt_member_no" class="form-control" value="" placeholder="" />
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">會籍類別<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <div class="d-block">
                            <div class="form-check d-inline-block ps-0">
                                <input type="radio" name="rdo_member_type" class="rdo_member_type" value="annual" id="rdo_member_type_annual" checked >
                                <label class="form-check-label" for="rdo_member_type_annual">成年會員</label>
                            </div>
                            <div class="form-check d-inline-block ps-3">
                                <input type="radio" name="rdo_member_type" class="rdo_member_type" value="family" id="rdo_member_type_family"   >
                                <label class="form-check-label" for="rdo_member_type_family">家庭會籍</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-lg-4"><label class="form-label">選擇會籍年期<span class="red">*</span></label></div>
                    <div class="col-lg-8">
                        <select name="sel_plan" class="sel_plan form-control" required>
                        </select>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-lg-12">
                        <h4>個人資料:</h4>
                    </div>
                </div>

                <div class="accordion" id="accordionMembers">
                    <div class="accordion-item main-row">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse0" aria-expanded="true" aria-controls="collapseOne">
                                個人資料:
                            </button>
                        </h2>
                        <div id="collapse0" class="accordion-collapse collapse show" data-bs-parent="#accordionMembers">
                            <div class="accordion-body">
                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">全名<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <select name="sel_title[0]" class="form-control" required>
                                            <option value="mr" selected>先生</option>
                                            <option value="mrs">太太</option>
                                            <option value="ms">小姐</option>
                                            <option value="dr">博士</option>
                                            <option value="prof">教授</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <input type="text" name="txt_surname[0]" class="form-control" value="" placeholder="姓氏" required>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <input type="text" name="txt_given_name[0]" class="form-control" value=""  placeholder="名字" required>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">中文姓名</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_chi_name[0]" class="form-control" value="" placeholder="(如適用)">
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">證件類型<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <div class="d-block">
                                            <div class="form-check d-inline-block ps-0">
                                                <input type="radio" name="rdo_id_type[0]" class="rdo_id_type" value="hkid" checked="">
                                                <label class="form-check-label" for="rdo_hk_address_yes">香港身份證號碼</label>
                                            </div>
                                            <div class="form-check d-inline-block ps-3">
                                                <input type="radio" name="rdo_id_type[0]" class="rdo_id_type" value="passport" >
                                                <label class="form-check-label" for="rdo_hk_address_no">護照</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2 hkid-row">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">香港身份證號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_hkid[0]" class="txt_hkid form-control" placeholder="" required>
                                        <div class="form-text">香港身份證首四個字符（包括字母）例如 : A345</div>
                                    </div>
                                </div>

                                <div class="row g-2 passport-row" style="display: none;" >
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">護照號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_passport[0]" class="txt_passport form-control" placeholder="" disabled required>
                                        <div class="form-text">護照號碼首四個字</div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">出生日期<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 align-self-center mb-3">
                                        <div class="row g-2">
                                            <div class="col-lg-4">
                                                <select name="sel_dob_day[0]" class="form-control" required>
                                                    <option value="">--日--</option>
                                                    <option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option><option value='29'>29</option><option value='30'>30</option><option value='31'>31</option>                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <select name="sel_dob_month[0]" class="form-control" required>
                                                    <option value="">--月--</option>
                                                    <option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <select name="sel_dob_year[0]" class="form-control" required>
                                                    <option value="">--年--</option>
                                                    <option value='2010'>2010</option><option value='2009'>2009</option><option value='2008'>2008</option><option value='2007'>2007</option><option value='2006'>2006</option><option value='2005'>2005</option><option value='2004'>2004</option><option value='2003'>2003</option><option value='2002'>2002</option><option value='2001'>2001</option><option value='2000'>2000</option><option value='1999'>1999</option><option value='1998'>1998</option><option value='1997'>1997</option><option value='1996'>1996</option><option value='1995'>1995</option><option value='1994'>1994</option><option value='1993'>1993</option><option value='1992'>1992</option><option value='1991'>1991</option><option value='1990'>1990</option><option value='1989'>1989</option><option value='1988'>1988</option><option value='1987'>1987</option><option value='1986'>1986</option><option value='1985'>1985</option><option value='1984'>1984</option><option value='1983'>1983</option><option value='1982'>1982</option><option value='1981'>1981</option><option value='1980'>1980</option><option value='1979'>1979</option><option value='1978'>1978</option><option value='1977'>1977</option><option value='1976'>1976</option><option value='1975'>1975</option><option value='1974'>1974</option><option value='1973'>1973</option><option value='1972'>1972</option><option value='1971'>1971</option><option value='1970'>1970</option><option value='1969'>1969</option><option value='1968'>1968</option><option value='1967'>1967</option><option value='1966'>1966</option><option value='1965'>1965</option><option value='1964'>1964</option><option value='1963'>1963</option><option value='1962'>1962</option><option value='1961'>1961</option><option value='1960'>1960</option><option value='1959'>1959</option><option value='1958'>1958</option><option value='1957'>1957</option><option value='1956'>1956</option><option value='1955'>1955</option><option value='1954'>1954</option><option value='1953'>1953</option><option value='1952'>1952</option><option value='1951'>1951</option><option value='1950'>1950</option><option value='1949'>1949</option><option value='1948'>1948</option><option value='1947'>1947</option><option value='1946'>1946</option><option value='1945'>1945</option><option value='1944'>1944</option><option value='1943'>1943</option><option value='1942'>1942</option><option value='1941'>1941</option><option value='1940'>1940</option><option value='1939'>1939</option><option value='1938'>1938</option><option value='1937'>1937</option><option value='1936'>1936</option><option value='1935'>1935</option><option value='1934'>1934</option><option value='1933'>1933</option><option value='1932'>1932</option><option value='1931'>1931</option><option value='1930'>1930</option>                                                </select>
                                            </div>
                                            <div class="form-text">只允許16歲或以上的人加入</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">聯絡地址</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <div class="row g-2">
                                            <div class="col-lg-4"><input type="text" name="txt_unit" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-4"><input type="text" name="txt_floor" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-4"><input type="text" name="txt_block" class="form-control mb-2" placeholder=""></div>
                                            <div class="col-lg-12"><input type="text" name="txt_address_1" class="form-control mb-2" placeholder="大廈名稱"></div>
                                            <div class="col-lg-12"><input type="text" name="txt_address_2" class="form-control mb-2" placeholder="街道/ 屋邨/ 鄉村名稱及門牌號數"></div>
                                            <div class="col-lg-12">
                                                <select name="sel_district" class="form-control">
                                                    <option value="" selected>請選擇</option>
                                                    <option value="中西區">中西區</option>
                                                    <option value="東區">東區</option>
                                                    <option value="離島區">離島區</option>
                                                    <option value="九龍城區">九龍城區</option>
                                                    <option value="葵青區">葵青區</option>
                                                    <option value="觀塘區">觀塘區</option>
                                                    <option value="北區">北區</option>
                                                    <option value="西貢區">西貢區</option>
                                                    <option value="沙田區">沙田區</option>
                                                    <option value="深水埗區">深水埗區</option>
                                                    <option value="南區">南區</option>
                                                    <option value="大埔區">大埔區</option>
                                                    <option value="荃灣區">荃灣區</option>
                                                    <option value="屯門區">屯門區</option>
                                                    <option value="灣仔區">灣仔區</option>
                                                    <option value="黃大仙區">黃大仙區</option>
                                                    <option value="油尖旺區">油尖旺區</option>
                                                    <option value="元朗區">元朗區</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">海外地址</label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="text" name="txt_oversea_address" id="txt_oversea_address" class="form-control" value="" />
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">手提電話號碼<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-2 mb-3">
                                        <select name="tel_code_mobile[0]" class="tel_code_mobile form-control" data-row-index="0" required>
                                            <option value="">請選擇</option>
                                            <option value='852'>香港 (852)</option><option value='86'>中國 (86)</option><option value='886'>臺灣(台灣) (886)</option><option value='853'>澳門 (853)</option><option value='65'>新加坡 (65)</option><option value='81'>日本 (81)</option><option value='66'>泰國 (66)</option><option value='60'>馬來西亞 (60)</option><option value='63'>菲律賓 (63)</option><option value='61'>澳大利亞(澳洲) (61)</option><option value='53'>聖誕島 (53)</option><option value='-830'>科科斯（基林）群島 (-830)</option><option value='1'>加拿大 (1)</option><option value='44'>英國 (44)</option><option value='1'>美國 (1)</option><option value='244'>安哥拉 (244)</option><option value='93'>阿富汗 (93)</option><option value='355'>阿爾巴尼亞 (355)</option><option value='213'>阿爾及利亞 (213)</option><option value='376'>安道爾 (376)</option><option value='-263'>安圭拉 / 安吉拉 (-263)</option><option value='-267'>安提瓜和巴布達 / 安地卡及巴布達 (-267)</option><option value='54'>阿根廷 (54)</option><option value='374'>亞美尼亞 (374)</option><option value='247'>阿森松島 / 亞森欣島 (247)</option><option value='43'>奧地利 (43)</option><option value='994'>阿塞拜疆 / 亞塞拜然 (994)</option><option value='-241'>巴哈馬 (-241)</option><option value='973'>巴林 (973)</option><option value='880'>孟加拉 (880)</option><option value='-245'>巴巴多斯 / 巴貝多 (-245)</option><option value='501'>伯利兹 / 貝里斯 (501)</option><option value='229'>貝寧 / 貝南 (229)</option><option value='-440'>百慕達 (-440)</option><option value='591'>玻利維亞 (591)</option><option value='267'>博茨瓦納 / 波札那 (267)</option><option value='55'>巴西 (55)</option><option value='673'>汶萊 (673)</option><option value='359'>保加利亞 (359)</option><option value='226'>布基納法索 / 布吉納法索 (226)</option><option value='95'>緬甸 (95)</option><option value='257'>布隆迪 / 蒲隆地 (257)</option><option value='237'>喀麥隆 (237)</option><option value='-344'>開曼群島 (-344)</option><option value='236'>中非共和國 (236)</option><option value='235'>乍得 / 查德 (235)</option><option value='56'>智利 (56)</option><option value='57'>哥倫比亞 (57)</option><option value='242'>民主剛果 (242)</option><option value='682'>庫克群島 (682)</option><option value='506'>哥斯達黎加 / 哥斯大黎加 (506)</option><option value='357'>塞浦路斯 / 賽普勒斯 (357)</option><option value='420'>捷克 (420)</option><option value='45'>丹麥 (45)</option><option value='253'>吉布提 / 吉布地 (253)</option><option value='-808'>多明尼加 / 多米尼加 (-808)</option><option value='593'>厄瓜多爾 / 厄瓜多 (593)</option><option value='20'>埃及 (20)</option><option value='503'>薩爾瓦多 (503)</option><option value='372'>愛沙尼亞 (372)</option><option value='251'>埃塞俄比亞 / 衣索比亞 (251)</option><option value='679'>斐濟 (679)</option><option value='358'>芬蘭 (358)</option><option value='33'>法國 (33)</option><option value='594'>法屬圭亞那 (594)</option><option value='241'>加蓬 / 加彭 (241)</option><option value='220'>岡比亞 / 甘比亞 (220)</option><option value='995'>喬治亞 / 格魯吉亞 (995)</option><option value='49'>德國 (49)</option><option value='233'>加納 / 迦納 (233)</option><option value='350'>直布羅陀 (350)</option><option value='30'>希臘 (30)</option><option value='-472'>格林納達 / 格瑞那達 (-472)</option><option value='-670'>關島 (-670)</option><option value='502'>危地馬拉 / 瓜地馬拉 (502)</option><option value='224'>畿內亞 / 幾內亞 (224)</option><option value='592'>圭亞那 / 蓋亞那 (592)</option><option value='509'>海地 (509)</option><option value='504'>洪都拉斯 / 宏都拉斯 (504)</option><option value='36'>匈牙利 (36)</option><option value='354'>冰島 (354)</option><option value='91'>印度 (91)</option><option value='62'>印度尼西亞(印尼) (62)</option><option value='964'>伊拉克 (964)</option><option value='353'>愛爾蘭 (353)</option><option value='972'>以色列 (972)</option><option value='39'>意大利 / 義大利 (39)</option><option value='225'>象牙海岸 / 科特迪瓦 (225)</option><option value='-875'>牙買加 (-875)</option><option value='962'>約旦 (962)</option><option value='855'>民主柬埔寨 / 柬埔寨 (855)</option><option value='7'>哈薩克 / 哈薩克斯坦 (7)</option><option value='254'>肯雅 / 肯亞 (254)</option><option value='82'>大韓民國(韓國/南韓) (82)</option><option value='47'>挪威 (47)</option><option value='968'>阿曼 (968)</option><option value='92'>巴基斯坦 (92)</option><option value='507'>巴拿馬 (507)</option><option value='675'>巴布亞新畿內亞 / 巴布亞紐幾內亞 (675)</option><option value='595'>巴拉圭 (595)</option><option value='51'>秘魯 (51)</option><option value='48'>波蘭 (48)</option><option value='689'>法屬波利尼西亞 / 法屬玻里尼西亞 (689)</option><option value='351'>葡萄牙 (351)</option><option value='-786'>波多黎各 (-786)</option><option value='974'>卡塔爾 / 卡達 (974)</option><option value='262'>留尼旺 (262)</option><option value='40'>羅馬尼亞 (40)</option><option value='32'>比利時 (32)</option><option value='965'>科威特 (965)</option><option value='996'>吉爾吉斯 (996)</option><option value='856'>寮國 / 老撾 (856)</option><option value='371'>拉脫維亞 (371)</option><option value='961'>黎巴嫩 (961)</option><option value='266'>萊索托 / 賴索托 (266)</option><option value='231'>利比里亞 / 賴比瑞亞 (231)</option><option value='218'>利比亞 (218)</option><option value='423'>列支敦斯登 (423)</option><option value='370'>立陶宛 (370)</option><option value='352'>盧森堡 (352)</option><option value='261'>馬達加斯加 (261)</option><option value='265'>馬拉維 / 馬拉威 (265)</option><option value='960'>馬爾代夫 / 馬爾地夫 (960)</option><option value='223'>馬里 / 馬利 (223)</option><option value='356'>馬爾他 / 馬耳他 (356)</option><option value='-669'>北馬利安納群島 / 北馬里亞納群島 (-669)</option><option value='596'>馬提尼克 / 馬丁尼克 (596)</option><option value='230'>毛里裘斯 / 模里西斯 (230)</option><option value='52'>墨西哥 (52)</option><option value='373'>摩爾多瓦 (373)</option><option value='377'>摩納哥 (377)</option><option value='212'>摩洛哥 (212)</option><option value='976'>蒙古 (976)</option><option value='-663'>蒙塞拉特島 / 蒙哲臘 (-663)</option><option value='258'>莫桑比克 / 莫三比克 (258)</option><option value='264'>納米比亞 (264)</option><option value='674'>瑙魯 / 諾魯 (674)</option><option value='977'>尼泊爾 (977)</option><option value='599'>荷屬安的列斯 / 荷屬安地列斯 (599)</option><option value='31'>荷蘭 (31)</option><option value='64'>紐西蘭 / 新西蘭 (64)</option><option value='505'>尼加拉瓜 (505)</option><option value='227'>尼日爾 / 尼日 (227)</option><option value='234'>尼日利亞 / 奈及利亞 (234)</option><option value='-757'>聖盧西亞 / 聖露西亞 (-757)</option><option value='-783'>聖文森特和格林納丁斯 (-783)</option><option value='-683'>美屬薩摩亞 / 東薩摩亞 (-683)</option><option value='685'>薩摩亞 (685)</option><option value='378'>聖馬利諾 (378)</option><option value='239'>聖多美及普林西比 (239)</option><option value='966'>沙特阿拉伯 / 沙烏地阿拉伯 (966)</option><option value='221'>塞內加爾 (221)</option><option value='248'>塞舌爾 / 塞席爾 (248)</option><option value='232'>塞拉利昂 / 獅子山 (232)</option><option value='421'>斯洛伐克 (421)</option><option value='386'>斯洛文尼亞 / 斯洛維尼亞 (386)</option><option value='677'>所羅門群島 / 索羅門群島 (677)</option><option value='252'>索馬里 / 索馬利亞 (252)</option><option value='27'>南非 (27)</option><option value='34'>西班牙 (34)</option><option value='94'>斯里蘭卡 (94)</option><option value='249'>蘇丹 (249)</option><option value='597'>蘇利南 (597)</option><option value='268'>斯威士蘭 / 史瓦濟蘭 (268)</option><option value='46'>瑞典 (46)</option><option value='41'>瑞士 (41)</option><option value='992'>塔吉克 (992)</option><option value='255'>坦桑尼亞 / 坦尚尼亞 (255)</option><option value='228'>多哥 (228)</option><option value='676'>湯加 / 東加 (676)</option><option value='-867'>千里達及多巴哥 / 千里達及托巴哥 (-867)</option><option value='216'>突尼斯 / 突尼西亞 (216)</option><option value='90'>土耳其 (90)</option><option value='993'>土庫曼斯坦 (993)</option><option value='256'>烏干達 (256)</option><option value='971'>阿拉伯聯合酋長國 (971)</option><option value='598'>烏拉圭 (598)</option><option value='998'>烏茲別克 / 烏茲別克斯坦 (998)</option><option value='84'>越南 (84)</option><option value='967'>也門 / 葉門 (967)</option><option value='38'>南斯拉夫社會主義聯邦共和國 (38)</option><option value='263'>津巴布韋 / 辛巴威 (263)</option><option value='243'>扎伊爾 / 薩伊 (243)</option><option value='243'>剛果 (243)</option><option value='260'>贊比亞 / 尚比亞 (260)</option><option value='44'>澤西 (44)</option><option value='-1437'>根西 (-1437)</option><option value='-1580'>萌島 / 曼島 (-1580)</option><option value='358'>奧蘭 / 阿赫韋南馬 (358)</option><option value='47'>斯瓦巴和揚馬延 (47)</option><option value='262'>馬約特 (262)</option><option value='-766'>多米尼克 (-766)</option><option value='382'>黑山 / 蒙特內哥羅 (382)</option><option value='-283'>英屬處女群島 / 英屬維京群島 (-283)</option><option value='-720'>荷屬聖馬丁 (-720)</option><option value='-868'>聖基茨和尼維斯 (-868)</option><option value='-648'>特克斯和凱科斯群島 / 土克凱可群島 (-648)</option><option value='-339'>美屬處女群島 / 美屬維京群島 (-339)</option><option value='211'>南蘇丹 (211)</option><option value='222'>毛里塔尼亞 / 茅利塔尼亞 (222)</option><option value='238'>維德角 (238)</option><option value='240'>赤道幾內亞 (240)</option><option value='245'>幾內亞比索 / 畿內亞比紹 (245)</option><option value='269'>科摩羅 / 葛摩 (269)</option><option value='290'>聖赫勒拿 / 聖赫倫那 (290)</option><option value='291'>厄立特里亞 / 厄利垂亞 (291)</option><option value='297'>阿魯巴 (297)</option><option value='298'>法羅群島 (298)</option><option value='299'>格陵蘭 (299)</option><option value='385'>克羅地亞 / 克羅埃西亞 (385)</option><option value='387'>波斯尼亞和黑塞哥維那(波黑) (387)</option><option value='389'>北馬其頓共和國 (389)</option><option value='508'>聖皮埃爾和密克隆群島 (508)</option><option value='590'>瓜德羅普 / 瓜地洛普 (590)</option><option value='590'>聖馬丁島 (590)</option><option value='590'>聖巴泰勒米 / 聖巴瑟米 (590)</option><option value='596'>聖尤斯特歇斯 / 聖佑達修斯 (596)</option><option value='595'>薩巴 / 荷屬沙巴 (595)</option><option value='592'>波奈 / 博奈爾 (592)</option><option value='590'>庫拉索 / 古拉索 (590)</option><option value='670'>東帝汶 (670)</option><option value='680'>帛琉 (680)</option><option value='681'>瓦利斯和富圖納 (681)</option><option value='683'>紐埃 (683)</option><option value='686'>基里巴斯 / 吉里巴斯 (686)</option><option value='687'>新喀里多尼亞 (687)</option><option value='688'>圖瓦盧 / 吐瓦魯 (688)</option><option value='690'>托克勞 (690)</option><option value='691'>密克羅尼西亞聯邦 (691)</option><option value='692'>馬紹爾群島 (692)</option><option value='975'>不丹 (975)</option><option value='381'>塞爾維亞共和國 (381)</option><option value='678'>瓦努阿圖 / 萬那杜 (678)</option><option value='500'>福克蘭群島（馬爾維納斯群島） (500)</option><option value='250'>盧安達（盧旺達） (250)</option><option value='379'>梵蒂岡 (379)</option>                                        </select>
                                    </div>
                                    <div class="col-lg-7 mb-3">
                                        <input type="tel" name="tel_mobile[0]" class="tel_mobile form-control" pattern="[0-9]*" value="" placeholder="" required>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">家庭電話號碼</label>
                                    </div>
                                    <div class="col-lg-2 mb-3">
                                        <select name="tel_code_home" class="tel_code_home form-control">
                                            <option value="">請選擇</option>
                                            <option value='852'>香港 (852)</option><option value='86'>中國 (86)</option><option value='886'>臺灣(台灣) (886)</option><option value='853'>澳門 (853)</option><option value='65'>新加坡 (65)</option><option value='81'>日本 (81)</option><option value='66'>泰國 (66)</option><option value='60'>馬來西亞 (60)</option><option value='63'>菲律賓 (63)</option><option value='61'>澳大利亞(澳洲) (61)</option><option value='53'>聖誕島 (53)</option><option value='-830'>科科斯（基林）群島 (-830)</option><option value='1'>加拿大 (1)</option><option value='44'>英國 (44)</option><option value='1'>美國 (1)</option><option value='244'>安哥拉 (244)</option><option value='93'>阿富汗 (93)</option><option value='355'>阿爾巴尼亞 (355)</option><option value='213'>阿爾及利亞 (213)</option><option value='376'>安道爾 (376)</option><option value='-263'>安圭拉 / 安吉拉 (-263)</option><option value='-267'>安提瓜和巴布達 / 安地卡及巴布達 (-267)</option><option value='54'>阿根廷 (54)</option><option value='374'>亞美尼亞 (374)</option><option value='247'>阿森松島 / 亞森欣島 (247)</option><option value='43'>奧地利 (43)</option><option value='994'>阿塞拜疆 / 亞塞拜然 (994)</option><option value='-241'>巴哈馬 (-241)</option><option value='973'>巴林 (973)</option><option value='880'>孟加拉 (880)</option><option value='-245'>巴巴多斯 / 巴貝多 (-245)</option><option value='501'>伯利兹 / 貝里斯 (501)</option><option value='229'>貝寧 / 貝南 (229)</option><option value='-440'>百慕達 (-440)</option><option value='591'>玻利維亞 (591)</option><option value='267'>博茨瓦納 / 波札那 (267)</option><option value='55'>巴西 (55)</option><option value='673'>汶萊 (673)</option><option value='359'>保加利亞 (359)</option><option value='226'>布基納法索 / 布吉納法索 (226)</option><option value='95'>緬甸 (95)</option><option value='257'>布隆迪 / 蒲隆地 (257)</option><option value='237'>喀麥隆 (237)</option><option value='-344'>開曼群島 (-344)</option><option value='236'>中非共和國 (236)</option><option value='235'>乍得 / 查德 (235)</option><option value='56'>智利 (56)</option><option value='57'>哥倫比亞 (57)</option><option value='242'>民主剛果 (242)</option><option value='682'>庫克群島 (682)</option><option value='506'>哥斯達黎加 / 哥斯大黎加 (506)</option><option value='357'>塞浦路斯 / 賽普勒斯 (357)</option><option value='420'>捷克 (420)</option><option value='45'>丹麥 (45)</option><option value='253'>吉布提 / 吉布地 (253)</option><option value='-808'>多明尼加 / 多米尼加 (-808)</option><option value='593'>厄瓜多爾 / 厄瓜多 (593)</option><option value='20'>埃及 (20)</option><option value='503'>薩爾瓦多 (503)</option><option value='372'>愛沙尼亞 (372)</option><option value='251'>埃塞俄比亞 / 衣索比亞 (251)</option><option value='679'>斐濟 (679)</option><option value='358'>芬蘭 (358)</option><option value='33'>法國 (33)</option><option value='594'>法屬圭亞那 (594)</option><option value='241'>加蓬 / 加彭 (241)</option><option value='220'>岡比亞 / 甘比亞 (220)</option><option value='995'>喬治亞 / 格魯吉亞 (995)</option><option value='49'>德國 (49)</option><option value='233'>加納 / 迦納 (233)</option><option value='350'>直布羅陀 (350)</option><option value='30'>希臘 (30)</option><option value='-472'>格林納達 / 格瑞那達 (-472)</option><option value='-670'>關島 (-670)</option><option value='502'>危地馬拉 / 瓜地馬拉 (502)</option><option value='224'>畿內亞 / 幾內亞 (224)</option><option value='592'>圭亞那 / 蓋亞那 (592)</option><option value='509'>海地 (509)</option><option value='504'>洪都拉斯 / 宏都拉斯 (504)</option><option value='36'>匈牙利 (36)</option><option value='354'>冰島 (354)</option><option value='91'>印度 (91)</option><option value='62'>印度尼西亞(印尼) (62)</option><option value='964'>伊拉克 (964)</option><option value='353'>愛爾蘭 (353)</option><option value='972'>以色列 (972)</option><option value='39'>意大利 / 義大利 (39)</option><option value='225'>象牙海岸 / 科特迪瓦 (225)</option><option value='-875'>牙買加 (-875)</option><option value='962'>約旦 (962)</option><option value='855'>民主柬埔寨 / 柬埔寨 (855)</option><option value='7'>哈薩克 / 哈薩克斯坦 (7)</option><option value='254'>肯雅 / 肯亞 (254)</option><option value='82'>大韓民國(韓國/南韓) (82)</option><option value='47'>挪威 (47)</option><option value='968'>阿曼 (968)</option><option value='92'>巴基斯坦 (92)</option><option value='507'>巴拿馬 (507)</option><option value='675'>巴布亞新畿內亞 / 巴布亞紐幾內亞 (675)</option><option value='595'>巴拉圭 (595)</option><option value='51'>秘魯 (51)</option><option value='48'>波蘭 (48)</option><option value='689'>法屬波利尼西亞 / 法屬玻里尼西亞 (689)</option><option value='351'>葡萄牙 (351)</option><option value='-786'>波多黎各 (-786)</option><option value='974'>卡塔爾 / 卡達 (974)</option><option value='262'>留尼旺 (262)</option><option value='40'>羅馬尼亞 (40)</option><option value='32'>比利時 (32)</option><option value='965'>科威特 (965)</option><option value='996'>吉爾吉斯 (996)</option><option value='856'>寮國 / 老撾 (856)</option><option value='371'>拉脫維亞 (371)</option><option value='961'>黎巴嫩 (961)</option><option value='266'>萊索托 / 賴索托 (266)</option><option value='231'>利比里亞 / 賴比瑞亞 (231)</option><option value='218'>利比亞 (218)</option><option value='423'>列支敦斯登 (423)</option><option value='370'>立陶宛 (370)</option><option value='352'>盧森堡 (352)</option><option value='261'>馬達加斯加 (261)</option><option value='265'>馬拉維 / 馬拉威 (265)</option><option value='960'>馬爾代夫 / 馬爾地夫 (960)</option><option value='223'>馬里 / 馬利 (223)</option><option value='356'>馬爾他 / 馬耳他 (356)</option><option value='-669'>北馬利安納群島 / 北馬里亞納群島 (-669)</option><option value='596'>馬提尼克 / 馬丁尼克 (596)</option><option value='230'>毛里裘斯 / 模里西斯 (230)</option><option value='52'>墨西哥 (52)</option><option value='373'>摩爾多瓦 (373)</option><option value='377'>摩納哥 (377)</option><option value='212'>摩洛哥 (212)</option><option value='976'>蒙古 (976)</option><option value='-663'>蒙塞拉特島 / 蒙哲臘 (-663)</option><option value='258'>莫桑比克 / 莫三比克 (258)</option><option value='264'>納米比亞 (264)</option><option value='674'>瑙魯 / 諾魯 (674)</option><option value='977'>尼泊爾 (977)</option><option value='599'>荷屬安的列斯 / 荷屬安地列斯 (599)</option><option value='31'>荷蘭 (31)</option><option value='64'>紐西蘭 / 新西蘭 (64)</option><option value='505'>尼加拉瓜 (505)</option><option value='227'>尼日爾 / 尼日 (227)</option><option value='234'>尼日利亞 / 奈及利亞 (234)</option><option value='-757'>聖盧西亞 / 聖露西亞 (-757)</option><option value='-783'>聖文森特和格林納丁斯 (-783)</option><option value='-683'>美屬薩摩亞 / 東薩摩亞 (-683)</option><option value='685'>薩摩亞 (685)</option><option value='378'>聖馬利諾 (378)</option><option value='239'>聖多美及普林西比 (239)</option><option value='966'>沙特阿拉伯 / 沙烏地阿拉伯 (966)</option><option value='221'>塞內加爾 (221)</option><option value='248'>塞舌爾 / 塞席爾 (248)</option><option value='232'>塞拉利昂 / 獅子山 (232)</option><option value='421'>斯洛伐克 (421)</option><option value='386'>斯洛文尼亞 / 斯洛維尼亞 (386)</option><option value='677'>所羅門群島 / 索羅門群島 (677)</option><option value='252'>索馬里 / 索馬利亞 (252)</option><option value='27'>南非 (27)</option><option value='34'>西班牙 (34)</option><option value='94'>斯里蘭卡 (94)</option><option value='249'>蘇丹 (249)</option><option value='597'>蘇利南 (597)</option><option value='268'>斯威士蘭 / 史瓦濟蘭 (268)</option><option value='46'>瑞典 (46)</option><option value='41'>瑞士 (41)</option><option value='992'>塔吉克 (992)</option><option value='255'>坦桑尼亞 / 坦尚尼亞 (255)</option><option value='228'>多哥 (228)</option><option value='676'>湯加 / 東加 (676)</option><option value='-867'>千里達及多巴哥 / 千里達及托巴哥 (-867)</option><option value='216'>突尼斯 / 突尼西亞 (216)</option><option value='90'>土耳其 (90)</option><option value='993'>土庫曼斯坦 (993)</option><option value='256'>烏干達 (256)</option><option value='971'>阿拉伯聯合酋長國 (971)</option><option value='598'>烏拉圭 (598)</option><option value='998'>烏茲別克 / 烏茲別克斯坦 (998)</option><option value='84'>越南 (84)</option><option value='967'>也門 / 葉門 (967)</option><option value='38'>南斯拉夫社會主義聯邦共和國 (38)</option><option value='263'>津巴布韋 / 辛巴威 (263)</option><option value='243'>扎伊爾 / 薩伊 (243)</option><option value='243'>剛果 (243)</option><option value='260'>贊比亞 / 尚比亞 (260)</option><option value='44'>澤西 (44)</option><option value='-1437'>根西 (-1437)</option><option value='-1580'>萌島 / 曼島 (-1580)</option><option value='358'>奧蘭 / 阿赫韋南馬 (358)</option><option value='47'>斯瓦巴和揚馬延 (47)</option><option value='262'>馬約特 (262)</option><option value='-766'>多米尼克 (-766)</option><option value='382'>黑山 / 蒙特內哥羅 (382)</option><option value='-283'>英屬處女群島 / 英屬維京群島 (-283)</option><option value='-720'>荷屬聖馬丁 (-720)</option><option value='-868'>聖基茨和尼維斯 (-868)</option><option value='-648'>特克斯和凱科斯群島 / 土克凱可群島 (-648)</option><option value='-339'>美屬處女群島 / 美屬維京群島 (-339)</option><option value='211'>南蘇丹 (211)</option><option value='222'>毛里塔尼亞 / 茅利塔尼亞 (222)</option><option value='238'>維德角 (238)</option><option value='240'>赤道幾內亞 (240)</option><option value='245'>幾內亞比索 / 畿內亞比紹 (245)</option><option value='269'>科摩羅 / 葛摩 (269)</option><option value='290'>聖赫勒拿 / 聖赫倫那 (290)</option><option value='291'>厄立特里亞 / 厄利垂亞 (291)</option><option value='297'>阿魯巴 (297)</option><option value='298'>法羅群島 (298)</option><option value='299'>格陵蘭 (299)</option><option value='385'>克羅地亞 / 克羅埃西亞 (385)</option><option value='387'>波斯尼亞和黑塞哥維那(波黑) (387)</option><option value='389'>北馬其頓共和國 (389)</option><option value='508'>聖皮埃爾和密克隆群島 (508)</option><option value='590'>瓜德羅普 / 瓜地洛普 (590)</option><option value='590'>聖馬丁島 (590)</option><option value='590'>聖巴泰勒米 / 聖巴瑟米 (590)</option><option value='596'>聖尤斯特歇斯 / 聖佑達修斯 (596)</option><option value='595'>薩巴 / 荷屬沙巴 (595)</option><option value='592'>波奈 / 博奈爾 (592)</option><option value='590'>庫拉索 / 古拉索 (590)</option><option value='670'>東帝汶 (670)</option><option value='680'>帛琉 (680)</option><option value='681'>瓦利斯和富圖納 (681)</option><option value='683'>紐埃 (683)</option><option value='686'>基里巴斯 / 吉里巴斯 (686)</option><option value='687'>新喀里多尼亞 (687)</option><option value='688'>圖瓦盧 / 吐瓦魯 (688)</option><option value='690'>托克勞 (690)</option><option value='691'>密克羅尼西亞聯邦 (691)</option><option value='692'>馬紹爾群島 (692)</option><option value='975'>不丹 (975)</option><option value='381'>塞爾維亞共和國 (381)</option><option value='678'>瓦努阿圖 / 萬那杜 (678)</option><option value='500'>福克蘭群島（馬爾維納斯群島） (500)</option><option value='250'>盧安達（盧旺達） (250)</option><option value='379'>梵蒂岡 (379)</option>                                        </select>
                                    </div>
                                    <div class="col-lg-7 mb-3">
                                        <input type="tel" name="tel_home" class="tel_home form-control" pattern="[0-9]*" value="" placeholder="">
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <div class="col-lg-3 mb-3">
                                        <label class="form-label">電郵地址<span class="red">*</span></label>
                                    </div>
                                    <div class="col-lg-9 mb-3">
                                        <input type="email" name="email[0]" class="form-control" value="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <button type="button" class="btn btn-primary btn-add-member mt-4">添加家庭成員</button>

            </div>

            <div class="col-lg-6 mb-3">
                <div class="bg-blue px-3 py-4">

                    <div class="row">
                        <div class="col-lg-12">
                            <h4>其他資料:</h4>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-3 mb-3">
                            <label class="form-label">您加入愛護動物協會的主要原因？</label>
                        </div>
                        <div class="col-lg-9 mb-3">
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="animal_adoption"> 領養動物</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="veterinary"> 獸醫服務(非緊急）</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="emergency_veterinary"> 24小時緊急獸醫服務</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="spay_neuter"> 為寵物絕育</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="members_benefits"> 使用協會會員優惠</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="support_mission"> 支持協會</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="learn_more"> 了解更多關於SPCA</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="become_volunteer"> 有興趣成為義工</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="participate_fundraising"> 有興趣參與協會籌款活動</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="participate_educational"> 有興趣參與協會所舉辦的教育活動及講座</div>
                            <div class="d-block"><input type="checkbox" name="ck_reasons[]" value="training_course"> 參與協會所舉辦的動物行為訓練班</div>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-3 mb-3">
                            <label class="form-label">您現時飼養了多少頭寵物？</label>
                        </div>
                        <div class="col-lg-9 mb-3">
                            <div class="row g-2">
                                <div class="col-lg-4">
                                    狗                                    <input type="number" name="num_dogs" class="form-control" value="0" step="1" min="0" />
                                </div>
                                <div class="col-lg-4">
                                    貓                                    <input type="number" name="num_cats" class="form-control" value="0" step="1" min="0" />
                                </div>
                                <div class="col-lg-4">
                                    其他                                    <input type="number" name="num_others" class="form-control" value="0" step="1" min="0" / >
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <h4>聲明</h4>
                        </div>
                    </div>

                    <div class="row g-2">
                        <div class="col-lg-12 mb-3">
                            <ol>
                                <li>本人/我們確認就有關本表格提供之資料均屬真實和完整。</li>
                                <li>本人/我們已閱讀及理解愛護動物協會有關<< 個人資料(私隱)條例>>(<a href="https://www.spca.org.hk/ch/privacy-policy" target="_blank">https://www.spca.org.hk/ch/privacy-policy</a>) 的收集個人資料聲明之內容, 並謹此同意愛護動物協會可根據其所述的用途及方式取得、處理、使用、披露及/或轉移 本人的個人資料。</li>
                                <li>本人/我們已閱讀、明白及同意遵守愛護動物協會會籍的守則及條款 (<a href="www.bit.ly/3WR8dYk" target="_blank">www.bit.ly/3WR8dYk</a>)，並申請成為協會會員。</li>
                            </ol>

                            <div class="form-check d-inline-block ps-0">
                                <input type="checkbox" name="ck_agree" class="ck_agree" value="1" id="ck_agree" required>
                                <label class="form-check-label" for="ck_agree">同意</label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-12 mb-3">
                <div class="d-block">
                    *請選擇通訊語言:
                    <div class="form-check d-inline-block ps-3">
                        <input type="radio" name="rdo_lang" id="rdo_lang_chi" value="chi">
                        <label class="form-check-label" for="rdo_lang_chi">中文</label>
                    </div>
                    <div class="form-check d-inline-block ps-3">
                        <input type="radio" name="rdo_lang" id="rdo_lang_eng" value="eng" checked>
                        <label class="form-check-label" for="rdo_lang_eng">英文</label>
                    </div>
                </div>
                <div class="d-block">
                    <input type="checkbox" name="ck_promo" value="1" checked />  本人願意收取愛護動物協會的直接行銷通訊（如最新推廣優惠及活動等）                </div>
            </div>
            <div class="col-lg-12 text-center">
                <input type="hidden" name="action" value="ajax_submit_membership_renewal"/>
                <button type="submit" class="btn btn-submit px-5">支付</button>
            </div>
        </div>
    </form>
</div>

<script>
    (function($) {
        var rowNum = 0;
        var memberType = 'annual';

        $(".rdo_member_type").click(function(){
            memberType = $(this).val();
            console.log('memberType: ' + memberType);
            updatePlan();
        });

        function updatePlan() {
            if (memberType == 'annual') {
                rowNum = 0;
                $(".member-row").remove();
                $(".btn-add-member").hide();
                $(".sel_plan").html('<option value="">Please select</option> <option value="1">1 Year ($250)</option> <option value="2">2 Years ($520)</option> <option value="3">3 Years ($700)</option>');
                setTimeout(function(){
                    $(".accordion-button[data-bs-target='#collapse0']").trigger("click");
                    console.log('#collapse0: Click');
                }, 2000);

            }else{
                $(".btn-add-member").show();
                $(".sel_plan").html('<option value="">Please select</option> <option value="1">1 Year ($400)</option> <option value="2">2 Years ($800)</option> <option value="3">3 Years ($1050)</option>');
            }
        }

        $(".btn-add-member").click(function(){
            if (rowNum < 3) {
                rowNum++;
                addMemberRow(rowNum);
            }else{
                alert('Only 4 members only. \n最多只可以4位會員。')
            }
        });

        function addMemberRow(rowNum) {
            console.log('addMemberRow : ' + rowNum);
            $.ajax({
                async: false,
                type: "POST",
                url: "/no-admin-ajax/",
                data: {
                    'action': 'ajax_add_member_row',
                    'row': rowNum,
                },
                success: function(data){
                    //console.log(data);
                    $("#accordionMembers").append(data);
                }
            });
        }

        updatePlan();

        /*-------------------*/
        // // Function to calculate age based on DOB
        // function calculateAge(day, month, year) {
        //     var today = new Date(); // Use current date dynamically
        //     var birthDate = new Date(year, month - 1, day);
        //     var age = today.getFullYear() - birthDate.getFullYear();
        //     var monthDiff = today.getMonth() - birthDate.getMonth();
        //
        //     // Adjust age if birthday hasn't occurred this year
        //     if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        //         age--;
        //     }
        //     return age;
        // }
        //
        // // Function to validate a single DOB set
        // function validateDOBSet($daySelect, $monthSelect, $yearSelect, index) {
        //     var day = $daySelect.val();
        //     var month = $monthSelect.val();
        //     var year = $yearSelect.val();
        //
        //     // Only validate if all fields are selected
        //     if (day && month && year) {
        //         var age = calculateAge(parseInt(day), parseInt(month), parseInt(year));
        //         if (age < 16) {
        //             // Reset the select fields
        //             $daySelect.val('');
        //             $monthSelect.val('');
        //             $yearSelect.val('');
        //             // Show alert
        //             alert('只允許16歲或以上的人加入\nOnly allow 16 years old or above people to join');
        //         }
        //     }
        // }
        //
        // function attachValidation(index) {
        //     var $daySelect = $(this).find('select[name="sel_dob_day[' + index + ']"]');
        //     var $monthSelect = $(this).find('select[name="sel_dob_month[' + index + ']"]');
        //     var $yearSelect = $(this).find('select[name="sel_dob_year[' + index + ']"]');
        //
        //     // Validate on change of any select field
        //     $daySelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        //     $monthSelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        //     $yearSelect.on('change', function() {
        //         validateDOBSet($daySelect, $monthSelect, $yearSelect, index);
        //     });
        // }
        //
        // attachValidation(0);

        // Function to validate age for a specific DOB group
        function validateAge($daySelect, $monthSelect, $yearSelect) {
            var day = $daySelect.val();
            var month = $monthSelect.val();
            var year = $yearSelect.val();

            // Check if all fields are filled
            if (day && month && year) {
                var today = new Date(); // Current date as per requirement
                var birthDate = new Date(year, month - 1, day); // Month is 0-indexed in JS
                var age = today.getFullYear() - birthDate.getFullYear();
                var monthDiff = today.getMonth() - birthDate.getMonth();

                // Adjust age if birthday hasn't occurred this year
                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                    age--;
                }

                // Check if age is less than 16
                if (age < 16) {
                    alert('只允許16歲或以上的人加入\nOnly allow 16 years old or above people to join');
                    // Reset the select fields
                    $daySelect.val('');
                    $monthSelect.val('');
                    $yearSelect.val('');
                }
            }
        }

        // Event delegation for dynamically added DOB fields
        $(document).on('change', 'select[name^="sel_dob_day"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1]; // Extract index from name
            var $daySelect = $(this);
            var $monthSelect = $('select[name="sel_dob_month[' + index + ']"]');
            var $yearSelect = $('select[name="sel_dob_year[' + index + ']"]');
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

        $(document).on('change', 'select[name^="sel_dob_month"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1];
            var $daySelect = $('select[name="sel_dob_day[' + index + ']"]');
            var $monthSelect = $(this);
            var $yearSelect = $('select[name="sel_dob_year[' + index + ']"]');
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

        $(document).on('change', 'select[name^="sel_dob_year"]', function() {
            var index = $(this).attr('name').match(/\[(\d+)\]/)[1];
            var $daySelect = $('select[name="sel_dob_day[' + index + ']"]');
            var $monthSelect = $('select[name="sel_dob_month[' + index + ']"]');
            var $yearSelect = $(this);
            validateAge($daySelect, $monthSelect, $yearSelect);
        });

    })( jQuery );
</script>{"id":7392,"date":"2023-06-13T06:09:56","date_gmt":"2023-06-13T06:09:56","guid":{"rendered":"https:\/\/www.spca.org.hk\/spca-membership-renewal-form\/"},"modified":"2023-06-21T02:36:28","modified_gmt":"2023-06-21T02:36:28","slug":"spca-membership-renewal-form","status":"publish","type":"page","link":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/","title":{"rendered":"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-7392","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/\" \/>\n<meta property=\"og:site_name\" content=\"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-21T02:36:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/\",\"url\":\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/\",\"name\":\"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703\",\"isPartOf\":{\"@id\":\"https:\/\/www.spca.org.hk\/#website\"},\"datePublished\":\"2023-06-13T06:09:56+00:00\",\"dateModified\":\"2023-06-21T02:36:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\/\/www.spca.org.hk\/zh-hant\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.spca.org.hk\/#website\",\"url\":\"https:\/\/www.spca.org.hk\/\",\"name\":\"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703\",\"description\":\"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.spca.org.hk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/","og_locale":"zh_TW","og_type":"article","og_title":"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","og_url":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/","og_site_name":"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","article_modified_time":"2023-06-21T02:36:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/","url":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/","name":"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c - SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","isPartOf":{"@id":"https:\/\/www.spca.org.hk\/#website"},"datePublished":"2023-06-13T06:09:56+00:00","dateModified":"2023-06-21T02:36:28+00:00","breadcrumb":{"@id":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.spca.org.hk\/zh-hant\/spca-membership-renewal-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/www.spca.org.hk\/zh-hant\/"},{"@type":"ListItem","position":2,"name":"\u6703\u54e1\u81ea\u52d5\u7e8c\u6703\u8868\u683c"}]},{"@type":"WebSite","@id":"https:\/\/www.spca.org.hk\/#website","url":"https:\/\/www.spca.org.hk\/","name":"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","description":"SPCA - \u9999\u6e2f\u611b\u8b77\u52d5\u7269\u5354\u6703","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spca.org.hk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"}]}},"publishpress_future_action":{"enabled":false,"date":"2026-04-29 07:30:02","action":"draft","terms":[],"taxonomy":""},"ticketed":false,"_links":{"self":[{"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/pages\/7392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/comments?post=7392"}],"version-history":[{"count":2,"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/pages\/7392\/revisions"}],"predecessor-version":[{"id":7685,"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/pages\/7392\/revisions\/7685"}],"wp:attachment":[{"href":"https:\/\/www.spca.org.hk\/zh-hant\/wp-json\/wp\/v2\/media?parent=7392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}