<?php
  include('common/header.php');
  error_reporting(E_ALL);

?>
<style>
  .autocomplete {
    position: relative;
   
  }
  .autocomplete-items {
   /* position: absolute;*/
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
  }
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
  }
  .autocomplete-items div:hover {
    background-color: #e9e9e9; 
  }
  .autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
  }
  </style>

  <div class="">
    <div class="col-xm-12">
      <div class="widget-box light-border">
        <!-- <div class="widget-header header-color-grey">
          <h4 class="smaller">
           
          </h4>
        </div> -->
        <div class="widget-body">
          <div class="widget-main">
            <div class="row">
              <div class="col-sm-12">
                 <form class="form-horizontal" method="post" action="http://project.nityam.in/nityamhygiene/index.php/admin/client/view_edit_client" name="manage_client" id="manage_client" onsubmit="return validateForm()">
                  <section class="panel panel-default">
                  <header class="panel-heading bg-info lt font-bold">Branch Saleable Geography</header>
                  <!-- panel body start -->
                  <div class="panel-body bs-example form-horizontal">
                    <div class="">
                     <div class="hr hr12 dotted"></div>
                       <div class="">
                        <!-- main col-sm-12 -->
                      <div class="col-sm-12"> 
                           <div class="col-sm-6">
                            <div class="form-group" id="client_code">
                              <label for="client_code" class="col-sm-5 control-label required">Saleable Geography Name:<font style="color:red">*</font></label>
                              <div class="col-sm-7">
                                <input type="text" name="saleable_name" value="" id="saleable_name" placeholder="Saleable Name" class="form-control"  />

                                  <span id="saleable_name1" class="text-danger font-weight-bold"></span>             
                              </div>
                            </div>
                          </div>

                     

                       <div class="col-sm-6">
                            <div class="form-group">
                             <label for="client_code" class="col-sm-5 control-label required">Country:<font style="color:red">*</font></label>
                              <div class="col-sm-7">
                                <select name="country_name" id="country_name" onChange="" class="form-control" required>
                                   <option value="">Select Country Name</option>
                                 <?php 
                                    foreach ($country as  $coun) {?>             
                                  <option value="<?php echo $coun['country_id']; ?>"><?php echo $coun['country_name']; ?></option>
                                <?php } ?>
                                </select>              
                              </div>
                            </div>
                          </div> 

                        

                         <div class="col-sm-6">
                           <div class="form-group">
                            <label for="client_code" class="col-sm-5 control-label required">State Name:<font style="color:red">*</font></label>
                              <div class="col-sm-7" id="states">

                                 
                                  <?php
                  //$state_array_data=$state_array;
                  $js1 = 'class="select2 select2-multiple form-control" name="state_id" id="states" multiple="multiple" data-placeholder="Choose"';
                   echo form_dropdown('state_id',$js1);
                  ?> 
                   <span class="red" id="state_name_error"></span>
               
                              </div>  
                            </div>
                          </div>
                           </div> 

                        
                    
                  </div>
                                                 
                      </div>

                       <!-- </div> -->
                         <!-- main col-sm-12  close-->
                       </div> <!-- blank close -->
        </div><!-- blank close -->
      </div>   <!-- panel body close -->
    </section> <!-- section close -->

              </div>
            </div>
          </div>  
        </div>
      </div>
    </div>
    
    <!-- /.col -->
  </div>
  <div class="clearfix form-actions">
    <div class="col-md-offset-5 col-md-5">
      
      <button class="btn btn-info" type="submit">
         Submit
      </button>
    </div>
  </div>
  </form>
  <div class="space-4"></div>
    <!-- /.page-row -->
        <!-- /.page-content --> 
    </div>
    <!-- /.main-content --> 
  </div>
    <!-- /#ace-settings-container --> 
  </div>
  <!-- /.main-container-inner --> 
<?php
  include('common/footer.php');
?>
<script>
function hide()
{
  document.getElementById("admin_type_code").style.display="none";
}
function show()
{
  document.getElementById("admin_type_code").style.display="";
}

$(document).ready(function(){
 $('#country_name').change(function(){
  var country_id = $('#country_name').val();
  if(country_id != '')
  {
   $.ajax({
    url:"<?php echo base_url();?>index.php/gc/geography/fetch_state",
    method:"POST",
    dataType: 'json',
    data:{
      country_id:country_id
    },

    success:function(data)
    {

     $('#states').html(data);
    // $('#city').html('<option value="">Select City</option>');
    // var formoption = "";
    // $.each(data, function(v)
    // {
    //   var val = data[v];
    //   formoption += "<option value='option1'>"+val['state_name']+"</option>";
    // });

    //  $('#duallist').append(formoption);


    }
   });
  }
  else
  {
   $('#duallist').html('<option value="">Select State</option>');
   //$('#city').html('<option value="">Select City</option>');
  }
 });

 // $('#state').change(function(){
 //  var state_id = $('#state').val();
 //  if(state_id != '')
 //  {
 //   $.ajax({
 //    url:"<?php echo base_url(); ?>dynamic_dependent/fetch_city",
 //    method:"POST",
 //    data:{state_id:state_id},
 //    success:function(data)
 //    {
 //     $('#city').html(data);
 //    }
 //   });
 //  }
 //  else
 //  {
 //   $('#city').html('<option value="">Select City</option>');
 //  }
 // });

 // $('state_name').keyup(function(){
 //  var query = $(this).val();
 //  if(query)
 // }
 
});
</script>

<script type="text/javascript">
    function validateForm(){

      var saleable_name = document.getElementById('saleable_name').value;
      
      if(saleable_name == ""){
        document.getElementById('saleable_name1').innerHTML =" ** Please fill the First Name field";
        return false;
      }
       if(!isNaN(saleable_name)){
        document.getElementById('saleable_name1').innerHTML =" ** only characters are allowed";
        return false;
      }

    }
</script>
<script>
  $(document).ready(function(){
      
        $(".select2").select2();  
      $(".select2").prop("multiple", "multiple");
      
      /* var path='<?php echo base_url()?>index.php/<?php echo CUSTOMER_PATH;?>';
      auto_complete('<?php echo $company_id;?>',path,'company','company_list_id'); */

        });
</script>
