<%- include('include/header') %>


<section class="blogs">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12">
            <div class="blog-mention">
                <h2>add new blogs here</h2>
    
              <div class="main-buton-blog">
                  <button  type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal" id="blog-btn" data-bs-whatever="@mdo">add a new blog</button>
                  
                  <div class="main-blogs">
                    <% blog.forEach((item) => { %>
                     <div class="main-blogs-btn">
                        <form action="/sites/pioneer-reality/api/blogs/delete" method="post">
                            <input type="hidden" name="id" value="<%- item._id %>">
                            <button type="submit">Delete</button>
                          </form>
                          <button  data-bs-toggle="modal" data-bs-target="#editModal<%- item._id %>">Edit</button>
                     </div>
                      
                      <!-- Edit Button -->
                  
                      <img src="/sites/pioneer-reality<%- item.picture %>" class="img-fluid" alt="img">
                      <h2>Title</h2>
                      <label> <%- item.title %></label>
                      <h2>Description</h2>
                      <p><%- item.disc %></p>
                  
                      <!-- Edit Modal -->
                      <div class="modal fade" id="editModal<%- item._id %>" tabindex="-1" aria-labelledby="editModalLabel<%- item._id %>" aria-hidden="true">
                        <div class="modal-dialog modal-lg modal-dialog-centered">
                          <div class="modal-content radius-16 bg-base">
                            <div class="modal-header py-16 px-24 border-bottom">
                              <h1 class="modal-title fs-5">Edit Blog</h1>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-24">
                              <form action="/sites/pioneer-reality/api/blogs/edit" method="POST" enctype="multipart/form-data">
                                <input type="hidden" name="id" value="<%- item._id %>">
                                
                                <div class="mb-3">
                                  <label class="form-label">Blog Title:</label>
                                  <input type="text" class="form-control" name="title" value="<%- item.title %>" required>
                                </div>
                  
                                <div class="mb-3">
                                  <label class="form-label">Description</label>
                                  <textarea class="form-control" name="disc" required><%- item.disc %></textarea>
                                </div>
                  
                                <div class="mb-3">
                                  <label class="form-label">Upload New Image (Optional)</label>
                                  <input type="file" class="form-control" name="image">
                                </div>
                  
                                <button type="submit" style="color: #000; border: 1px solid #000; margin: 15px 0;">Update</button>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                    <% }) %>
                  </div>
              </div>
                <p></p>
            </div>
            </div>
        </div>
    </div>
</section>

        
        <%- include('include/footer') %>
    
    
    <!-- Modal Add Event -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered">
            <div class="modal-content radius-16 bg-base">
                <div class="modal-header py-16 px-24 border border-top-0 border-start-0 border-end-0">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Add New Event</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-24">
                    <form action="/sites/pioneer-reality/api/blogs/new" method="POST" enctype="multipart/form-data">
                        <input type="file" name="image" required> 
                    
                        <div class="col-12 mb-20">
                            <label class="form-label">Blog Title:</label>
                            <input type="text" class="form-control" name="title" placeholder="Enter Blog Title" required>
                        </div>
                    
                        <div class="col-12 mb-20">
                            <label for="desc" class="form-label">Description</label>
                            <textarea class="form-control" id="desc" name="disc" placeholder="Write some text"></textarea>
                        </div>
                    
                        <button type="submit">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



        
        <!-- Jquery js -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap Bundle Js -->
    <script src="assets/js/boostrap.bundle.min.js"></script>
    <!-- Phosphor Js -->
    <script src="assets/js/phosphor-icon.js"></script>
    <!-- file upload -->
    <script src="assets/js/file-upload.js"></script>
    <!-- file upload -->
    <script src="assets/js/plyr.js"></script>
    <!-- dataTables -->
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
    <!-- full calendar -->
    <script src="assets/js/full-calendar.js"></script>
    <!-- jQuery UI -->
    <script src="assets/js/jquery-ui.js"></script>
    <!-- jQuery UI -->
    <script src="assets/js/editor-quill.js"></script>
    <!-- apex charts -->
    <script src="assets/js/apexcharts.min.js"></script>
    <!-- Calendar Js -->
    <script src="assets/js/calendar.js"></script>
    <!-- jvectormap Js -->
    <script src="assets/js/jquery-jvectormap-2.0.5.min.js"></script>
    <!-- jvectormap world Js -->
    <script src="assets/js/jquery-jvectormap-world-mill-en.js"></script>
    
    <!-- main js -->
    <script src="assets/js/main.js"></script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js"></script>

    </body>
</html>