<?php  
    $current_user_id = $_GET['user_id'];
    # step - 1 [meta]
    $metas = [
        "ielts_lms_step-which-best-describes-you",          // multiple

        "ielts_lms_step-what-kind-of-student-you-are",
        "ielts_lms_step-tell-us-about-your-child",

        "ielts_lms_step-my-reason-for-practicing-ielts",    // multiple

        "ielts_lms_step-how-about-an-ielts-score",          // [yes | no]

        "ielts_lms_step-previous-score",                    // float
        "ielts_lms_step-target-score",                      // float
        "ielts_lms_step-exam-preparation-time"              // string
    ];

    $which_best_describes_you       = get_user_meta($current_user_id, 'ielts_lms_step-which-best-describes-you', true);
    $what_kind_of_student_you_are   = get_user_meta($current_user_id, 'ielts_lms_step-what-kind-of-student-you-are', true);
    $tell_us_about_your_child       = get_user_meta($current_user_id, 'ielts_lms_step-tell-us-about-your-child', true);
    
    $my_reason_for_practicing_ielts = get_user_meta($current_user_id, 'ielts_lms_step-my-reason-for-practicing-ielts', true);
    $how_about_an_ielts_score       = get_user_meta($current_user_id, 'ielts_lms_step-how-about-an-ielts-score', true);

    $previous_score                 = get_user_meta($current_user_id, 'ielts_lms_step-previous-score', true);
    $target_score                   = get_user_meta($current_user_id, 'ielts_lms_step-target-score', true);
    $exam_preparation_time          = get_user_meta($current_user_id, 'ielts_lms_step-exam-preparation-time', true);

    $is_completed                   = get_user_meta($current_user_id, 'account-completed', true);

    
?>
<style>
    .notice, .digits_admin_notice.notice {display: none !important;}
</style>

<h1 class="wp-heading-inline">Profile</h1>
<hr class="wp-header-end" />


<h2 id="profile-nav" class="nav-tab-wrapper">
	<a class="nav-tab" href="<?php echo site_url(); ?>/wp-admin/user-edit.php?user_id=<?php echo $current_user_id; ?>">Profile</a>
</h2>

<form method="POST" id="ielts-lms-profile">
    <hr class="wp-header-end" />

    <div class="step__container" data-step="1" data-type="steps">
        <h2>Step 1</h2>
        <!--begin::step-1-->
        <table class="form-table" role="presentation">
            <tbody>
                <tr class="which-best-describes-you__wrap">
                    <th><label for="which-best-describes-you">Which best describes you?</label></th>
                    <td>
                        <select name="which-best-describes-you" id="which-best-describes-you">
                            <option value="none" <?php echo ($which_best_describes_you == "" || $which_best_describes_you == "none")? 'selected' : ''; ?>></option>
                            <option value="current-student" <?php echo ($which_best_describes_you == "current-student")? 'selected' : ''; ?>>Current Student</option>
                            <option value="parent-or-guardian-of-current-student" <?php echo ($which_best_describes_you == "parent-or-guardian-of-current-student")? 'selected' : ''; ?>>Parent or Guardian of current student</option>
                            <option value="working-professional" <?php echo ($which_best_describes_you == "working-professional")? 'selected' : ''; ?>>Working Professional</option>
                            <option value="institution-staff" <?php echo ($which_best_describes_you == "institution-staff")? 'selected' : ''; ?>>Institution Staff</option>
                            <option value="partner" <?php echo ($which_best_describes_you == "partner")? 'selected' : ''; ?>>Partner</option>
                        </select><br />
                    </td>
                </tr>
                <tr class="what-kind-of-student-you-are__wrap <?php echo ($which_best_describes_you == "current-student")? '' : 'hidden'; ?>" data-for="step-1" data-type="child">
                    <th>
                        <label for="what-kind-of-student-you-are">What kind of student you are?</label>
                    </th>
                    <td>
                        <select name="what-kind-of-student-you-are" id="what-kind-of-student-you-are">
                        
                            <option value="junior-Middle-high-school" <?php echo ($what_kind_of_student_you_are == "junior-Middle-high-school")? 'selected' : ''; ?>>Junior/Middle high school</option>
                            <option value="high-school-student" <?php echo ($what_kind_of_student_you_are == "high-school-student")? 'selected' : ''; ?>>High school student</option>
                            <option value="college-University-student" <?php echo ($what_kind_of_student_you_are == "college-University-student")? 'selected' : ''; ?>>College/University student</option>
                            <option value="graduate-student" <?php echo ($what_kind_of_student_you_are == "graduate-student")? 'selected' : ''; ?>>Graduate student</option>
                            <option value="other" <?php echo ($what_kind_of_student_you_are == "other")? 'selected' : ''; ?>>Other</option>
                        </select><br />
                    </td>
                </tr>
                <tr class="tell-us-about-your-child__wrap  <?php echo ($which_best_describes_you == "parent-or-guardian-of-current-student")? '' : 'hidden'; ?>" data-for="step-1" data-type="parent">
                    <th><label for="tell-us-about-your-child">Tell us about your child?</label></th>
                    <td>
                        <select name="tell-us-about-your-child" id="tell-us-about-your-child">
                        <option value="junior-Middle-high-school" <?php echo ($tell_us_about_your_child == "junior-Middle-high-school")? 'selected' : ''; ?>>Junior/Middle high school</option>
                            <option value="high-school-student" <?php echo ($tell_us_about_your_child == "high-school-student")? 'selected' : ''; ?>>High school student</option>
                            <option value="college-University-student" <?php echo ($tell_us_about_your_child == "college-University-student")? 'selected' : ''; ?>>College/University student</option>
                            <option value="graduate-student" <?php echo ($tell_us_about_your_child == "graduate-student")? 'selected' : ''; ?>>Graduate student</option>
                            <option value="other" <?php echo ($tell_us_about_your_child == "other")? 'selected' : ''; ?>>Other</option>
                        </select><br />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr class="wp-header-end" />

    <div class="step__container <?php echo ($which_best_describes_you == "" || $which_best_describes_you == "none")? 'hidden' : ''; ?>" data-step="2" data-type="steps">
        <h2>Step 2</h2>
        
        <!--begin::step-2-->
        <table class="form-table" role="presentation" >
            <tbody>
                <tr class="my-reason-for-practicing-ielts">
                    <th><label for="my-reason-for-practicing-ielts">My reason for practicing IELTS</label></th>
                    <td>
                        <select name="my-reason-for-practicing-ielts" id="my-reason-for-practicing-ielts">
                            <option value="study-abroad" <?php echo ($my_reason_for_practicing_ielts == "study-abroad")? 'selected' : ''; ?>>Study abroad</option>
                            <option value="immigration" <?php echo ($my_reason_for_practicing_ielts == "immigration")? 'selected' : ''; ?>>Immigration</option>
                            <option value="job-requirements" <?php echo ($my_reason_for_practicing_ielts == "job-requirements")? 'selected' : ''; ?>>Job requirements</option>
                            <option value="other" <?php echo ($my_reason_for_practicing_ielts == "other")? 'selected' : ''; ?>>Other</option>
                        </select><br />
                    </td>
                </tr>

                <tr class="how-about-an-ielts-score">
                    <th><label for="how-about-an-ielts-score">How about an IELTS score?</label></th>
                    <td>
                        <select name="how-about-an-ielts-score" id="how-about-an-ielts-score">
                            <option value="i-have-an-ielts-score" <?php echo ($how_about_an_ielts_score == "i-have-an-ielts-score")? 'selected' : ''; ?>>I have an IELTS score</option>
                            <option value="i-dont-have-an-ielts-score" <?php echo ($how_about_an_ielts_score == "i-dont-have-an-ielts-score")? 'selected' : ''; ?>>I don’t have an IELTS score</option>
                        </select><br />
                    </td>
                </tr>


                <!-- i have score -->
                <tr class="previous-score <?php echo ($how_about_an_ielts_score == "i-have-an-ielts-score")? '' : 'hidden'; ?>" data-for="i-have-an-ielts-score">
                    <th><label for="previous-score">Previous Score</label></th>
                    <td>
                        <select name="previous-score" id="previous-score">
                            <option value="9.0" <?php echo ($previous_score == "9.0")? 'selected' : ''; ?>>9.0</option>
                            <option value="8.5" <?php echo ($previous_score == "8.5")? 'selected' : ''; ?>>8.5</option>
                            <option value="8.0" <?php echo ($previous_score == "8.0")? 'selected' : ''; ?>>8.0</option>
                            <option value="7.5" <?php echo ($previous_score == "7.5")? 'selected' : ''; ?>>7.5</option>
                            <option value="7.0" <?php echo ($previous_score == "7.0")? 'selected' : ''; ?>>7.0</option>
                            <option value="6.5" <?php echo ($previous_score == "6.5")? 'selected' : ''; ?>>6.5</option>
                            <option value="6.0" <?php echo ($previous_score == "6.0")? 'selected' : ''; ?>>6.0</option>
                            <option value="5.5" <?php echo ($previous_score == "5.5")? 'selected' : ''; ?>>5.5</option>
                            <option value="5.0" <?php echo ($previous_score == "5.0")? 'selected' : ''; ?>>5.0</option>
                            <option value="4.5" <?php echo ($previous_score == "4.5")? 'selected' : ''; ?>>4.5</option>
                            <option value="4.0" <?php echo ($previous_score == "4.0")? 'selected' : ''; ?>>4.0</option>
                            <option value="3.5" <?php echo ($previous_score == "3.5")? 'selected' : ''; ?>>3.5</option>
                        </select><br />
                    </td>
                </tr>

                <tr class="target-score" data-for="i-have-an-ielts-score">
                    <th><label for="target-score">Target Score</label></th>
                    <td>
                        <select name="target-score" id="target-score">
                            <option value="9.0" <?php echo ($target_score == "9.0")? 'selected' : ''; ?>>9.0</option>
                            <option value="8.5" <?php echo ($target_score == "8.5")? 'selected' : ''; ?>>8.5</option>
                            <option value="8.0" <?php echo ($target_score == "8.0")? 'selected' : ''; ?>>8.0</option>
                            <option value="7.5" <?php echo ($target_score == "7.5")? 'selected' : ''; ?>>7.5</option>
                            <option value="7.0" <?php echo ($target_score == "7.0")? 'selected' : ''; ?>>7.0</option>
                            <option value="6.5" <?php echo ($target_score == "6.5")? 'selected' : ''; ?>>6.5</option>
                            <option value="6.0" <?php echo ($target_score == "6.0")? 'selected' : ''; ?>>6.0</option>
                            <option value="5.5" <?php echo ($target_score == "5.5")? 'selected' : ''; ?>>5.5</option>
                            <option value="5.0" <?php echo ($target_score == "5.0")? 'selected' : ''; ?>>5.0</option>
                            <option value="4.5" <?php echo ($target_score == "4.5")? 'selected' : ''; ?>>4.5</option>
                            <option value="4.0" <?php echo ($target_score == "4.0")? 'selected' : ''; ?>>4.0</option>
                            <option value="3.5" <?php echo ($target_score == "3.5")? 'selected' : ''; ?>>3.5</option>
                        </select><br />
                    </td>
                </tr>

                <tr class="exam-preparation-time" data-for="i-have-an-ielts-score">
                    <th><label for="exam-preparation-time">Exam preparation time</label></th>
                    <td>
                        <select name="exam-preparation-time" id="exam-preparation-time">
                            <option value="1-month" <?php echo ($exam_preparation_time == "1-month")? 'selected' : ''; ?>>1 Month</option>
                            <option value="2-months" <?php echo ($exam_preparation_time == "2-months")? 'selected' : ''; ?>>2 Months</option>
                            <option value="3-months" <?php echo ($exam_preparation_time == "3-months")? 'selected' : ''; ?>>3 Months</option>
                            <option value="6-months" <?php echo ($exam_preparation_time == "6-months")? 'selected' : ''; ?>>6 Months</option>
                            <option value="12-months" <?php echo ($exam_preparation_time == "12-months")? 'selected' : ''; ?>>12 Months</option>
                            <option value="more-then-12-months" <?php echo ($exam_preparation_time == "more-then-12-months")? 'selected' : ''; ?>>More then 12 Months</option>
                        </select><br />
                    </td>
                </tr>

                
                
            </tbody>
        </table>
    </div>

    <hr class="wp-header-end" />

    <div class="step__container " data-step="3" data-type="steps">
        <h2>Final</h2>
        
        <!--begin::step-2-->
        <table class="form-table" role="presentation" >
            <tbody>
                <tr class="complete-profile">
                    <th><label for="complete-profile">Complete profile</label></th>
                    <td>
                        
                        <select name="complete-profile" id="complete-profile">
                            <option <?php echo ($is_completed == 1)? 'selected' : ''; ?> value="1">Completed</option>
                            <option <?php echo ($is_completed != 1)? 'selected' : ''; ?> value="0">Pending</option>
                        </select><br />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="submit">
        <input type="submit" name="submit" id="submit" class="button button-primary" value="Update Profile">
        <input type="hidden" name="user_id" id="user_id" value="<?php echo $current_user_id; ?>" />
    </p>
</form>


<script>
    jQuery(document).ready(function($){
        $('#ielts-lms-edit-profile').addClass('nav-tab-active');
        $(document).on('change','#which-best-describes-you', function(){
            
            if($(this).val() === "none"){
                $('[data-for="step-1"]').addClass('hidden');
                $('[data-step="2"]').addClass('hidden');
                
            } else if($(this).val() === "current-student"){
                $('[data-for="step-1"]').addClass('hidden');
                $('[data-type="child"]').removeClass('hidden');

                $('[data-step="2"]').removeClass('hidden');
            } else if($(this).val() === "parent-or-guardian-of-current-student"){
                $('[data-for="step-1"]').addClass('hidden');
                $('[data-type="parent"]').removeClass('hidden');
                $('[data-step="2"]').removeClass('hidden');
            } else {
                $('[data-for="step-1"]').addClass('hidden');
                $('[data-step="2"]').removeClass('hidden');
            }
        });
        $(document).on('change','#how-about-an-ielts-score', function(){
            if($(this).val() === "i-have-an-ielts-score"){
                $('[data-for="previous-score"]').removeClass('hidden');
                
            } else if($(this).val() === "i-dont-have-an-ielts-score"){
                $('[data-for="previous-score"]').addClass('hidden');
            }
        });

        $(document).on('submit','#ielts-lms-profile', function(event){
            event.preventDefault();
            let data = {};
            let aboutStudent    = jQuery('#which-best-describes-you').val();
            let myReason        = jQuery('#my-reason-for-practicing-ielts').val();
            let score           = jQuery('#how-about-an-ielts-score').val();
            let previousScore   = jQuery('#previous-score').val();
            let targetScore     = jQuery('#target-score').val();
            let time            = jQuery('#exam-preparation-time').val();

            if(aboutStudent !== "none" || aboutStudent !== ""){

                data["ielts_lms_step-which-best-describes-you"] = aboutStudent;
                if(aboutStudent == "current-student"){
                    let whatKind = jQuery('#what-kind-of-student-you-are').val();
                    data["ielts_lms_step-what-kind-of-student-you-are"] = whatKind;
                } else {
                    let whatKind = jQuery('#tell-us-about-your-child').val();
                    data["ielts_lms_step-tell-us-about-your-child"] = whatKind;
                }

                data["ielts_lms_step-my-reason-for-practicing-ielts"]   = myReason;
                data["ielts_lms_step-how-about-an-ielts-score"]         = score;          
                data["ielts_lms_step-previous-score"]                   = previousScore;         
                data["ielts_lms_step-target-score"]                     = targetScore;                             
                data["ielts_lms_step-exam-preparation-time"]            = time;                     
                data["account-completed"] = jQuery('#complete-profile').val();

                

                $.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    data:{
                        "action": 'ielts-lms-admin-edit-profile',
                        "data": data,
                        "user_id": jQuery('#user_id').val()
                    },
                    cache: false,
                    beforeSend: function(){
                        jQuery('[type="submit"]').prop('disabled', true);
                        jQuery('[type="submit"]').html('Saving...');
                    },
                    success: function(json){
                        if(json.success){

                        } else {
                            alert("Failed to update profile");
                        }
                        jQuery('[type="submit"]').prop('disabled', false);
                        jQuery('[type="submit"]').html('Update Profile');
                    },
                    error: function(){
                        alert("Failed to update profile");
                        jQuery('[type="submit"]').prop('disabled', false);
                        jQuery('[type="submit"]').html('Update Profile');
                    }
                });

            } else {
                alert("cannout process empty value");
            }

        });

        


    });
</script>