<style>
    .dropdown-menu>li>a {
        cursor:pointer;
    }

    .inputIcon{
        width:30px;}

</style>
<script type="text/javascript" src="<?php echo THEME_PATH; ?>/plugins/jquery-validation/js/jquery.validate.min.js"></script>
<div class="modal fade" data-backdrop="static" id="addNewCity" tabindex="-1" role="dialog" aria-hidden="true" style="width:50%;margin:0 auto">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('add_city');?></span></h5>
                <div id="addNewCityAlert"></div>
            </div>
            <div class="modal-body">
                <form id="AddNewCityPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                       
                     
                            <div class="col-md-12" >
                                <div class="col-md-6">  <div><label><?php print CommonLanguage::getMessage('choose_country');?></label></div>
								
								<div class="input-group required">
                                        <span class="input-group-addon bg-primary">
                                            <i class="fa fa-map inputIcon" ></i>
											
                                        </span>
								   <select id="Country_ID" name="Country_ID" class="full-width" data-init-plugin="select2">
                                      
                                        <?php foreach ($all_country as $country):?>
                                        <option value="<?php echo $country['Code']; ?>"><?php echo $country['Country_Name']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                        
                                    </div>
								
								</div>

                                <div class="col-md-6">
                                    <div><label><?php print CommonLanguage::getMessage('city');?></label></div>
                                    <div class="input-group required">
                                        <span class="input-group-addon bg-primary">
                                            <i class="fa fa-map-marker inputIcon" ></i>
                                        </span>
                                        <input type="text" placeholder="City Name" id="City_ID" name="City_Name" class="form-control "  required>
                                    </div>
                                </div>
                            </div>




                       
                    </div>
                </form>
            </div>
             <div class="modal-footer">
                            <div class="pull-right">
                                <button class="btn btn-default" id="CloseNewCity"   > <?php print CommonLanguage::getMessage('Close');?> </button>
                                <button class="btn btn-primary" id="SubmitNewCity"  > <?php print CommonLanguage::getMessage('Save');?>   </button>
                            </div>
                        </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields'));?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit'));?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully'));?>;
    $(function(){
       
        $("#SubmitNewCity").on("click",function(){
            $("#addNewCityAlert").attr("class","").html("")
            $("#AddNewCityPostForm").validate()
            if(!$("#AddNewCityPostForm").find("input").blur().end().valid()){
                $("#addNewCityAlert").attr("class","alert alert-danger").show().html(Required_Fields)
                return
            }
           
            var IsValidated=true;
         
            $("#NewCityIsBusy").remove();
            $("#addNewCity").append('<div id="NewCityIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
            $("#NewCityIsBusy").animate({opacity:1});


            var Data = new FormData(document.getElementById("AddNewCityPostForm"));
           
            $.ajax({
                url:"InventoryAjax/addCityAjax",
                method:"POST",
                data:Data,
              
                processData: false,
                contentType: false,
                complete:function(v1,v2){
						console.log(v1.responseText)
						console.log(v2)
                    if(v2 == 'success'){
                   
                        $("#NewCityIsBusy").remove();
                        $("#addNewCityAlert").addClass("alert alert-success").show().html(Submitted_Successfully);
                        setTimeout(function(){
                            $("#addNewCity").modal('hide')
                        },1500)
                        setTimeout(function(){
                            $("#addNewCityAlert").hide()
                        },1500)
                    }else{
                        $("#addNewCityAlert").addClass("alert alert-danger").show().html(Failed_Submit);
                    }
                    $("#NewCityIsBusy").remove();
                }


            })
          




        });
        $("#CloseNewCity").on("click",function(){
            $("#addNewCity input").val('');
           
            $("#addNewCity").modal("hide");
         
        })
        $("#addNewCity input").val('');
     
    });


</script>