<?php 
include 'header.php';
include 'sidelinks.php';
include 'functions.php'; 
if(!empty($_POST['submit'])){ servicecomponent_insert(); }
?> 
<div class="content-wrapper">
  <div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4">Services Components</h4>
    <div class="row"> 
      <div class="col-xxl">
        <div class="card mb-12"> 
          <div class="card-body">
            <?php
   if(!empty($_GET['succ'])){
     ?>
     <div align="center">
      <h4 style="color:green;">Services Data Inserted Successfully </h4>
    </div>
     <?php
  }
   if(!empty($_GET['exit'])){
     ?>
     <div align="center">
      <h4 style="color:red;">Services Data Already Inserted </h4>
    </div>
     <?php
  }
?>
            <form method="post" enctype="multipart/form-data">
             
              <div class="row mb-12">
                <div class="col-sm-2">
                <label class="col-form-label" for="basic-default-name">Name</label>
              </div>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name" required />
                </div>
              </div><br>
            
            
              <div class="row mb-12">
                <div class="col-sm-2">
                <label class="col-form-label" for="basic-default-phone">Content</label>
              </div>
                <div class="col-sm-10">
                  <textarea id="basic-default-message" name="content" class="form-control textarea-tiny" placeholder="Enter Your Content"></textarea>
                </div>
              </div><br>
              
               <div class="row mb-12">
                <div class="col-sm-2">
                <label class="col-form-label" for="basic-default-phone">Image</label>
              </div>
                <div class="col-sm-10">
                   <img id="image_preview" src="uploads/upload.png" style="height:100px;width:100px;"/>
                  <input type="file" class="form-control" name="image" id="image"  required />
                </div>
              </div><br>
                

              <div class="row justify-content-end">
                <div class="col-sm-10">
                  <input type="submit" name="submit" class="btn btn-primary" value="Send">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '.textarea-tiny',
height: 500,
menubar: false,
width: '100%',
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat|code | help',
image_advtab: true,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
]
});
</script>
<style>
div.mce-branding-powered-by{
display: none;
}
</style>
   <?php
include 'footer.php';
?>

<script>
function readURL1(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#image_preview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#image").change(function() {
  readURL1(this);
});
</script>