<link rel="stylesheet" href="<?php echo $this->baseUrl('public/countrycode/style.css'); ?>" >
<style>
  .loginContainerMain{height:auto !important; }
</style>

<div class="col-md-4 login_gt_right" style="background:#f3f3f3; box-shadow:0px 3px 10px #333333; display:flex;">

    <div style="margin:auto; width:100%;">
        <div class="col-md-12 ">
            
            
            <?php if(isset($this->msg) && $this->msg != ''){
                if($this->msg == 1){
                ?>
            <div class="form-group form-group loginCount_left registermessage">
                <h1>Congratulations!</h1>
                <p>
                    You have <span class="loginCount_left_blue">successfully</span> registered as a Partner with us. 
                    We have sent you an email for your id verification, 
                    please check your email to verify!
                </p>

            </div>
                <?php } else if($this->msg == 2){ ?>
             <div class="form-group form-group loginCount_left registermessage">
                <h1>Congratulations!</h1>
                <p>
                    You have <span class="loginCount_left_blue">successfully</span> registered as a Partner with us. 
                    We have sent you an email for your id verification, 
                    please check your email to verify!
                </p>

            </div>
            
             <?php } else if($this->msg == 3){ ?>
            
            <div class="form-group form-group loginCount_left registermessage " style="text-align:center;">
               
                <h1>Your Payment is Failed!</h1>
                <a  class="btn btn-primary btn-group-xs " href="<?php echo $this->baseUrl('adtoi');?>">Back</a>
                </div>
        <?php } else if($this->msg == 4){ ?>
            
             <div class="form-group form-group loginCount_left registermessage" style="text-align:center;">
                 <h1>Your Request id Invalid!</h1>
                  <a  class="btn btn-primary btn-group-xs " href="<?php echo $this->baseUrl('adtoi');?>">Back</a>
                </div>
            
                <?php } }else{ ?>
            <div class="form-group form-group registerform">
                <h1> <span><i class="fa fa-unlock"></i></span> Register Now</h1>
                <div class="col-md-12" id="dispMessage"></div>
                <form id="AgencyRegisterForm" action="<?php echo $this->baseUrl('adtoi/save-sign-up');?>" method="POST" autocomplete="off" onsubmit="return validAgencyRegisterForm()">
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="agencyName" type="text" class="form-controlLogin" placeholder="Agency Name" >
                    </div> 
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input type="text" name="contactName" class="form-controlLogin" placeholder="Contact Person" value="" >
                    </div> 
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input type="text" name="Designation" class="form-controlLogin" placeholder="Designation" value="" >
                    </div> 
                     <div class="input-group ls-group-input col-md-12 no-padding">
                        <input type="text" name="emailId" id="emailId" class="form-controlLogin" placeholder="Email Id" value="" maxlength="40">
                    </div> 
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <div class="input-group textfieldMain_mobile" style="background-color: #f3f3f3 !important; border-bottom: 1px solid #828282!Important;border: 1px solid #f3f3f3;">
                            <div class="country_details" style="background-color: #f3f3f3 !important; width: 24px;">
                                 <div id="iti-flag" class="iti-flag in"></div>
                                 <div class="iti-arrow" style="right: -8px;"></div>   
                             </div>
                             <div class="country_dropdown">
                                 <div class="search_country">
                                         <input type="text" name="" class="txtfield form-control" placeholder="Search countries" id="countries_list">
                                         <div class="search_icon"></div>
                                 </div>
                                 <ul class="allcountries"></ul>
                             </div>
                            <div class="input-group-input" style="width: 10%;">
                                 <input type="text" class=" country_code form-control codeborder" readonly="readonly" id="mobile_code" name="countrycode" value="+91" style="padding:0px;background-color: #f3f3f3 !important;">
                             
                             </div>
                             <input type="text" name="mobileNo" id="mobileno" maxlength="15" value="" class="form-controlLogin codeborder" placeholder="Mobile No.(This will be used for otp verification!)" style="background-color: #f3f3f3 !important;">
                         </div>
                        <!--<input type="text" name="mobileNo" class="form-controlLogin" placeholder="Mobile Number (This will be used for otp verification!)" value="" maxlength="15">-->
                    </div> 
                    
                    
                    
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="selectCountry" id="selectCountry" type="text" class="form-controlLogin"  placeholder="Country Name" maxlength="25" value="india">
                    </div> 
                    
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="StateName" id="StateName" type="text" class="form-controlLogin StateOrZone"  placeholder="State Name" value="" maxlength="25" >
                    </div> 

                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="selectCity" id="selectCity" type="text" class="form-controlLogin" placeholder="City Name" value="" onkeyup="getCityList();"  maxlength="25">
                    </div> 

                    <div class="form-group col-md-12 no-padding no-margin-bot">
                                            <label class="no-margin">Type</label>
                                            <div class="col-md-12 no-padding no-margin">
                                                <label class="checkbox inlinebl">
                                                    <input type="checkbox" name="optionsType[]" id="optionsB2B" value="B2B" class="icheck-blue">
                                                    B2B    
                                            	</label>&nbsp;&nbsp;
                                                <label class="checkbox inlinebl">
                                                    <input type="checkbox" name="optionsType[]" id="optionsB2C" value="B2C" class="icheck-blue">
                                                    B2C    
                                            	</label>&nbsp;&nbsp;
                                                <label class="checkbox inlinebl">
                                                    <input type="checkbox" name="optionsType[]" id="optionsDMC" value="DMC" class="icheck-blue">
                                                    DMC    
                                            	</label>&nbsp;&nbsp;
                                                <label class="checkbox inlinebl">
                                                    <input type="checkbox" name="optionsType[]" id="optionsHotelier" value="Hotelier" class="icheck-blue">
                                                    Hotelier    
                                            	</label>&nbsp;&nbsp;
                                                 <label class="checkbox inlinebl">
                                                    <input type="checkbox" name="optionsType[]" id="optionsOthers" value="Others" class="icheck-blue">
                                                    Others    
                                            	</label>
                                                
                                                </div>                        
                                        </div>

                   

                    

                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <textarea class="form-controlLogin" rows="1" cols="45" maxlength="250" name="shortDetail" placeholder="Remark" ></textarea>
                    </div> 
                    <div class="form-group col-md-12 no-padding no-margin-bot">
                                            <label class="no-margin">Activities Type</label>
                                            <div class="col-md-12 no-padding no-margin">
                                                <label class="checkbox inlinebl">
                                                    <input type="radio" name="ActivitiesType" id="optionscheckbox1" value="0" class="ActivitiesType" onclick="togglePlaneNameAmount(this)" checked style="height: 20px;width: 37px; position: absolute;margin: 0px 0 0;">
                                                    <span style="margin-left: 37px;">Query</span>
                                            	</label>&nbsp;&nbsp;
                                                <label class="checkbox inlinebl">
                                                    <input type="radio" name="ActivitiesType" id="optionscheckbox3" value="2" class="ActivitiesType" onclick="togglePlaneNameAmount(this)" style="height: 20px;width: 37px; position: absolute;margin: 0px 0 0;">
                                                    <span style="margin-left: 37px;">Cash</span>
                                            	</label>&nbsp;&nbsp;
                                                <label class="checkbox inlinebl">
                                                    <input type="radio" name="ActivitiesType" id="optionscheckbox2" value="1" class="ActivitiesType" onclick="togglePlaneNameAmount(this)" style="height: 20px;width: 37px; position: absolute;margin: 0px 0 0;">
                                                    <span style="margin-left: 37px;">	Paid Registration  </span>
                                            	</label>
                                                </div>                        
                                        </div> 
                    
                    
                    
                    <div id="togglePlaneNameAmountId" style="display:none;">
                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="planName" id="planName" type="text" class="form-controlLogin" placeholder="Plan Name" value="" onkeyup="removePlanError()">
                        <div class="planError" style="color:red;font-size: 12px;"></div>
                        
                    </div> 

                    <div class="input-group ls-group-input col-md-12 no-padding">
                        <input name="Amount" id="Amount" type="text" class="form-controlLogin" placeholder="Amount" value="" onkeyup="removeAmountError()">
                        <div class="amountError" style="color:red;font-size: 12px;"></div>
                    </div> 
                    </div>
                    <div class="input-group ls-group-input col-md-12 no-padding">                        
                        <input type="hidden" name="country_id" id="hidden_selected_country_id" value="101"/>
                        <input type="hidden" name="stateid" id="hidden_selected_state_id" value=""/>
                        <input type="hidden" name="hiddenStateOrZoneSysId" id="hiddenStateOrZoneSysId" value=""/>
                        <input type="hidden" name="hiddenStateOrZoneSysName" id="hiddenStateOrZoneSysName" value=""/>
                        <input name="submit" type="submit" id="submit" class="btn btn-primary btn-group-xs pull-right" value="Join Us">
                        <img class="loaderimg" id="loaderimg" src="<?php echo $this->baseUrl('public/images/load1.gif'); ?>"/>
                        <!--<button class="btn btn-primary btn-group-xs pull-right">Join Us</button>-->
                    </div>
                </form>
            </div>
            <?php }?>
        </div>



    </div>  
</div>




<script src="<?php echo $this->baseUrl('public/js/jquery.min.js'); ?>"></script>
<!--<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="<?php echo $this->baseUrl('public/assets/css/jquery-ui.css'); ?>" >
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/editable-table/jquery.validate.js'); ?>"></script>

<!--<script src="<?php echo $this->baseUrl('public/js/jquery.validate.min.js'); ?>"></script>-->
<script src="<?php echo $this->baseUrl('public/js/constants.js'); ?>"></script> 
<script src="<?php echo $this->baseUrl('public/js/adtoiregistrationFunctions.js'); ?>"></script> 
<script src="<?php echo $this->baseUrl('public/countrycode/script.js?rv=1144'); ?>"></script>
<!--include custom js functions-->
<script src="<?php echo $this->baseUrl('public/assets/js/bootstrap3-typeahead.js'); ?>"></script>
<script src="<?php echo $this->baseUrl('public/assets/js/selectize.min.js'); ?>"></script> 
<script type="text/javascript">
    
 $('.StateOrZone').typeahead({
    hint:true,
    items: 'all',
    source: function(query, process) {
        /*var $selectState = $("#state").selectize();
        var stateSelectize = $selectState[0].selectize;*/
//        var $selectCountry = $("#b2bagent_country").selectize();
//        var countrySelectize = $selectCountry[0].selectize;

        $('#hiddenStateOrZoneSysId').val('');
        return $.ajax({
            url: '/customer/get-typeahead-states-list',
            type: 'post',
            data: {query: query},
            dataType: 'json',
            success: function (result) {
                var resultList = result.map(function (item) {
                    var aItem = { StateId: item.StateId, label: item.label, ContSysId: item.ContSysId };
                    return JSON.stringify(aItem);
                });
                return process(resultList);
            }
        });
    },
     sorter: function(items) {
        if (items.length == 0) {
                var noResult = new Object();
                items.push('noResult');
        }
        return items;    
    },
    highlighter: function (obj) {
        /* if (obj == 'noResult') {
                return "<span>No Match Found.</span>";
        }*/

        if (obj != 'noResult') {
                var item = JSON.parse(obj);
        var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
        return item.label.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
        })

        }else{
                html = '<div class="typeahead">';
        html += '<div class="pull-left margin-small">';
        html += '<div class="text-left"><strong><span>No Match Found.</span></strong></div>';
        //html += '<div class="text-left">ok</div>';
        html += '</div>';
        html += '<div class="clearfix"></div>';
        html += '</div>';
                return html;
        }
    },
    updater: function(item) {
        if (item != 'noResult') {
            var item = JSON.parse(item);
            $('#hiddenStateOrZoneSysId').val(item.StateId);
            $('#hiddenStateOrZoneSysName').val(item.label);
            return item.label;
        } else {
                return '';
        }
    },
    minLength:2
    // displayField: 'label',
});   
    
    
                            $().ready(function () {
                                $("input[name=selectCountry]").autocomplete({
                                    source: '/register/autosuggest-country',
                                    minLength: 3,
                                    focus: function (event, ui) {
                                        event.preventDefault();
                                        //alert(ui.item.value);               
                                        $("#tags").val(ui.item.label);

                                    },
                                    select: function (event, ui) {
                                        event.preventDefault();
                                        $("input[name=selectCountry]").val(ui.item.label);
                                        $("#hidden_selected_country_id").val(ui.item.value).trigger('change');
                                        //set city blank
                                        $("input[name=selectCity]").val('');
                                        $("#hidden_selected_city_id").val('');
                                        $.ajax({
                                            url: '/register/countrycodeicon',
                                            data: {countryname:ui.item.label},
                                            method: 'POST',
                                            type: 'json',
                                            error: function () {

                                            },
                                            beforeSend: function () {

                                            },
                                            success: function (response) {
                                                var data  = JSON.parse(response);
                                                $("#iti-flag").attr('class','iti-flag '+data.iconcode+'');
                                                $(".country_code").val("+" + data.code);
                                            }
                                        });

                                    }
                                });


                            });

//    $().ready(function() { 
                            function getCityList() {
                                $('#hidden_selected_city_id').val('');
                                var countryId = $('#hidden_selected_country_id').val();

                                $("input[name=selectCity]").autocomplete({
                                    source: "/register/autosuggest-city?countryId=" + countryId,
                                   minLength: 3,
                                    focus: function (event, ui) {
                                        event.preventDefault();
                                        $("#tags").val(ui.item.label);
                                    },
                                    select: function (event, ui) {
                                        event.preventDefault();
                                        $("input[name=selectCity]").val(ui.item.label);
                                        $("#hidden_selected_city_id").val(ui.item.value).trigger('change');

                                    }
                                });

                            }
                            
                            
                           
                            
//    });
//                            $(function () {
//                                $('.registermessage').hide();
//                            });
                            
                            
                            function togglePlaneNameAmount(that){
                               if($(that).val() == 1 || $(that).val() == 2){
                                   $('#togglePlaneNameAmountId').show();
                               }else{
                                     $('#togglePlaneNameAmountId').hide();
                               }
                            }
                            
                            function validAgencyRegisterForm(){
                                if($('#optionscheckbox2').prop('checked')==true || $('#optionscheckbox3').prop('checked')==true){
                                  
                                  if($('#planName').val() == ''){
                                      $('.planError').html('Please enter plane name.');
                                      return false;
                                  }
                                  if($('#Amount').val() == ''){
                                      $('.amountError').html('Please enter amount.'); 
                                       return false;
                                  }
                                  
                                }
                                return true;
                            }
                            function removePlanError(){$('.planError').html('');}
                             function removeAmountError(){$('.amountError').html('');}
                           
</script>