{% extends 'templates/callluge/site_layout.html' %}
{% block content %}
{% load staticfiles %}


<script>

	//test scripts
	jQuery(document).ready(function($) {
		
	});
</script>

	{% csrf_token %}
	<div class="row">
		<div class="col-md-12">
			<div class="inner-form">
				<div id="horizontalTab">
		            <ul class="resp-tabs-list">
		               	<li href="#" class="active text-center">Toll-Free Numbers</li>
		                <li href="#" class="text-center">Local Numbers</li>
		                <li href="#" class="text-center">Numbers by Prefix</li>
		                <li href="#" class="text-center">Numbers by State</li>
		                <!-- <li href="#" class="text-center">Mobile Numbers by Region</li> -->
		            </ul>
		            <div class="resp-tabs-container">
		                <!-- Toll-Free Numbers section -->
		                <div class="active" id="order-toll-free-content">
							<form class="inner-form" method="POST" action="" id="order-toll-free" data-url="/numbers/order-toll-free/" data-toggle="validator">
							{% csrf_token %}
								<div class="row">
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Country*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="fgfg" tabindex="1" name="country_iso_code" required="" data-error="Please select Country.">
														<option value="">Select Country</option>
														<option value="US">US</option>
														<option value="CA">CANADA</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">I Want Number Similar To <span>(Ex: 510,902 etc..)</span></label>
			                                    <input tabindex="2" maxlength="15" class="form-input" type="text" name="area_code">
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Quantity*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="ghgh" title="" tabindex="3" class="" name="quantity" required="" data-error="Please select Quantity.">
														<option value="">Select Quantity</option>				
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-12 col-sm-12">
			                        	<div class="form-group">
			                                <div class="input-group no-padding">
					                            <div class="btn-wrap">
					                                <button type="submit" tabindex="4" class="button hvr-sweep-to-right ripple pull-left" value="Next" id="button_order_toll_free">Next</button>
					                                <!-- <button href="javascript:void(0);" class="button hvr-sweep-to-right ripple pull-left" value="Create Campaign">Next</button> -->
					                            </div>
					                        </div>
					                    </div>
			                        </div>
		                        </div>
							</form>
		                </div>
		                <!-- Local Numbers section -->
		                <div class="" id="order-local-content">
							<form class="inner-form" method="POST" action="" id="order-local" data-url="/numbers/order-local/" data-toggle="validator">
								{% csrf_token %}
								<div class="row">
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Country*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="jkjk" tabindex="5" name="country_iso_code" data-error="Please select Country." required="">
														<option value="">Select Country</option>
														<option value="US">US</option>
														<option value="CA">CANADA</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">I Want Number Similar To <span>(Ex: 420,932 etc..)</span></label>
			                                    <input tabindex="6" class="form-input" type="text" name="area_code">
			                                </div>
			                            </div>
			                        </div>
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Quantity*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="klkl" title="" tabindex="7" class="" name="quantity" required="" data-error="Please select Quantity.">
														<option value="">Select Quantity</option>				
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-12 col-sm-12">
			                        	<div class="form-group">
			                                <div class="input-group no-padding">
					                            <div class="btn-wrap">
					                                <!-- <input class="button hvr-sweep-to-right ripple pull-left" type="submit" value="Next"> -->
					                                <button type="submit" tabindex="8" href="javascript:void(0);" class="button hvr-sweep-to-right ripple pull-left" value="Create Campaign" type="submit">Next</button>
					                            </div>
					                        </div>
					                    </div>
			                        </div>
		                        </div>
							</form>
		                </div>
		                <!-- Numbers by prefix section -->
		                <div class="" id="order-by-prefix-content">
							<form class="inner-form" method="POST" action="" id="order-by-prefix" data-url="/numbers/order-by-prefix/" data-toggle="validator">
								{% csrf_token %}
								<div class="row">
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Country*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="mnmn" tabindex="9" name="country_iso_code" data-error="Please select Country." required="">
														<option value="">Select Country</option>
														<option value="US">US</option>
														<option value="CA">CANADA</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Prefix to match <span>(Ex: 4420,777 etc..)</span></label>
			                                    <input tabindex="10" maxlength="15" class="form-input" type="text" name="contains">
			                                </div>
			                            </div>
			                        </div>
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Quantity*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="opop" title="" tabindex="11" class="" name="quantity" data-error="Please select Quantity." required="">
														<option value="">Select Quantity</option>				
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-12 col-sm-12">
			                        	<div class="form-group">
			                                <div class="input-group no-padding">
					                            <div class="btn-wrap">
					                                <!-- <input class="button hvr-sweep-to-right ripple pull-left" type="submit" value="Next"> -->
					                                <button tabindex="12" href="javascript:void(0);" class="button hvr-sweep-to-right ripple pull-left" value="Create Campaign" type="submit">Next</button>
					                            </div>
					                        </div>
					                    </div>
			                        </div>
		                        </div>
							</form>
		                </div>
		                <!-- Numbers by state section -->
		                <div class="" id="order-by-state-content">
							<form name="ord-by-state-frm" class="inner-form" method="POST" action="" id="order-by-state" data-url="/numbers/order-by-state/" data-toggle="validator">
								{% csrf_token %}
								<div class="row">
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Country*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="qrqr" tabindex="13" name="country_iso_code" data-error="Please select Country." required="">
														<option value="">Select Country</option>
														<option value="US">US</option>
														<option value="CA">CANADA</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">State*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="prpr" tabindex="14" name="state_iso_code" required="" data-error="Please select State.">
														<option value="">Select State</option>
														<!-- <option value="1">1</option> -->
														<!-- <option value="2">2</option> -->
														<!-- <option value="3">3</option> -->
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
									<div class="col-md-4 col-sm-4">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Quantity*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="rsrs" title="" tabindex="15" class="" name="quantity" required="" data-error="Please select Quantity.">
														<option value="">Select Quantity</option>				
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-12 col-sm-12">
			                        	<div class="form-group">
			                                <div class="input-group no-padding">
					                            <div class="btn-wrap">
					                                <!-- <input class="button hvr-sweep-to-right ripple pull-left" type="submit" value="Next"> -->
					                                <button tabindex="16" href="javascript:void(0);" class="button hvr-sweep-to-right ripple pull-left" value="Create Campaign" type="submit">Next</button>
					                            </div>
					                        </div>
					                    </div>
			                        </div>
		                        </div>
							</form>
		                </div>
		                <!-- Mobile Numbers by region section -->
		                <div class="" id="order-by-region-content">
							<form class="inner-form" method="POST" action="" id="order-by-region" data-url="/numbers/order-by-region/" data-toggle="validator">
								{% csrf_token %}
								<div class="row">
									<div class="col-md-6 col-sm-6">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Country*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="stst" tabindex="17" name="country_iso_code" data-error="Please select Country." required="">
														<option value="">Select Country</option>
														<option value="US">US</option>
														<option value="CA">CANADA</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>
			                        <div class="col-md-6 col-sm-6">
			                            <div class="form-group">
			                                <div class="input-group no-padding">
			                                    <label for="">Quantity*</label>
			                                    <div class="dropdown-all">
			                                    	<select id="tutu" title="" tabindex="18" class="" name="quantity" data-error="Please select Quantity." required="">
														<option value="">Select Quantity</option>				
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
													</select>
			                                    </div>
			                                    <div class="help-block with-errors"></div>
			                                </div>
			                            </div>
			                        </div>							
			                        <div class="col-md-12 col-sm-12">
			                        	<div class="form-group">
			                                <div class="input-group no-padding">
					                            <div class="btn-wrap">
					                                <!-- <input class="button hvr-sweep-to-right ripple pull-left" type="submit" value="Next"> -->
					                                <button type="submit" tabindex="19" class="button hvr-sweep-to-right ripple pull-left" value="Next" id="">Next</button>

					                            </div>
					                        </div>
					                    </div>
			                        </div>
		                        </div>
							</form>
		                </div></div>
		        </div>
	        </div>
	  	</div>
  	</div>
	<!-- <div class="overlay" style=" position: absolute;
    width: 100%;
    height: 100%;
    display:none;
    text-align:center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.3);
    z-index: 200;
    cursor: pointer;" id="loader">
	<img style="top:35%;position:absolute;" src="{% static 'images/testinggif.gif' %}">
</div>	 -->

<script>

$( document ).ready(function() {

	$('#order-toll-free').validator().on('submit', function (e) {
        if (e.isDefaultPrevented()) {
            // handle the invalid form...
        } else {
            $('.overlay').show();
        }
    });

	$("#fgfg").select2({});
	$("#ghgh").select2({});
	$("#jkjk").select2({});
	$("#klkl").select2({});
	$("#mnmn").select2({});
    $("#opop").select2({});
    $("#prpr").select2({});
    $("#qrqr").select2({});
    $("#rsrs").select2({});
    $("#stst").select2({});
    $("#tutu").select2({});


    $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });



//validator method
$('form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
    console.log('invalid form!');
  } else {
    // everything looks good!
    console.log('looks good!');
    	var form_id = $(this).attr('id');
		var url = $(this).attr('data-url');
		var form_data = $(this).serialize();

		$(".overlay").show();
		  $.ajax({
		  	url: url,
		  	data: form_data,
		  	success: function(data){
		  		var content_div = form_id+'-content';

		  		$("#"+content_div).html('');
		  		$("#"+content_div).html(data);
		  		$(".overlay").hide();
		  	},
		  	error: function(data){
		  		$(".overlay").hide();
		  	}

		  });


		return false;
  }
})

// =====ENABLE BELOW BLOCK if validator method is not present======

// $('form').submit(function() {
// 	var form_id = $(this).attr('id');
// 	var url = $(this).attr('data-url');
// 	var form_data = $(this).serialize();

// 	$(".overlay").show();
// 	  $.ajax({
// 	  	url: url,
// 	  	data: form_data,
// 	  	success: function(data){
// 	  		var content_div = form_id+'-content';

// 	  		$("#"+content_div).html('');
// 	  		$("#"+content_div).html(data);
// 	  		$(".overlay").hide();
// 	  	}

// 	  });


// 	return false;
// });
// ======================================


$("#qrqr").change(function() {
	showStates();
});

function showStates() { 
  var country_iso_code = $("#qrqr").val(); 
  $.ajax({
      type: "POST",
      url: "/numbers/get-states/",
      data: {'csrfmiddlewaretoken': '{{ csrf_token }}','country_iso_code':country_iso_code},
      success: function(data) {
      	 $("#prpr").html(data);
      }
  });   

}

});


/*$("#order-toll-free").submit(function() {
  console.log('order toll free');
  var data = $(this).serialize();

	$.post("/numbers/order-toll-free/", 
	{
		data:data,
		csrfmiddlewaretoken: '{{ csrf_token }}',
	},
		function(result){
			console.log('ok')
	});
  return false;
});*/


/*$("#order-local").submit(function() {
  var form_data = $(this).serialize();
  $("#loader").show();
  $.ajax({
  	url: '/numbers/order-local/',
  	data: form_data,
  	success: function(data){
  		$("#order-local-content").html('');
  		$("#order-local-content").html(data);
  		$("#loader").hide();
  	}

  });
  return false;
});*/

/*$("#order-toll-free").submit(function() {
  console.log('order toll free');
  var form_data = $(this).serialize();
  $("#loader").show();
  $.ajax({
  	url: '/numbers/order-toll-free/',
  	data: form_data,
  	success: function(data){
  		$("#order-toll-free-content").html('');
  		$("#order-toll-free-content").html(data);
  		$("#loader").hide();
  	}

  });
  return false;
});*/

/*$("#order-toll-free").submit(function() {
  console.log('order toll free');
  var form_data = $(this).serialize();
  $("#loader").show();
  $.ajax({
  	url: '/numbers/order-toll-free/',
  	data: form_data,
  	success: function(data){
  		$("#order-toll-free-content").html('');
  		$("#order-toll-free-content").html(data);
  		$("#loader").hide();
  	}

  });
  return false;
});*/

/*function Next(form_id,url) {
	return false;
	console.log(form_id);
	var form_data = $(this).serialize();
	$("#loader").show();
	  $.ajax({
	  	url: url,
	  	data: form_data,
	  	success: function(data){
	  		var content_div = form_data+'-content';
	  		console.log(content_div);

	  		$("#"+content_div).html('');
	  		$("#"+content_div).html(data);
	  		$("#loader").hide();
	  	}

	  });

	return false;
}
*/

</script>
{% endblock %}