<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CREW Sportswear</title>

	<link href="{{ asset('/css/app.css') }}" rel="stylesheet">

	<!-- Fonts -->
	<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<link href="{{asset('/assets/css/style.css')}}" rel="stylesheet">
	<!-- <link href="{{asset('public/assets/login/css/style.css')}}" rel="stylesheet">
	<link href="{{asset('public/assets/login/css/form-elements.css')}}" rel="stylesheet"> -->
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136108155-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];

		function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());

		gtag('config', 'UA-136108155-1');
	</script>
</head>

<body>
	<!-- <nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle Navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="{{ url('/') }}"><i class="fa fa-angle-double-left"></i> Back</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					@if (Auth::guest())
						<li><a href="{{ url('/auth/login') }}">Login</a></li>
						<li><a href="{{ url('/auth/register') }}">Register</a></li>
					@else
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->username }} <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="{{ url('user') }}">Dashboard</a></li>
								<li><a href="{{ url('/auth/logout') }}">Logout</a></li>
							</ul>
						</li>
					@endif
				</ul>
			</div>
		</div>
	</nav> -->
	@include('layout.navbar')
	@yield('content')
	<!-- Footer -->

	<!-- Scripts -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
	<script>
		$(document).ready(function() {
			$('.reveal-password').click(function(e) {
				var $pwd = $(".pwd");
				if ($pwd.attr('type') === 'password') {
					$pwd.attr('type', 'text');
					$(this).html('<i class="fa fa-eye-slash"></i>');
				} else {
					$pwd.attr('type', 'password');
					$(this).html('<i class="fa fa-eye"></i>');
				}
			});

			if ($('.data-errors').length > 0) {
				$('#team-store-login').modal('show')
				return false;
			}

			$("#frm-login").validate({
				rules: {
					email: {
						required: true,
						email: true
					},
					password: {
						required: true
						//minlength: 6  // <-- removed underscore
					}
				},
				messages: {},
				errorPlacement: function(error, element) {
					var placement = $(element).data('error');
					if (placement) {
						$(placement).append(error);
					} else {
						error.insertAfter(element);
					}
				},
				submitHandler: submitLoginForm
			});

			$("#frm-register").validate({
				rules: {
					firstname: {
						required: true
					},
					lastname: {
						required: true
					},
					// username: {
					//     required: true
					// },
					email: {
						required: true,
						email: true
					},
					password: {
						required: true
						//minlength: 6  // <-- removed underscore
					},
					mobilenumber: {
						required: true
					},
					address: {
						required: true
					},
					state: {
						required: true
					},
					city: {
						required: true
					},
					zipcode: {
						required: true
					},
					countryCode: {
						required: true
					}
				},
				messages: {},
				errorPlacement: function(error, element) {
					var placement = $(element).data('error');
					if (placement) {
						$(placement).append(error);
					} else {
						error.insertAfter(element);
					}
				},
				submitHandler: submitRegisterForm
			});

			$('.password-protected').click(function() {

				$('#_teamstore_id').val($(this).data('store-id'))
				// console.log($(this).data('store-id'))
				$('#team-store-login').modal('show')
				return false;

			});

			$(document).on('change', '#select_sort_stores', function(event) {
				event.preventDefault();
				$('#frm_search_store').submit();
			});


		}); // end document ready

		function getSelectedCountry() {
			var selectedState = $('#select_country').data('selected');
			if (selectedState) {
				// console.log(selectedState)
				$("#select_country").val(selectedState).change();
				// selectCountry()
			}

		}

		function selectCountry(item) {

			const country = item.options[item.selectedIndex].text;
			const countryCode = item.options[item.selectedIndex].value
			console.log(countryCode)

			if (countryCode === "US") {
				fetchUSA()
			}

			if (countryCode === "CA") {
				fetchCanada()
			}

		}

		function fetchCanada() {
			$.getJSON("{{ asset('/api/canada.json') }}", function(items) {
				var states = [];

				Object.keys(items).forEach(function(state) {
					states.push(state)
				});

				var uniqueStates = Array.from(new Set(states));
				var selectedState = $('#lst-states').data('selected');

				$('.dynamic-state').remove();
				$('.dynamic-city').remove();
				uniqueStates.sort().forEach(function(key) {
					if (selectedState == key) {
						$('#lst-states').append('<option value="' + key + '" selected class="dynamic-state">' + key + '</option>');

						var cities = [];
						cities = items[selectedState];
						var uniqueCities = Array.from(new Set(cities));
						var selectedCity = $('#lst-cities').data('selected');
						$('.dynamic-city').remove();
						uniqueCities.sort().forEach(function(key) {
							if (selectedCity == key) {
								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city" selected>' + key + '</option>');
							} else {
								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
							}
						});

					} else {
						$('#lst-states').append('<option value="' + key + '" class="dynamic-state">' + key + '</option>');
					}
				});


				$(document).on('select change', '#lst-states', function() {
					var cities = [];
					var selectedState = $(this).val()
					cities = items[selectedState];
					var uniqueCities = Array.from(new Set(cities));
					$('.dynamic-city').remove();
					uniqueCities.sort().forEach(function(key) {
						$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
					});
				});
			});
		}

		function fetchUSA() {
			$.getJSON("{{ asset('/api/usaCities.json') }}", function(data) {
				var states = [];

				for (i = 0; i < data.length; i++) {
					states.push(data[i]['state']);
				}
				var uniqueStates = Array.from(new Set(states));
				var selectedState = $('#lst-states').data('selected');
				$('.dynamic-state').remove();
				$('.dynamic-city').remove();
				uniqueStates.sort().forEach(function(key) {
					if (selectedState == key) {
						$('#lst-states').append('<option value="' + key + '" selected class="dynamic-state">' + key + '</option>');
						// 
						var cities = [];
						for (i = 0; i < data.length; i++) {
							console.log(data[i])
							cities.push(data[i]);
						}
						var city = getCities(cities, key);
						var uniqueCities = Array.from(new Set(city));
						var selectedCity = $('#lst-cities').data('selected');
						$('.dynamic-city').remove();
						uniqueCities.sort().forEach(function(key) {
							if (selectedCity == key) {
								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city" selected>' + key + '</option>');
							} else {
								$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
							}
						});

					} else {
						$('#lst-states').append('<option value="' + key + '" class="dynamic-state">' + key + '</option>');
					}
				});



				$(document).on('select change', '#lst-states', function() {
					var cities = [];
					for (i = 0; i < data.length; i++) {
						cities.push(data[i]);
					}
					var city = getCities(cities, $(this).val());
					var uniqueCities = Array.from(new Set(city));
					$('.dynamic-city').remove();
					uniqueCities.sort().forEach(function(key) {

						$('#lst-cities').append('<option value="' + key + '" class="dynamic-city">' + key + '</option>');
					});
				});

			});
		}

		function getCities(arr, q) {
			var sd = [];
			arr.find(function(element) {
				if (element['state'] == q) {
					sd.push(element['city']);
				}
			});
			return sd;
		}

		function submitLoginForm() {
			// method="POST" action="{{ url('/auth/login') }}"
			var data = $("#frm-login").serialize();
			// console.log(data)
			$.ajax({
				type: 'POST',
				url: "{{ url('/custom/auth') }}",
				data: data,
				dataType: 'json',
				beforeSend: function() {
					$("#login-response-msg").fadeOut();
					$("#btn-login").html('Signing in &nbsp; <i class="fa fa-spinner fa-spin"></i>');
				},
				success: function(response) {
					$("#login-response-msg").html("");
					$("#login-response-msg").fadeIn(1000, function() {

						if (response.success) {
							// $("#login-response-msg").html(response);
							// console.log();
							location.reload();
						} else {
							$("#login-response-msg").html(response.message);
						}
						//

						// console.log(response.success);
						$("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
					});
				}
			});
			return false;
		} /* login submit */

		function submitRegisterForm() {
			var data = $("#frm-register").serializeArray();
			data.push({
				name: "country",
				value: $("#select_country option:selected").text()
			});

			$.ajax({
				type: 'POST',
				url: "{{ url('/custom/register') }}",
				data: data,
				dataType: 'json',
				beforeSend: function() {
					$("#register-response-msg").fadeOut();
					$("#btn-register").html('Please wait &nbsp; <i class="fa fa-spinner fa-spin"></i>');
				},
				success: function(response) {
					$("#register-response-msg").html("");
					$("#register-response-msg").fadeIn(1000, function() {

						if (response.success) {
							if (response.redirect != "") {
								window.location = response.redirect;
							} else {
								location.reload();
							}
						} else {
							$("#register-response-msg").html(response.message);
						}
						$("#btn-register").html('Register');
					});

					// console.log(response);
				}
			});
			return false;

		}
	</script>
</body>

</html>