@extends('layouts.admin')

@section('title', 'Categories')

@php
    $currentSort = $sort ?? 'sort_order';
    $currentOrder = $order ?? 'asc';
    function categorySortableHeader($label, $sortField, $currentSort, $currentOrder) {
        $url = request()->fullUrlWithQuery([
            'sort' => $sortField,
            'order' => ($currentSort == $sortField && $currentOrder == 'asc') ? 'desc' : 'asc',
            'page' => 1
        ]);
        if ($currentSort == $sortField) {
            $icon = $currentOrder == 'asc'
                ? '<i class="bi bi-arrow-up"></i>'
                : '<i class="bi bi-arrow-down"></i>';
        } else {
            $icon = '<i class="bi bi-arrow-down-up" style="opacity: 0.5;"></i>';
        }
        return ['url' => $url, 'label' => $label, 'icon' => $icon];
    }
@endphp
@section('content')
<div class="admin-page-header">
    <h1>Categories</h1>
    @can('categories.create')
    <a href="{{ route('admin.categories.create') }}" class="admin-btn-primary">
        <i class="bi bi-plus"></i> Add Category
    </a>
    @endcan
</div>

<!-- Filters -->
<div class="admin-card mb-3">
    <div class="card-body  ">
        <form method="GET" action="{{ route('admin.categories.index') }}" class="row g-3 align-items-end justify-content-end">
            <div class="col-md-3">
                <label class="admin-form-label">Search</label>
                <input type="text"
                       name="search"
                       class="admin-form-control form-control"
                       placeholder="Search by category name"
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <label class="admin-form-label">Parent</label>
                <select name="parent_id" class="admin-form-control form-select">
                    <option value="">All</option>
                    <option value="root" {{ request('parent_id') === 'root' ? 'selected' : '' }}>Root categories only</option>
                    @foreach($parentCategories ?? [] as $parent)
                        <option value="{{ $parent->id }}" {{ request('parent_id') == $parent->id ? 'selected' : '' }}>
                            {{ $parent->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-2 col-10">
                <button type="submit" class="admin-btn-primary w-100">
                    <i class="bi bi-search"></i> Filter
                </button>
            </div>
            @if(request()->hasAny(['search','parent_id','status','sort','order']))
            <div class="col-md-1 col-2">
                <a href="{{ route('admin.categories.index') }}"  title="clear filter" class="btn btn-outline-secondary" >
                                <i class="bi bi-arrow-clockwise"></i>
                    
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Import Section Toggle -->
@can('categories.create')
<div class="mb-3">
    <button class="admin-btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#importSection" aria-expanded="false" aria-controls="importSection">
        <i class="bi bi-upload"></i> Import Categories from CSV
        <i class="bi bi-chevron-down ms-2"></i>
    </button>
</div>

<!-- Import Section -->
<div class="collapse mb-4" id="importSection">
    <div class="admin-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0" style="color: var(--admin-primary);">
                    <i class="bi bi-upload"></i> Import Categories from CSV
                </h5>
                <a href="{{ route('admin.categories.download-sample') }}" class="admin-btn-primary admin-action-btn-sm" style="background: #10b981;">
                    <i class="bi bi-download"></i> Download Sample CSV
                </a>
            </div>
            <div class="alert alert-info mb-3">
                <i class="bi bi-info-circle"></i> <strong>CSV Format:</strong> The file should have columns: <code>name</code>, <code>parent_category_name</code>, <code>sort_order</code>, <code>is_active</code>. 
                Leave <code>parent_category_name</code> empty for root categories. For <code>is_active</code>, use: 1, true, yes, or active for active categories.
            </div>
            <form action="{{ route('admin.categories.import') }}" method="POST" enctype="multipart/form-data" class="row g-3 align-items-center">
                @csrf
                <div class="col-md-8">
                    <label class="admin-form-label">Select CSV File</label>
                    <input type="file" 
                           name="import_file" 
                           class="admin-form-control form-control @error('import_file') is-invalid @enderror" 
                           accept=".csv,.txt"
                           required>
                    @error('import_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="text-muted">Maximum file size: 5MB. Download sample file to see the correct format.</small>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="admin-btn-primary w-100">
                        <i class="bi bi-upload"></i> Import Categories
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        @php $nameSort = categorySortableHeader('Category Name', 'name', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header" style="font-weight: 700; text-align: left;">
                            <a href="{{ $nameSort['url'] }}" class="sortable-link text-decoration-none text-dark">
                                <span>{{ $nameSort['label'] }}</span>
                                <span class="sort-icon ms-1">{!! $nameSort['icon'] !!}</span>
                            </a>
                        </th>
                        @php $parentSort = categorySortableHeader('Parent Category', 'parent', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header" style="font-weight: 700; text-align: left;">
                            <a href="{{ $parentSort['url'] }}" class="sortable-link text-decoration-none text-dark">
                                <span>{{ $parentSort['label'] }}</span>
                                <span class="sort-icon ms-1">{!! $parentSort['icon'] !!}</span>
                            </a>
                        </th>
                        @php $countSort = categorySortableHeader('Product Count', 'products_count', $currentSort, $currentOrder); @endphp
                        <th class="sortable-header" style="font-weight: 700; text-align: center;">
                            <a href="{{ $countSort['url'] }}" class="sortable-link text-decoration-none text-dark d-inline-block">
                                <span>{{ $countSort['label'] }}</span>
                                <span class="sort-icon ms-1">{!! $countSort['icon'] !!}</span>
                            </a>
                        </th>
                        <th style="font-weight: 700; text-align: center;">Status</th>
                        <th style="font-weight: 700; text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($categories as $category)
                        <tr class="table-row-hover">
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($category->image_path)
                                        <img src="{{ asset('storage/' . $category->image_path) }}" 
                                             alt="{{ $category->name }}" 
                                             class="category-thumbnail"
                                             onerror="this.onerror=null; this.style.display='none';">
                                    @else
                                        <div class="category-thumbnail d-flex align-items-center justify-content-center bg-light" style="background: #f3f4f6 !important;">
                                            <i class="bi bi-image text-muted" style="font-size: 1.2rem;"></i>
                                        </div>
                                    @endif
                                    <span style="font-weight: 500;">{{ $category->name }}</span>
                                </div>
                            </td>
                            <td>
                                @if($category->parent)
                                    <span class="text-muted">{{ $category->parent->name }}</span>
                                @else
                                    <em class="text-muted">Root Category</em>
                                @endif
                            </td>
                            <td style="text-align: center;">
                                <span class="product-count-badge">{{ $category->products_count ?? 0 }}</span>
                            </td>
                            <td style="text-align: center;">
                                <span class="admin-badge {{ $category->is_active ? 'admin-badge-success' : 'admin-badge-danger' }}">
                                    {{ $category->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td style="text-align: center;">
                                <div class="d-flex gap-2 justify-content-center">
                                    @can('categories.update')
                                    <a href="{{ route('admin.categories.edit', $category->id) }}" 
                                       class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                       title="Edit Category">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    @endcan
                                    @can('categories.delete')
                                    <form action="{{ route('admin.categories.destroy', $category->id) }}" 
                                          method="POST" 
                                          class="d-inline" 
                                          onsubmit="return confirm('Are you sure you want to delete this category?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                class="admin-action-btn admin-action-btn-sm" 
                                                style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                title="Delete Category">
                                            <i class="bi bi-trash"></i> Delete
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-folder-x"></i>
                                    <h3>No Categories Found</h3>
                                    @can('categories.create')
                                    <p>Get started by creating your first category.</p>
                                    <a href="{{ route('admin.categories.create') }}" class="admin-btn-primary">
                                        <i class="bi bi-plus"></i> Add Category
                                    </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
        @if($categories->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $categories->firstItem() ?? 0 }}</strong>–<strong>{{ $categories->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $categories->total() }}</strong> categories
                </div>
                <div class="pagination-controls">
                    {{ $categories->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@push('styles')
<style>
/* Sortable column headers */
.admin-table .sortable-header .sortable-link {
    white-space: nowrap;
}
.admin-table .sortable-header .sortable-link:hover {
    color: var(--admin-primary, #17a2b8) !important;
}
.admin-table .sortable-header .sort-icon {
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Category Table Enhancements */
.admin-table tbody tr.table-row-hover {
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-table tbody tr.table-row-hover:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.category-thumbnail[style*="display: none"] {
    display: none !important;
}

.product-count-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: var(--admin-primary);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 45px;
    text-align: center;
}

.admin-table tbody td {
    vertical-align: middle;
    padding: 1rem 1.25rem;
}

/* Pagination Wrapper */
.pagination-wrapper {
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

.pagination-info-text {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-info-text strong {
    color: var(--admin-primary);
    font-weight: 700;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

/* Override global pagination centering for this page */
.pagination-wrapper .pagination-controls .pagination {
    justify-content: flex-end !important;
    margin: 0 !important;
}

/* Ensure pagination only shows once */
.pagination-wrapper .pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .pagination-info-text {
        text-align: center;
        order: 2;
    }
    
    .pagination-controls {
        justify-content: center;
        order: 1;
    }
    
    .admin-table thead th,
    .admin-table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .category-thumbnail {
        width: 32px;
        height: 32px;
    }
    
    .admin-action-btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .admin-action-btn-sm i {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .admin-table {
        font-size: 0.8rem;
    }
    
    .admin-table thead th {
        font-size: 0.75rem;
        padding: 0.5rem 0.25rem;
    }
    
    .admin-action-btn-sm span,
    .admin-action-btn-sm:not(:has(i:only-child)) span {
        display: none;
    }
    
    .admin-action-btn-sm {
        /* width: 36px;
        height: 36px;
        padding: 0; */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
@endpush
@endsection