@extends('layouts.user_type.auth')

@section('content')

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg">
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <div class="row">
              <div class="col-6">
                <h6>
                  <i class="fas fa-tags me-2 text-info"></i>
                  Categories Management
                </h6>
                <p class="text-sm mb-0">
                  <i class="fa fa-check text-info" aria-hidden="true"></i>
                  <span class="font-weight-bold">{{ $categories->total() }} categories found</span>
                </p>
              </div>
              <div class="col-6 text-end">
                <a href="{{ route('categories.create') }}" class="btn bg-gradient-info btn-sm">
                  <i class="fas fa-plus me-2"></i>Add New Category
                </a>
              </div>
            </div>
          </div>

          <!-- Alert Messages -->
          @if(session('success'))
            <div class="alert alert-success border-0 mx-3 mt-3" role="alert">
              <div class="d-flex align-items-center">
                <i class="fas fa-check-circle me-3 text-success"></i>
                <div>
                  <strong>Success!</strong> {{ session('success') }}
                </div>
              </div>
            </div>
          @endif
          @if(session('error'))
            <div class="alert alert-danger border-0 mx-3 mt-3" role="alert">
              <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-3 text-danger"></i>
                <div>
                  <strong>Error!</strong> {{ session('error') }}
                </div>
              </div>
            </div>
          @endif

          <!-- Categories Table -->
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Category</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Description</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Items Count</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Created Date</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($categories as $category)
                  <tr>
                    <td>
                      <div class="d-flex px-2 py-1">
                        <div>
                          <div class="icon icon-shape icon-sm me-3 d-flex align-items-center justify-content-center">
                            <i class="fas fa-tag text-info"></i>
                          </div>
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="mb-0 text-sm">{{ $category->name }}</h6>
                          <p class="text-xs text-secondary mb-0">Category ID: {{ $category->id }}</p>
                        </div>
                      </div>
                    </td>
                    <td>
                      <p class="text-xs font-weight-bold mb-0">
                        {{ $category->description ?: 'No description available' }}
                      </p>
                    </td>
                    <td class="align-middle text-center text-sm">
                      <div class="d-flex align-items-center justify-content-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-boxes text-info"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-info">{{ $category->items_count ?? 0 }}</span>
                      </div>
                    </td>
                    <td class="align-middle text-center">
                      <span class="text-xs font-weight-bold text-secondary">
                        {{ $category->created_at ? $category->created_at->format('d/m/Y H:i') : 'N/A' }}
                      </span>
                    </td>
                    <td class="align-middle">
                      <div class="d-flex gap-1">
                        <a href="{{ route('categories.show', $category) }}" class="btn btn-link text-secondary px-3 mb-0" title="View Details">
                          <i class="fas fa-eye text-info me-2"></i>View
                        </a>
                        <a href="{{ route('categories.edit', $category) }}" class="btn btn-link text-secondary px-3 mb-0" title="Edit Category">
                          <i class="fas fa-pencil-alt text-warning me-2"></i>Edit
                        </a>
                        <form action="{{ route('categories.destroy', $category) }}" method="POST" style="display:inline-block;">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-link text-danger px-3 mb-0" 
                                  onclick="return confirm('Are you sure you want to delete this category? This action cannot be undone.')" 
                                  title="Delete Category">
                            <i class="fas fa-trash me-2"></i>Delete
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td colspan="5" class="text-center py-4">
                      <div class="d-flex flex-column align-items-center">
                        <div class="icon icon-shape icon-lg d-flex align-items-center justify-content-center mb-3">
                          <i class="fas fa-tags text-secondary"></i>
                        </div>
                        <h6 class="text-secondary mb-2">No categories found</h6>
                        <p class="text-xs text-secondary mb-0">Start by creating your first category</p>
                        <a href="{{ route('categories.create') }}" class="btn bg-gradient-info btn-sm mt-3">
                          <i class="fas fa-plus me-2"></i>Create First Category
                        </a>
                      </div>
                    </td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
            
            <!-- Pagination -->
            @if($categories->hasPages())
              <div class="d-flex justify-content-center mt-4">
                {{ $categories->links() }}
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

@endsection