<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>Publikasikan Blog</title> 
  <link rel="stylesheet" href="/mamber/layui.css"> 
  <link rel="stylesheet" href="/mamber/common.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
  <style>
        .title{
            font-family: Arial, Arial;
            font-weight: 700;
            font-size: 18px;
            color: #333333;
            line-height: 21px;
            padding-bottom: 15px;
        }
        .layui-textarea{
            background: #F6F6F6;
            border-radius: 8PX;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
        }

        textarea::placeholder {
            color: #C4C4C4; /* 提醒字体颜色 */
        }
        .post_content {
            margin: 15px;
            background: #FFFFFF;
            border-radius: 16px 16px 16px 16px;

            padding: 15px;
        }
        .post_btn{
            background: linear-gradient( 270deg, #114180 0%, #833148 53%, #D32620 100%);
            box-shadow: 0px 4px 16px 0px rgba(255,163,32,0.15);
            font-family: Arial, Arial;
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
            height: 44px;
            line-height: 44px;
        }
    </style> 
 </head> 
 <body class="common_body" style="background: #FFFFFf"> 
  <div class="common_header"> 
   <a href="javascript:history.back(-1)" class="back position" style="color: #222222"> <p class="btn" style="color: #000"><i class="layui-icon layui-icon-left layui-font-20"></i></p> Publikasikan Blog </a> 
  </div> 

  <form class="layui-form" method="POST" action="{{ route('proof.store') }}" enctype="multipart/form-data"> 
    @csrf

    <div class="post_content"> 
      <div class="title">Contents</div> 
      <div class="demo-login-container"> 
        <div class="layui-form-item layui-form-text"> 
          <div class="layui-inline"> 
            <textarea rows="10" lay-verify="required" placeholder="Write your content here" name="comment" class="layui-textarea"></textarea> 
          </div> 
        </div> 
        <div class="title" style="padding-bottom: 0px">Upload Photos</div> 
        <div class="blog_image_list" style="margin-top: 10px;margin-bottom:10px;display: flex;flex-wrap: wrap;"></div> 
        <div id="upload_blog_image" style="height: 100px;width:100px;border: 1px dashed #CDCDCD;text-align: center;line-height: 100px;cursor: pointer;border-radius: 8px;margin-bottom: 40px"> 
          <i class="layui-font-30 layui-icon layui-icon-picture layui-font-green"></i> 
        </div>
        <input type="file" name="photo" id="fileInput" accept="image/*" style="display: none;" />
      </div> 
    </div> 

    <!--<div class="layui-form-item" style="padding: 15px;"> 
      <button type="submit" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius post_btn" lay-submit lay-filter="postBlog">Publish</button> 
    </div> 
  </form>-->
  <div style="position: fixed;bottom: 0;left: 0px;width: 100%;height: 70px;background: #FFFFFF;"> 
    <div class="layui-form-item" style="padding: 15px;"> 
     <button class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius post_btn" style="background:#e7cca0;" lay-submit="" lay-filter="postClub">Post</button> 
    </div> 
   </div>
   </form>
@include('alert-message')
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
  layui.use(['form'], function(){
    var form = layui.form;

    const fileInput = document.getElementById('fileInput');
    const uploadBox = document.getElementById('upload_blog_image');
    const blogImageList = document.querySelector('.blog_image_list');

    uploadBox.addEventListener('click', function () {
      fileInput.click();
    });

    fileInput.addEventListener('change', function (e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (evt) {
          // Clear previous preview
          blogImageList.innerHTML = `
            <div class="image-item" style="position: relative; margin-right: 10px;">
              <img src="${evt.target.result}" style="width: 80px;height: 80px;border-radius: 8px;">
              <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" style="position: absolute; top: -8px; right: -8px; border-radius: 50%; padding: 0 7px; line-height: 20px; height: 24px;" onclick="removeImage()">×</button>
            </div>`;
        };
        reader.readAsDataURL(file);
      }
    });

    window.removeImage = function() {
      blogImageList.innerHTML = '';
      fileInput.value = ''; // Reset input
    }

    form.on('submit(postBlog)', function(data){
      return true;
    });
  });
</script>

</body>
</html>
