<div class='row'>
        <div class='col-md-7'>
           <div class="card">
             <div class="card-header">	
                  <h5 class='card-title'><i class="fas fa-sync-alt"></i> Pengaturan Sinkron Data</h5></div>
                     <div class="alert alert-custom" role="alert">
                    <div class="custom-alert-icon icon-dark"><i class="fa fa-check fa-2x"></i></div>
                          <div class="alert-content">
                       <span class="alert-text" style="text-align:justify"> Pastikan ID Server dan Token API sudah sama pada server Pusat</span>
                                                    </div>
                                                </div>				  
						<div class="card-body">
                       <form id="formpengaturan" class="form-horizontal" enctype='multipart/form-data'>
							<div class="row mb-1">
                           <label  class="col-md-4 col-form-label bold">ID Server</label>
							<div class="col-sm-5">
						    <input type='text' name='id_server' value="<?= $setting['id_server'] ?>" class='form-control' readonly />
							</div>
		                    </div>
							
					        <div class="row mb-1">
							 <label  class="col-md-4 col-form-label bold">IP Server / Nama Domain</label>
							<div class="col-sm-8">
						    <input type='text' name='url_host' value="<?= $setting['url_host'] ?>" class='form-control' required='true' />
							</div>
		                    </div>
							 <div class="row mb-1">
							 <label  class="col-md-4 col-form-label bold">IP Server / Nama Domain</label>
							<div class="col-sm-8">
							<div class="input-group input-group-sm">
                                  <input type="text" name='token_api' class="form-control" id='tokenapi' value="<?= $setting['token_api'] ?>" >
                                          <span class="input-group-btn">
                                     <button type="button" class="btn btn-info btn-flat" id='buattoken'><i class="fas fa-spinner"></i></button>
                                 </span>
                                                </div>
												</div>
		                              </div>
		                    <div class="right">
					   <button type='submit' name='submit' class='btn btn-outline-primary'><i class='fa fa-check' ></i><span> Simpan</span></button>         
					 </div>
					  </form>
                        </div>
					 </div>
                       </div> 
						  <script>
   $('#formpengaturan').submit(function(e) {
        e.preventDefault();
        var data = new FormData(this);
      
        $.ajax({
            type: 'POST',
           url: 'server/setsync.php',
            enctype: 'multipart/form-data',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
             iziToast.info({
					title: 'Sukses!',
					message: 'Data berhasil disimpan',
					titleColor: '#FFFF00',
					messageColor: '#fff',
					backgroundColor: 'rgba(0, 0, 0, 0.5)',
					progressBarColor: '#FFFF00',
					position: 'topRight'				  
                });
                setTimeout(function() {
                    window.location.reload();
                }, 2000);

            }
        });
        return false;
    });
    $("#buattoken").click(function() {
        var stringLength = 15;
        var stringArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        var rndString = "";
        for (var i = 1; i < stringLength; i++) {
            var rndNum = Math.ceil(Math.random() * stringArray.length) - 1;
            rndString = rndString + stringArray[rndNum];
        };

        $("#tokenapi").val(rndString);

    });
</script>
<div class='col-md-5'>
           <div class="card">
             <div class="card-header">	
			  <h5 class='card-title'><i class="fas fa-wifi"></i> Koneksi Server</h5>
                  </div>    
			
						<div class="card-body">
						<div id='server' class="text-center">   
                            </div>
							</div>
							</div>
							</div>
							</div>