@extends('layouts.main')
   @section('content')

   <style>
      /* Page-specific styles — layout provides base dark theme */
      .btn-add {
         background: #6366f1 !important;
         color: #ffffff !important;
         border: 1px solid #818cf8 !important;
         border-radius: 8px;
         padding: 8px 16px;
         font-size: 14px;
         transition: .25s;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
      }

      .btn-add:hover {
         background: #818cf8 !important;
         transform: translateY(-2px);
         box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
      }

      /* TABLE STYLING */
      .modern-table {
         width: 100%;
         border-collapse: collapse;
         color: #F3F4F6;
      }

      .modern-table thead th {
         background: rgba(99, 102, 241, 0.08);
         border: 1px solid rgba(99, 102, 241, 0.2);
         padding: 1rem 1.2rem;
         text-align: left;
         font-weight: 600;
         font-size: 0.85rem;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         color: #818CF8;
      }

      .modern-table tbody tr {
         border: 1px solid rgba(255, 255, 255, 0.08);
         transition: all 0.3s ease;
      }

      .modern-table tbody tr:hover {
         background: rgba(99, 102, 241, 0.1);
         border-color: rgba(99, 102, 241, 0.3);
      }

      .modern-table tbody td {
         padding: 1.2rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
         vertical-align: middle;
      }

      .modern-table tbody tr:last-child td {
         border-bottom: none;
      }

      /* BLOG TITLE */
      .blog-title {
         color: #F3F4F6;
         font-weight: 600;
         text-decoration: none;
         transition: 0.3s;
      }

      .blog-title:hover {
         color: #818CF8;
      }

      /* ACTION BUTTON BASE */
      .btn-action {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 36px;
         height: 36px;
         border-radius: 8px;
         border: none;
         font-size: 14px;
         transition: .25s;
         cursor: pointer;
      }

      .btn-edit {
         background: #ffc107 !important;
         color: #000000 !important;
      }

      .btn-edit:hover {
         background: #e0a800 !important;
         transform: scale(1.08);
      }

      .btn-delete {
         background: #dc3545 !important;
         color: #ffffff !important;
      }

      .btn-delete:hover {
         background: #bb2d3b !important;
         transform: scale(1.08);
      }

      /* EMPTY STATE */
      .empty-state {
         text-align: center;
         padding: 3.5rem;
         background: rgba(17, 24, 39, 0.25);
         border: 1px dashed rgba(255, 255, 255, 0.1);
         border-radius: 16px;
      }

      .empty-state-icon {
         font-size: 2.2rem;
         display: block;
         margin-bottom: 0.8rem;
      }

      .empty-state h5 {
         color: #F3F4F6;
         margin-bottom: 0.5rem;
      }

      .empty-state p {
         color: #9CA3AF;
         margin: 0;
      }

      @media (max-width: 768px) {
         .modern-table thead {
               display: none;
         }

         .modern-table tbody tr {
               display: block;
               margin-bottom: 1.5rem;
               border-radius: 12px;
         }

         .modern-table tbody td {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0.8rem;
               border: none;
               border-bottom: 1px solid rgba(255, 255, 255, 0.08);
         }

         .modern-table tbody td:before {
               content: attr(data-label);
               font-weight: 600;
               color: #818CF8;
               margin-right: auto;
         }

         .modern-table tbody td:last-child {
               border-bottom: none;
         }
      }
   </style>

   <div class="form-section">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem;">
         <h2 style="margin: 0;">📝 Blog Management</h2>
          
               <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addBlogModal">
                  ➕ Add Blog
               </button>
        
      </div>

      @if(session('success'))
         <div class="alert alert-success" style="margin-bottom: 1.5rem;">
               {{ session('success') }}
         </div>
      @endif

      @if($blogs->count() > 0)
         <div style="overflow-x: auto;">
               <table class="modern-table">
                  <thead>
                     <tr>
                           <th width="60">#ID</th>
                           <th>Title</th>
                           <!-- <th width="200">Category</th> -->
                           <th width="150" style="text-align: center;">Actions</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach($blogs as $key => $blog)
                           <tr>
                              <td data-label="#ID">
                                 <span style="color: #818CF8; font-weight: 600;">{{ $key + 1 }}</span>
                              </td>
                              <td data-label="Title">
                                 <a href="{{ route('super-admin.blog.details', $blog->id) }}" class="blog-title">
                                       {{ $blog->title }}
                                 </a>
                              </td>
                              <!-- <td data-label="Category">
                                 <span style="color: #9CA3AF; font-size: 0.9rem;">
                                       {{ $blog->category->name ?? 'Uncategorized' }}
                                 </span>
                              </td> -->
                              <td data-label="Actions" style="text-align: center;">
                                 <div style="display: flex; justify-content: center; align-items: center; gap: 0.5rem;">
                                       
                                          <a href="{{ route('super-admin.blog.edit', $blog->id) }}"
                                             class="btn-action btn-edit"
                                             title="Edit Blog">
                                             <i class="bi bi-pencil-square"></i>
                                          </a>                                                                        
                                          <form action="{{ route('super-admin.blog.destroy', $blog->id) }}"
                                                method="POST"
                                                style="display: inline;">
                                             @csrf
                                             @method('DELETE')
                                             <button type="submit"
                                                      class="btn-action btn-delete"
                                                      onclick="return confirm('Delete this blog?')"
                                                      title="Delete Blog">
                                                   <i class="bi bi-trash"></i>
                                             </button>
                                          </form>                                      
                                 </div>
                              </td>
                           </tr>
                     @endforeach
                  </tbody>
               </table>
         </div>
      @else
         <div class="empty-state">
               <span class="empty-state-icon">📚</span>
               <h5>No Blogs Found</h5>
               <p>No blog articles available right now. Create your first blog to get started!</p>
         </div>
      @endif
   </div>

   {{-- ADD BLOG MODAL --}}
   <div class="modal fade" id="addBlogModal" tabindex="-1">
      <div class="modal-dialog modal-lg">
         <form action="{{ route('super-admin.blog.store') }}" method="POST" enctype="multipart/form-data">
               @csrf
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title fw-bold">Add New Blog</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">
                     <div class="mb-3">
                           <label class="form-label">Assign to Tenant (Optional)</label>
                           <select name="tenant_id" class="form-control">
                              <option value="">No Tenant (Global)</option>
                              @foreach($tenants as $t)
                                 <option value="{{ $t->id }}">{{ $t->name }} ({{ $t->custom_domain }})</option>
                              @endforeach
                           </select>
                     </div>
                     <!-- <div class="mb-3">
                           <label class="form-label">Category</label>
                           <select name="category_id" class="form-control" required>
                              <option value="">Select Category</option>
                              @foreach($categories as $cat)
                                 <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                              @endforeach
                           </select>
                     </div> -->

                     <div class="mb-3">
                           <label class="form-label">Blog Title</label>
                           <input type="text" name="title" class="form-control" placeholder="Enter blog title" required>
                     </div>

                     <div class="mb-3">
                           <label class="form-label">Description</label>
                           <textarea name="description" class="form-control" placeholder="Enter blog description" rows="5" required></textarea>
                     </div>

                     <div class="mb-3">
                           <label class="form-label">Featured Image</label>
                           <input type="file" name="image" class="form-control" accept="image/*">
                           <small style="color: #9CA3AF;">Recommended: 800x600px</small>
                     </div>
                  </div>
                  <div class="modal-footer" style="border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(17, 24, 39, 0.5);">
                     <button type="button" class="btn" data-bs-dismiss="modal" style="color: #9CA3AF;">Cancel</button>
                     <button type="submit" class="btn-add">✓ Save Blog</button>
                  </div>
               </div>
         </form>
      </div>
   </div>

   @endsection