@extends('profile.partials.master')
@section('content')
<style>
  .add_btn{
    background: #14CF93 !important;
    border: none;
    color: white !important;
  }
  .dataTables_length{
    margin-bottom: 30px !important; 
  }
  table.dataTable.no-footer{
    border-bottom: 1px solid white  !important;
  }
</style>

<div class="container">
@if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
  <div class="d-flex justify-content-between mb-5">
    <h2 class="fw-bold">Blogs</h2>
    <a class="btn  add_btn " href="{{ route('blog.create') }}">Add</a>
  </div>
  <table class="table" id="example">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
        <th scope="col">Content</th>
        <th scope="col">Image</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      
      @foreach ($getblogs as $blog)
     
        <tr>
          <th scope="row">{{ $blog->id }}</th>
          <td>{{ $blog->title }}</td>
          <td> {!! substr($blog->blog_content, 0, 100) !!} </td>
          <td><img src="{{ $blog->image }}" width="250px"> </td>
          <td>
          <a href="{{ route('blog.edit',$blog->slug) }}" class="btn btn-sm btn-secondary">Edit</a>
                <form action="{{ route('blog.destroy', $blog->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                    </form>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
  $(document).ready(function() {
    $('#example').DataTable({
      "paging": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "lengthMenu": [10, 25, 50, 75, 100]
    });
  });
</script>

  

@endsection