<?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="page-heading">
	<div class="container ">
	     <div class="row">
		 <div class="col-md-6">
		 <h3 class="sec-title__title text-white"><?php echo $pageName; ?></h3> 
		 </div>
		 <div class="col-md-6">
		   <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>
	</div>
	</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">
<div class="form-dis2">
                            <?php $this->load->view('includes/alert-ci'); ?>
                            <?php $this->load->view('includes/alert'); ?>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-3"><label for="location">Location *</label></div>
                                <div class="col-md-9">
                                    <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'; } else if ($this->session->province == $province->id) { echo 'selected'; } ?> data-title="<?php echo $province->province; ?>"><?php echo $province->province; ?></option>
                                            <?php } ?>
                                        </select>
                                        <input type="text" class="hidden" id="locationName" name="locationName" value="" />
                                    </div>
                                </div>
                            </div>

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

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

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

                            <div class="row form-group">
                                <div class="col-md-3"><label for="package_type">Package Type *</label></div>
                                <div class="col-md-9">
                                    <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 echo $pcRecord->category; ?></option>
                                            <?php
                                                }
                                            }
                                            ?>
                                        </select>
                                        <input type="text" class="hidden" id="packageTypeName" name="packageTypeName" value="" />
                                    </div>
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col-md-3"><label for="package"> Package *</label></div>
                                <div class="col-md-9">
                                    <div class="select-box">
                                        <select class="form-control p-10 rounded" name="package" onChange="loadPackage();" id="package">
                                            <option value="">Select package</option>
                                        </select>
                                        <input type="text" class="hidden" id="packageName" name="packageName" value="" />
                                    </div>
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col-md-3"><label for="preferred_date">Preferred Date  </label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input autocomplete="on" type="text" name="preferred_date" class="form-control p-10 rounded" placeholder="Select Date" id="preferred_date" value="<?php echo set_value('preferred_date'); ?>"></div>
                                </div>
                            </div>
                            
                            <div class="row form-group">
                                <div class="col-md-3"><label for="parent_contact">Parent/Guardian  </label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input type="text" name="parent_contact" class="form-control p-10 rounded" placeholder="Parent/Guardian Phone or Email" id="parent_contact" value="<?php echo set_value('parent_contact'); ?>"></div>
                                </div>
                            </div>
                            
                            <div class="row form-group">
                                <div class="col-md-3"><label for="hear_about_us">How Did You Hear About Us   </label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input type="text" name="hear_about_us" class="form-control p-10 rounded" placeholder="How Did You Hear About Us " id="hear_about_us" value="<?php echo set_value('hear_about_us'); ?>"></div>
                                </div>
                            </div>
                            
                            <div class="row form-group">
                                <div class="col-md-3"><label for="postal_code">Postal Code   </label></div>
                                <div class="col-md-9">
                                    <div class="input-box"><input type="text" name="postal_code" class="form-control p-10 rounded" placeholder="Postal Code" id="postal_code" value="<?php echo set_value('postal_code'); ?>"></div>
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col-md-3"> <label for="message">Message </label></div>
                                <div class="col-md-9">
                                    <div class="input-box">
                                        <textarea autocomplete="on" name="message" rows="3" class="form-control p-10 rounded" placeholder="Message" id="message" aria-describedby="messageHelp"><?php echo set_value('message'); ?></textarea>
                                        <div id="messageHelp" class="form-text">Please include any necessary details, such as the road test date, time, and DriveTest location.</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>

                            <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 () {
            $('#preferred_date').datepicker({
                format: 'yyyy-mm-dd',    // or your desired format
                startDate: 'today',      // disables all past dates
                autoclose: true,
                todayHighlight: true
            });

            // Get Packages based on Package Type.
            $('#package_type').on('change', function() {
                var selectedType = $(this).val();
                var location = $("#location").val();
                
                // Updated to get visible text
                $("#locationName").val($('#location option:selected').text());

                var title = $('#package_type').find("option:selected").text();
                $('#packageTypeName').val(title);

                // alert($('#location option:selected').text());
                // alert($('#package_type').find("option:selected").text());

                $.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: {
                    location: {
                        required: true
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    phone_number: {
                        required: true,
                        // digits: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    package_type: {
                        required: true
                    },
                    package: {
                        required: true
                    },
                    'g-recaptcha-response': {
                        required: true
                    }
                },
                messages: {
                    location: "Please select a location",
                    name: "Please enter your first 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"
                    },
                    package_type: "Please select a package type",
                    package: "Please select a package",
                    '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);

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

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

</html>