@extends('layouts.main')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
   body {
   background: #f5f7fb;
   }
   /* Button */
   .custom-btn {
   background: linear-gradient(135deg, #4e73df, #224abe);
   color: white;
   border: none;
   padding: 10px 22px;
   border-radius: 8px;
   font-weight: 500;
   transition: 0.3s;
   }
   .custom-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(0,0,0,0.15);
   }
   /* Card */
   .blog-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .blog-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* TABLE ROW */
   .blog-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .blog-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .blog-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* BLOG ICON */
   .blog-icon{
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: linear-gradient(135deg,#f59e0b,#f97316);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 4px 15px rgba(249,115,22,0.3);
   }
   /* BLOG LINK */
   .blog-link{
   transition: 0.3s;
   }
   .blog-link:hover{
   color: #2563eb !important;
   }
   /* STATUS */
   .active-badge{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   }
   /* BUTTON */
   .btn-action{
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: 0.3s;
   text-decoration: none;
   }
   /* EDIT */
   .edit-btn{
   background: rgba(59,130,246,0.12);
   color: #2563eb;
   }
   .edit-btn:hover{
   background: #2563eb;
   color: #fff;
   transform: scale(1.08);
   }
   /* DELETE */
   .delete-btn{
   background: rgba(239,68,68,0.12);
   color: #dc2626;
   }
   .delete-btn:hover{
   background: #dc2626;
   color: #fff;
   transform: scale(1.08);
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .blog-table thead{
   display: none;
   }
   .blog-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .blog-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .blog-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid">
   {{-- HEADER --}}
   <div class="d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold">📝 Blog Management</h4>
      @can('blog_create')
      <button class="custom-btn" data-bs-toggle="modal" data-bs-target="#addBlogModal">
      ➕ Add Blog
      </button>
      @endcan
   </div>
   {{-- SUCCESS --}}
   @if(session('success'))
   <div class="alert alert-success">{{ session('success') }}</div>
   @endif
   {{-- CARD --}}
   <div class="card">
      <div class="card-header bg-white">
         <h6 class="mb-0 fw-bold text-primary">Blog List</h6>
      </div>
      <div class="table-responsive">
         <table class="table align-middle blog-table mb-0">
            <thead>
               <tr>
                  <th width="80">#ID</th>
                  <th>Blog Details</th>
                  {{-- <th width="140" class="text-center">Status</th> --}}
                  <th width="140" class="text-center">Action</th>
               </tr>
            </thead>
            <tbody>
               @forelse($blogs as $key => $blog)
               <tr>
                  <!-- ID -->
                  <td>
                     <span class="fw-bold text-primary">
                     #{{ $key + 1 }}
                     </span>
                  </td>
                  <!-- BLOG DETAILS -->
                  <td>
                     <div class="d-flex align-items-center gap-3">
                        <!-- ICON -->
                        <div class="blog-icon">
                           <i class="bi bi-journal-richtext"></i>
                        </div>
                        <!-- BLOG INFO -->
                        <div>
                           <h6 class="mb-1 fw-semibold">
                              <a href="{{ route('superadmin.blog.blogdetails', $blog->id) }}"
                                 class="blog-link text-dark text-decoration-none">
                              {{ $blog->title }}
                              </a>
                           </h6>
                           <small class="text-muted">
                           Blog Article
                           </small>
                        </div>
                     </div>
                  </td>
                  <!-- STATUS -->
                  {{-- <td class="text-center">
                     <span class="badge active-badge">
                     <i class="bi bi-check-circle-fill me-1"></i>
                     Published
                     </span>
                  </td> --}}
                  <!-- ACTION -->
                  <td class="text-center">
                     <div class="d-flex justify-content-center align-items-center gap-2">
                        <!-- EDIT -->
                        @can('blog_edit')
                        <a href="{{ route('superadmin.blog.edit', $blog->id) }}"
                           class="btn-action edit-btn"
                           title="Edit Blog">
                        <i class="bi bi-pencil-square"></i>
                        </a>
                        @endcan
                        <!-- DELETE -->
                        @can('blog_delete')
                        <form action="{{ route('superadmin.blog.destroy',$blog->id) }}"
                           method="POST"
                           class="m-0">
                           @csrf
                           @method('DELETE')
                           <button type="submit"
                              class="btn-action delete-btn"
                              onclick="return confirm('Delete this blog?')"
                              title="Delete Blog">
                           <i class="bi bi-trash"></i>
                           </button>
                        </form>
                        @endcan
                     </div>
                  </td>
               </tr>
               @empty
               <tr>
                  <td colspan="4">
                     <div class="empty-state">
                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                           width="120"
                           class="mb-3">
                        <h5>No Blogs Found</h5>
                        <p class="text-muted mb-0">
                           No blog articles available right now.
                        </p>
                     </div>
                  </td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>
</div>
{{-- ADD MODAL --}}
<div class="modal fade" id="addBlogModal">
   <div class="modal-dialog">
      <form action="{{ route('superadmin.blog.store') }}" method="POST" enctype="multipart/form-data">
         @csrf
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="fw-bold">Add Blog</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
               <select name="category_id" class="form-control mb-3" required>
                  <option value="">Select Category</option>
                  @foreach($categories as $cat)
                  <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                  @endforeach
               </select>
               <input type="text" name="title" class="form-control mb-3" placeholder="Title" required>
               <textarea name="description" class="form-control mb-3" placeholder="Description" rows="4" required></textarea>
               <input type="file" name="image" class="form-control">
            </div>
            <div class="modal-footer">
               <button class="custom-btn btn-success">Save Blog</button>
            </div>
         </div>
      </form>
   </div>
</div>
@endsection