<style>
      .title_iv{
        margin-bottom:0px;
        font-size:33px;
      }
</style>
<h2>Contact Setting</h2>
<hr/>
<?php 
    include('../config/config.php');
    $sql = "SELECT * FROM contacts ";
    $res = $conn->query($sql);
    $n = 0;
    while($row = $res->fetch_assoc()){
?>
<p class="text-right">
  <button class="btn btn-success" id="edit_open"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</button>
  <button class="btn btn-danger" id="edit_colse"><i class="fa fa-pencil" aria-hidden="true"></i> Cancel</button>
</p>
<form id="add_contact" method="post" enctype="multipart/form-data">
  <div id="error_add_project"></div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label>Contact Address</label>
        <textarea cols="5" rows="3" type="text" class="form-control" id="con_address" name="con_address"><?php echo $row['ct_address']; ?></textarea> 
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="form-group">
        <label>Contact Tel</label>
        <input type="text" class="form-control" id="con_tel" name="con_tel" value="<?php echo $row['ct_tel']; ?>" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label>Contact Tel2</label>
        <input type="text" class="form-control" id="con_tel2" name="con_tel2" value="<?php echo $row['ct_tel2']; ?>" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="form-group">
        <label>Contact Email</label>
        <input type="text" class="form-control" id="con_mail" name="con_mail" value="<?php echo $row['ct_mail']; ?>" /> 
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Update</button>
  <button class="btn btn-danger" type="reset">Cancel</button>
</form>
<?php 
  }
  ?>
<hr/>
<script>
$('#add_contact').validate({
      rules: {
        con_address: {
                required: true,
            },
        con_tel: {
            required: true,
        }, 
        con_tel2: {
            required: true,
        },
        con_mail: {
            required: true,
        },         
      },
      messages: {
        con_address: {
            required: "<p style='color:red'>Please Insert Contact Address</p>",
        },
        con_tel: {
            required: "<p style='color:red'>Please Insert Contact Tel</p>",
        }, 
        con_tel2: {
            required: "<p style='color:red'>Please Insert Contact Tel2</p>",
        }, 
        con_mail: {
            required: "<p style='color:red'>Please Insert Contact Email</p>",
        },          
      },
      submitHandler: function(form) {
        var con_address = $('#con_address').val();
        var con_tel = $('#con_tel').val();
        var con_tel2 = $('#con_tel2').val();
        var con_mail = $('#con_mail').val();

        var form_data = new FormData();          
        form_data.append('con_address', con_address);
        form_data.append('con_tel', con_tel);
        form_data.append('con_tel2', con_tel2);
        form_data.append('con_mail', con_mail);
        $.ajax({
            url: "update_contact.php",
            dataType: 'text', 
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
        }).done(function(data){
          console.log(data);
          if(data == 1){
              $("#error_add_project").html("<div class='alert alert-success'>Edit Contact Success</div>").fadeIn(1000).delay(1000).fadeOut(function(){     location.reload();  });
              $("#add_company :input").prop("disabled", true);
          }else{
            $("#error_add_project").html("<div class='alert alert-danger'>Not Edit Contact</div>").faceIn(1000).delay(1000).faeOut(1000);
              return false;
          }
        });
      }
    });

</script>
<script>
  $(document).ready(function(){
    $("#add_contact :input").prop("disabled", true);
    $("#edit_colse").hide();
  });

  $("#edit_open").click(function(){
    $("#add_contact :input").prop("disabled", false);
    $("#edit_colse").show();
    $("#edit_open").hide();
  });

  $("#edit_colse").click(function(){
    $("#add_contact :input").prop("disabled", true);
    $("#edit_colse").hide();
    $("#edit_open").show();
  });
</script>