<% layout('admin_layout') %>
<div class="page-content--bgf7">
    <!-- WELCOME-->
    <section class="welcome p-t-10">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title-4">Post
                    </h1>
                    <hr class="line-seprate">
                </div>
            </div>
        </div>
    </section>
    <!-- END WELCOME-->

    <section class="p-t-20" style="min-height: 420px !important;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    
                    <div class="card">
                        <div class="card-header">Add Post</div>
                        <div class="card-body card-block">
                            <form action="/admin/addpost"  method="post" 
                            enctype="multipart/form-data" id="myForm">
                                <div class="form-group">
                                    <label class="control-label mb-1">Post Title</label>
                                    <input type="text" id="title" name="title"
                                        placeholder="Post Title" class="form-control" required="">
                                    <span class="text-danger" id="category_name_error"></span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label mb-1">Select Post tags </label><br>
                                    <select name="tags" id="tags" multiple="multiple" class="form-control" >
                                         <% 
                                          tags.forEach(function(val, index) {
                                         %>
                                            <option value="<%= val.id %>" ><%= val.name %></option>
                                            <%  }); %>
                                    </select>
                                    <span class="text-danger" id="cat_priority_error"></span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label mb-1">Post Description</label>
                                    <textarea class="form-control" name="post_desc" id="post_desc" rows="10" cols="30" ></textarea>
                                </div>
                                <div class="form-group">
                                    <label class="control-label mb-1">Post Image</label>
                                    <input type="file" name="image[]"  multiple="multiple" accept="image/*"  />
                                </div>
                                <div class="img-wrap img_div" style="display: none;">
                                    <span class="close del_image">&times;</span>
                                    <img id="img_preview" src="" height="65px" width="75px">
                                </div>
                                <div class="form-actions form-group">
                                    <button type="submit"   class="btn btn-purple btn-sm" id="add_btn"
                                        name="add_btn">Add</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

  
    <!-- COPYRIGHT-->
    <section class="p-t-0">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="copyright">
                        <p>Copyright © <%= new Date().getFullYear();%> Dherb. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END COPYRIGHT-->
</div>

<script>
    $(window).bind("pageshow", function() {
    $("#title").val('');
    $("#tags").val('');
    $("#post_desc").val('');

});
    function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
              $('.img_div').css('display', 'block');
              $('#img_preview').attr('src', e.target.result);
          }
          console.log(input.files[0],"input.files[0]")
          reader.readAsDataURL(input.files[0]);
      }
  }

  $("#image").change(function () {
      readURL(this);
  });

          
  $('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);
    
    return false;
});
//       $('#add_btn').click(function (e) {
//         //   e.preventDefault();
//         $('#updateCatForm').submit();
//   // $('#update_btn').click(function (e) {


// // $('#updateCatForm').submit();
//          var image =  $('#img_preview').attr('src');
//          var path = $("#image").val()
//           var title = $("#title").val();
//           var post_desc = $("textarea#post_desc").val();
//               var selected = $("#tags :selected").map((_,e) => e.value).get();
//               var tags= selected.toString();
//             //   $('#updateCatForm').submit();
          
//         //   $.ajax({
//         //       type: "POST",
//         //       url: 'http://127.0.0.1:3000/admin/addpost',
//         //       data: { title: title , postDesc :post_desc,tags:tags,image:image,paths:path},
//         //       cache: false,
//         //       success: function (response) {
//         //            console.log(response,"llllllll")
//         //            $('#addCatForm').submit();
//         //       },
//         //       error: function (jqXHR, textStatus, errorThrown) {
//         //           console.log(textStatus, errorThrown);
//         //       }
//         //   });
      
//       });
  
      </script>