@extends('layouts.main')
@section('content')
<style>
   .custom-btn {
   background-color: #007bff;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   }
   .custom-btn:hover {
   background-color: #0056b3;
   }
   .category-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .category-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-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .category-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .category-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* CATEGORY ICON */
   .category-icon{
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: linear-gradient(135deg,#3b82f6,#6366f1);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   box-shadow: 0 4px 15px rgba(59,130,246,0.3);
   }
   /* STATUS BADGE */
   .active-badge{
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
   }
   /* ACTION BUTTONS */
   .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;
   }
   /* 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){
   .category-table thead{
   display: none;
   }
   .category-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .category-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .category-table tbody td:last-child{
   border-bottom: none;
   }
   }.subcategory-table{
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   /* TABLE HEAD */
   .subcategory-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 */
   .subcategory-table tbody tr{
   background: #fff;
   box-shadow: 0 4px 20px rgba(0,0,0,0.05);
   border-radius: 18px;
   transition: 0.3s ease;
   }
   .subcategory-table tbody tr:hover{
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(0,0,0,0.08);
   }
   .subcategory-table tbody td{
   padding: 18px 16px;
   vertical-align: middle;
   border-top: none;
   border-bottom: none;
   }
   /* ICON */
   .category-icon{
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: linear-gradient(135deg,#8b5cf6,#6366f1);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   box-shadow: 0 4px 15px rgba(99,102,241,0.3);
   }
   /* 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;
   }
   /* 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){
   .subcategory-table thead{
   display: none;
   }
   .subcategory-table tbody tr{
   display: block;
   margin-bottom: 20px;
   }
   .subcategory-table tbody td{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .subcategory-table tbody td:last-child{
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
   <div class="row">
      <!-- ================= CATEGORY MANAGEMENT ================= -->
      <div class="col-lg-6">
         <div class="card shadow-sm border-0">
            <div class="card-header text-white" style="background:#4f46e5;">
               <h5 class="mb-0">Category Management</h5>
            </div>
            <div class="card-body">
               @can('category_create')
               <form action="{{ route('superadmin.category.store') }}" method="POST">
                  @csrf
                  <div class="row g-2">
                     <div class="col-md-8">
                        <input type="text"
                           name="name"
                           class="form-control"
                           placeholder="Enter Category Name"
                           required>
                     </div>
                     <div class="col-md-4 d-grid">
                        <button class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i>
                        </button>
                     </div>
                  </div>
               </form>
               @endcan
               <hr>
               <div class="d-flex justify-content-between mb-3">
                  <h6 class="fw-bold mb-0">Category List</h6>
                  <input type="text"
                     id="categorySearch"
                     class="form-control w-50"
                     placeholder="Search Category...">
               </div>
               <div class="table-responsive">
                  <div class="table-responsive">
                     <table class="table align-middle category-table mb-0" id="categoryTable">
                        <thead>
                           <tr>
                              <th width="80">#ID</th>
                              <th>Category Name</th>
                              <th width="140" class="text-center">Status</th>
                              <th width="120" class="text-center">Action</th>
                           </tr>
                        </thead>
                        <tbody>
                           @forelse($categories as $cat)
                           <tr>
                              <!-- ID -->
                              <td>
                                 <span class="fw-bold text-primary">
                                 #{{ $cat->id }}
                                 </span>
                              </td>
                              <!-- CATEGORY -->
                              <td>
                                 <div class="d-flex align-items-center gap-3">
                                    <!-- ICON -->
                                    <div class="category-icon">
                                       <i class="bi bi-grid-fill"></i>
                                    </div>
                                    <!-- NAME -->
                                    <div>
                                       <h6 class="mb-0 fw-semibold text-dark">
                                          {{ $cat->name }}
                                       </h6>
                                       {{-- <small class="text-muted">
                                       Category Item
                                       </small> --}}
                                    </div>
                                 </div>
                              </td>
                              <!-- STATUS -->
                              <td class="text-center">
                                 <span class="badge active-badge">
                                 <i class="bi bi-check-circle-fill me-1"></i>
                                 Active
                                 </span>
                              </td>
                              <!-- ACTION -->
                              <td class="text-center">
                                 <div class="d-flex justify-content-center align-items-center gap-2">
                                    <!-- EDIT -->
                                    @can('category_edit')
                                    <button class="btn-action edit-btn"
                                       data-bs-toggle="modal"
                                       data-bs-target="#editCategory{{ $cat->id }}"
                                       title="Edit">
                                    <i class="bi bi-pencil-square"></i>
                                    </button>
                                    @endcan
                                    <!-- DELETE -->
                                    @can('category_delete')
                                    <form action="{{ route('superadmin.category.delete',$cat->id) }}"
                                       method="POST"
                                       class="m-0">
                                       @csrf
                                       @method('DELETE')
                                       <button type="submit"
                                          class="btn-action delete-btn"
                                          onclick="return confirm('Delete this category?')"
                                          title="Delete">
                                       <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 Categories Found</h5>
                                    <p class="text-muted mb-0">
                                       No category records available.
                                    </p>
                                 </div>
                              </td>
                           </tr>
                           @endforelse
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- ================= SUB CATEGORY MANAGEMENT ================= -->
      <div class="col-lg-6">
         <div class="card shadow-sm border-0">
            <div class="card-header text-white" style="background:#4f46e5;">
               <h5 class="mb-0">Sub Category Management</h5>
            </div>
            <div class="card-body">
               @can('subcategory_create')
               <form action="{{ route('superadmin.subcategory.store') }}" method="POST">
                  @csrf
                  <div class="row g-2">
                     <div class="col-md-5">
                        <select name="category_id" class="form-select" required>
                           <option value="">Select Category</option>
                           @foreach($categories as $cat)
                           <option value="{{ $cat->id }}">
                              {{ $cat->name }}
                           </option>
                           @endforeach
                        </select>
                     </div>
                     <div class="col-md-5">
                        <input type="text"
                           name="name"
                           class="form-control"
                           placeholder="Enter Sub Category Name"
                           required>
                     </div>
                     <div class="col-md-2 d-grid">
                        <button class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i>
                        </button>
                     </div>
                  </div>
               </form>
               @endcan
               <hr>
               <div class="d-flex justify-content-between mb-3">
                  <h6 class="fw-bold mb-0">Sub Category List</h6>
                  <input type="text"
                     id="subSearch"
                     class="form-control w-50"
                     placeholder="Search Sub Category...">
               </div>
               <div class="table-responsive">
                  <div class="table-responsive">
                     <table class="table align-middle subcategory-table mb-0" id="subTable">
                        <thead>
                           <tr>
                              <th width="80">#ID</th>
                              <th>Category</th>
                              <th>Sub Category</th>
                              <th width="140" class="text-center">Status</th>
                              <th width="120" class="text-center">Action</th>
                           </tr>
                        </thead>
                        <tbody>
                           @forelse($subcategories as $sub)
                           <tr>
                              <!-- ID -->
                              <td>
                                 <span class="fw-bold text-primary">
                                 #{{ $sub->id }}
                                 </span>
                              </td>
                              <!-- CATEGORY -->
                              <td>
                                 <div class="d-flex align-items-center gap-3">
                                    <!-- ICON -->
                                    <div class="category-icon">
                                       <i class="bi bi-folder-fill"></i>
                                    </div>
                                    <!-- CATEGORY NAME -->
                                    <div>
                                       <h6 class="mb-0 fw-semibold text-dark">
                                          {{ $sub->category->name ?? '-' }}
                                       </h6>
                                       {{-- <small class="text-muted">
                                       Main Category
                                       </small> --}}
                                    </div>
                                 </div>
                              </td>
                              <!-- SUB CATEGORY -->
                              <td>
                                 <div>
                                    <h6 class="mb-0 fw-semibold text-dark">
                                       {{ $sub->name }}
                                    </h6>
                                    {{-- <small class="text-muted">
                                    Sub Category Item
                                    </small> --}}
                                 </div>
                              </td>
                              <!-- STATUS -->
                              <td class="text-center">
                                 <span class="badge active-badge">
                                 <i class="bi bi-check-circle-fill me-1"></i>
                                 Active
                                 </span>
                              </td>
                              <!-- ACTION -->
                              <td class="text-center">
                                 <div class="d-flex justify-content-center align-items-center gap-2">
                                    <!-- EDIT -->
                                    @can('subcategory_edit')
                                    <button class="btn-action edit-btn"
                                       data-bs-toggle="modal"
                                       data-bs-target="#editSub{{ $sub->id }}"
                                       title="Edit">
                                    <i class="bi bi-pencil-square"></i>
                                    </button>
                                    @endcan
                                    <!-- DELETE -->
                                    @can('subcategory_delete')
                                    <form action="{{ route('superadmin.subcategory.delete',$sub->id) }}"
                                       method="POST"
                                       class="m-0">
                                       @csrf
                                       @method('DELETE')
                                       <button type="submit"
                                          class="btn-action delete-btn"
                                          onclick="return confirm('Delete this sub category?')"
                                          title="Delete">
                                       <i class="bi bi-trash"></i>
                                       </button>
                                    </form>
                                    @endcan
                                 </div>
                              </td>
                           </tr>
                           @empty
                           <tr>
                              <td colspan="5">
                                 <div class="empty-state">
                                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                                       width="120"
                                       class="mb-3">
                                    <h5>No Sub Categories Found</h5>
                                    <p class="text-muted mb-0">
                                       No sub category records available.
                                    </p>
                                 </div>
                              </td>
                           </tr>
                           @endforelse
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- ================= CATEGORY EDIT MODAL ================= -->
@foreach($categories as $cat)
<div class="modal fade" id="editCategory{{ $cat->id }}" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="{{ route('superadmin.category.update',$cat->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-header">
               <h5 class="modal-title">Edit Category</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
               <input type="text"
                  name="name"
                  value="{{ $cat->name }}"
                  class="form-control"
                  required>
            </div>
            <div class="modal-footer">
               <button type="submit" class="custom-btn btn-primary">
               Update
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endforeach
<!-- ================= SUB CATEGORY EDIT MODAL ================= -->
@foreach($subcategories as $sub)
<div class="modal fade" id="editSub{{ $sub->id }}" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="{{ route('superadmin.subcategory.update',$sub->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-header">
               <h5 class="modal-title">Edit Sub Category</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
               <select name="category_id" class="form-select mb-3">
               @foreach($categories as $cat)
               <option value="{{ $cat->id }}"
               @if($sub->category_id == $cat->id) selected @endif>
               {{ $cat->name }}
               </option>
               @endforeach
               </select>
               <input type="text"
                  name="name"
                  value="{{ $sub->name }}"
                  class="form-control"
                  required>
            </div>
            <div class="modal-footer">
               <button type="submit" class="custom-btn btn-primary">
               Update
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endforeach
<!-- ================= SEARCH SCRIPT ================= -->
<script>
   document.addEventListener("DOMContentLoaded", function(){
   
   let categorySearch = document.getElementById("categorySearch");
   
   if(categorySearch){
   
   categorySearch.addEventListener("keyup", function(){
   
   let value = this.value.toLowerCase();
   
   document.querySelectorAll("#categoryTable tbody tr").forEach(function(row){
   
   row.style.display =
   row.innerText.toLowerCase().includes(value) ? "" : "none";
   
   });
   
   });
   
   }
   
   let subSearch = document.getElementById("subSearch");
   
   if(subSearch){
   
   subSearch.addEventListener("keyup", function(){
   
   let value = this.value.toLowerCase();
   
   document.querySelectorAll("#subTable tbody tr").forEach(function(row){
   
   row.style.display =
   row.innerText.toLowerCase().includes(value) ? "" : "none";
   
   });
   
   });
   
   }
   
   });
   
</script>
@endsection