<?php 
$this->load->view("includes/head", [
    'section' => ['datepicker']
]); 
?>

<body class="wide">

        <!-- Header -->
        <?php $this->load->view("includes/header"); ?>
        <!-- END: Header -->

        <!--Start breadcrumb Style1-->
        <!--<section class="breadcrumb-style1">
            <div class="breadcrumb-style1-bg" style="background-image: url(<?php echo base_url() . "public/"; ?>assets/images/breadcrumb/register.jpg);">
                <div class="breadcrumb-style1-bg__overlay"></div>
            </div>
            <div class="container">
                <div class="inner-content">
                    <div class="title">
                        <h2><?php echo $pageName; ?></h2>
                    </div>
                    <div class="breadcrumb-menu">
                        <ul class="clearfix">
                            <li><a href="<?php echo base_url(); ?>">Home</a></li>
                            <li><span class="icon-next"></span></li>
                            <li class="active"><?php echo $pageName; ?></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section> -->
		
		<div class="page-hd">
	 
		<img src="<?php echo base_url() . "public/"; ?>assets/images/breadcrumb/register.jpg" alt>
		 
	</div>

        <div class="container p-t-40 p-b-40">
		
		<div class="sec-title pb-5  text-start wow fadeInUp" data-wow-duration='300ms'>
      <h3 class="sec-title__title"><?php echo $pageName; ?></h3> 
	 </div>
		
             
            <div class="seperator right"></div>
            <div class="col-md-8" style="border-right: 0px solid #ccc;">

                <div class="main-contact-form__inner">

                    <div class="contact-form row">
                        <form action="" role="form" method="post" id="_form">

                            <?php $this->load->view('includes/alert-ci'); ?>
                            
                            <?php $this->load->view('includes/alert'); ?>

                            <div class="row form-group">
                                
                                <div class="col-md-6"><label for="first_name">First Name *</label>
								<input autocomplete="on" type="text" name="first_name" class="form-control p-10 rounded required" placeholder="Enter your First Name" id="first_name" value="<?php echo set_value('first_name'); ?>"></div>
                            
                                <div class="col-md-6"><label for="last_name">Middle Name *</label>
								<input autocomplete="on" type="text" name="last_name" class="form-control p-10 rounded required" placeholder="Enter your Middle Name" id="last_name" value="<?php echo set_value('last_name'); ?>"></div>
                             
                               
                                <div class="col-md-6"><label for="last_name">Last Name *</label>
								<input autocomplete="on" type="text" name="last_name" class="form-control p-10 rounded required" placeholder="Enter your Last Name" id="last_name" value="<?php echo set_value('last_name'); ?>"></div>
								
								 
                                 
                                
                             

                            
                                 
                                <div class="col-md-6"><label for="email">Student Email *</label>
                                    <div class="input-box"><input autocomplete="on" type="email" name="email" class="form-control p-10 rounded required" placeholder="Student Email" id="email" value="<?php echo set_value('email'); ?>"></div>
                                </div>
								
								<div class="col-md-6"><label for="email">Date of Birth  </label>
                                    <div class="input-box"><input autocomplete="on" type="date" name="email" class="form-control p-10 rounded required" placeholder="Date of Birth" id="email" value="<?php echo set_value('email'); ?>"></div>
                                </div>
								
								<div class="col-md-6"><label for="email">Parent/Guardian Email (if applicable) *</label>
                                    <div class="input-box"><input autocomplete="on" type="email" name="email" class="form-control p-10 rounded required" placeholder="Parent/Guardian Email (if applicable)" id="email" value="<?php echo set_value('email'); ?>"></div>
                                </div>
								
								<div class="col-md-6">
								<label for="phone_number">Home Phone  *</label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="phone_number" class="form-control p-10 rounded required" placeholder="Home Phone No." id="phone_number" value="<?php echo set_value('phone_number'); ?>"></div>
                                </div>
								
								<div class="col-md-6">
								<label for="phone_number">Cell   *</label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="phone_number" class="form-control p-10 rounded required" placeholder="Cell No." id="phone_number" value="<?php echo set_value('phone_number'); ?>"></div>
                                </div>
								
								
								<div class="col-md-12">
								<label for="phone_number">  Address *</label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="Full Address" ></div>
                                </div>
								
								
								<div class="col-md-6">
								<label for="phone_number">Postal Code  </label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="XXX XXX" ></div>
                                </div>
								
								<div class="col-md-6">
								<label for="phone_number">How did you hear about us </label>
                                    <div class="input-box">
									<select id="hear" name="hear" class="form-control p-10 rounded required">
                    <option value="">How did you hear about us</option>
					<option value="Google">Google</option>
                    <option value="Friend/Family">Friend/Family</option>
                    <option value="Social Media">Social Media</option>
                    <option value="Drive Test Advertisement">Drive Test Advertisement</option>
                    
                  </select></div>
                                </div>
								
								
								
								<div class="col-md-6">
								<label for="phone_number">License Number  </label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="License Number" ></div>
                                </div>
								
								<div class="col-md-6">
								<label for="phone_number">License Issue Date  </label>
                                    <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="License Issue Date" ></div>
                                </div>
								
								
								
								
                            </div>

                            <!--<div class="row form-group">
                                <div class="col-md-3"><label for="major_intersection">Major Intersection *</label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input autocomplete="on" type="text" name="major_intersection" class="form-control p-10 rounded required" placeholder="Enter Major Intersection" id="major_intersection" value="<?php echo set_value('major_intersection'); ?>"></div>
                                </div>
                            </div> -->

                            <h4 class="form-hd">Course Details</h4>
                            <div class="row form-group">
                               
                                <div class="col-md-6"><label for="location">Location *</label>
                                    <div class="select-box">
                                        <select class="form-control p-10 rounded" name="location" id="location">
                                            <?php foreach ($provinces as $province) { ?>
                                                <option value="<?php echo $province->id; ?>" <?php if (set_value('location') == $province->id) {
                                                    echo 'selected';
                                                } ?>><?php echo $province->province; ?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                             
                                
                                <div class="col-md-6">
								<label for="package_type">Package Type *</label>
                                    <div class="select-box">
                                        <select class="form-control p-10 rounded" name="package_type" id="package_type">
                                            <option value="">Select  package type</option>
                                            <?php
                                            if (!empty($package_categories)) {
                                                foreach ($package_categories as $pcRecord) {
                                            ?>
                                            <option value="<?php echo $pcRecord->id; ?>" data-title="<?php echo $pcRecord->category; ?>" <?php if(($category_id > 0) && ($category_id == $pcRecord->id)) { echo 'selected'; } ?>><?php echo $pcRecord->category; ?></option>
                                            <?php
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                </div>
                            
                                 
                                <div class="col-md-6"><label for="package">Package *</label>
                                    <div class="select-box">
                                        <select class="form-control p-10 rounded" name="package" onChange="loadPackage();" id="package">
                                            <option value="">Select package</option>
                                            <?php
                                            if (!empty($packages)) {
                                                foreach ($packages as $package) {
                                            ?>
                                            <option value="<?php echo $package->id; ?>" <?php if ($package->id == $this->uri->segment(2)) { echo 'selected'; } ?>><?php echo $package->package_name; ?></option>
                                            <?php
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                </div>
								
								
								
								<div class="col-md-6">
								<label for="phone_number"> Start Date*</label>
                                    <div class="input-box">
									<input autocomplete="on" type="date" name="" class="form-control p-10 rounded required"  ></div>
                                </div>
								
								
								<div class="col-md-12">
								<label for="phone_number">Amount Payable (Full : $899.00)</label>
                                     <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="50" ></div>
                                </div>
								
								<!--<div class="col-md-6">
								<label for="phone_number">Mode</label>
                                    <div class="input-box">
									<select name="in_class_type" id="in_class_type" class="form-control p-10 rounded required"><option value="R">Regular Class Session</option><option value="E">Online Mode</option></select></div>
                                </div> -->
								
								
								
								
								
                            </div>
							
							<h4 class="form-hd">Payment Detail</h4>
							
							<div class="form-dis">
							(<strong>DISCLAIMER</strong>: Please note that AMB Driving School requires a deposit of $50.00 for the Full course, 4-Day course and Manual Shift Packages. The remainder of the payment can be paid in the school on the start date. For ALL independent lessons, full payment is required to be made online)
							</div>

                            <!--<div class="row form-group">
                                <div class="col-md-3"><label for="course_start_date">Course Start Date *</label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input autocomplete="on" type="text" name="course_start_date" class="form-control p-10 rounded required" placeholder="Enter Course Start Date" id="course_start_date" value="<?php echo set_value('course_start_date'); ?>"></div>
                                </div>
                            </div> -->

                            
                            
                            <!--<div class="row form-group">
                                <div class="col-md-3">
                                    <label>Payment *</label>
                                </div>
                                <div class="col-md-9">
                                    <div class="radio-group d-flex gap-3 align-items-center">
                                        <label class="radio-inline">
                                            <input name="payment" type="radio" value="Full Payment"> Full Payment
                                        </label>
                                        <label class="radio-inline">
                                            <input name="payment" type="radio" value="Partial Payment"> Partial Payment
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row form-group" style="display: none;" id="fullAmountField">
                                <div class="col-md-3"><label for="full_amount">Transaction Amount</label></div>
                                <div class="col-md-9">
                                    <div class="input-box">
                                        <input autocomplete="on" type="text" name="full_amount" class="form-control p-10 rounded required" id="full_amount" value="" readonly="readonly" aria-describedby="fullAmountHelp">
                                        <div id="fullAmountHelp" class="form-text">Amount auto-fills once a package is selected.</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row form-group" style="display: none;" id="partialAmountField">
                                <div class="col-md-3"><label for="partial_amount">Transaction Amount</label></div>
                                <div class="col-md-9">
                                    <div class="input-box">
                                        <input autocomplete="on" type="text" name="partial_amount" class="form-control p-10 rounded required" placeholder="Enter Partial Amount" id="partial_amount" value="" aria-describedby="partialAmountHelp">
                                        <div id="partialAmountHelp" class="form-text">Amount must be less than the selected package amount.</div>
                                    </div>
                                </div>
                            </div> -->
							
							
							<div class="row form-group">
							
							<div class="col-md-6">
								<label for="phone_number">Credit Card No*</label>
                                     <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="Credit Card No" ></div>
                                </div>
								
								<div class="col-md-6">
								<label for="phone_number">Name on Card*</label>
                                     <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="Name on Card" ></div>
                                </div>
								
								<div class="col-md-4">
								<label for="phone_number">Exp Date (MM/YY)*</label>
                                     <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="MM/YY" ></div>
                                </div>
								
								<div class="col-md-4">
								<label for="phone_number">CVC*</label>
                                     <div class="input-box"><input autocomplete="on" type="text" name="" class="form-control p-10 rounded required" placeholder="CVC" ></div>
                                </div>
								
								<div class="col-md-4">
								<label for="phone_number">Card Type</label>
                                    <div class="input-box">
									<select id="card_type" name="card_type" class="form-control p-10 rounded required" required="">
                    <option value="">Card Type *</option>
                     <option value="Visa">Visa</option>
                     <option value="Master">Master</option>
                     <option value="Amex">Amex</option>
                     <option value="Debit">Debit Card</option>
                    </select>
									 </div>
                                </div>
							
							
							
							</div>
							
							
							<div class="row form-group">
                                
                                <div class="col-md-12"><label for="note">Note</label>
                                    <div class="input-box">
                                        <textarea autocomplete="on" name="note" rows="3" class="form-control p-10 rounded" placeholder=" " id="note" aria-describedby="noteHelp"><?php echo set_value('note'); ?></textarea>
                                        <div id="noteHelp" class="form-text">Please include if applicable test date, time, type of test (G2 or G), Drivetest location etc.</div>
                                    </div>
                                </div>
                            </div>
							
							
							

                            <div class="row form-group" style="height:100px;">
                                <div class="col-md-3"> <label>&nbsp;</label></div>
                                 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                <div class="col-md-9">
                                    <div class="g-recaptcha" data-sitekey="<?php echo $recaptcha_site_key ?>"></div>
                                </div>  
                            </div>

                            <input type="text" class="hidden" id="packagePrice" name="packagePrice" value="" />

                            <input type="text" class="hidden" id="packageValue" name="packageValue" value="" />
                            <input type="text" class="hidden" id="packageName" name="packageName" value="" />
                            <input type="text" class="hidden" id="locationName" name="locationName" value="" />
                            <input type="text" class="hidden" id="packageTypeName" name="packageTypeName" value="" />
                            <input type="text" class="hidden" id="packageTotalPrice" name="packageTotalPrice" value="" />
                            <input type="text" class="hidden" name="hid_local_form" value="yes">

                            <div class="button-box">

                                <button class="btn-one" id="_submit" type="submit" data-loading-text="Please wait...">
                                    <span class="txt">
                                        Submit
                                    </span>
                                </button>
                                <br>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4 img-responsive m-t-20 float-right">
                <div class="row">
                    <div class="single-package-style1">
                        <div class="plan" id="planPricing">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <?php $this->load->view("includes/footer"); ?>
        <!-- End: Footer -->

    <?php $this->load->view("includes/scripts"); ?>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () {
            $('#course_start_date').datepicker({
                format: 'yyyy-mm-dd',    // or your desired format
                startDate: 'today',      // disables all past dates
                autoclose: true,
                todayHighlight: true
            });

            $('input[name="payment"]').on('change', function () {
                if ($(this).val() === 'Full Payment') {
                    $('#fullAmountField').slideDown();
                    $('#partialAmountField').slideUp();
                } else if ($(this).val() === 'Partial Payment') {
                    $('#partialAmountField').slideDown();
                    $('#fullAmountField').slideUp();
                }
            });

            // Handle case when coming from individual package
            loadPackage();

            // Get Packages based on Package Type.
            $('#package_type').on('change', function() {
                var selectedType = $(this).val();
                var location = $("#location").val();

                var title = $(this).find("option:selected").text(); // Updated to get visible text
                $('#packageTypeName').val(title);

                $.ajax({
                    url: '<?= base_url("index/get_packages_by_type") ?>', // Adjust if needed
                    type: 'POST',
                    data: { type: selectedType, location: location },
                    success: function(response) {
                        $('#package').html(response); // Replace the entire <select> options
                        $('#package').niceSelect('destroy'); // Correct method name
                        $('#package').niceSelect();         // Re-initialize properly
                    },
                    error: function(xhr) {
                        console.log("AJAX error:", xhr.responseText);
                    }
                });
            });

            // Form Validation
            const $form = $('#_form');

            $form.validate({
                ignore: [], // <== very important for hidden select fields (nice-select hides original select)
                rules: {
                    first_name: {
                        required: true,
                        minlength: 2
                    },
                    last_name: {
                        required: true,
                        minlength: 2
                    },
                    phone_number: {
                        required: true,
                        // digits: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    major_intersection: {
                        required: true
                    },
                    location: {
                        required: true
                    },
                    package_type: {
                        required: true
                    },
                    package: {
                        required: true
                    },
                    course_start_date: {
                        required: true
                    },
                    payment: {
                        required: true
                    },
                    full_amount: {
                        required: function () {
                            return $('input[name="payment"]:checked').val() === 'Full Payment';
                        }
                    },
                    partial_amount: {
                        required: function () {
                            return $('input[name="payment"]:checked').val() === 'Partial Payment';
                        },
                        number: true,
                        min: 1
                    },
                    'g-recaptcha-response': {
                        required: true
                    }
                },
                messages: {
                    first_name: "Please enter your first name",
                    last_name: "Please enter your last name",
                    phone_number: {
                        required: "Please enter your phone number",
                        // digits: "Only digits allowed"
                    },
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    },
                    major_intersection: "Please enter major intersection",
                    location: "Please select a location",
                    package_type: "Please select a package type",
                    package: "Please select a package",
                    course_start_date: "Please enter a course start date",
                    payment: "Please select a payment option.",
                    full_amount: "Transaction amount is required for full payment.",
                    partial_amount: {
                        required: "Enter the transaction amount for partial payment.",
                        number: "Please enter a valid number.",
                        min: "Amount must be greater than 0."
                    },
                    'g-recaptcha-response': "Please verify that you are not a robot"
                },
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    if (element.is("select")) {
                        error.insertAfter(element.next('.nice-select'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element) {
                    $(element).removeClass('is-invalid');
                }
            });

            // Fix: trigger validation on nice-select option click
            $(document).on('click', '.nice-select .option', function () {
                const $select = $(this).closest('.nice-select').prev('select');

                // Wait for nice-select to update the original <select> value
                setTimeout(function () {
                    $select.valid(); // re-validate this field
                }, 10);
            });
        });

        // Show package details based on selected package.
        function loadPackage() {
            var packageId = $('select[name=package]').val();
            if(packageId > 0){
                $.post("<?php echo base_url() . "loadPackage" ?>", {
                    packageId: packageId
                })
                .done(function(data) {
                    // console.log(packageId);
                    // console.log(data);
                    $("#planPricing").html(data);
                    $("#packagePrice").val($("#planPrice").html());
                    $("#full_amount").val($('#totalAmount').html());
                    $("#packageTotalPrice").val($('#totalAmount').html());

                    $("#packageName").val($('#package option:selected').text());
                    $("#locationName").val($('#location option:selected').text());
                    $("#packageValue").val($("#packageDescription").html());

                    var title = $('#package_type').find("option:selected").text();
                    $('#packageTypeName').val(title);
                });
            }
        }
    </script>
</body>

</html>