<?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 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" style="height: 500px; width: 100%; position: relative; overflow: hidden;" id="map">
        <div class="container">
            <div class="col-md-12">&nbsp;</div>
        </div>
    </div>

    <div class="page-heading">
        <div class="container ">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="sec-title__title text-white">Locations</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">Locations</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container p-t-40 p-b-40">
        <div class="col-sm-4 wow animated fadeInRight" style="min-height:400px; max-height:100%;">
            <!--New -->
            <div class="title-box">
                <h3>Locations</h3>
                <div class="shape">
                    <img src="<?php echo base_url() . "public/"; ?>assets/images/shapes/services-details-shape1.png" alt="shape">
                </div>
            </div>
            <div class="services-details-pages-link">
                <ul class="clearfix">
                    <?php foreach ($provinces as $province) { ?>
                        <li class="active">
                            <div class="title">
                                <a href="<?php echo base_url() . "locations/" . base64_encode($province->id); ?>"><i class="icon-next"></i><?php echo $province->province; ?></a>
                            </div>
                        </li>
                    <?php } ?>

                </ul>
            </div>
            <!--New -->
        </div>

        <div class="col-sm-8 wow animated fadeInRight">
            <!--new -->
            <?php foreach ($locationDetails as $locationDetail) { ?>
                <h4><?php echo $locationDetail->location_name; ?></h4>
                <div class="row">
                    <!--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 $locationDetail->telephone; ?>"> <?php echo $locationDetail->telephone; ?></a>
                                    </p>
                                    <p>
                                        <span>Email:</span>
                                        <a href="mailto:<?php echo $locationDetail->email; ?>"> <?php echo $locationDetail->email; ?></a>
                                    </p>
                                </div>
                                <div class="btn-box">
                                    <a href="tel:<?php echo $locationDetail->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 $locationDetail->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-->

                    <div class="header-button-style1">
                        <a class="btn-one" href="<?php echo base_url() . "locationDetail/" . base64_encode($locationDetail->id); ?>">
                            <span class="txt">
                                VIEW DETAIL
                            </span>
                        </a>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>

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

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

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8hI-ZnUE93y8MqPxpXF8-kUWU7AvTIdo"></script>
	<script>
		var depots = [
            ['Burlington', 43.3255, -79.7990, 9],
            ['Milton', 43.5183, -79.8774, 17],
            ['Oakville', 43.4675, -79.6877, 5]
        ];

        // Safer PHP → JS transfer
        var projectTitle = <?php echo json_encode($this->config->item('project_title')); ?>;
        var icon = '<?php echo base_url(); ?>public/images/location_map_icon.png';

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < depots.length; i++) {

            var position = new google.maps.LatLng(depots[i][1], depots[i][2]);

            bounds.extend(position); // auto-calculate center

            var marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: icon,
                title: depots[i][0]
            });

            var infoContent =
                "<div align='center'><strong>" + projectTitle + "</strong><br>"
                + depots[i][0] +
                "<br><a href='#' class='btn btn-default1 btn-rounded text-light' style='padding:5px;font-size:13px;' onclick='changeLocation(" + depots[i][3] + ")'>Select Location</a></div>";

            google.maps.event.addListener(marker, 'click', (function(marker, content) {
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }
            })(marker, infoContent));
        }

        // Automatically center & zoom properly
        map.fitBounds(bounds);

		function changeLocation(id)
		{
			$("#locationDrpDwn").val(id);
			$("#provinceForm").submit();
		}
	</script>

</body>

</html>