<?php $this->load->view("includes/head"); ?>

<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/contact.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><a href="<?php echo base_url()."locations"; ?>">Locations</a></li>
                            <li><span class="icon-next"></span></li>
                            <li class="active"><?php echo $pageName; ?></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!--End breadcrumb Style1-->
		
		<!--<div class="page-hd">
	 
		<img src="<?php echo base_url() . "public/"; ?>assets/images/breadcrumb/contact.jpg" alt>
		 
	</div> -->
	
	
	<div class="c-layout-breadcrumbs-1 c-bgimage c-subtitle c-fonts-uppercase c-fonts-bold c-bg-img-center"   id="map">
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2892.042816772294!2d-79.883445523829!3d43.54314937110756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b6e5a0fe4e8d9%3A0xaa15e97201ebe12b!2s8250%20Lawson%20Rd%2C%20Milton%2C%20ON%20L9T%205C6%2C%20Canada!5e0!3m2!1sen!2sin!4v1772091364983!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </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 $locations[0]->location_name; ?></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 $locations[0]->location_name; ?></li>
                            </ul>
           </div>
		 </div>
		 </div>
	</div>
	</div>
	
	
	

        <div class="container p-t-40 p-b-40">

            <h4><?php echo $locations[0]->location_name; ?></h4>
            <div class="row">

                <div class="col-xl-6 col-lg-6">

                    <!--Start Single Contact Info Style3-->
                    <div class="col-xl-12 col-lg-12">
                        <div class="single-contact-info-style3">
                            <div class="icon">
                                <span class="icon-call-center"><span class="path1"></span><span
                                        class="path2"></span></span>
                            </div>
                            <div class="text">
                                <h4>Reach Us</h4>
                            </div>
                            <div class="content-box">
                                <div class="phone-email">
                                    <p>
                                        <span>Phone:</span>
                                        <a href="tel:<?php echo $locations[0]->telephone; ?>"> <?php echo $locations[0]->telephone; ?></a>
                                    </p>
                                    <p>
                                        <span>Email:</span>
                                        <a href="mailto:<?php echo $locations[0]->email; ?>"> <?php echo $locations[0]->email; ?></a>
                                    </p>
                                </div>
                                <div class="btn-box">
                                    <a href="tel:<?php echo $locations[0]->telephone; ?>"><i class=" icon-next"></i>Get a Quote</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Contact Info Style3-->
                    <!--Start Single Contact Info Style3-->
                    <div class="col-xl-12 col-lg-12">
                        <div class="single-contact-info-style3">
                            <div class="icon">
                                <span class="icon-location"><span class="path1"></span><span class="path2"></span><span
                                        class="path3"></span><span class="path4"></span><span class="path5"></span><span
                                        class="path6"></span><span class="path7"></span><span class="path8"></span><span
                                        class="path9"></span></span>
                            </div>
                            <div class="text">
                                <h4>Address</h4>
                            </div>
                            <div class="content-box">
                                <div class="phone-email">
                                    <p>
                                        <?php echo $locations[0]->address; ?>
                                    </p>
                                </div>
                                <div class="btn-box btn-box--2">
                                    <a
                                        href=" ">
                                        <i class="icon-next"></i>
                                        Google Map
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Contact Info Style3-->

                    <!--Start Single Contact Info Style3-->
                    <div class="col-xl-12 col-lg-12">
                        <div class="single-contact-info-style3">
                            <div class="icon">
                                <span class="icon-time"><span class="path1"></span><span class="path2"></span><span
                                        class="path3"></span><span class="path4"></span><span
                                        class="path5"></span></span>

                            </div>
                            <div class="text">
                                <h4>Off.Hrs</h4>
                            </div>
                            <div class="content-box">
                                <div class="phone-email">
                                    <?php echo $locations[0]->working_hours; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Contact Info Style3-->
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="main-contact-form__inner">
                        <h4>Inquiry</h4>
                        <div class="contact-form row">
                            <div class="col-md-12">
                                <?php $this->load->view('includes/alert-ci'); ?>
                                <?php $this->load->view('includes/alert'); ?>
                            </div>
                            <form action="" method="post" id="contactForm" name="contactForm">
                                <div class="col-md-12">
                                    <div class="form-group form-control-career">
                                        <div class="input-box">
                                            <input type="text" placeholder="Enter your name" class="form-control c-square c-theme input-lg" name="name" id="name" value="<?php echo set_value('name'); ?>">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group form-control-career">
                                        <div class="input-box">
                                            <input type="text" placeholder="Enter your phone number" class="form-control c-square c-theme input-lg" name="phone" id="phone" value="<?php echo set_value('phone'); ?>">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group form-control-career">
                                        <div class="input-box">
                                            <input type="text" placeholder="Enter your email" class="form-control c-square c-theme input-lg" name="email" id="email" value="<?php echo set_value('email'); ?>">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group form-control-career">
                                        <div class="select-box">
                                            <select class="form-control p-10 rounded" name="location" id="location">
                                                <option value="">-Select Location-</option>
                                                <?php foreach ($provinces as $province) { ?>
                                                    <option value="<?php echo $province->province; ?>" 
                                                    <?php
                                                    if ($location_id == $province->id) {
                                                        echo 'selected';
                                                    }
                                                    ?>><?php echo $province->province; ?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group form-control-career">
                                        <div class="input-box">
                                            <textarea rows="3" name="message" placeholder="Enter message" class="form-control c-theme c-square input-lg" id="message"><?php echo set_value('message'); ?></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 ">
                                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                    <div class="g-recaptcha" data-sitekey="<?php echo $recaptcha_site_key ?>"></div>
                                </div>

                                <div class="col-md-6">
                                    <br>

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

                                </div>

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

                </div>

                <div class="col-xl-12 col-lg-12">
                    <?php echo $locations[0]->map; ?>
                </div>

            </div>

            <!--New end -->

        </div>

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

    <?php $this->load->view("includes/scripts"); ?>

    <script>
        // Form Validation
        const $form = $('#contactForm');

        $form.validate({
            ignore: [], // <== very important for hidden select fields (nice-select hides original select)
            rules: {
                location: {
                    required: true
                },
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required: true,
                    // digits: true
                },
                message: {
                    required: true
                },
                'g-recaptcha-response': {
                    required: true
                }
            },
            messages: {
                location: "Please select location",
                name: "Please enter your name",
                email: {
                    required: "Please enter your email",
                    email: "Please enter a valid email"
                },
                phone: {
                    required: "Please enter your phone number",
                    // digits: "Only digits allowed"
                },
                message: "Please enter message",
                '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 { // This is the default behavior
                    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);
        });
    </script>
</body>

</html>