@extends('layouts.admin')

@section('title', 'Manage Categories')

@section('admin-content')
    <!-- Stats Row -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-primary text-white h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-white-50 small text-uppercase fw-bold">Total Categories</h6>
                            <h3 class="mb-0 fw-bold">{{ $totalCategories }}</h3>
                        </div>
                        <div class="bg-white bg-opacity-25 rounded p-2">
                            <i class="bi bi-grid-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-white h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-muted small text-uppercase fw-bold">Top Level</h6>
                            <h3 class="mb-0 fw-bold text-dark">{{ $topLevelCount }}</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded p-2 text-primary">
                            <i class="bi bi-folder-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-white h-100">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-muted small text-uppercase fw-bold">Sub Categories</h6>
                            <h3 class="mb-0 fw-bold text-dark">{{ $subCategoryCount }}</h3>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded p-2 text-info">
                            <i class="bi bi-diagram-3-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 border-bottom-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <h5 class="card-title mb-0 fw-bold"><i class="bi bi-list-ul me-2"></i>Categories</h5>
                
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary-gradient shadow-sm btn-sm" onclick="openCategoryModal('parent')">
                        <i class="bi bi-plus-lg me-1"></i> Add Parent
                    </button>
                    <button type="button" class="btn btn-outline-primary shadow-sm btn-sm" onclick="openCategoryModal('sub')">
                        <i class="bi bi-diagram-3 me-1"></i> Add Sub
                    </button>
                </div>
            </div>

            <!-- Toolbar -->
            <div class="mt-4 p-3 bg-light rounded-3 d-flex flex-column flex-xl-row gap-3 align-items-xl-center">
                <!-- Tabs -->
                <ul class="nav nav-pills flex-nowrap overflow-auto pb-1 pb-xl-0">
                    <li class="nav-item">
                        <a class="nav-link {{ !request('level') ? 'active bg-white text-primary shadow-sm' : 'text-muted' }} fw-bold" href="{{ route('admin.categories.index') }}">
                            All
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request('level') == 'top' ? 'active bg-white text-primary shadow-sm' : 'text-muted' }} fw-bold" href="{{ route('admin.categories.index', array_merge(request()->query(), ['level' => 'top'])) }}">
                            Top Level
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request('level') == 'sub' ? 'active bg-white text-primary shadow-sm' : 'text-muted' }} fw-bold" href="{{ route('admin.categories.index', array_merge(request()->query(), ['level' => 'sub'])) }}">
                            Sub Categories
                        </a>
                    </li>
                </ul>

                <div class="vr d-none d-xl-block mx-2 h-auto text-muted"></div>

                <!-- Search & Sort -->
                <form action="{{ route('admin.categories.index') }}" method="GET" class="d-flex flex-grow-1 gap-2 flex-wrap">
                    @if(request('level')) <input type="hidden" name="level" value="{{ request('level') }}"> @endif
                    
                    <div class="position-relative flex-grow-1" style="min-width: 200px;">
                        <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                        <input type="text" name="q" class="form-control ps-5 rounded-pill border-0 shadow-sm" placeholder="Search categories..." value="{{ request('q') }}">
                    </div>
                    
                    <select name="sort" class="form-select w-auto border-0 shadow-sm rounded-pill" onchange="this.form.submit()">
                        <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Newest First</option>
                        <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>Name (A-Z)</option>
                        <option value="products" {{ request('sort') == 'products' ? 'selected' : '' }}>Most Products</option>
                    </select>

                    <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
                        Go
                    </button>
                    
                    @if(request()->hasAny(['q', 'level', 'sort']))
                        <a href="{{ route('admin.categories.index') }}" class="btn btn-light rounded-circle shadow-sm" title="Clear Filters">
                            <i class="bi bi-x-lg text-danger"></i>
                        </a>
                    @endif
                </form>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light text-uppercase small text-muted">
                        <tr>
                            <th class="ps-4 py-3" style="width: 80px;">Image</th>
                            <th class="py-3">Category Name</th>
                            <th class="py-3">Type</th>
                            <th class="py-3">Stats</th>
                            <th class="py-3">Status</th>
                            <th class="text-end pe-4 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $category)
                            <tr>
                                <td class="ps-4">
                                    <div class="position-relative">
                                        @if($category->image)
                                            <img src="{{ asset('storage/' . $category->image) }}" class="rounded-3 shadow-sm border" style="width: 48px; height: 48px; object-fit: cover;">
                                        @else
                                            <div class="bg-light rounded-3 d-flex align-items-center justify-content-center text-muted border" style="width: 48px; height: 48px;">
                                                <i class="bi bi-image fs-5 opacity-25"></i>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex flex-column">
                                        <span class="fw-bold text-dark">{{ $category->name }}</span>
                                        <span class="small text-muted text-truncate font-monospace" style="font-size: 0.75rem;">/{{ $category->slug }}</span>
                                    </div>
                                </td>
                                <td>
                                    @if($category->parent)
                                        <div class="d-flex align-items-center">
                                            <div class="vr me-2 text-muted" style="height: 1.5em;"></div>
                                            <div class="d-flex flex-column">
                                                <span class="badge bg-light text-dark border fw-normal mb-1 text-start">
                                                    <i class="bi bi-arrow-return-right me-1 text-muted"></i> Sub Category
                                                </span>
                                                <small class="text-muted" style="font-size: 0.7rem;">
                                                    of <strong>{{ $category->parent->name }}</strong>
                                                </small>
                                            </div>
                                        </div>
                                    @else
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill">
                                            <i class="bi bi-folder me-1"></i> Top Level
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-3">
                                        <div class="text-center">
                                            <div class="fw-bold">{{ $category->products_count }}</div>
                                            <div class="small text-muted" style="font-size: 0.7rem;">Products</div>
                                        </div>
                                        @if(!$category->parent)
                                            <div class="vr bg-light"></div>
                                            <div class="text-center">
                                                <div class="fw-bold">{{ $category->children->count() }}</div>
                                                <div class="small text-muted" style="font-size: 0.7rem;">Sub-Cats</div>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($category->is_active)
                                        <span class="badge bg-success-subtle text-success rounded-pill">Active</span>
                                    @else
                                        <span class="badge bg-danger-subtle text-danger rounded-pill">Inactive</span>
                                    @endif
                                    @if($category->is_featured)
                                        <i class="bi bi-star-fill text-warning ms-1" title="Featured"></i>
                                    @endif
                                </td>
                                <td class="text-end pe-4">
                                    <div class="btn-group">
                                        <a href="{{ route('admin.categories.edit', $category->id) }}" class="btn btn-sm btn-light border" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-light border text-danger" 
                                                onclick="if(confirm('Delete {{ addslashes($category->name) }}? Warning: This might affect linked products.')) document.getElementById('del-{{$category->id}}').submit()">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                    <form id="del-{{$category->id}}" action="{{ route('admin.categories.destroy', $category->id) }}" method="POST" class="d-none">
                                        @csrf @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="text-muted mb-2"><i class="bi bi-search display-6 opacity-25"></i></div>
                                    <h5 class="fw-bold">No categories found</h5>
                                    <p class="text-muted small">Try adjusting your search or filters.</p>
                                    <a href="{{ route('admin.categories.index') }}" class="btn btn-outline-primary btn-sm rounded-pill mt-2">Reset Filters</a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        @if($categories->hasPages())
            <div class="card-footer bg-white border-top-0 py-3">
                {{ $categories->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>

    <!-- Create Category Modal -->
    <div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-bottom-0 bg-light">
                    <h5 class="modal-title fw-bold" id="categoryModalLabel">Add Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-uppercase text-muted">Category Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control form-control-lg bg-light border-0" placeholder="e.g. Industrial Machinery" required>
                        </div>

                        <div class="mb-4" id="parentCategoryField">
                            <label class="form-label fw-bold small text-uppercase text-muted">Parent Category <span class="text-danger">*</span></label>
                            <select name="parent_id" class="form-select form-select-lg bg-light border-0">
                                <option value="" selected disabled>Select Parent Category</option>
                                @foreach($parents as $parent)
                                    <option value="{{ $parent->id }}">{{ $parent->name }}</option>
                                @endforeach
                            </select>
                            <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i>This category will be listed under the selected parent.</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-uppercase text-muted">Cover Image</label>
                            <input type="file" name="image" class="form-control bg-light border-0" accept="image/*">
                        </div>

                        <div class="row g-3">
                            <div class="col-6">
                                <div class="p-3 border rounded-3 bg-white h-100 card-hover-effect">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" name="is_featured" id="isFeatured">
                                        <label class="form-check-label fw-bold cursor-pointer" for="isFeatured">Featured</label>
                                    </div>
                                    <div class="small text-muted mt-1" style="font-size: 0.7rem; line-height: 1.2;">Show on home page</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-3 border rounded-3 bg-white h-100 card-hover-effect">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="isActive" checked>
                                        <label class="form-check-label fw-bold cursor-pointer" for="isActive">Active</label>
                                    </div>
                                    <div class="small text-muted mt-1" style="font-size: 0.7rem; line-height: 1.2;">Visible to public</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 pt-0 px-4 pb-4">
                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm fw-bold">Create Category</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function openCategoryModal(type) {
            const modal = new bootstrap.Modal(document.getElementById('categoryModal'));
            const parentField = document.getElementById('parentCategoryField');
            const title = document.getElementById('categoryModalLabel');
            const parentSelect = parentField.querySelector('select');

            if (type === 'parent') {
                title.innerText = 'Add Parent Category';
                title.innerHTML = '<i class="bi bi-folder-plus me-2 text-primary"></i>Add Parent Category';
                parentField.style.display = 'none';
                parentSelect.value = ''; // Ensure null is sent
            } else {
                title.innerText = 'Add Sub Category';
                title.innerHTML = '<i class="bi bi-diagram-3 me-2 text-primary"></i>Add Sub Category';
                parentField.style.display = 'block';
            }
            
            modal.show();
        }
    </script>
    <style>
        .card-hover-effect:hover {
            border-color: var(--bs-primary) !important;
            background-color: var(--bs-primary-bg-subtle) !important;
        }
        .cursor-pointer { cursor: pointer; }
    </style>
    @endpush
@endsection
