@extends('layouts.app')

@section('content')

<section class="container">
	<div class="welcome_box">
		<div class="row">
			<div class="col-md-12">
				<h2>WELCOME TO THE BREMBO U.S. EVENTS HUB. </h2>
				<p>Want to learn more about the shows and events that bring Brembo to life? You've come to the right place. Our Brembo Events Hub will give you the inside scoop on Brembo's U.S. shows and events.</p>
			</div>
		</div>
	</div>
</section>

<section class="container bannerBox">

	<div class="welcome_infos">
		<div class="bdc_image">
			<img src="{{asset('images/updated_bdc.png')}}" /> 
		</div>
		<div class="bdc_text">
			<span style="font-weight:bold;color:#e52b38">Register now</span> for the 2018 SEMA - <b>Brembo Discovery Challenge</b> for a chance to win a trip to the <b>Cadillac V-Performance Academy</b>.
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="img-banner">
				<img src="{{asset('images/') . '/' . $event->main_image }}" class="img-responsive" alt="" />
											</div>
		</div>
	</div>
	
	<div id="switcher" class="row">
		<div class="switcher_button press_switcher" id="sw_reg" onclick="switchview('#tk_registration_form','#sw_reg')">REGISTER</div>
		<div class="switcher_button" id="sw_des" onclick="switchview('#tk_event_desc','#sw_des')">SHOW INFO</div>
		<div class="switcher_button" id="sw_cha" onclick="switchview('#tk_discovery_info','#sw_cha')">DISCOVERY CHALLENGE</div>
	</div>
	<script>
	function switchview(element,switcher)
	{
		jQuery("#tk_registration_form").css('display','none');
		jQuery("#tk_event_desc").css('display','none');
		jQuery("#tk_discovery_info").css('display','none');
		
		jQuery("#sw_reg").removeClass('press_switcher');
		jQuery("#sw_des").removeClass('press_switcher');
		jQuery("#sw_cha	").removeClass('press_switcher');
		
		jQuery(element).css('display','block');
		jQuery(switcher).addClass('press_switcher');	
	}
	</script>
	
	<div id="tk_registration_form" class="row">
		<form class="form-contact" action="{{ url('regevent') }}" method="POST" onsubmit="return validate();" id="registration_form">
			<input type="hidden" name="_token" value="{{ csrf_token() }}">
					<div class="form-group col-sm-12">
						<select class="form-control" id="type" name="type">
							<option value="">I am a...</option>
							<option>Wholesale Distributor</option>
							<option>Retail Distributor</option>
							<option>Technician</option>
							<option>Aftermarket Customer</option>
							<option>OEM Employee</option>
							<option>OEM Dealer</option>
							<option>OEM Customer</option>
							<option>Racing Team</option>
							<option>Racer</option>
							<option>Media Representative</option>
							<option>Car Enthusiast</option>							
						</select>
					</div>
					<div class="form-group col-sm-6">
						<input type="FirstName" class="form-control" placeholder="First Name" id="first_name" name="first_name" 
										>
					</div>
					<div class="form-group col-sm-6">
						<input type="LastName" class="form-control" placeholder="Last Name" id="last_name" name="last_name" 
										>
					</div>
					<div class="form-group col-sm-6">
						<input type="text" class="form-control" placeholder="Company Name" id="company" name="company" 
									>
					</div>
					<div class="form-group col-sm-6">
						<input type="email" class="form-control" placeholder="Email" id="email" name="email" 
									>
					</div>
					<div class="form-group col-sm-6">
						<input type="Address" class="form-control" placeholder="Address" id="address1" name="address1" 
										>
					</div>
					<div class="form-group col-sm-6">
						<input type="Apartment" class="form-control" placeholder="Apartment, Unit, Suite" id="address2" name="address2"
										>
					</div>
					<div class="form-group col-sm-6">
						<input type="MobilePhone" class="form-control" placeholder="Mobile Phone" id="phone" name="phone" 
										 >
					</div>
					<div class="form-group col-sm-6">
						<input type="ZipCode" class="form-control" placeholder="Zip Code" id="zip" name="zip" 
										>
					</div>
					<div class="form-group col-sm-6">
						<input type="City" class="form-control" placeholder="City" id="city" name="city" 
									>
					</div>
					<div class="form-group col-sm-6">
						<select class="form-control" id="state" name="state">
							<option value="">State</option>
							<option>Alabama</option>
							<option>Alaska</option>
							<option>American Samoa</option>
							<option>Arizona</option>
							<option>Arkansas</option>
							<option>California</option>
							<option>Colorado</option>
							<option>Connecticut</option>
							<option>Delaware</option>
							<option>District of Columbia</option>
							<option>Federated States of Micronesia</option>
							<option>Florida</option>
							<option>Georgia</option>
							<option>Guam</option>
							<option>Hawaii</option>
							<option>Idaho</option>
							<option>Illinois</option>
							<option>Indiana</option>
							<option>Iowa</option>
							<option>Kansas</option>
							<option>Kentucky</option>
							<option>Louisiana</option>
							<option>Maine</option>
							<option>Marshall Islands</option>
							<option>Maryland</option>
							<option>Massachusetts</option>
							<option>Michigan</option>
							<option>Minnesota</option>
							<option>Mississippi</option>
							<option>Missouri</option>
							<option>Montana</option>
							<option>Nebraska</option>
							<option>Nevada</option>
							<option>New Hampshire</option>
							<option>New Jersey</option>
							<option>New Mexico</option>
							<option>New York</option>
							<option>North Carolina</option>
							<option>North Dakota</option>
							<option>Ohio</option>
							<option>Oklahoma</option>
							<option>Oregon</option>
							<option>Palau</option>
							<option>Pennsylvania</option>
							<option>Puerto Rico</option>
							<option>Rhode Island</option>
							<option>South Carolina</option>
							<option>South Dakota</option>
							<option>Tennessee</option>
							<option>Texas</option>
							<option>Utah</option>
							<option>Vermont</option>
							<option>Virgin Islands</option>
							<option>Virginia</option>
							<option>Washington</option>
							<option>West Virginia</option>
							<option>Wisconsin</option>
							<option>Wyoming</option>
						</select>
					</div>
					<div class="form-group col-sm-12">
					<div class="form-control checkbox_head"><h4>Appointment Scheduler</h4></div>
					<div class="checkbox_div">
						<div class="form-group col-sm-12">
							<div class="checkboxBox">
								<input type="radio" id="fix_appointment" value="1" name="fix_appointment" />
								<label for="fix_appointment">Yes. I am interested in meeting with a representative from Brembo. Please contact me with your available times.</label>
							</div>
						</div>
						<hr class="check_hr">
						<div class="form-group col-sm-12">
							<div class="checkboxBox">
								<input type="radio" value="2" id="fix_appointment1" name="fix_appointment" />
								<label for="fix_appointment1">No thanks.</label>
							</div>
						</div>
					</div>
					</div>
					<div class="form-group col-sm-12">
					<div class="form-control checkbox_head"><h4>I'm  interested in Brembo...</h4></div>
					<div class="checkbox_div">
						<div class="form-group col-sm-4">
							<div class="checkboxBox">
								<input type="checkbox" name="interested_in[]"  value="Aftermarket OE Equivalent" id="checkbox_3" />
								<label for="checkbox_3">Aftermarket OE Equivalent</label>
							</div>
						</div>
						<div class="form-group col-sm-4">
							<div class="checkboxBox">
								<input type="checkbox"  name="interested_in[]" value="Racing Systems" id="checkbox_4"/>
								<label for="checkbox_4">Racing Systems</label>
							</div>
						</div>
						<div class="form-group col-sm-4">
							<div class="checkboxBox">
								<input type="checkbox" name="interested_in[]" id="checkbox_5" value="High Performance Kits"  />
								<label for="checkbox_5">High Performance Kits</label>
							</div>
						</div>
					</div>
					</div>
					
										<input type="hidden" value="1" name="tour" />
					
					<div class="form-group col-sm-12">
						<div class="row">
							<div class="form-group col-sm-6">
								<div class="checkboxBox">
									<input type="checkbox" id="checkbox_8" id="send_email" name="send_email"
													checked />
											<label for="checkbox_8">Yes, please email me communications, including product information, offers and incentives from Brembo.</label>
								</div>
							</div>

							<div class="form-group col-sm-6">
								<div class="checkboxBox">
									<input type="checkbox" id="read_official_rules" name="read_official_rules" checked />
									<label for="read_official_rules">Yes, I have read the <a href="{{ url('/contestrules') }}">official rules</a>.</label>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-12 text-center"><button type="submit" class="submit-btn" data-toggle="modal" data-target="#myModal">Submit</button></div>
					<div id="check_form_data" style="display:none" >Please check form data.</div>
					<input type="hidden" value="2" name="event_id" />
				</form>						
	</div>
	
	<div id="tk_event_desc"  class="row" style="display:none;">
			<div class="explore_box">
							</div>
			<div class="location_section">
				<div class="row">
					<div class="col-sm-6">
						<img src="{{asset('images/loc-img.png')}}" class="img-responsive" alt="" />
					</div>
					<div class="col-sm-6 explore_box">
											</div>
				</div>
			</div>
			<div class="location_section">
				<div class="row">
					<div class="col-sm-6 explore_box">
											</div>
					<div class="col-sm-6 map_contant">
						<a href="" target="_blank">
						<img src="{{asset('images/') . '/' . $event->map_image}}" class="img-responsive" alt="" />
						<p class="pull-right">CLICK MAP FOR LARGER VIEW</p></a>
					</div>
				</div>
			</div>
	</div>
		
	<div id="tk_discovery_info" style="display:none;">
		<div class="challenge_boxs" id="registration_text">
			<div class="row">
				<div class="col-sm-12">
					<div class="explore_box">
						<h2>The Brembo Discovery Challenge</h2>
						<div class="row">
							<div class="col-sm-3 col-md-2 text-center">
								<img src="{{asset('/images/updated_bdc_page.png')}}" class="img-responsive" alt="" />
							</div>
							<div class="col-sm-9 col-md-10">
														</div>
						</div>
					</div>
			   </div>
		   </div>
			<hr class="check_hr">
			<div class="explore_box">
				<h2>How to Play*</h2>
				<ul class="how_play_box">
					<li><img src="{{asset('images/htp1.png')}}" class="img-responsive" alt="" /></li>
					<li><img src="{{asset('images/htp2.png')}}" class="img-responsive" alt="" /></li>
					<li><img src="{{asset('images/htp3.png')}}" class="img-responsive" alt="" /></li>
				</ul>
				<div class="clearfix"></div>
				<div class="fullDetailsBox text-center"><p>*Full details will be released when the Discovery Challenge launches.</p></div>
			</div>
		</div>
	</div>
	
</section>

<script>
	function validateEmail(email) {
		var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(String(email).toLowerCase());
	}

	function validate() {
		
		var highlit = "#d8bca8";
		jQuery("#check_form_data").css("display","block");
		
		var type = jQuery("#type option:selected").text();
		/*if(type == null || type == "" || type == "I am a...")
		{
			jQuery("#type").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#type").css("background-color","#e1e1e1");*/
			
		var firstName = jQuery("#first_name").val();
		if(firstName == null || firstName == "")
		{
			jQuery("#first_name").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#first_name").css("background-color","#e1e1e1");
		
		var lastName = jQuery("#last_name").val();
		if(lastName == null || lastName == "")
		{
			jQuery("#last_name").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#last_name").css("background-color","#e1e1e1");
		
		var companyName = jQuery("#company_name").val();
		//nessun controllo sul nome dell'azienda
		
		var email = jQuery("#email").val();
		if(!validateEmail(email))
		{
			jQuery("#email").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#email").css("background-color","#e1e1e1");
		
		var address1 = jQuery("#address1").val();
		/*if(address1 == null || address1 == "")
		{
			jQuery("#address1").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#address1").css("background-color","#e1e1e1");*/
		
		var address2 = jQuery("#address2").val();
		/*if(address2 == null || address2 == "")
		{
			jQuery("#address2").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#address2").css("background-color","#e1e1e1");*/
		
		var phone = jQuery("#phone").val();
		/*if(phone == null || phone == "")
		{
			jQuery("#phone").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#phone").css("background-color","#e1e1e1");*/
		
		var zip = jQuery("#zip").val();
		/*if(zip == null || zip == "")
		{
			jQuery("#zip").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#zip").css("background-color","#e1e1e1");*/
		
		var city = jQuery("#city").val();
		/*if(city == null || city == "")
		{
			jQuery("#city").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#city").css("background-color","#e1e1e1");*/
		
		var state = jQuery("#state option:selected").text();
		/*if(state == null || state == "")
		{
			jQuery("#state").css("background-color",highlit);
			return false;
		}
		else
			jQuery("#state").css("background-color","#e1e1e1");*/
		
		var fixAppointment = jQuery('input[name=fix_appointment]:checked').val();
		//console.log(fixAppointment); // 1 o 2
		/*if(fixAppointment == null || fixAppointment == "")
			return false;*/
		
		var interestedIn = new Array();
		/*$("input[name='interested_in[]']:checked").each(function ()
		{
			interestedIn.push($(this).val());
		});
		//console.log(interestedIn); //Array con le checkbox
		if(interestedIn.length == 0)
			return false;*/
		
		/*var discoveryChallenge = jQuery('input[name=tour]:checked').val();
		//console.log(discoveryChallenge); //1 o 2
		if(discoveryChallenge == null || discoveryChallenge == "")
			return false;*/
		
		var emailCommunications = jQuery('#checkbox_8').attr('checked');
		//console.log(emailCommunications); 
		/*if(emailCommunications == null || emailCommunications == "")
			return false;*/
		
		var rules = jQuery('input[name=read_official_rules]:checked').val();
		console.log(rules);
		//console.log(rules);
		if(rules == null || rules == "")
			return false;
				
		//se supera tutti i controlli posso inviare la form
		//console.log("OK");
		
		jQuery("#check_form_data").css("display","none");
    	return true;
		
	}
</script>


@endsection