<%- include('../../common/header') %> 
<%- include('../../common/side-bar') %>

<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <%- include('../../common/navbar') %>
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                  <h6 class="text-white text-capitalize ps-3">Blogs</h6>
                </div>
              </div>
            <div class="card-body py-3 pb-2">
                <%- include('../../../errors/flash-message')  %>
                <a href="/blogs/create" class="btn btn-sm btn-info" style="float: right;">Add New Blog</a>
                <table class="table align-items-center justify-content-center mb-0">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                      <% blogs.forEach((element,key) => { %>
                        <tr>
                          <td><%=key+1%></td>
                          <td><%=element.name%></td>
                          <td><%-element.description%></td>
                          <td>
                            <a href="/blogs/edit/<%=element._id%>">Edit</a>
                            <a href="/blogs/delete/<%=element._id%>">Delete</a>
                            <select name="status" class="status">
                              <option data-blogid="<%=element.id%>" value="1" <% if(element.status == 1){%>selected<%}%> >Active</option>
                              <option data-blogid="<%=element.id%>" value="0" <% if(element.status == 0){%>selected<%}%> >In Active</option>
                            </select>
                          </td>
                        </tr>
                        <input type="hidden" value="<%=element._id%>" id="blog_id">
                      <%});%>
                      
                </tbody>
                </table>
            </div>
        </div>
        </div>
        </div>
    </div>
</main>


<%- include('../../common/footer') %> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $(".status").change(function () {
    var status = $(this).val();
    // var blog_id = $(this).data('blogid');

    var blog_id = $(this).find(':selected').data('blogid');


    // console.log('status: '+status);
    // console.log('blog_id: '+blog_id);

        var saveData = $.ajax({
            type: 'GET',
            url: "/blogs/status/"+blog_id+"/"+status,
            success: function (resultData) {
              console.log('Result '+resultData);
              location.reload(true);
                // globle_delete_ids.map(function (data) {
                //     $('#delete_notification_' + data).remove()

                // });
                // var count = $('#delete_count').html();
                // count = count - globle_delete_ids.length;
                // $('#delete_count').html(count);

            }
        });
        // // saveData.error(function() { alert("Something went wrong"); });
    });
  });
</script>