<?php /* Template Name: Registration */ ?>
<?php get_header();?>

<?php get_template_part('partials/breadcrumbs'); ?>
<!--Custom function-->
<style>
.error
{
    color: red;
    font-family: 'Gilroy';
    font-weight: bold;
    position: relative;
    font-size: 14px;
    text-align: left;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #c62827;
}
</style>

<div class="registration-wrap"> 
 <div class="container">  
        <div class="row">
            <div class="col-md-12 col-lg-6 text-left location-wrap">
                <div class="img-wrap">
                    <h3><?php the_field('reg_form_heading',get_the_ID()); ?></h3>
                </div>
                <div class="check-form" id="check-form">
                   <form name="getSessionTokenForm" id="formLogin">   
                   
                        <div class="form-group col-lg-6">
                            <span class="form-control-wrap">
                            <input type="text" id="ssl_first_name" name="ssl_first_name" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="First Name*" required>
                            </span>
                        </div>
                        
                        <div class="form-group col-lg-6">
                            <span class="form-control-wrap">
                            <input type="text" id="ssl_last_name" name="ssl_last_name" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Last Name*" required>
                            </span>
                        </div>
                        
                        <div class="form-group col-lg-6">
                            <span class="form-control-wrap">
                            <input type="email" id="ssl_email" name="ssl_email" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Email*" required>
                            </span>
                        </div>
                        
                       <div class="form-group col-lg-6">
                            <span class="form-control-wrap">
                            <input type="text" id="ssl_phone" name="ssl_phone" value="" class="form-control" aria-required="true" aria-invalid="false" placeholder="Phone*" required>
                            </span>
                        </div>
                        
                        <div class="form-group col-lg-6">
                            <span class="form-control-wrap">
                            <input type="text" id="major_intersection" name="major_intersection" value="" size="50" class="form-control" aria-required="true" aria-invalid="false" placeholder="Major Intersection*" required>
                            </span>
                        </div>
                                               
                       <!--<div class="form-group col-lg-6">-->
                       <!--     <span class="form-control-wrap preferreddate">-->
                            <!--<div class="box-date">-->
                       <!--     <input type="date" id="preferreddate" name="preferreddate" value="" class="form-control" aria-required="true" aria-invalid="false" placeholder="Preferred-Date*" required>-->
                            <!--<p class="started-course">Course Start Date</p></div>-->
                            <!--<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">-->
                       <!--     </span>-->
                       <!--</div>-->
                       <div class="form-group col-lg-6">
                            <span class="form-control-wrap preferreddate">
                            <input placeholder="Course Start Date*"  type="text" onfocus="(this.type='date')" id="preferreddate" name="preferreddate" value="" class="form-control" aria-required="true" aria-invalid="false" >
                            </span>
                       </div>
                       
                       <div class="location-wrap col-lg-12 col-md-12">
                           <h3>Package Details</h3>
                           </h4>Please note: Top Star Driving School will only take a $50 deposit at the time of registration for Online Courses, *Full payment for Private Lesson Packages will be required online</h4>
                       </div>
                       
                      <div class="form-group col-lg-12">
                            <span class="form-control-wrap know-type">
                                <select name="know-type" id="know-type" class="form-control" aria-required="true" aria-invalid="false" required> 
                                    <option value="">How did you hear about us?</option>
                                    <option value="Google">Google</option>
                                    <option value="Friends/Relatives">Friends/Relatives</option>
                                    <option value="Flyer">Flyer</option>
                                    <option value="Other">Other</option>
                                </select>
                            </span>
                       </div>
                       
                        <div class="form-group col-lg-12" id="know-other-specification" style="display:none">
                            <span class="form-control-wrap">
                                <textarea rows="5" cols="50" placeholder="Please Specify" id="other-specification" class="form-control"></textarea>
                            </span>
                        </div>
                       
                       <div class="form-group col-lg-12">
                            <span class="form-control-wrap">
                            <select name="location" id="location" class="form-control" aria-required="true" aria-invalid="false" required>
                                <option value="">Select Location*</option>                                   
                                <?php get_template_part('partials/top-star-locations'); ?>                              
                            </select>
                            </span>
                       </div>
                      
                       <div class="form-group col-lg-12 col-md-12 location_package">
                            <span class="form-control-wrap location-newmarket-package-details" id="location-newmarket-package-details" style="display:none">
                                <select name="location-newmarket-package" class="form-control" id="location-newmarket-package" aria-required="true" aria-invalid="false">
                                    <option value="">Choose Newmarket Package</option>
                                    <?php
                                    $args = array(
                                        'post_type' => 'newmarket_packages',
                                        'posts_per_page' => 2,
                                        'order' => 'DESC'
                                    );
                                    $post_query = new WP_Query($args);
                                    if ($post_query->have_posts()) {
                                        while ($post_query->have_posts()) {
                                            $post_query->the_post();
                                            $post_id = get_the_ID();
                                            $final_total_price = get_field('price');
                                            //$final_total_price = 50;
                                    ?>
                                        <option value="<?php echo the_title() .'-'.$final_total_price ?>"><?php the_title(); ?></option>
                                    <?php
                                          }
                                          wp_reset_postdata();
                                        }
                                    ?>
                                </select>
                            </span>
                            <!--<span class="form-control-wrap location-bradford-package-details" id="location-bradford-package-details" style="display:none">-->
                                <!--<select name="location-bradford-package" class="form-control" id="location-bradford-package" aria-required="true" aria-invalid="false">-->
                                     <!--<option value="">Choose Bradford Package</option>-->
                                    <?php
                                    $args = array(
                                        'post_type' => 'bradford_packages',
                                        'posts_per_page' => -1,
                                        'order' => 'ASC'
                                    );
                                    $post_query = new WP_Query($args);
                                    if ($post_query->have_posts()) {
                                        while ($post_query->have_posts()) {
                                            $post_query->the_post();
                                            $post_id = get_the_ID();
                                            // $final_total_price = get_field('price');
                                            $final_total_price = 50;
                                    ?>
                                         <!--<option value="<?php //echo the_title() .'-'.$final_total_price ?>"><?php //the_title(); ?></option> --->
                                    <?php
                                          }
                                          wp_reset_postdata();
                                        }
                                    ?>
                            <!--    </select>-->
                            <!--</span>-->
                        
                        </div>
                                             
                        <div class="form-group col-lg-12">
                                <span class="form-control-wrap package-type">
                                <select name="package-type" id="package-type" class="form-control" aria-required="true" aria-invalid="false" required>
                                <option value="">Choose Package type*</option>
                                <option value="Full Course">Full Course</option>
                                <option value="Private lessons">Private lessons</option>
                                </select>
                                </span>
                        </div>
                        
                        <div class="form-group col-lg-12 col-md-12 course_package">
                            <span class="form-control-wrap full-course-package-details" id="full-course-package-details" style="display:none">
                                <select name="full-course-package" class="form-control" id="full-course-package" aria-required="true" aria-invalid="false">
                                    <option value="">Choose Full Course Package</option>
                                    <?php
                                    $args = array(
                                        'post_type' => 'our_packages',
                                        'posts_per_page' => -1,
                                        'order' => 'ASC'
                                    );
                                    $post_query = new WP_Query($args);
                                    if ($post_query->have_posts()) {
                                        while ($post_query->have_posts()) {
                                            $post_query->the_post();
                                            $post_id = get_the_ID();
                                            $final_total_price = get_field('price');
											echo $final_total_price;
                                            //$final_total_price = 50;
                                    ?>
                                        <option value="<?php echo the_title() .'-'.$final_total_price ?>"><?php the_title(); ?></option>
                                    <?php
                                          }
                                          wp_reset_postdata();
                                        }
                                    ?>
                                </select>
                            </span>
						
                            
                            <span class="form-control-wrap full-private-lessons-package" id="full-private-lessons-package" style="display:none">
                                <select name="private-lessons-package" class="form-control" id="private-lessons-package" aria-required="true" aria-invalid="false">
                                    <option value="">Choose your private lessons package</option>
                                    <?php
                                    $args = array(
                                        'post_type' => 'course_package',
                                        'posts_per_page' => -1,
                                        'order' => 'ASC'
                                    );
                                    $post_query = new WP_Query($args);
                                    if ($post_query->have_posts()) {
                                        while ($post_query->have_posts()) {
                                            $post_query->the_post();
                                            $post_id = get_the_ID();
                                            $title = get_field('course_package_title');
                                            $type = get_field('course_package_type');
                                            $price = '$'.get_field('course_package_price').' + '.get_field('course_package_tax').'% HST';
                                            $total_price = '$'.get_field('course_package_price').' + '.get_field('course_package_tax').'% HST = $'.get_field('course_package_total_amount');
                                            $final_total_price = get_field('course_package_total_amount');
                                    ?>
                                    
                                        <option value="<?php echo the_title() .'-'.$final_total_price ?>"><?php echo $title .' - '.$price .' ('. $type .')'; ?></option>
                                        
                                    <?php
                                          }
                                          wp_reset_postdata();
                                        }
                                    ?>
                                </select>
                            </span>
                        
                        </div>
                        
                        <div class="form-group col-lg-12">
                            <span class="form-control-wrap">
                                <textarea rows="5" cols="50" placeholder="Please include any details needed I.E Road test date, time, DriveTest Location" name="registration_details" id="registration_details" class="form-control" required></textarea>
                            </span>
                        </div>
                                                               
                       <div class="form-group col-lg-12">
                            <span class="form-control-wrap">
                            <input id="card" type="text" name="card" class="form-control" placeholder="Credit Card Number* Format - 4124939999999990" required />
                            </span>
                       </div>
                       
                       <div class="form-group col-lg-12">
                            <span class="form-control-wrap">
                            <input type="text" id="registration_card_name" name="registration_card_name" value="" size="100" class="form-control" aria-required="true" aria-invalid="false" placeholder="Name on Credit Card*" required>
                            </span>
                       </div>
                       
                       <div class="form-group col-lg-7">
                            <span class="form-control-wrap">
                            <input id="exp" type="text" name="exp" class="form-control" placeholder="Expiry date: mm/yy" required />
                            </span>
                       </div>
                       
                       <div class="form-group col-lg-5">
                            <span class="form-control-wrap">
                            <input id="cvv" type="text" name="cvv" class="form-control" placeholder="CVV* Format - 123" required>
                            </span>
                       </div>
                        
                       <div class="form-group col-lg-12">
                               <input type="text" id="ssl_amount" readonly="true" name="ssl_amount" class="form-control" placeholder=" Transaction Amount:" required>
                       </div>
                       
                       <div class="form-group col-lg-12">
							<div class="g-recaptcha" data-sitekey="6LfqUdYZAAAAAIyzmbj9v4pHMWlygZ97nTFqFT1N"></div>
							<span id="captcha_error" class="error"></span>
						</div>
                       <!--<div class="form-group col-lg-12">-->
                       <!--     <input type="text" id="final_amount" name="final_amount" readonly="true" class="form-control" value="1" placeholder="Transaction Amount:" required>-->
                       <!--</div>-->
                       
                       <div class="form-group col-lg-12">
                            <button class="top-star-registration-submit" onclick="return initiateCheckoutJS();">Submit</button> 
                       </div>
                       
                    </form>
                    
                    <input id="merchanttxnid" type="text" name="merchanttxnid" value="MerchantTXNIDHere" style="display:none" /> <br />
                    <input id="gettoken" type="hidden" name="gettoken" value="y" />
                    <input id="addtoken" type="hidden" name="addtoken" value="y" />
                    <input id="token" type="text" name="token" style="display:none">
                    <div id="loading" style="display:none">
                      <div class="loading-inner">
                        <img id="loading-image"src="<?php echo get_stylesheet_directory_uri() ;?>/images/topstar-loader.gif" alt="Loading" />
                         </div>
                    </div>
                    <!--<img id="loading-image"  src="<?php echo get_stylesheet_directory_uri() ;?>/images/loader.gif" alt="Loading" />-->
                    <!--<h3>Transaction Status:</h3><div id="txn_status"></div>-->
                    <!--<br>-->
                    <!--<h3>Transaction Response:</h3><div id="txn_response"></div>-->
                    <div id="txn_response"></div>
                    
                </div>
            </div>
            
            <div class="col-md-12 col-lg-6 image-right">
                <div class="img-wrap all-package-details" id="all-package-details">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
        function initiateCheckoutJS() {
            if (grecaptcha.getResponse() == ""){
                 $("#captcha_error").html("Recaptcha is required.");
				return false;
			}
			else{
            $("#formLogin").validate({
                rules: {
                  ssl_first_name: "required",
                  ssl_last_name: "required",
                //   ssl_email: {
                //     required: true,
                //     email: true
                //   },
                  ssl_phone: {
                    required: true,
                    minlength: 8,
                    maxlength: 15
                  }
                },
                
                messages: {
                  ssl_first_name: "Please enter your firstname",
                  ssl_last_name: "Please enter your lastname",
                  ssl_phone: {
                    required: "Please provide a phone number",
                    minlength: "Your phone must be at least 8 characters long"
                  },
                //   ssl_email: "Please enter a valid email address"
                },

                submitHandler: function(form) {
                    var tokenRequest = {
                        ssl_first_name: document.getElementById('ssl_first_name').value,
                        ssl_last_name: document.getElementById('ssl_last_name').value,
                        ssl_amount: document.getElementById('ssl_amount').value,
                        ssl_email: document.getElementById('ssl_email').value,
                        ssl_phone: document.getElementById('ssl_phone').value,
                        ssl_description : jQuery('#package-type').find(":selected").text(),
                    };
                    jQuery("#loading").show();
                    $.post("https://topstardriving.com/wp-admin/admin-ajax.php?action=top_star_payment", tokenRequest, function (data) {
                        document.getElementById('token').value = data;
                        transactionToken = data;
                        pay();
                    });
                    return false;
                }
            });
             
            }
        }

        // function showResult(status, msg) {
        //     document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
        //     document.getElementById('txn_response').innerHTML = msg;
        // }
    </script>

    <script>
        function pay() {
            var form= $("#formLogin");
            var token = document.getElementById('token').value;
            var card = document.getElementById('card').value;
            var exp = document.getElementById('exp').value;
            var cvv = document.getElementById('cvv').value;
            var gettoken = document.getElementById('gettoken').value;
            var addtoken = document.getElementById('addtoken').value;
            var firstname = document.getElementById('ssl_first_name').value;
            var lastname = document.getElementById('ssl_last_name').value;
            var ssl_email = document.getElementById('ssl_email').value;
            var ssl_phone = document.getElementById('ssl_phone').value;
            var package_type = jQuery('#package-type').find(":selected").text();
            var registration_card_name = document.getElementById('registration_card_name').value;
            var selected_full_lesson = '';
            var selected_full_lesson = jQuery('#full-course-package').find(":selected").val();
            var full_first_option = jQuery('#full-course-package').find("option:first").val();
// 			var selected_full_online_lesson = jQuery('#full-online-course-package').find(":selected").val();
//             var full_online_first_option = jQuery('#full-online-course-package').find("option:first").val();
            var registration_major_intersection = form.find("#major_intersection").val();
            var registration_details = form.find("#registration_details").val();
            var registration_date =  form.find("#preferreddate").val();
            var registration_no_type =  form.find("#know-type").val();
            var registration_location= form.find("#location").val();
            var resgistration_location_newmarket= form.find("#location-newmarket-package").val();
            var credit_card_name = form.find("#registration_card_name").val();
            
            if(selected_full_lesson !='' && selected_full_lesson != full_first_option)
            {   
                var ssl_description = package_type + ' - ' + selected_full_lesson;
            }
            
            var selected_private_lesson = '';
            var selected_private_lesson = jQuery('#private-lessons-package').find(":selected").val();
            var private_first_option = jQuery('#private-lessons-package').find("option:first").val();
            if(selected_private_lesson !='' && selected_private_lesson != private_first_option)
            {
                var ssl_description = package_type  + ' - ' + selected_private_lesson;
            }
            
            var merchanttxnid = document.getElementById('merchanttxnid').value;
            console.log(ssl_description);
            var paymentData = {
                ssl_txn_auth_token: token,
                ssl_card_number: card,
                ssl_exp_date: exp,
                ssl_get_token: gettoken,
                ssl_add_token: addtoken,
                ssl_email: ssl_email,
                ssl_phone: ssl_phone,
                ssl_cvv2cvc2: cvv,
                ssl_merchant_txn_id: merchanttxnid,
                registration_first_name: firstname,
                registration_last_name: lastname,
                registration_phone: ssl_phone,
                registration_major_intersection: registration_major_intersection,
                registration_date: registration_date,
                registration_know_type: registration_no_type,
                registration_location: registration_location,
                resgistration_location_newmarket: resgistration_location_newmarket,
                registration_description: ssl_description,
                registration_details: registration_details,
                credit_card_name: credit_card_name,
            };
            
            var callback = {
                onError: function (error) {
                    showResult("error", error);
                },
                onDeclined: function (response) {
                    console.log("Result Message=" + response['ssl_result_message']);
                    showResult("declined", JSON.stringify(response));
                },
                onApproval: function (response) {
                    console.log("Result Message=" + response['ssl_result_message']);
                    showResult("approval", JSON.stringify(response));
                    $("#formLogin").trigger('reset');
                }
            };
            ConvergeEmbeddedPayment.pay(paymentData, callback);
            return false;
        }

        function showResult(status, msg) {
            event.preventDefault();
            //document.getElementById('txn_status').innerHTML = "<b>" + status + "</b>";
            //document.getElementById('txn_response').innerHTML = msg;
            var obj = JSON.parse(msg);
            console.log(msg);
            var registration_approval_code = obj.ssl_approval_code;
            
            var form= $("#formLogin");
            
            var detail_info = {
                   post_title: form.find("#ssl_first_name").val(),
                   registration_first_name: form.find("#ssl_first_name").val(),
                   registration_last_name: form.find("#ssl_last_name").val(),
                   registration_email: form.find("#ssl_email").val(),
                   registration_phone: form.find("#ssl_phone").val(),
                   registration_major_intersection: form.find("#major_intersection").val(),
                   registration_date: form.find("#preferreddate").val(),
                   registration_no_type: form.find("#know-type").val(),
                   registration_specification: form.find("#other-specification").val(),
                   registration_location: form.find("#location").val(),
                   resgistration_location_newmarket: form.find("#location-newmarket-package").val(),
                   registration_details: form.find("#registration_details").val(),
                   registration_package_type: form.find("#package-type").val(),
                   registration_package_details: form.find("#full-course-package").val(),
				  // registration_online_package_details: form.find("#full-online-course-package").val(),
                   registration_private_lessons_package: form.find("#private-lessons-package").val(),
                   registration_card_number: form.find("#card").val(),
                   registration_card_name: form.find("#registration_card_name").val(),
                   registration_card_expiry_date: form.find("#exp").val(),
                   registration_card_cvv : form.find("#cvv").val(),
                   registration_transaction_amount: form.find("#ssl_amount").val(),
                   registration_order_status: status,
                   registration_approval_code: registration_approval_code
            }
            
            console.log( detail_info);
            jQuery("#loading").show();
            jQuery.ajax({
        
                url: 'https://topstardriving.com/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    post_details : detail_info,
                    action: 'save_post_details_form'
                },
                beforeSend: function() {
                  jQuery("#loading").show();
                },
                complete: function(){
                    jQuery("#loading").hide();
                },
                error: function(error) {
                    console.log('failed');
                },
                success: function(response) {
                    console.log('success');
                },
                
            });
            
            jQuery("#formLogin").trigger('reset');
            jQuery(".all-package-details").hide(); 
            grecaptcha.reset();
            
            if(status == 'approval')
            {
                document.getElementById('txn_response').innerHTML = 'Thank you for your payment. Please give up to 24 hours to receive an email with your receipt. Remaining balance must be paid before in-car lessons begin.'; 
                // setTimeout('jQuery("#txn_response").hide()',10000);
            }
            else
            {
                if(obj.errorName)
                {
                    document.getElementById('txn_response').innerHTML = "Payment Declined - " + obj.errorName;    
                }
                else
                {
                    document.getElementById('txn_response').innerHTML = "Payment Declined";    
                }
                // setTimeout('jQuery("#txn_response").hide()',10000);
            }

        }
  
</script>

<?php get_footer();?>