{include file='default/base/mall_top'/}


{block name="member_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/semantic.min.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/common.css" />
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/member.css">

<script>
    $(document).ready(function () {
        $(".ui.dropdown").dropdown();
    })
</script>
<main class="user-container">
    <section class="main-center container">
        {include file='default/base/member_left'/}

        <div class="right">
            <h2 class="c-tit">Profile</h2>
            <div class="data-content-copy">
                <h2>LightCourse</h2>
                <!--<h4>Registeration Information Form <br>
                    Please fill Out all terms i English and pay attention to the accuracy.
                </h4>-->
                <h2>Registration Form</h2>
                <p>Please fill out all terms in English and be precise.</p>
                
                
                <form class="ui form" method="post" action="/index.php/home/Memberinformation/index">
                    <div class="field">
                        <label>Name</label>
                        <div class="two fields">
                            <div class="field">
                                <input type="text" name="first_name" placeholder="First Name" class="first_name"
                                value="{$info.first_name}">
                            </div>
                            
                            <div class="field">
                                <input type="text" name="middle_name" placeholder="Middle Name" class="middle_name"
                                value="{$info.middle_name}">
                            </div>
                            
                            <div class="field">
                                <input type="text" name="last_name" placeholder="Last Name" class="last_name"
                                value="{$info.last_name}">
                            </div>
                        </div>
                    </div>
                    <!--<div class="two fields">-->
                    <!--    <div class="field">-->
                    <!--        <label>Date of Birth</label>-->
                    <!--        <div class="fields three">-->
                    <!--            <div class="field">-->
                    <!--                <input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">-->
                    <!--            </div>-->
                    <!--            <div class="field">-->
                    <!--                <select class="ui fluid search dropdown" name="card[expire-month]">-->
                    <!--                    <option value="">Month</option>-->
                    <!--                    <option value="1">January</option>-->
                    <!--                    <option value="2">February</option>-->
                    <!--                    <option value="3">March</option>-->
                    <!--                    <option value="4">April</option>-->
                    <!--                    <option value="5">May</option>-->
                    <!--                    <option value="6">June</option>-->
                    <!--                    <option value="7">July</option>-->
                    <!--                    <option value="8">August</option>-->
                    <!--                    <option value="9">September</option>-->
                    <!--                    <option value="10">October</option>-->
                    <!--                    <option value="11">November</option>-->
                    <!--                    <option value="12">December</option>-->
                    <!--                </select>-->
                    <!--            </div>-->
                    <!--            <div class="field">-->
                    <!--                <input type="text" name="card[expire-day]" maxlength="2" placeholder="Day">-->
                    <!--            </div>-->

                    <!--        </div>-->
                    <!--    </div>-->
                    <!--    <div class="field">-->
                    <!--        <label>Gender</label>-->
                    <!--        <div class="field">-->
                    <!--            <select class="ui fluid search dropdown" name="card[expire-month]">-->
                    <!--                <option value="0"></option>-->
                    <!--                <option value="1">Male</option>-->
                    <!--                <option value="2">Famale</option>-->
                    <!--                <option value="3">Nonbinary</option>-->
                    <!--                <option value="4">Prefer not to respond</option>-->
                    <!--            </select>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->

                    <div class="field">
                            <label>Date of Birth</label>
                            <div class="fields three">
                                <div class="field">
                                    <input type="text" name="year" maxlength="10" placeholder="Year"
                                     value="{$info.year}" class="year">
                                </div>
                                <div class="field">
                                    <select class="ui fluid search dropdown" name="month" id="month">
                                        <option value="">Month</option>
                                        <option value="January" {if $info.month == "January"} selected="selected" {/if} >January</option>
                                        
                                        <option value="February" {if $info.month == "February"} selected="selected" {/if} >February</option>
                                        
                                        <option value="March" {if $info.month == "March"} selected="selected" {/if}>March</option>
                                        
                                        <option value="April" {if $info.month == "April"} selected="selected" {/if}>April</option>
                                        
                                        <option value="May" {if $info.month == "May"} selected="selected" {/if}>May</option>
                                        
                                        <option value="June" {if $info.month == "June"} selected="selected" {/if}>June</option>
                                        
                                        <option value="July" {if $info.month == "July"} selected="selected" {/if}>July</option>
                                        
                                        <option value="August" {if $info.month == "August"} selected="selected" {/if}>August</option>
                                        
                                        <option value="September" {if $info.month == "September"} selected="selected" {/if}>September</option>
                                        
                                        <option value="October" {if $info.month == "October"} selected="selected" {/if}>October</option>
                                        
                                        <option value="November" {if $info.month == "November"} selected="selected" {/if}>November</option>
                                        
                                        <option value="December" {if $info.month == "December"} selected="selected" {/if}>December</option>
                                        
                                    </select>
                                </div>
                                <div class="field">
                                    <input type="text" name="day" maxlength="4" placeholder="Day" 
                                     value="{$info.day}" class="day">
                                </div>
                            </div>
                    </div>
                    <div class="field">
                            <label>Gender</label>
                            <div class="field">
                                <select class="ui fluid search dropdown" name="gender" id="gender">
                                    <option value=""></option>
                                    <option value="Male" {if $info.gender == "Male"} selected="selected" {/if}>Male</option>
                                    <option value="Famale" {if $info.gender == "Famale"} selected="selected" {/if}>Famale</option>
                                    <option value="Nonbinary" {if $info.gender == "Nonbinary"} selected="selected" {/if}>Nonbinary</option>
                                    <option value="Prefer not to respond" {if $info.gender == "Prefer not to respond"} selected="selected" {/if}>Prefer not to respond</option>
                                </select>
                            </div>
                        </div>
                    <div class="two fields">
                        <div class="field">
                            <label>Email Address</label>
                            <div class="field">
                                <input type="text" name="email" maxlength="50" placeholder="Email Address" 
                                 value="{$info.email}" class="email">
                            </div>
                        </div>
                        <div class="field">
                            <label>Country of Citizenship</label>
                            <div class="field">
                                <select class="ui fluid search dropdown" name="citizenship" id="citizenship">
                                    
                                    <option value="">Select a Country</option>
                                    
                                    {foreach name="country" item="value"}
                                    <option value="{$value}" {if $info.citizenship == "$value"} selected="selected" {/if}>
                                        {$value}
                                    </option>
                                    
                                   {/foreach}
                                  
                                </select>
                            </div>
                        </div>
                    </div>

                   <!-- <div class="two fields">
                        <div class="field">
                            <label for="">Birth</label>
                            <div class="two fields">
                                <div class="field">
                                    <input type="text" name="birth_city" maxlength="10" placeholder="city"
                                    value="{$info.birth_city}">
                                </div>
                                <div class="field">
                                    <input type="text" name="birth_country" maxlength="10" placeholder="country"
                                    value="{$info.birth_country}">
                                </div>
                            </div>
                        </div>

                        <div class="field">
                            <label>Are you currently in the US on a visa?</label>
                            <select class="ui fluid search dropdown" name="is_visa">
                                <option value="0"></option>
                                
                                <option value="YES"  {if $info.is_visa == "YES"} selected="selected" {/if}>YES</option>
                                
                                <option value="NO"  {if $info.is_visa == "NO"} selected="selected" {/if}>NO</option>
                            </select>
                        </div>
                    </div>-->

                    <div class="field">
                        <label for="">Permanent Home Country Address</label>
                        <div class="four fields">
                            <div class="field">
                                <input type="text" name="permanent_street" maxlength="20" placeholder="Street"
                               value="{$info.permanent_street}" class="permanent_street">
                            </div>
                            <div class="field">
                                <input type="text" name="permanent_city" maxlength="20" placeholder="City"
                                value="{$info.permanent_city}" class="permanent_city">
                            </div>
                            <div class="field">
                                <input type="text" name="permanent_state" maxlength="20" placeholder="State/Province/Region"
                                 value="{$info.permanent_state}" class="permanent_state">
                            </div>
                            <div class="field">
                                <input type="text" name="permanent_code" maxlength="20" placeholder="Postal Code"
                                value="{$info.permanent_code}" class="permanent_code">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="">Current Address (Same as Permanent Address?)</label>
                        <select class="ui fluid search dropdown Address" name="is_current" id="is_current">
                            
                                <option value="YES" {if $info.is_current == "YES"} selected="selected" {/if}>YES</option>
                                
                                <option value="NO" {if $info.is_current == "NO"} selected="selected" {/if}>NO</option>
                                
                        </select>
                    </div>
                    <div class="field addressshow">
                        <div class="four fields">
                            <div class="field">
                                <input type="text" name="current_street" maxlength="20" placeholder="Street"
                                 value="{$info.current_street}"  class="current_street">
                            </div>
                            <div class="field">
                                <input type="text" name="current_city" maxlength="20" placeholder="City"
                                value="{$info.current_city}" class="current_city">
                            </div>
                            <div class="field">
                                <input type="text" name="current_state" maxlength="20" placeholder="State/Province/Region"
                                value="{$info.current_state}" class="current_state">
                            </div>
                            <div class="field">
                                <input type="text" name="current_code" maxlength="20" placeholder="Postal Code"
                                value="{$info.current_code}" class="current_code">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="">Emergency Contact Information</label>
                        <div class="fields four">
                            <div class="field">
                                <input type="text" name="emergency_first_name" maxlength="20" placeholder="First Name"
                                value="{$info.emergency_first_name}" class="emergency_first_name">
                            </div>
                            <div class="field">
                                <input type="text" name="emergency_last_name" maxlength="20" placeholder="Last Name" 
                                value="{$info.emergency_last_name}" class="emergency_last_name">
                            </div>
                            <div class="field">
                                <input type="text" name="emergency_relation" maxlength="20" placeholder="Relationship"
                                value="{$info.emergency_relation}" class="emergency_relation">
                            </div>
                            <div class="field">
                                <input type="text" name="emergency_telephone" maxlength="20" placeholder="Telephone"
                                value="{$info.emergency_telephone}" class="emergency_telephone">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="">University You Currently Attend</label>
                        <div class="fields three">
                            <div class="field">
                                <input type="text" name="university_name" maxlength="20"
                                    placeholder="University's Name"
                                    value="{$info.university_name}" class="university_name">
                            </div>
                            <div class="field">
                                <input type="text" name="university_degree" maxlength="20"
                                    placeholder="Degree Earned or Anticipated"
                                    value="{$info.university_degree}" class="university_degree">
                            </div>
                            <div class="field">
                                <input type="text" name="university_major" maxlength="20" placeholder="Major"
                                value="{$info.university_major}" class="university_major">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <!--<label for="">Attendance Dates</label>-->
                        <div class="field">
                            <div class="layui-inline">
                            	<input type="text" name="university_date" placeholder="Date of Admission" class="layui-input" id="date1" value="{$info.university_date}" id="university_date"/>
                            </div>

                        </div>
                    </div>
                    <!-- more -->
                   <!-- <div class="ui button primary  more-ele formmore" tabindex="0">More Required Infomation Form</div>-->
                    <div class="more-form">
                        <div class="fields three">
                            <div class="field">
                                <label>Employment Status</label>
                                <input type="text" placeholder="" class="wide" name="employment_status"
                                value="{$info.employment_status}">
                            </div>
                            <div class="field">
                                <label>Industry</label>
                                <input type="text" placeholder="" class="wide"
                                name="industry"
                                value="{$info.industry}">
                            </div>
                            <div class="field">
                                <label>Employer</label>
                                <input type="text" placeholder="" class="wide"
                                 name="employer"
                                value="{$info.employer}">
                            </div>
                        </div>
                        <div class="fields three">
                            <div class="field">
                                <label>Occupation</label>
                                <input type="text" placeholder="" class="wide"
                                name="occupation"
                                value="{$info.occupation}">
                            </div>
                            <div class="field">
                                <label>Experience Level</label>
                                <input type="text" placeholder="" class="wide"
                                name="experience_level"
                                value="{$info.experience_level}">
                            </div>
                            <div class="field">
                                <label>Is it your current employer?</label>
                                <input type="text" placeholder="" class="wide"
                                name="current_employer"
                                value="{$info.current_employer}">
                            </div>
                        </div>
                        <div class="fields three">
                            <div class="field">
                                <label>Highest Degree</label>
                                <input type="text" placeholder="" class="wide"
                                name="highest_degree"
                                value="{$info.highest_degree}">
                            </div>
                            <div class="field">
                                <label>University</label>
                                <input type="text" placeholder="" class="wide"
                                 name="university"
                                value="{$info.university}">
                            </div>
                            <div class="field">
                                <label>Field or Major</label>
                                <input type="text" placeholder="" class="wide"
                                name="field"
                                value="{$info.field}">
                            </div>
                        </div>
                        <div class="fields three">
                            <div class="field">
                                <label>Are you currently a student?</label>
                                <input type="text" placeholder="" class="wide"
                                name="a_student"
                                value="{$info.a_student}">
                            </div>
                            <div class="field">
                                <label>Experience Privacy</label>
                                <input type="text" placeholder="" class="wide"
                                name="experience_privacy"
                                value="{$info.experience_privacy}">
                            </div>
                        </div>

                    </div>
                    <button type="submit" class="ui primary button">Save</button>
                    <button class="ui button">Cancel</button>
                    <button type="submit" class="ui primary button" style="background-color:blue;" id="sub">Submit</button>
                    <span>Note: Click on the "Submit" button only when registering for a course.</span>
                </form>
            </div>
        </div>
    </section>
</main>


<script>

    $("#sub").click(function(){
      
        var month                   = $('#month option:selected').val();
        var gender                  = $('#gender option:selected').val();
        var citizenship             = $('#citizenship option:selected').val();
        var is_current              = $('#is_current option:selected').val();
        var university_date         = $('.layui-input').val();
      
        var first_name              = $(".first_name").val();
        var middle_name             = $(".middle_name").val();
        var last_name               = $(".last_name").val();
        var year                    = $(".year").val();
        var day                     = $(".day").val();
        var email                   = $(".email").val();
        var permanent_street        = $(".permanent_street").val();
        var permanent_city          = $(".permanent_city").val();
        var permanent_state         = $(".permanent_state").val();
        var permanent_code          = $(".permanent_code").val();
        var current_street          = $(".current_street").val();
        var current_city            = $(".current_city").val();
        var current_state           = $(".current_state").val();
        var current_code            = $(".current_code").val();
        var emergency_first_name    = $(".emergency_first_name").val();
        var emergency_last_name     = $(".emergency_last_name").val();
        var emergency_relation      = $(".emergency_relation").val();
        var emergency_telephone     = $(".emergency_telephone").val();
        var university_name         = $(".university_name").val();
        var university_degree       = $(".university_degree").val();
        var university_major        = $(".university_major").val();
        
        $.ajax({
            url:"/Memberinformation/api",
            type:'post',
            data:{first_name:first_name,middle_name:middle_name,last_name:last_name,year:year,day:day,email:email,
                permanent_street:permanent_street,permanent_city:permanent_city,permanent_state:permanent_state,
                permanent_code:permanent_code,current_street:current_street,current_city:current_city,
                current_state:current_state,current_code:current_code,emergency_first_name:emergency_first_name,
                emergency_last_name:emergency_last_name,emergency_relation:emergency_relation,
                emergency_telephone:emergency_telephone,university_name:university_name,
                university_degree:university_degree,university_major:university_major,
                month:month,gender:gender,citizenship:citizenship,is_current:is_current,university_date:university_date
            },
            success: function (res) {
                var res = JSON.parse(res);
                if(res.code==10001){
                    layer.msg(res.message);
                }
                if(res.code==10000){
                        var href = localStorage.getItem('href')||'';
                        if(href!=''){
                            window.location.href = JSON.parse(href);
                            localStorage.removeItem('href')
                        }else{
                            window.location.href = "/Memberinformation/index";
                        }
                                      
                }
                
            },
            // async:false,
        }); 
        return false;
    })
    
</script>



<script>
	laydate.render({
		elem: '#date1',
		lang: 'en'
	});
$(".formmore").click(function(){
    var display =$('.more-form').css('display');
    if(display == 'none'){
        $('.more-form').show();
    }else{
        $('.more-form').hide();
    }
})	
$(".Address").change(function(e){
    var val = $(this).val(); 
    if(val=='NO'){
        $(".addressshow").show();
    }else{
         $(".addressshow").hide();
    }
});
$(".Address").change();
</script>
{/block}
{include file='default/base/mall_footer'/}