@extends('common.dashboard')

@section('title','Blog post')
@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            
            <div class="card-body">
                <h4 class="card-title">Blog post table <a class="float-right text-primary btn btn-sm text-info" href="/common/add-blog" style="border:1px solid silver"><i class="fas fa-plus-circle"></i> Add New?</a></h4>
                <div class="table-responsive">
                    <table class="table mb-0 table-bordered table-hover" style="font-size:12px">
                        <thead>
                            <tr>
                                <th>#</th><th>Photo</th> <th>Title</th>
                                <th>Discription</th><th>Status</th>
                                <th class="text-right">Modify</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($posts as $key=>$post)
                            <tr>
                                <th scope="row">{{$key+1}}</th>
                                <td>
                                    <div class="media">
                                        <div class="media-body">
                                            <img class="d-flex ml-3 rounded-circle" src="/{{$post->photo}}" height="30">
                                        </div>
                                    </div>
                                </td>
                                <td>{{mb_substr($post->title,0,30)}} ...</td>
                                <td>{{mb_substr(strip_tags($post->description),0,50)}} ...</td>
                               
                                <td>
                                	@if($post->status==1) <span class="badge badge-success">Active</span>
                                	@else <span class="badge badge-danger">Inactive</span> @endif
                                </td>
                                <td class="text-right">
                                    <div class="btn-group dropleft">
                                        <button type="button" class="btn btn-sm btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="mdi mdi-chevron-left"></i>
                                        </button>
                                        <div class="dropdown-menu" x-placement="left-start">
                                            <a class="dropdown-item" href="/common/edit-blog/{{$post->id}}">
                                            <i class="fas fa-edit text-primary"></i> Edit post
                                            </a>

                                            <a class="dropdown-item show-post" data-toggle="modal" data-target=".openModal" href="javascript:void(0);" data-id="{{$post->id}}">
                                                <i class="fas fa-eye text-primary"></i> View More
                                            </a>

                                            <a class="dropdown-item text-danger" href="/common/delete-blog/{{$post->id}}" onclick="return confirm('Are you sure to remove the record??? No undo option available!!');">
                                            <i class="fas fa-trash text-danger"></i> Delete post
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div> <br><br>
                <div class="row">{{$posts->links()}}</div>

            </div>
        </div>
    </div>
</div>


<div class="modal fade openModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title h4" id="myLargeModalLabel">Post Details</h5>
            <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="fetch_result"></div>
        </div>
    </div>
  </div>
</div>


<script src="{{asset('back/assets/js/jquery.min.js')}}"></script>
<script type="text/javascript">
  $(function(){
    var url = $('#base_url').val();
    $('.show-post').on('click',function(){
      var id = $(this).data('id');

      $.ajax({
        url:url + "/common/show-blog/"+id,
        type: "get",
        success:function(data){
          $('.fetch_result').html(data);
        }
      });
    });
  })
</script>

@endsection