@extends('layouts.default')

@section('content')

    <link rel="stylesheet" type="text/css" href="/css/membership.css"/>
    <script src="{{ asset('js/default-ui.js') }}"></script>

    <div class="container mypage">
        <!-- 페이지 상단 : 제목 및 현재위치 표시 -->
        <div class="area-pages-top">
            <div class="area-page-location">
                <div class="page-location">
                    <span class="home">Home</span><span class="depth1">마이페이지</span><span class="depth2">수속신청</span>
                </div>
                <h1 class="page-title">마이페이지</h1>
            </div>
        </div>

        <div class="area-pages-content">
            <div class="flex-wrap">
                <!--  lnb -->
                <div class="area-mypage-nav">
                    <p class="hello-user">
                        안녕하세요, <br class="pc-br"> <strong>김동현님</strong>
                    </p>
                    <div class="lnb">
                        <a href="#" class="btn-apply">수속신청</a>
                        <a href="#" class="btn-myinfo">내 정보수정</a>
                        <a href="#" class="btn-logout">로그아웃</a>
                    </div>
                </div>

                <!-- content -->
                <div class="area-mypage-wrap">
                    <h2 class="cont-title">내 정보수정</h2>

                    <div class="area-mypage-form">
                        <p class="af-title">개인기본정보</p>
                        <!-- 기본정보 : 수정 불가 -->
                        <div class="my-unchangeable">
                            <p class="col2">
                                <em>*아이디</em>
                                <span>kimble</span>
                            </p>
                            <p class="col2">
                                <em>*이름</em>
                                <span>김동현</span>
                            </p>
                        </div>

                        <div class="modify-password">
                            <form>
                                <em class="mp-title">
                                    <label for="mm_password">비밀번호</label>
                                    <span class="toggle-btn button"><span class="open">변경</span><span class="close">닫기</span></span>
                                </em>
                                <div class="mp-setup">
                                    <p class="input">
                                        <em class="tit">현재비밀번호</em>
                                        <span class="pwd"><input type="password" id="mm_password" name="" /></span>
                                    </p>
                                    <p class="input">
                                        <em class="tit">새비밀번호</em>
                                        <span class="pwd"><input type="password" id="new_password" name="" /></span>
                                    </p>
                                    <p class="input">
                                        <em class="tit">새 비밀번호 확인</em>
                                        <span class="pwd"><input type="password" id="new_password_confirm" /></span>
                                        <input type="button" value="확인" class="button color">
                                    </p>
                                </div>
                            </form>
                        </div>

                        <form>
                            <!-- 정보입력 -->
                            <div class="input-wrap">
                                <div class="input">
                                    <p class="tit"><label for="">이메일<label></p>
                                    <p>
                                        <input type="text" name="" id="">
                                    </p>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="">휴대폰<label></p>
                                    <p>
                                        <input type="text" name="" id="">
                                    </p>
                                </div>
                                <p class="input">
                                    <span class="chk"><input type="checkbox" id="agree-info"><label for="agree-info">[선택] 유학정보 및 프로모션 정보 수신 동의</label></span>
                                </p>
                            </div>
                            <!-- 추가정보입력 -->
                            <div class="input-wrap">
                                <p class="af-title">추가정보입력</p>
                                <div class="input">
                                    <p class="tit"><label for="">주소</label></p>
                                    <p class="zipcode">
                                        <input type="text" name="" id="" value="">
                                        <button class="button">우편번호<span class="pc-text">찾기</span></button>
                                    </p>
                                    <p>
                                        <input type="text" name="mm_address" id="mm_address1" size="40">
                                        <input type="text" name="mm_address2" size="40" autocomplete="off" placeholder="상세주소 입력">
                                    </p>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="">희망유학</label></p>
                                    <div class="column">
                                        <div class="col2">
                                            <select>
                                                <option value="">국가</option>
                                                <option value="1">옵션1</option>
                                                <option value="2">옵션2</option>
                                                <option value="3">옵션3</option>
                                            </select>
                                        </div>
                                        <div class="col2">
                                            <select>
                                                <option value="">관심분야</option>
                                                <option value="1">옵션1</option>
                                                <option value="2">옵션2</option>
                                                <option value="3">옵션3</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="">출국예상일</label></p>
                                    <input type="text" id="" name="" />
                                </div>
                            </div>
                            <!-- 회원탈퇴 -->
                            <div class="button-wrap withdraw">
                                <span>탈퇴를 원하시면 우측의 회원탈퇴 버튼을 눌러주세요</span> <a href='?db=hana&trg=members/closed' class="button">회원탈퇴</a>
                            </div>
                            <!-- 저장버튼 -->
                            <div class="button-wrap next">
                                <input type="submit" class="button color wide" value="저장">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection