<?php $__env->startSection('content'); ?>

<script>
  function loadZoneNames()
  {
      var StateId=$('#States').val();
      // Get State Name
      $.ajax({
          type: "GET",
          url: "getZoneNames",
          data:"stateid="+StateId,
          dataType: "json",
          success: function(result){
               $('#Zones').children().remove();         
               $('#Zones').append($('<option>').text("Zone").attr('value', ""));
              $.each(result, function(id, value) {
                $('#Zones').append($('<option>').text(value.ZoneName).attr('value', value.ZoneID));
              });
            }
          });
  }

  function loadDistrictNames()
  {
      var StateId=$('#States').val();
      var ZoneId=$('#Zones').val();
      // Get State Name
      $.ajax({
          type: "GET",
          url: "getDistrictNames",
          data:"zoneid="+ZoneId,
          dataType: "json",
          success: function(result){
               $('#Districts').children().remove();         
               $('#Districts').append($('<option>').text("District").attr('value', ""));
               $.each(result, function(id, value) {
                  $('#Districts').append($('<option>').text(value.DistrictName).attr('value', value.DistrictID));
               });
            }
          });
  }

 function loadTehsilNames()
  {
      var DistrictId=$('#Districts').val();
      // Get State Name
      $.ajax({
          type: "GET",
          url: "getTehsilNames",
          data:"districtid="+DistrictId,
          dataType: "json",
          success: function(result){
               $('#Tehsils').children().remove();         
               $('#Tehsils').append($('<option>').text("Tehsil").attr('value', ""));
               $.each(result, function(id, value) {
                  $('#Tehsils').append($('<option>').text(value.TehsilName).attr('value', value.TehsilID));
               });
            }
       });
  }

  function loadCityNames()
  {
      var TehsilId=$('#Tehsils').val();
      // Get State Name
      $.ajax({
          type: "GET",
          url: "getCityNames",
          data:"tehsilid="+TehsilId,
          dataType: "json",
          success: function(result){
               $('#Citys').children().remove();         
               $('#Citys').append($('<option>').text("City").attr('value', ""));
               $.each(result, function(id, value) {
                  $('#Citys').append($('<option>').text(value.CityName).attr('value', value.CityID));
               });
            }
       });
  }

  function loadCityName()
  {
      var CityId=$('#Citys').val();
      // Get State Name
      $.ajax({
          type: "GET",
          url: "getCityNameById",
          data:"cityid="+CityId,
          dataType: "json",
          success: function(result){
              $.each(result, function(id, value) {
                  $("#City").val(value.CityName);
                });
              }
       });   
  }

</script>

      <div class="row" style="margin-left:10%;width:80%;">
        <div class="col-lg-12" >
            <h3> Add New Village </h3>
              <h5 style="margin-left:70%;">
                  <?php if(Session::has('Name')): ?>
                      Welcome, <?php echo e(Session::get('Name')); ?>

                  <?php endif; ?>
              </h5>
            <hr>
            <div class="w-lg m-y-lg bv">
               <form id="NewVillageForm" name="NewVillageForm" action="SaveVillage" role="form" style="margin-top:20px;">
                       <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <!-- Errors And Success Messages -->
                             <?php if(count($errors)>0): ?>
                            <div class="alert alert-danger">
                              <ul>
                                <?php foreach($errors->all() as $error): ?>
                                  <li> <strong><font color="red" > <?php echo e($error); ?> </font> </strong></li>
                                  <p/>
                                <?php endforeach; ?>
                              </ul>
                            </div>
                            <?php endif; ?>
                        </p>
                         <?php if(Session::has('success')): ?>
                              <font color="green" > <?php echo e(Session::get('success')); ?> </font>
                              <p/>
                            <?php endif; ?>

                            <?php if(Session::has('error')): ?>
                              <font color="red" > <?php echo e(Session::get('error')); ?> </font>
                              <p/>
                            <?php endif; ?>
                          </div>
                          <div class="col-lg-3"></div>
                  </div>
                 <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <select id="States" name="States" onchange="loadZoneNames()" class="form-control">
                              <option value=""> State  </option>
                               <?php foreach($States as $state): ?>
                                  <option value="<?php echo e($state->StateID); ?>"><?php echo e($state->StateName); ?></option>
                                <?php endforeach; ?>
                            </select>
                          </div>
                        <div class="col-lg-3"></div>
                  </div>
                    <p/>
                  <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <select id="Zones" name="Zones" onchange="loadDistrictNames()" class="form-control">
                              <option value=""> Zone  </option>
                            </select>
                          </div>
                        <div class="col-lg-3"></div>
                    </div>
                    <p/>
                    <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <select id="Districts" name="Districts" onchange="loadTehsilNames()" class="form-control">
                              <option value=""> District  </option>
                            </select>
                          </div>
                        <div class="col-lg-3"></div>
                    </div>
                    <p/>
                    <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <select id="Tehsils" name="Tehsils" onchange="loadVillageNames()" class="form-control">
                              <option value=""> Tehsil  </option>
                            </select>
                          </div>
                        <div class="col-lg-3"></div>
                    </div>
                    <p/>
                    <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">
                            <input id="Village" type="text" name="Village" style="margin-left:" class="form-control" placeholder=" Village Name">
                          </div>
                        <div class="col-lg-3"></div>
                    </div>
                    <p/>
                    <div class="row">
                        <div class="col-lg-3"></div>
                          <div class="col-lg-6">                      
                            <input type="submit" value="Save" class="cg fp"> &nbsp;&nbsp;&nbsp;
                            <input type="reset" value="Cancel" class="fy cg">
                          </div>
                          <div class="col-lg-3"></div>
                    </div>
                </form>
            </div>
         </div>
      </div>


<script>
   $(document).ready(function() {
        $("#States").select2();
        $("#Zones").select2();
        $("#Districts").select2();
        $("#Tehsils").select2();
        
     });

    $('#NewVillageForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // This option will not ignore invisible fields which belong to inactive panels
            excluded: ':disabled',
            fields: {
                City: {
                    validators: {
                        notEmpty: {
                            message: 'The City Name is required'
                        }
                    }
                },
                States: {
                    validators: {
                        notEmpty: {
                            message: 'The State is required '
                        }
                    }
                },
                Zones: {
                    validators: {
                        notEmpty: {
                            message: 'The Zone is required '
                        }
                    }
                },
                Districts: {
                    validators: {
                        notEmpty: {
                            message: 'The District is required'
                        }
                    }
                },
                Tehsils: {
                    validators: {
                        notEmpty: {
                            message: 'The Tehsil is required'
                        }
                    }
                },
                Village: {
                    validators: {
                        notEmpty: {
                            message: 'The Village is required'
                        }
                    }
                }                
              }
        });

      function validateTab(index) {

         var fv   = $('#NewVillageForm').data('formValidation'), // FormValidation instance
            // The current tab
            $tab = $('#NewVillageForm');

        // Validate the container
        fv.validateContainer($tab);

        var isValidStep = fv.isValidContainer($tab);
        if (isValidStep === false || isValidStep === null) {
            // Do not jump to the target tab
            return false;
        }
        return true;
    }

</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.mainview', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>