@extends('layouts.main')
@section('content')
<style>
   .category-report-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .category-report-table thead th{
   border: none;
   background: #f8fafc;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px;
   text-transform: uppercase;
   white-space: nowrap;
   }
   /* ROW */
   .category-report-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .category-report-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .category-report-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* CATEGORY ICON */
   .category-avatar{
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: linear-gradient(135deg,#3b82f6,#6366f1);
   color: #fff;
   font-size: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(59,130,246,0.3);
   }
   /* SUBCATEGORY BADGE */
   .subcategory-badge{
   background: rgba(99,102,241,0.12);
   color: #4f46e5;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   transition: 0.3s;
   }
   .subcategory-badge:hover{
   background: #4f46e5;
   color: #fff;
   }
   /* TOTAL BOX */
   .total-box{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 10px 16px;
   border-radius: 14px;
   font-weight: 700;
   min-width: 70px;
   }
   /* EMPTY */
   .empty-state{
   padding: 40px;
   text-align: center;
   }
   /* MOBILE */
   @media(max-width:768px){
   .category-report-table thead{
   display: none;
   }
   .category-report-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .category-report-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .category-report-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   <h4 class="mb-4">Category / SubCategory Report</h4>
   <div class="card shadow">
      <div class="card-header bg-warning">
         Master Category Report
      </div>
      <div class="card-body">
         <div class="table-responsive">
            <table class="table align-middle category-report-table mb-0">
               <thead>
                  <tr>
                     <th width="80">#ID</th>
                     <th>Category</th>
                     <th>Sub Categories</th>
                     <th width="180" class="text-center">Total SubCategories</th>
                  </tr>
               </thead>
               <tbody>
                  @forelse($categories as $key => $cat)
                  <tr>
                     <!-- ID -->
                     <td>
                        <span class="fw-bold text-primary">
                        #{{ $key + 1 }}
                        </span>
                     </td>
                     <!-- CATEGORY -->
                     <td>
                        <div class="d-flex align-items-center gap-3">
                           <!-- ICON -->
                           <div class="category-avatar">
                              <i class="bi bi-grid-fill"></i>
                           </div>
                           <!-- INFO -->
                           <div>
                              <h6 class="mb-0 fw-semibold text-dark">
                                 {{ $cat->name }}
                              </h6>
                              <small class="text-muted">
                              Main Category
                              </small>
                           </div>
                        </div>
                     </td>
                     <!-- SUB CATEGORIES -->
                     <td>
                        <div class="d-flex flex-wrap gap-2">
                           @forelse($cat->subcategories as $sub)
                           <span class="subcategory-badge">
                           {{ $sub->name }}
                           </span>
                           @empty
                           <span class="text-muted">
                           No Sub Categories
                           </span>
                           @endforelse
                        </div>
                     </td>
                     <!-- TOTAL -->
                     <td class="text-center">
                        <div class="total-box">
                           <i class="bi bi-collection-fill me-2"></i>
                           {{ $cat->subcategories->count() }}
                        </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 Categories Found</h5>
                           <p class="text-muted mb-0">
                              No category records available right now.
                           </p>
                        </div>
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
@endsection