@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin-category-manager.css') }}?v=5">
@endpush

@section('content')
@php
    $isTreeView = request('view') === 'tree';
    $queryParams = request()->except('page');
@endphp
<div class="cat-mgr-page @if(!$isTreeView && $categories->hasPages()) cat-mgr-page--paginated @endif" data-cat-index-page>
    <div class="cat-mgr-hero d-lg-none">
        <div class="d-flex justify-content-between align-items-center gap-2">
            <div>
                <h2 class="h5 fw-bold mb-1">Categories</h2>
                <p class="small mb-0">{{ $totalCategories }} categories · {{ $totalProductTypes ?? 0 }} product types</p>
            </div>
            <a href="{{ route('admin.categories.create') }}" class="btn btn-light btn-sm fw-bold"><i class="bi bi-plus-lg"></i></a>
        </div>
    </div>

    <div class="row g-4">
        {{-- Sidebar filters --}}
        <div class="col-lg-2 d-none d-lg-block">
            <div class="d-grid mb-3">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-dark shadow-sm fw-bold btn-sm">
                    <i class="bi bi-speedometer2 me-2"></i> Dashboard
                </a>
            </div>

            <h5 class="fw-bold mb-3 text-secondary ps-2 small text-uppercase">Filters</h5>
            <div class="list-group list-group-flush border rounded shadow-sm mb-3">
                @foreach([
                    ['url' => route('admin.categories.index'), 'active' => !request()->hasAny(['status','featured','tier','gender','home','trashed','view']), 'icon' => 'bi-tags', 'label' => 'All', 'count' => $totalCategories],
                    ['url' => route('admin.categories.index', ['view' => 'tree']), 'active' => $isTreeView, 'icon' => 'bi-diagram-2', 'label' => 'Tree View', 'count' => null],
                    ['url' => route('admin.categories.index', ['tier' => 'main']), 'active' => request('tier') == 'main', 'icon' => 'bi-grid-1x2', 'label' => 'Main', 'count' => $mainCategories],
                    ['url' => route('admin.categories.index', ['status' => 'active']), 'active' => request('status') == 'active', 'icon' => 'bi-check-circle text-success', 'label' => 'Active', 'count' => $activeCategories],
                    ['url' => route('admin.categories.index', ['featured' => 'yes']), 'active' => request('featured') == 'yes', 'icon' => 'bi-star text-warning', 'label' => 'Featured', 'count' => $featuredCategories],
                    ['url' => route('admin.categories.index', ['home' => 'yes']), 'active' => request('home') == 'yes', 'icon' => 'bi-house text-primary', 'label' => 'On Home', 'count' => null],
                    ['url' => route('admin.categories.index', ['trashed' => 1]), 'active' => request('trashed'), 'icon' => 'bi-trash text-danger', 'label' => 'Trash', 'count' => null],
                ] as $filter)
                <a href="{{ $filter['url'] }}" class="list-group-item list-group-item-action {{ $filter['active'] ? 'active fw-bold border-start border-4 border-primary' : '' }}">
                    <i class="bi {{ $filter['icon'] }} me-2"></i> {{ $filter['label'] }}
                    @if($filter['count'] !== null)
                        <span class="badge bg-light text-dark float-end">{{ $filter['count'] }}</span>
                    @endif
                </a>
                @endforeach
            </div>

            <div class="mb-3">
                <label class="small fw-bold text-muted text-uppercase ps-1">Gender</label>
                <select class="form-select form-select-sm" onchange="window.location.href=this.value">
                    <option value="{{ route('admin.categories.index', $queryParams) }}">All genders</option>
                    @foreach(['women' => 'Women', 'men' => 'Men', 'unisex' => 'Unisex', 'kids' => 'Kids'] as $g => $label)
                        <option value="{{ route('admin.categories.index', array_merge($queryParams, ['gender' => $g])) }}" {{ request('gender') === $g ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <a href="{{ route('admin.categories.create') }}" class="btn btn-primary w-100 fw-bold shadow-sm mb-2">
                <i class="bi bi-plus-lg me-1"></i> Add Category
            </a>
            <a href="{{ route('admin.categories.export') }}" class="btn btn-outline-secondary w-100 btn-sm">
                <i class="bi bi-download me-1"></i> Export CSV
            </a>
        </div>

        {{-- Main content --}}
        <div class="col-lg-7 col-12">
            <div class="d-none d-lg-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <div>
                    <h2 class="fw-bold mb-0">Category Manager</h2>
                    <p class="text-muted small mb-0">Beauty store hierarchy · Categories stop at Shampoo/Cream level · Products use Product Types</p>
                </div>
                <div class="d-flex gap-2">
                    <div class="btn-group">
                        <a href="{{ route('admin.categories.index', array_merge($queryParams, ['view' => null])) }}"
                           class="btn btn-sm {{ !$isTreeView ? 'btn-primary' : 'btn-outline-primary' }}">
                            <i class="bi bi-list-ul"></i> List
                        </a>
                        <a href="{{ route('admin.categories.index', array_merge($queryParams, ['view' => 'tree'])) }}"
                           class="btn btn-sm {{ $isTreeView ? 'btn-primary' : 'btn-outline-primary' }}">
                            <i class="bi bi-diagram-2"></i> Tree
                        </a>
                    </div>
                    <a href="{{ route('admin.categories.create') }}" class="btn btn-primary fw-bold btn-sm">
                        <i class="bi bi-plus-lg me-1"></i> New
                    </a>
                </div>
            </div>

            @unless($isTreeView)
            <div class="cat-index-toolbar mb-3">
                <div class="cat-index-search-wrap mb-0 flex-grow-1">
                    <i class="bi bi-search"></i>
                    <input type="search" class="form-control cat-index-search" data-cat-index-search
                           placeholder="Live search categories..." value="{{ request('search') }}" autocomplete="off">
                </div>
                <form action="{{ route('admin.categories.import') }}" method="POST" enctype="multipart/form-data" class="d-none" id="catImportForm">
                    @csrf
                    <input type="file" name="file" accept=".csv,.txt" id="catImportInput" onchange="this.form.submit()">
                </form>
                <button type="button" class="btn btn-light border btn-sm" onclick="document.getElementById('catImportInput').click()">
                    <i class="bi bi-upload"></i><span class="d-none d-md-inline ms-1">Import</span>
                </button>
            </div>

            <div class="cat-bulk-bar d-none" data-cat-bulk-bar>
                <span class="small fw-semibold"><span data-cat-bulk-count>0</span> selected</span>
                <div class="d-flex gap-1 flex-wrap">
                    <button type="button" class="btn btn-sm btn-success" data-cat-bulk-action="enable">Enable</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-cat-bulk-action="disable">Disable</button>
                    <button type="button" class="btn btn-sm btn-warning" data-cat-bulk-action="feature">Feature</button>
                    <button type="button" class="btn btn-sm btn-danger" data-cat-bulk-action="delete">Delete</button>
                </div>
            </div>
            <form id="catBulkForm" action="{{ route('admin.categories.bulk') }}" method="POST" class="d-none">
                @csrf
                <input type="hidden" name="action" data-cat-bulk-action-input>
                <div data-cat-bulk-ids></div>
            </form>
            @endunless

            @if($isTreeView && !empty($tree))
                <div class="card shadow-sm border-0 cat-tree-card">
                    <div class="card-body p-3">
                        @include('admin.categories.partials.tree-node', ['nodes' => $tree, 'depth' => 0])
                    </div>
                </div>
            @elseif($isTreeView)
                <div class="text-center py-5 text-muted">No categories in tree.</div>
            @else
                {{-- Desktop table --}}
                <div class="card shadow-sm border-0 overflow-hidden d-none d-lg-block">
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0 align-middle">
                            <thead class="bg-light text-muted small text-uppercase">
                                <tr>
                                    <th class="ps-3 py-3" style="width:36px"><input type="checkbox" class="form-check-input" data-cat-select-all></th>
                                    <th class="py-3">Category</th>
                                    <th>Level</th>
                                    <th>Types</th>
                                    <th>Status</th>
                                    <th class="text-end pe-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody data-cat-index-table-body>
                                @forelse($categories as $cat)
                                <tr class="hover-lift-row" data-cat-row data-cat-id="{{ $cat->id }}">
                                    <td class="ps-3"><input type="checkbox" class="form-check-input" data-cat-select value="{{ $cat->id }}"></td>
                                    <td class="py-3">
                                        <div class="d-flex align-items-center">
                                            @include('partials.category-thumb', ['category' => $cat, 'class' => 'me-3', 'size' => 48])
                                            <div class="overflow-hidden">
                                                <div class="fw-bold text-dark text-truncate">{{ $cat->name }}</div>
                                                <small class="text-muted d-block">/{{ $cat->slug }}</small>
                                                @if($cat->parent)<small class="text-primary">{{ $cat->parent->name }}</small>@endif
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge {{ $cat->levelBadgeClass() }} rounded-pill">{{ $cat->levelLabel() }}</span></td>
                                    <td><span class="badge bg-light text-dark border">{{ $cat->product_types_count }}</span></td>
                                    <td>
                                        @if($cat->status)
                                            <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3">Active</span>
                                        @else
                                            <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3">Hidden</span>
                                        @endif
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="d-flex justify-content-end gap-1">
                                            <a href="{{ route('admin.categories.show', $cat) }}" class="btn btn-sm btn-light border" title="View"><i class="bi bi-eye"></i></a>
                                            <a href="{{ route('admin.categories.edit', $cat) }}" class="btn btn-sm btn-light border text-primary" title="Edit"><i class="bi bi-pencil"></i></a>
                                            <form action="{{ route('admin.categories.duplicate', $cat) }}" method="POST" class="d-inline">@csrf
                                                <button class="btn btn-sm btn-light border" title="Duplicate"><i class="bi bi-copy"></i></button>
                                            </form>
                                            <form action="{{ route('admin.categories.destroy', $cat) }}" method="POST" class="d-inline" data-cat-delete-form>
                                                @csrf @method('DELETE')
                                                <button class="btn btn-sm btn-light border text-danger" title="Delete"><i class="bi bi-trash3"></i></button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Mobile cards --}}
                <div class="d-lg-none" data-cat-index-mobile-list>
                    @foreach($categories as $cat)
                    <div class="cat-mobile-card" data-cat-row data-cat-id="{{ $cat->id }}">
                        <div class="cat-mobile-card__top">
                            @include('partials.category-thumb', ['category' => $cat, 'size' => 56, 'variant' => 'md'])
                            <div class="flex-grow-1 min-w-0">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <strong class="text-truncate">{{ $cat->name }}</strong>
                                    <span class="badge {{ $cat->levelBadgeClass() }}">{{ $cat->levelLabel() }}</span>
                                </div>
                                <div class="small text-muted mb-1">/{{ $cat->slug }} · {{ $cat->product_types_count }} types</div>
                                <div class="d-flex flex-wrap gap-1">
                                    @if($cat->status)<span class="badge bg-success bg-opacity-10 text-success">Active</span>
                                    @else<span class="badge bg-secondary bg-opacity-10 text-secondary">Hidden</span>@endif
                                    <span class="badge bg-light text-dark">{{ $cat->products_count }} products</span>
                                </div>
                            </div>
                        </div>
                        <div class="cat-mobile-card__actions">
                            <a href="{{ route('admin.categories.show', $cat) }}" class="btn btn-light border"><i class="bi bi-eye"></i></a>
                            <a href="{{ route('admin.categories.edit', $cat) }}" class="btn btn-light border text-primary"><i class="bi bi-pencil"></i></a>
                            <form action="{{ route('admin.categories.destroy', $cat) }}" method="POST" data-cat-delete-form>@csrf @method('DELETE')
                                <button class="btn btn-light border text-danger w-100"><i class="bi bi-trash3"></i></button>
                            </form>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="{{ $categories->count() ? 'd-none' : '' }} text-center py-5" data-cat-index-empty>
                    <i class="bi bi-diagram-3 display-4 text-muted opacity-25 d-block mb-3"></i>
                    <h5 class="fw-bold">No categories found</h5>
                    <a href="{{ route('admin.categories.create') }}" class="btn btn-primary mt-2">Create Category</a>
                </div>

                @if($categories->hasPages())
                <div class="cat-index-pagination w-100 mt-3">{{ $categories->links('pagination::bootstrap-5') }}</div>
                @endif
            @endif
        </div>

        {{-- Right sidebar --}}
        <div class="col-lg-3 d-none d-lg-block">
            <div class="cat-mgr-card mb-3">
                <div class="cat-mgr-card__head"><h6 class="fw-bold mb-0">Summary</h6></div>
                <div class="cat-mgr-card__body small">
                    <div class="d-flex justify-content-between mb-2"><span class="text-muted">Categories</span><strong>{{ $totalCategories }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span class="text-muted">Product Types</span><strong>{{ $totalProductTypes ?? 0 }}</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span class="text-muted">Active</span><strong class="text-success">{{ $activeCategories }}</strong></div>
                    <div class="d-flex justify-content-between"><span class="text-muted">Featured</span><strong class="text-warning">{{ $featuredCategories }}</strong></div>
                </div>
            </div>

            <div class="cat-mgr-card mb-3" style="background: linear-gradient(135deg, #0f766e, #14b8a6); color:#fff;">
                <div class="cat-mgr-card__body">
                    <h6 class="fw-bold mb-2"><i class="bi bi-layers me-2"></i>Pro Structure</h6>
                    <p class="small mb-2 opacity-90">Main → Category → Sub → <strong>Product Type</strong> → Product → Variant</p>
                    <p class="small mb-0 opacity-75">Example: Hair Care → Shampoo → Anti Hair Fall → Dove 340ml</p>
                </div>
            </div>

            <div class="cat-mgr-card">
                <div class="cat-mgr-card__head"><h6 class="fw-bold mb-0">API</h6></div>
                <div class="cat-mgr-card__body small text-muted">
                    <code class="d-block mb-1">GET /api/categories/tree</code>
                    <code class="d-block mb-1">GET /api/categories/featured</code>
                    <code class="d-block">GET /api/categories/{id}/breadcrumbs</code>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/admin-category-manager.js') }}?v=3"></script>
@endpush