<!-- Background video -->
		<div class="video-background-holder site-blocks-cover" data-aos="fade" data-stellar-background-ratio="0.5">	 
		<div class="video-background-overlay"></div>
		  <video poster="<?= base_url(); ?>assets/video/battle_still.png" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
				<source src="<?= base_url(); ?>hixsonpike_1.mp4">
				<source src="<?= base_url(); ?>assets/video/battle_web2.mp4">
				<p class="warning">Your browser does not support HTML5 video.</p>
		  </video>
		  <div class="video-background-content container h-100">
				<div class="d-flex h-100 text-center align-items-center">

				  <div class="col-md-12">
					
					
					<div class="row justify-content-center mb-4">
					  <div class="col-md-12 text-center">
						<!-- <h1 data-aos="fade-up">Hixson <span class="typed-words"></span></h1> 
						<p data-aos="fade-up" data-aos-delay="100">See inside all Hixson Pike offers</p> -->
					  </div>
					</div>
					
					<ul class="nav nav-tabs search-bar-nav-tabs" role="tablist">
						<li class="nav-item me-2"><a class="nav-link active" href="#business" data-target="#business, #store_list" id="business_tab" data-toggle="tab" role="tab" aria-selected="true">Business</a></li>
						<li class="nav-item me-2"><a class="nav-link" href="#events" data-target="#events, #event_list" id="event_tab" data-toggle="tab" role="tab" aria-selected="false">Events</a></li>
					  </ul>
			  
					<div class="form-search-wrap p-2" data-aos="fade-up" data-aos-delay="200">
						<div class="tab-content">
						  <div class="tab-pane fade active show" id="business" aria-labelledby="business_tab" role="tabpanel">
								<form role="form" id="loc-form" action="" accept-charset="utf-8" method="post">
									<input name="latitude" type="hidden" id="form_latitude" value="<?php echo $latitude ?>">
									<input name="longitude" type="hidden" id="form_longitude" value="<?php echo $longitude ?>">
									<input name="postal_code" type="hidden" id="postal_code" value="<?php echo $postal_code ?>">
									<input name="page_no" value="1" type="hidden" />                
									<div class="row align-items-center">
									  <div class="col-lg-12 col-xl-3 no-sm-border border-right">
										<input type="text" class="form-control" id="form_keyword" name="keyword" placeholder="What are you looking for?" value="<?php echo $keyword ?>" aria-label="search keyword" aria-required="true" aria-invalid="false">
									  </div>
									  <div class="col-lg-12 col-xl-5 no-sm-border border-right">
										<div class="input-label-absolute input-label-absolute-right w-100">
										  <label class="label-absolute loc-btn" for="location" id="button1" onClick="getLocation('#loc-form')" ><i class="fa fa-crosshairs fa-lg"></i></label>
										  <input type="text" name="location" id="form_location" class="form-control" placeholder="Location" autofocus="autofocus" aria-label="location" aria-required="true" aria-invalid="false">
										</div>
									  </div>
									  <div class="col-lg-12 col-xl-2">
										<div class="input-label-absolute input-label-absolute-right w-100">                      
										  <select class="form-control" name="category_id" id="category_id">
										  <option value="">All Categories</option>
										  <?php foreach($categories as $category){ ?>                        
											<option value="<?php echo $category['category_id']; ?>" <?php echo isset($category_info) && $category_info['category_id'] == $category['category_id'] ? 'selected' : '' ?>><?php echo $category['name'] ?></option>                        
											<?php } ?>
										  </select>
										</div>
									  </div>
									  <div class="col-lg-12 col-xl-2 ml-auto text-right">
										<input type="button" class="btn text-white btn-primary search-btn" value="Search">					
									  </div>
									  
									</div>
								 </form>
						  </div>
					  <div class="tab-pane fade" id="events" aria-labelledby="event_tab" role="tabpanel">
							<form role="form" id="event-loc-form" action="" accept-charset="utf-8" method="post">
										<input name="latitude" type="hidden" id="event_form_latitude" value="">
										<input name="longitude" type="hidden" id="event_form_longitude" value="">
										<input name="postal_code" type="hidden" id="event_postal_code" value="">
										<input name="event_page_no" value="1" type="hidden" />                
										<div class="row align-items-center">
										  <div class="col-lg-12 col-xl-3 no-sm-border border-right">
											<input type="text" class="form-control" id="event_form_keyword" name="keyword" placeholder="What are you looking for?" value="" aria-label="search keyword" aria-required="true" aria-invalid="false">
										  </div>
										  <div class="col-lg-12 col-xl-5 no-sm-border border-right">
											<div class="input-label-absolute input-label-absolute-right w-100">
											  <label class="label-absolute event-loc-btn" for="location" id="event-button1" onClick="getLocation('#event-loc-form')" ><i class="fa fa-crosshairs fa-lg"></i></label>
											  <input type="text" name="event_location" id="event_form_location" class="form-control" placeholder="Event Location" autofocus="autofocus" aria-label="event_location" aria-required="true" aria-invalid="false">
											</div>
										  </div>
										  <div class="col-lg-12 col-xl-2">
											<div class="input-label-absolute input-label-absolute-right w-100">
											  <label class="label-absolute" for="search_event_date" ><i class="fas fa-calendar-alt fa-lg"></i></label>
											  <input type="text" name="search_event_date" class="form-control datepicker" placeholder="Event Date">
											</div>
										  </div>
										  <div class="col-lg-12 col-xl-2 ml-auto text-right">
											<input type="button" class="btn text-white btn-primary event-search-btn" value="Search">					
										  </div>
										  
										</div>
								 </form>
						</div>
				</div>
					
					  
					</div>

				  </div>
				</div>
			  </div>
		</div>
		<!-- End -->

    
	<div class="site-section bg-light">
		<div class="tab-content">
		    <div class="container">
		    	<div class="py-5 bg-primary">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-7 mr-auto mb-4 mb-lg-0">
                        <h2 class="mb-3 mt-0 text-white">This project is in <strong>Sneak Preview</strong> mode.</h2>
                        <p class="mb-0 text-white">ALL data is SAMPLE DATA until updated for public release.<br>Please see our welcome video here (full screen recommended), and <b>thanks for visiting!</b>  We look forward to telling the business stories of Hixson Pike.</p>
                      </div>
                      <div class="col-lg-4">
                        <p class="mb-0"><style>.embed-container { position: relative; padding-bottom: 36.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/930414310' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
    
			<div class="tab-pane fade active show" id="store_list" aria-labelledby="business_tab" role="tabpanel">
				  <div class="container">
						<div class="result-options" style="padding: 5px 10px; overflow: auto; display: none;">
								<div class="btn-group">
									<button type="button" class="btn btn-sm btn-default back-btn"><i class="fa fa-angle-double-left"></i></button>
									<button type="button" class="btn btn-sm btn-default forward-btn"><i class="fa fa-angle-double-right"></i> </button>
									<button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#filter-modal"><i class="fa fa-filter"></i> Filter  </button>
									<div class="pull-right text-muted btn-sm"><span class="total_items"></span> results in <span class="distance"></span></div>
								</div>
							</div>
						
							<div class="list-group loc-result-set">									
									<?php if(empty($stores) && $keyword_search == false){ ?>
										<div class="highlight list-group-item default-item text-center">
											<p class="list-group-item-text" align="center"><strong>Hixson Pike is searching.<br>Please allow location search if asked.</strong><br><br><a href="<?php echo base_url() ?>"><strong>Hixson Pike HOME</strong><h1 class="hidden">Return to Home</h1></a>
										</div>
									<?php }else{ ?>
										<?php echo $this->load->view('frontend/ajax/locator', [ 'stores' => $stores ], true); ?>
									<?php } ?>
							</div>
				  </div>
			  </div>
			  <div class="tab-pane fade" id="event_list" aria-labelledby="event_tab" role="tabpanel">
					<div class="container">
						<div class="result-options" style="padding: 5px 10px; overflow: auto; display: none;">
								<div class="btn-group">
									<button type="button" class="btn btn-sm btn-default back-btn"><i class="fa fa-angle-double-left"></i></button>
									<button type="button" class="btn btn-sm btn-default forward-btn"><i class="fa fa-angle-double-right"></i> </button>
									<button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#filter-modal"><i class="fa fa-filter"></i> Filter  </button>
									<div class="pull-right text-muted btn-sm"><span class="total_items"></span> results in <span class="distance"></span></div>
								</div>
							</div>
							
							<div class="list-group event-loc-result-set">
								<?php if(empty($events) && $keyword_search == false){ ?>
									<div class="highlight list-group-item default-item text-center">
										<p class="list-group-item-text" align="center"><strong>Hixson Pike is searching.<br>Please allow location search if asked.</strong><br><br><a href="<?php echo base_url() ?>"><strong>Hixson Pike HOME</strong><h1 class="hidden">Return to Home</h1></a>
									</div>
								<?php }else{ ?>
									<?php echo $this->load->view('frontend/ajax/event_locator', [ 'events' => $events ], true); ?>
								<?php } ?>
							</div>
				  </div>
			  </div>
			  
			  <!-- Store Modal -->
			 <div tabindex="-1" class="modal store-modal fade pr-0" id="store-info-dialog" style="display: none;" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header"></div>
							<div class="p-2"><img class="img-fluid store-popup-image" src="https://www.hixsonpike.com/battle_still.png"> </div>
							<div class="modal-body store-body-info"></div>
						</div>
					</div>
				</div>
			  <!-- Events Modal -->
			  <div tabindex="-1" class="modal event-modal fade pr-0" id="event-info-dialog" style="display: none;" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header"></div>
							<div class="p-2"><img class="img-fluid event-popup-image" src="https://www.hixsonpike.com/battle_still.png"> </div>
							<div class="modal-body event-body-info"></div>
						</div>
					</div>
				</div>			
			  
		 </div>
    </div>
	
    <div class="site-section">
      <div class="container">
        <div class="row justify-content-center mb-5">
          <div class="col-md-7 text-center border-primary">
            <h2 class="font-weight-light text-primary">View All Categories</h2>
            <p class="color-black-opacity-5">What are you interested in?</p>
          </div>
        </div>

        <div class="row mt-5 justify-content-center tex-center">
          <div class="col-md-4"><a data-toggle="collapse" href="#collapseCategories" class="btn btn-block btn-outline-primary btn-md px-5 view_all_category" aria-expanded="true" aria-controls="collapseCategories" role="button" aria-label="All Category">View All Categories</a></div>		 
       </div>

		<div class="row align-items-stretch all_category_box mt-5 collapse" id="collapseCategories" style="">
		  <?php if(count($categories) > 0){ ?>
					 <?php foreach($categories as $category){ ?>
					  <div class="col-6 col-sm-6 col-md-4 mb-4 col-lg-2">
						<a href="<?php echo base_url() ?>locator?cats=<?php echo $category['category_id'] ?>" class="popular-category h-100" aria-label="Category">
						  <span class="icon mb-3"><span class="<?php echo $category['icon'] ?>"></span></span>
						  <span class="caption mb-2 d-block"><?php echo $category['name'] ?></span>						  
						</a>
					  </div>
			  <?php } ?>
				  <?php } ?>	          
        </div>		
			
      </div>
    </div>
          
    
    

    <div class="py-5 bg-primary">
      <div class="container">
        <div class="row">
          <div class="col-lg-7 mr-auto mb-4 mb-lg-0">
            <h2 class="mb-3 mt-0 text-white">Let's make it better. We're always here!</h2>
            <p class="mb-0 text-white">Let us know any data which needs updating, or how we can help!</p>
          </div>
          <div class="col-lg-4">
            <p class="mb-0"><a href="contact.html" class="btn btn-outline-white text-white btn-md px-5 font-weight-bold btn-md-block">Service Center</a></p>
          </div>
        </div>
      </div>
    </div>	
	<script id="store_event_info_js" src="<?= base_url('assets/js/get_store_event_info.js') ?>" base_url="<?= base_url() ?>"></script>